/* ToolsBar — o shell.
   Os tokens e a fonte vêm de toolsbar-ui.css, que carrega antes desta folha e
   é a mesma usada dentro das 33 ferramentas. Aqui só o que é do shell. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--tb-bg-0);
  color: var(--tb-text);
  font-family: var(--tb-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tb-gold); text-decoration: none; }
a:hover { color: var(--tb-gold-hi); }
::selection { background: var(--tb-gold); color: #17130a; }

h1, h2 {
  font-family: var(--tb-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.05;
  margin: 0;
}
h3 { font-family: var(--tb-sans); font-weight: 700; margin: 0; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

input, select, textarea {
  font-family: var(--tb-sans); font-size: 14px;
  background: var(--tb-bg-0);
  border: 1px solid var(--tb-line-soft);
  color: var(--tb-text);
  border-radius: var(--tb-r-sm);
  padding: 10px 12px;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--tb-gold-dp);
  box-shadow: 0 0 0 3px var(--tb-gold-tint);
}
::placeholder { color: var(--tb-dim); opacity: 1; }

/* rótulo de console — o segundo traço da identidade, junto com o Anton */
label {
  display: block;
  font-family: var(--tb-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tb-dim);
  margin-bottom: 7px;
}

/* ------------------------------------------------------------ botões */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--tb-r-sm); border: 1px solid transparent;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  font-family: var(--tb-display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--tb-red); color: #fff; padding: 12px 22px;
  box-shadow: 0 6px 18px rgba(228,50,43,.2);
}
.btn-primary:hover { background: #f04039; }
.btn-ouro {
  font-family: var(--tb-display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--tb-gold); color: #17130a; padding: 12px 22px;
}
.btn-ouro:hover { background: var(--tb-gold-hi); }
.btn-ghost { background: transparent; color: var(--tb-text); border-color: var(--tb-line); }
.btn-ghost:hover { background: var(--tb-bg-3); border-color: var(--tb-gold-dp); }
.btn-perigo { background: transparent; color: var(--tb-bad); border-color: rgba(228,50,43,.35); }
.btn-perigo:hover { background: rgba(228,50,43,.12); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--tb-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  background: var(--tb-gold-tint); color: var(--tb-gold);
  border: 1px solid rgba(245,197,24,.22);
}
.tag-ok     { background: rgba(92,192,110,.12); color: var(--tb-ok);   border-color: rgba(92,192,110,.25); }
.tag-warn   { background: rgba(232,163,58,.12); color: var(--tb-warn); border-color: rgba(232,163,58,.25); }
.tag-danger { background: rgba(228,50,43,.12);  color: var(--tb-bad);  border-color: rgba(228,50,43,.25); }
.tag-neutro { background: var(--tb-bg-4); color: var(--tb-muted); border-color: var(--tb-line-soft); }

/* ------------------------------------------------------------ layout */

/* ⚠ `100vh` no celular é o viewport GRANDE — o de barra do navegador
   recolhida. Com `overflow:hidden` isso não vira rolagem: os últimos 50 a 90px
   ficam PERMANENTEMENTE debaixo da barra, e o que mora ali é a última linha do
   grid da ferramenta, o botão Gerar. `100dvh` acompanha a barra. A linha de
   cima fica de reserva para navegador que não conhece `dvh`. */
.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ⚠ 306px, e não 280: a bancada nova tem quatro níveis de recuo (pasta →
   projeto → etapa → ferramenta), e a escada de 18px por degrau come 100px antes
   do primeiro caractere do nome. Em 280 o nome da ferramenta mais funda virava
   reticências em quase todos os casos. */
.sidebar {
  width: 306px; flex: 0 0 306px;
  background: var(--tb-bg-1);
  border-right: 1px solid var(--tb-line);
  display: flex; flex-direction: column; min-height: 0;
}

.marca {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 18px 20px 16px; border-bottom: 1px solid var(--tb-line);
  background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; cursor: pointer;
}
.marca:hover .marca-nome { color: var(--tb-gold); }
.marca-logo {
  width: 33px; height: 33px; flex: 0 0 33px; border-radius: 9px;
  background: linear-gradient(145deg, var(--tb-gold), var(--tb-gold-dp));
  display: grid; place-items: center; font-size: 17px;
  box-shadow: 0 2px 12px rgba(245,197,24,.24);
}
.marca-nome {
  display: block;
  font-family: var(--tb-display); font-size: 21px; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1; color: var(--tb-text); transition: color .15s;
}
.marca-sub {
  display: block;
  font-family: var(--tb-mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tb-dim); margin-top: 4px;
}

.busca-wrap { padding: 12px 14px; border-bottom: 1px solid var(--tb-line); }
.busca-campo { position: relative; }
.busca { padding: 9px 12px 9px 31px; font-size: 13px; background: var(--tb-bg-2); }
.busca-icone {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--tb-dim); font-size: 13px; pointer-events: none;
}

/* A MESMA busca, do lado de dentro do conteúdo. No celular a lateral não
   existe (ver o @media lá embaixo) e com ela ia embora o único campo de
   busca do produto. As duas caixas escrevem no mesmo filtro. */
.busca-topo { display: none; margin-bottom: 22px; }
.busca-topo .busca { padding: 12px 14px 12px 34px; font-size: 15px; }
.busca-topo .busca-icone { left: 13px; font-size: 15px; }

.lista { flex: 1; overflow-y: auto; padding: 8px 9px 16px; min-height: 0; }
.lista::-webkit-scrollbar { width: 9px; }
.lista::-webkit-scrollbar-thumb { background: var(--tb-bg-4); border-radius: 8px; border: 2px solid var(--tb-bg-1); }

.grupo-titulo {
  font-family: var(--tb-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--tb-dim); padding: 15px 10px 6px;
}

.item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--tb-r-sm);
  border: 1px solid transparent; border-left: 2px solid transparent;
  background: transparent; color: var(--tb-muted);
  transition: background .13s, color .13s, border-color .13s;
}
.item:hover { background: var(--tb-bg-3); color: var(--tb-text); }
.item.ativo {
  background: var(--tb-gold-tint); color: var(--tb-text);
  border-left-color: var(--tb-gold);
}
.item-icone { font-size: 15px; width: 20px; text-align: center; flex: 0 0 20px; }
.item-nome { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rodape-side { border-top: 1px solid var(--tb-line); padding: 9px; display: grid; gap: 1px; }
.usuario-chip {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--tb-r-sm); background: var(--tb-bg-2);
  border: 1px solid var(--tb-line-soft); margin-bottom: 5px;
}
.avatar {
  width: 29px; height: 29px; flex: 0 0 29px; border-radius: 8px;
  background: var(--tb-bg-4); color: var(--tb-gold);
  display: grid; place-items: center;
  font-family: var(--tb-display); font-size: 14px;
  border: 1px solid var(--tb-line);
}
.usuario-info { min-width: 0; }
.usuario-nome { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-validade {
  font-family: var(--tb-mono); font-size: 9.5px; letter-spacing: .06em;
  color: var(--tb-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* na última semana a data deixa de ser informação e vira aviso */
.usuario-validade.urgente { color: var(--tb-warn); }

.acao-side {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--tb-r-sm); border: none;
  background: transparent; color: var(--tb-muted); font-size: 12.5px;
}
.acao-side:hover { background: var(--tb-bg-3); color: var(--tb-text); }
.acao-side .ico { width: 17px; text-align: center; font-size: 12px; }
.acao-side .aviso {
  margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tb-red); box-shadow: 0 0 8px var(--tb-red);
}

/* ------------------------------------------------------------ conteúdo */

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.rolagem { flex: 1; overflow-y: auto; min-height: 0; }
.rolagem::-webkit-scrollbar { width: 11px; }
.rolagem::-webkit-scrollbar-thumb { background: var(--tb-bg-4); border-radius: 8px; border: 3px solid var(--tb-bg-0); }

.centro { max-width: 1120px; margin: 0 auto; padding: 46px 40px 76px; }

.hero { margin-bottom: 30px; }
.hero .kicker {
  font-family: var(--tb-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tb-gold); margin-bottom: 14px;
  display: flex; align-items: center; gap: 9px;
}
.hero .kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tb-red); box-shadow: 0 0 9px var(--tb-red);
  animation: rec 1.9s ease-in-out infinite;
}
@keyframes rec { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.hero h1 { font-size: 54px; margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: var(--tb-gold); }
.hero p { color: var(--tb-muted); font-size: 15.5px; max-width: 580px; margin: 0; }

.aviso-chave {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  background: var(--tb-bg-2);
  border: 1px solid rgba(228,50,43,.3); border-left: 3px solid var(--tb-red);
  border-radius: var(--tb-r); padding: 16px 19px; margin: 28px 0 6px;
}
.aviso-chave p { margin: 0; font-size: 14px; color: var(--tb-muted); flex: 1; min-width: 250px; }
.aviso-chave strong { color: var(--tb-text); }

/* O prazo acabando. Mesma forma do aviso de chave — o que muda é o grau:
   âmbar durante a semana final, vermelho nas últimas 48 horas, quando parar no
   meio de um trabalho deixa de ser hipótese. */
.aviso-validade {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  background: var(--tb-bg-2);
  border: 1px solid rgba(232,163,58,.32); border-left: 3px solid var(--tb-warn);
  border-radius: var(--tb-r); padding: 16px 19px; margin: 28px 0 6px;
}
.aviso-validade p { margin: 0; font-size: 14px; color: var(--tb-muted); flex: 1; min-width: 250px; }
.aviso-validade strong { color: var(--tb-text); }
.aviso-validade.ultimo { border-color: rgba(228,50,43,.34); border-left-color: var(--tb-red); }
.aviso-validade.ultimo strong { color: var(--tb-red); }
/* o lugar do botão quando não há botão possível (venda fechada, sem suporte) */
.aviso-nota { font-size: 12.5px; color: var(--tb-dim); }

.secao-titulo {
  display: flex; align-items: center; gap: 13px;
  margin: 42px 0 16px; padding-bottom: 9px; border-bottom: 1px solid var(--tb-line);
}
.secao-titulo h2 {
  font-family: var(--tb-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tb-gold);
}
.secao-titulo span { font-family: var(--tb-mono); font-size: 10px; color: var(--tb-dim); letter-spacing: .1em; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 13px; }

/* O cartão inteiro é um botão (clicou, abriu). A estrela não pode ser um
   botão DENTRO dele — botão dentro de botão não é HTML válido e o clique fica
   ambíguo. Por isso os dois são irmãos, e o invólucro só os empilha. */
.card-wrap { position: relative; display: flex; }
.card-wrap .card { flex: 1; }

.fav {
  position: absolute; top: 9px; right: 9px;
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; line-height: 1; font-size: 14px;
  background: transparent; border: 1px solid transparent; color: var(--tb-dim);
  transition: color .13s, border-color .13s, background .13s;
}
.fav:hover { color: var(--tb-gold); background: var(--tb-bg-1); border-color: var(--tb-line); }
.fav.marcada { color: var(--tb-gold); }

.card {
  text-align: left; width: 100%;
  background: var(--tb-bg-2); border: 1px solid var(--tb-line-soft);
  border-radius: var(--tb-r); padding: 17px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .15s, background .15s, transform .12s;
}
.card:hover { border-color: var(--tb-gold-dp); background: var(--tb-bg-3); transform: translateY(-2px); }
.card-topo { display: flex; align-items: center; gap: 11px; padding-right: 30px; }
.card-icone {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px;
  background: var(--tb-bg-4); border: 1px solid var(--tb-line);
  display: grid; place-items: center; font-size: 18px;
}
.card-nome {
  font-family: var(--tb-display); font-size: 16px; letter-spacing: .025em;
  text-transform: uppercase; line-height: 1.1; color: var(--tb-text);
}
.card-tag { font-size: 13px; color: var(--tb-muted); line-height: 1.5; margin: 0; }

.vazio { text-align: center; padding: 70px 20px; color: var(--tb-dim); }

/* Quem acabou de criar a conta ainda não comprou nada, e o catálogo dele volta
   vazio. Isso não é busca sem resultado — é o passo do meio do funil, e a tela
   precisa convidar, não avisar de um erro que não houve. */
.convite {
  text-align: center; max-width: 520px; margin: 40px auto;
  border: 1px solid var(--tb-line); border-radius: var(--tb-r-lg);
  background: var(--tb-bg-1); padding: 34px 28px;
}
.convite h2 { font-size: 27px; margin-bottom: 12px; }
.convite p { color: var(--tb-muted); font-size: 14.5px; margin: 0 0 20px; }
.convite .btn { margin: 0 5px; }
.convite-suporte { font-size: 12.5px; color: var(--tb-dim); margin-top: 18px; }

/* O acesso que acabou no meio da sessão.

   Cobre TUDO — folhas abertas e o rodapé do celular inclusive — porque o
   servidor já derrubou a sessão quando esta cortina sobe: nenhum botão daqui
   de baixo vai funcionar, e deixá-los à mão só produziria erro atrás de erro.
   Por isso também não é `.modal`: modal fecha no Escape e no clique de fora. */
.cortina-expirado {
  position: fixed; inset: 0; z-index: 300; display: none;
  place-items: center; padding: 24px;
  background: rgba(9, 8, 12, .93);
}
.cortina-expirado.aberta { display: grid; }

.expirado-caixa {
  max-width: 470px; text-align: center;
  background: var(--tb-bg-1); border: 1px solid var(--tb-line);
  border-radius: var(--tb-r-lg); padding: 32px 28px; box-shadow: var(--tb-shadow);
}
.expirado-selo {
  font-family: var(--tb-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tb-red); margin-bottom: 12px;
}
.expirado-caixa h2 { font-size: 27px; margin-bottom: 12px; }
.expirado-caixa p { margin: 0 0 12px; font-size: 14.5px; color: var(--tb-muted); }
.expirado-caixa .expirado-calma { font-size: 13.5px; color: var(--tb-dim); }
.expirado-caixa .convite-suporte { margin: 18px 0 0; }
.expirado-acoes { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
/* a frase que entra no lugar do botão quando não há saída certa (venda fechada,
   ou corte que só o administrador desfaz) — mesma família da nota do aviso */
.expirado-caixa .expirado-nota { margin: 14px 0 0; }

/* ------------------------------------------------------------ a ferramenta */

/* sem barra superior: a navegação é a sidebar e o nome já aparece dentro
   da ferramenta. O iframe ocupa tudo. */
.palco { flex: 1; display: none; min-height: 0; position: relative; }
.palco.ativo { display: block; }
/* ⚠ OS QUADROS SÃO EMPILHADOS, e só um fica à vista.
   `display:none` num iframe é o que NÃO se pode usar aqui: alguns navegadores
   suspendem o que está escondido assim, e o ponto da central é justamente o
   trabalho continuar. Empilhados e com `visibility`, o de trás segue rodando.
   O `.quadro` sem `.ativo` (nenhum aberto ainda) fica visível — é o estado do
   primeiro carregamento, antes de qualquer classe. */
.quadro {
  border: none; display: block; background: var(--tb-bg-1);
  position: absolute; inset: 0; width: 100%; height: 100%;
  visibility: hidden; z-index: 1;
}
.quadro.ativo { visibility: visible; z-index: 2; }
#palco:not(.ativo) .quadro { visibility: hidden; }

/* Enquanto a ferramenta carrega — e se ela não carregar — a tela não pode
   ficar em branco sem explicação. O iframe demora e o `load` de um 403 dispara
   igual ao de sucesso: quem separa os dois é o app.js. */
.palco-estado {
  position: absolute; inset: 0; z-index: 3; display: none;
  place-items: center; text-align: center; padding: 30px;
  background: var(--tb-bg-1);
}
.palco.carregando .palco-estado, .palco.falhou .palco-estado { display: grid; }
.palco-estado p { color: var(--tb-muted); font-size: 14px; margin: 14px 0 0; max-width: 380px; }
.palco-estado .btn { margin-top: 18px; }
.palco .so-falha { display: none; }
.palco.falhou .so-falha { display: block; }
.palco.falhou .so-carga { display: none; }

.girando {
  width: 34px; height: 34px; margin: 0 auto; border-radius: 50%;
  border: 2px solid var(--tb-line); border-top-color: var(--tb-gold);
  animation: girar .8s linear infinite;
}
.palco.falhou .girando { display: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ modal */

.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.aberto { display: flex; }
.modal-fundo { position: absolute; inset: 0; background: rgba(4,4,6,.76); backdrop-filter: blur(3px); }
.modal-caixa {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--tb-bg-1); border: 1px solid var(--tb-line);
  border-radius: var(--tb-r-lg); box-shadow: var(--tb-shadow); padding: 26px 28px 24px;
}
.modal-caixa.larga { max-width: 760px; }
.modal-caixa.xl { max-width: 920px; }
.modal-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.modal-topo h2 { font-size: 26px; }
.modal-sub { color: var(--tb-muted); font-size: 13.5px; margin: 0 0 22px; }
.fechar { background: none; border: none; color: var(--tb-dim); font-size: 25px; line-height: 1; padding: 0 4px; }
.fechar:hover { color: var(--tb-text); }
.modal-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--tb-line); flex-wrap: wrap; }

.campo { margin-bottom: 16px; }
.campo-dica { font-size: 12px; color: var(--tb-dim); margin-top: 6px; line-height: 1.45; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.chave-servico { border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r); padding: 15px 16px; margin-bottom: 11px; background: var(--tb-bg-2); }
.chave-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.chave-nome { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.chave-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.chave-linha input { font-family: var(--tb-mono); font-size: 12px; min-width: 0; flex: 1; }

/* "criar é grátis, usar exige saldo" — o aviso que evita a primeira geração
   recusada. Fica destacado porque é a informação que falta ao primeiro dia. */
.chave-saldo {
  border-left: 2px solid var(--tb-gold-dp); background: var(--tb-gold-tint);
  border-radius: var(--tb-r-sm); padding: 11px 14px; margin: -12px 0 22px;
}
.chave-saldo strong { color: var(--tb-gold-hi); }

/* o veredito do "Testar": três estados, e o cinza é "estou perguntando" */
.chave-veredito { font-size: 12.5px; line-height: 1.5; margin: 9px 0 0; }
.chave-veredito.indo  { color: var(--tb-dim); }
.chave-veredito.ok    { color: var(--tb-ok); }
.chave-veredito.aviso { color: var(--tb-warn); }
.chave-veredito.erro  { color: #f0a99f; }

.recado { padding: 11px 14px; border-radius: var(--tb-r-sm); font-size: 13.5px; margin-bottom: 16px; display: none; }
.recado.mostra { display: block; }
.recado.erro { background: rgba(228,50,43,.12); color: #f0a99f; border: 1px solid rgba(228,50,43,.3); }
.recado.ok { background: rgba(92,192,110,.12); color: #a9dcac; border: 1px solid rgba(92,192,110,.3); }
/* meio do caminho: a senha estava certa, falta o código do segundo fator.
   Vermelho de erro faria a pessoa apagar a senha correta e tentar de novo. */
.recado.aviso { background: rgba(212,175,55,.12); color: var(--tb-gold); border: 1px solid rgba(212,175,55,.35); }

/* ------------------------------------------------------------ admin */

.volta {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-dim); background: none; border: none; padding: 6px 0; margin-bottom: 22px;
}
.volta:hover { color: var(--tb-gold); }

.tabela-wrap { overflow-x: auto; border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r); background: var(--tb-bg-2); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-family: var(--tb-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--tb-dim);
  padding: 13px 16px; border-bottom: 1px solid var(--tb-line); white-space: nowrap;
}
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--tb-line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--tb-bg-3); }
.cel-nome { font-weight: 600; }
.cel-email { font-family: var(--tb-mono); font-size: 11.5px; color: var(--tb-dim); }
.cel-acoes { text-align: right; white-space: nowrap; }

.periodo-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.periodo-btn {
  font-family: var(--tb-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  padding: 10px 8px; border-radius: var(--tb-r-sm); border: 1px solid var(--tb-line-soft);
  background: var(--tb-bg-2); color: var(--tb-muted); text-align: center;
}
.periodo-btn:hover { border-color: var(--tb-gold-dp); color: var(--tb-text); }
.periodo-btn.ativo { background: var(--tb-gold-tint); border-color: var(--tb-gold); color: var(--tb-gold); }

.linha-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }

.eventos { display: grid; gap: 1px; background: var(--tb-line-soft); border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r); overflow: hidden; }
.evento { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--tb-bg-2); font-size: 13px; }
.evento-quando { font-family: var(--tb-mono); font-size: 11px; color: var(--tb-dim); flex: 0 0 122px; }
.evento-quem { color: var(--tb-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ consumo */

.grade-consumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px; margin-bottom: 18px;
}
.cartao-consumo {
  background: var(--tb-bg-2); border: 1px solid var(--tb-line-soft);
  border-radius: var(--tb-r); padding: 15px 16px; display: grid; gap: 3px;
}
.cartao-consumo.destaque { border-color: var(--tb-gold); background: var(--tb-gold-tint); }
.cc-rotulo {
  font-family: var(--tb-mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tb-dim);
}
.cc-valor {
  font-family: var(--tb-display); font-size: 27px; line-height: 1.05;
  letter-spacing: .01em; color: var(--tb-text);
}
.cartao-consumo.destaque .cc-valor { color: var(--tb-gold); }
.cc-nota { font-size: 11.5px; color: var(--tb-dim); }

.bloco-consumo {
  background: var(--tb-bg-2); border: 1px solid var(--tb-line-soft);
  border-radius: var(--tb-r); padding: 16px 18px; margin-bottom: 12px;
}
.bloco-consumo h3 {
  font-family: var(--tb-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--tb-gold);
  margin-bottom: 13px;
}
.linha-consumo { margin-bottom: 11px; }
.linha-consumo:last-child { margin-bottom: 0; }
.lc-topo { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.lc-nome { font-size: 13px; color: var(--tb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-val { font-family: var(--tb-mono); font-size: 11px; color: var(--tb-muted); white-space: nowrap; }
.lc-barra { height: 5px; background: var(--tb-bg-0); border-radius: 3px; overflow: hidden; }
.lc-barra i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--tb-gold-dp), var(--tb-gold));
}

#tabela-precos input { padding: 5px 8px; font-size: 12.5px; font-family: var(--tb-mono); }

/* ------------------------------------------------------------ login */

/* `dvh` pelo mesmo motivo do resto do shell: em iOS Safari e Chrome Android o
   `vh` é o viewport GRANDE, e o que sobra fica sob a barra do navegador. Aqui o
   estrago é pequeno porque é `min-height` e a página rola — mas a folha é a
   mesma, e deixar um `vh` cru convida o próximo. */
.tela-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.caixa-login { width: 100%; max-width: 392px; }
.login-marca { text-align: center; margin-bottom: 32px; }
.login-logo {
  width: 58px; height: 58px; border-radius: 15px; margin: 0 auto 18px;
  background: linear-gradient(145deg, var(--tb-gold), var(--tb-gold-dp));
  display: grid; place-items: center; font-size: 28px;
  box-shadow: 0 8px 28px rgba(245,197,24,.26);
}
.login-marca h1 { font-size: 42px; margin-bottom: 8px; }
.login-marca p {
  font-family: var(--tb-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tb-dim); margin: 0;
}
.login-form { background: var(--tb-bg-1); border: 1px solid var(--tb-line); border-radius: var(--tb-r-lg); padding: 26px; box-shadow: var(--tb-shadow); }
.login-rodape { text-align: center; margin-top: 22px; font-size: 12.5px; color: var(--tb-dim); }

/* ------------------------------------------------------- rodapé do celular

   Os quatro destinos decididos no mockup (decisão 5): Ferramentas · Projetos ·
   Criações · Conta. Ele existe porque a lateral NÃO cabe em 390px — e a
   tentativa anterior, uma gaveta que deslizava, nunca abriu: nada no projeto
   inteiro adicionava a classe que a trazia de volta. Loja, senha e sair
   ficaram inalcançáveis no celular por isso. Aqui não há estado escondido:
   os quatro botões estão sempre na tela. */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  grid-template-columns: repeat(4, 1fr);
  /* a barra TEM a altura que o resto do shell reserva para ela (`--tb-aba`).
     Sem isto ela media 49px contra 56px reservados, e sobrava uma faixa morta
     de sete pixels entre o fim do conteúdo e o começo do rodapé. */
  min-height: 56px;
  background: var(--tb-bg-1);
  border-top: 1px solid var(--tb-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.aba {
  position: relative;
  display: grid; justify-items: center; gap: 3px;
  padding: 8px 2px 9px; border: none; background: none;
  color: var(--tb-dim);
  font-family: var(--tb-mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
}
.aba .ico { font-size: 17px; line-height: 1; }
.aba[aria-current="page"] { color: var(--tb-gold); }
.aba .aviso {
  position: absolute; top: 6px; left: calc(50% + 8px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tb-red); box-shadow: 0 0 8px var(--tb-red);
}

.conta-acoes { display: grid; gap: 2px; }
.conta-acoes .acao-side { font-size: 14px; padding: 12px 10px; }

/* ⚠ 760px, e não 860: é o ponto de quebra do kit e é ESTRUTURAL (armadilha 4
   do CLAUDE.md). Com dois valores diferentes existia uma faixa — 760 a 860 —
   em que a lateral já tinha sumido enquanto a ferramenta ainda se desenhava
   em duas colunas: o pior dos dois layouts ao mesmo tempo. */
@media (max-width: 760px) {
  body { --tb-aba: calc(56px + env(safe-area-inset-bottom)); }

  /* a lateral não vira gaveta: vira o rodapé + a tela inicial */
  .sidebar { display: none; }

  .shell { height: calc(100vh - 56px); height: calc(100dvh - var(--tb-aba)); }
  .tabbar { display: grid; }

  /* Ferramenta nativa tem o voltar dela e as duas etapas: a tela é toda dela.
     Clone não tem voltar nenhum — some o rodapé e a pessoa fica sem saída. */
  .shell.com-nativa { height: 100vh; height: 100dvh; }
  .shell.com-nativa ~ .tabbar { display: none; }

  .busca-topo { display: block; }
  .centro { padding: 24px 17px 40px; }
  .hero { margin-bottom: 22px; }
  .hero h1 { font-size: 33px; }
  .hero p { font-size: 14.5px; }
  .secao-titulo { margin: 30px 0 13px; }
  .grade { grid-template-columns: 1fr; }
  .campos-2 { grid-template-columns: 1fr; }

  /* modal vira folha que sobe de baixo — o polegar alcança o topo dela.
     A folha PARA em cima do rodapé em vez de cobri-lo: com Projetos aberto,
     tocar em Criações trocava de destino… nada, porque o rodapé estava
     debaixo da folha. Numa navegação de quatro destinos, ter de fechar para
     trocar de destino é um passo a mais em todo movimento. */
  /* ⚠ QUEM ENCOLHE É O `.modal`, E FORAM DUAS TENTATIVAS ATÉ ACERTAR O ALVO.
     A primeira pôs `padding-bottom` aqui — mas `padding` não encolhe caixa
     `position:fixed; inset:0`: o elemento continua indo até o pé da tela.
     A segunda encurtou o `.modal-fundo`, e o fundo realmente parou em cima do
     rodapé — só que quem cobria as abas era o `.modal` em si, transparente e
     recebendo toque do mesmo jeito.
     Medido com `elementFromPoint` no centro das quatro abas, com a folha de
     Conta aberta a 375px: devolvia `DIV.modal aberto [z200 pos:fixed
     bottom:0px rect:812]` nas quatro. Tocar em "Criações" com "Projetos"
     aberto fechava a folha em vez de trocar de destino.
     `bottom` vence o `inset` e encolhe a caixa de verdade; o `align-items:
     flex-end` então encosta a folha no topo do rodapé, que é onde ela deve
     parar. O robô mede isto a cada rodada. */
  .modal { bottom: var(--tb-aba); align-items: flex-end; padding: 0; }
  .modal-caixa, .modal-caixa.larga, .modal-caixa.xl {
    max-width: none; max-height: 90vh; max-height: 90dvh;
    border-radius: var(--tb-r-lg) var(--tb-r-lg) 0 0;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .modal-topo h2 { font-size: 22px; }
  .modal-acoes .btn { flex: 1; }

  /* em 375px os dois caminhos lado a lado ficam com duas palavras por linha:
     um embaixo do outro, cada um do tamanho do polegar */
  .expirado-caixa { padding: 26px 20px; }
  .expirado-caixa h2 { font-size: 23px; }
  .expirado-acoes { flex-direction: column; }
  .aviso-validade { padding: 14px 16px; }
  .aviso-validade .btn { width: 100%; }

  /* ⚠ em 375px os três caminhos ao lado do título espremiam a identificação da
     peça em ~130px: "PRECO / Peça 3 — / preco" em três linhas, com o tipo
     encavalando o botão. Aqui os botões descem para a linha de baixo e ficam
     do tamanho do polegar. */
  .peca-topo { flex-direction: column; align-items: stretch; gap: 9px; }
  .peca-acoes .btn { flex: 1; padding: 8px 10px; }
  .peca-destinos { grid-template-columns: 1fr; }
}

/* ---- minhas criações ---- */

.criacao {
  border: 1px solid var(--tb-line-soft);
  border-radius: var(--tb-r);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--tb-bg-2);
}

.criacao-topo { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.criacao-topo strong { font-size: 14.5px; }
.criacao-acoes { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.criacao-arquivos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.criacao-arquivos .btn { font-family: var(--tb-mono); font-size: 11.5px; }

/* ---- produtos e preços (painel) ---- */

.produto {
  border: 1px solid var(--tb-line-soft);
  border-radius: var(--tb-r);
  padding: 15px 17px;
  margin-bottom: 11px;
  background: var(--tb-bg-1);
}

.produto-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.produto-topo strong { font-size: 14.5px; }

.produto-tipo {
  font-family: var(--tb-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tb-gold);
  border: 1px solid var(--tb-line);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
}

.produto-precos { margin: 12px 0 10px; }

.preco-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--tb-line-soft);
  font-size: 13.5px;
}

.preco-linha strong { color: var(--tb-gold-hi); }
.preco-linha .btn { margin-left: auto; }

.preco-selo {
  font-family: var(--tb-mono);
  font-size: 11px;
  color: var(--tb-muted);
  min-width: 150px;
}

.preco-novo { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding-top: 10px; border-top: 1px dashed var(--tb-line-soft); }
.preco-novo select, .preco-novo input {
  font: inherit; font-size: 13px; color: var(--tb-text);
  background: var(--tb-bg-0); border: 1px solid var(--tb-line-soft);
  border-radius: var(--tb-r-sm); padding: 7px 9px;
}
.preco-novo input[name="valor"] { width: 120px; }
.preco-novo input[name="parcelas"] { width: 64px; }
.preco-novo select:disabled { opacity: .4; }

/* ---- projetos ---- */

.projeto-atual {
  display: block; font-size: 11px; color: var(--tb-dim);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.projeto-atual.tem { color: var(--tb-gold); }

.projeto {
  border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r);
  padding: 14px 16px; margin-bottom: 11px; background: var(--tb-bg-2);
}
.projeto.ativo { border-color: var(--tb-line-hard); background: var(--tb-gold-tint); }
.projeto-topo { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.projeto-topo strong { font-size: 14.5px; }
.projeto-acoes { display: flex; gap: 7px; flex: none; }

.projeto-selo {
  font-family: var(--tb-mono); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
  background: var(--tb-gold); color: #12100c; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; margin-left: 7px;
}

/* ---- as peças guardadas no projeto ----

   Antes eram pastilhas de título e nada mais, com teto de 6: não dava para
   abrir, copiar, apagar nem USAR. Agora cada peça é uma linha com o que ela é,
   de onde veio, e os três caminhos — e a gaveta abre embaixo dela. */

.projeto-pecas { margin-top: 12px; display: grid; gap: 7px; }

.peca {
  border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r-sm);
  background: var(--tb-bg-1); padding: 10px 12px;
}
.peca-topo { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.peca-id { min-width: 0; flex: 1; }
.peca-id strong { font-size: 13.5px; }
.peca-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.peca-acoes .btn { padding: 4px 10px; font-size: 12px; }

.peca-tipo {
  font-family: var(--tb-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-gold); border: 1px solid var(--tb-line); border-radius: 999px;
  padding: 2px 7px; margin-right: 7px; white-space: nowrap;
}

.peca-mais { margin-top: 2px; justify-self: start; }

.peca-gaveta { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--tb-line-soft); }
.peca-resumo { font-size: 13px; color: var(--tb-muted); margin: 0 0 9px; }

/* o conteúdo da peça é saída de modelo: entra por textContent e quebra linha
   como veio, dentro de uma caixa que rola em vez de esticar a folha */
.peca-texto {
  font-family: var(--tb-mono); font-size: 11.5px; line-height: 1.55;
  color: var(--tb-muted); background: var(--tb-bg-0);
  border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r-sm);
  padding: 10px 12px; margin: 0; max-height: 240px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}

.peca-imagens { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.peca-imagens img {
  width: 76px; height: 76px; object-fit: cover;
  border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r-sm);
}

.peca-gaveta-acoes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }

.peca-grupo {
  font-family: var(--tb-mono); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--tb-dim); margin: 0 0 8px;
}
.peca-grupo + .peca-destinos { margin-bottom: 4px; }
/* o recuo à esquerda do `.busca` é o espaço da lupa; aqui não há lupa */
.peca-busca { margin: 10px 0 9px; padding-left: 12px; }

.peca-destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.peca-destino {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--tb-bg-2); color: var(--tb-muted);
  border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r-sm);
  padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.peca-destino:hover { border-color: var(--tb-gold-dp); color: var(--tb-text); background: var(--tb-bg-3); }
.peca-destino-icone { font-size: 15px; flex: 0 0 18px; text-align: center; }
.peca-destino-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.campo-usos {
  font-family: var(--tb-mono); font-size: 9.5px; letter-spacing: .08em;
  color: var(--tb-dim); text-transform: none; margin-left: 6px;
}

#pj-campos textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.5;
  color: var(--tb-text); background: var(--tb-bg-0);
  border: 1px solid var(--tb-line-soft); border-radius: var(--tb-r-sm); padding: 10px 12px; resize: vertical;
}

/* ------------------------------------------- busca e filtro das criações
   Trinta criações chamadas "Carrossel IA · 17/08" são trinta linhas iguais.
   A busca é o que torna a gaveta utilizável; o filtro por ferramenta é o
   atalho de quem sabe o que procura. */
.criacoes-filtro { display: flex; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }
.criacoes-filtro input[type="search"] { flex: 1 1 200px; }
.criacoes-filtro select { flex: 0 1 190px; }


/* ═══════════════════════════════════════ imprimir, do lado do SHELL

   ⚠ A REDE DE SEGURANÇA DE 24 FERRAMENTAS. O "Imprimir / PDF" delas chama
   `window.print()` de DENTRO do iframe, e o navegador quase sempre imprime só o
   iframe — que é o que se quer. Quase sempre: em alguns casos (Safari em
   certas versões, extensões que interceptam o atalho, e o Ctrl+P disparado com
   o foco fora do quadro) ele imprime a PÁGINA DE CIMA. Aí sai a barra lateral,
   o rodapé do celular e um retângulo vazio no lugar do resultado.

   Aqui não se tenta adivinhar qual caso é: esconde-se tudo o que é do shell e
   deixa-se o quadro ocupar o papel. Quando o navegador imprime só o iframe,
   nada disto é lido — não custa nada. Quando imprime a página de cima, o
   resultado sai sozinho, que é o que a pessoa pediu. */
@media print {
  .sidebar,
  .tabbar,
  .modal,
  .rolagem,
  .palco-estado { display: none !important; }

  html, body, .shell { height: auto; overflow: visible; background: #fff; }
  .conteudo { display: block; }

  .palco {
    display: block !important;
    position: static;
    height: auto;
    padding: 0;
    background: #fff;
  }

  /* o iframe precisa de altura EXPLÍCITA no papel: `height:100%` dentro de um
     corpo sem altura definida colapsa para zero, e o resultado sairia como uma
     folha em branco — o defeito mais caro possível numa função de imprimir */
  .quadro {
    display: block;
    width: 100%;
    min-height: 100vh;
    border: none;
  }
}

/* ─────────────────────────── segundo fator (2FA) ─────────────────────────
   A chave e os oito códigos são para SEREM COPIADOS À MÃO de uma tela para um
   papel ou para um celular. Por isso mono, espaçado e grande: `l` contra `1` e
   `O` contra `0` num corpo estreito é o que faz alguém digitar errado e
   concluir que o segundo fator está quebrado. */
.fator-estado {
  padding: 10px 12px; border-radius: 8px; margin-bottom: 14px;
  background: rgba(255,255,255,.04); border: 1px solid var(--tb-line);
  font-size: 13px; color: var(--tb-muted);
}
.fator-estado.ligado { border-color: rgba(92,192,110,.35); color: #a9dcac; }
.fator-alerta { margin: 6px 0 0; color: #f0a99f; font-weight: 600; }

.fator-titulo {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-gold); margin: 20px 0 6px;
}

.fator-chave {
  display: block; margin: 8px 0; padding: 12px 14px;
  background: #000; border: 1px solid var(--tb-line); border-radius: 8px;
  font-family: var(--tb-mono, ui-monospace, monospace); font-size: 15px;
  letter-spacing: .12em; word-break: break-all; color: var(--tb-gold);
  /* selecionável de verdade: metade das pessoas vai copiar arrastando o dedo */
  user-select: all;
}

.fator-reservas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0;
}
.fator-reservas code {
  padding: 9px 10px; text-align: center;
  background: #000; border: 1px solid var(--tb-line); border-radius: 6px;
  font-family: var(--tb-mono, ui-monospace, monospace); font-size: 14px;
  letter-spacing: .08em; color: var(--tb-text); user-select: all;
}

.fator-check {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; color: var(--tb-muted); margin: 12px 0 4px; cursor: pointer;
}
.fator-check input { margin-top: 2px; flex: none; }

/* ⚠ O modal do segundo fator é o mais alto do shell, e no celular ele vira
   folha de baixo para cima (`.modal { align-items: flex-end }`). Sem rolagem
   própria, o botão "Conferir e ligar" cai abaixo da dobra e a pessoa acha que a
   tela travou no passo 2. */
#modal-fator .modal-caixa { max-height: 88vh; overflow-y: auto; }

@media (max-width: 460px) {
  .fator-reservas { grid-template-columns: 1fr; }
}


/* ───────────────────────── a central de trabalhos ───────────────────────── */
.central-lista { display: flex; flex-direction: column; gap: 8px; }

.central-item {
  display: flex; gap: 12px; align-items: center; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--tb-line);
  border-radius: 8px; color: var(--tb-text);
}
.central-item:hover { border-color: var(--tb-gold); }

/* o que está rodando tem a borda viva: numa lista de oito, "qual ainda está
   trabalhando" precisa ser respondido de relance, não lendo linha por linha */
.central-item.rodando { border-color: rgba(212,175,55,.5); }
.central-item.rodando .central-ico { animation: tb-pulsa 1.6s ease-in-out infinite; }
@keyframes tb-pulsa { 50% { opacity: .35; } }

.central-ico { font-size: 17px; flex: none; }
.central-meio { flex: 1; min-width: 0; }
.central-nome { font-weight: 600; font-size: 14px; }
.central-quando { font-size: 12px; color: var(--tb-muted); margin-top: 2px; }
.central-vazia { color: var(--tb-muted); font-size: 13px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .central-item.rodando .central-ico { animation: none; }
}

/* ─────────────────────── o cofre da chave (ADR-041) ─────────────────────── */
.cofre-caixa {
  margin: 14px 0 4px; padding: 14px 16px;
  background: rgba(255,255,255,.03); border: 1px solid var(--tb-line);
  border-radius: 8px;
}
.cofre-liga { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.cofre-liga input { margin-top: 3px; flex: none; }
.cofre-caixa .campo-dica { margin: 8px 0 0; }
.cofre-senha { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tb-line-soft); }

/* ⚠ O convite de sincronização tem DOIS botões, e o "agora não" precisa ser tão
   clicável quanto o "sim" — um convite com saída escondida é pressão, não
   convite. */
.convite-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }