/* ============================================================================
   Kostria — design system compartilhado.
   Fonte ÚNICA de tokens, componentes, dark mode, responsividade e a11y.
   Antes, cada template redefinia as cores no próprio <style> (mudar a marca
   pedia editar 10 arquivos). Agora todos linkam este arquivo.
   ========================================================================== */

/* ---------- tokens: tema claro (padrão) ---------- */
:root {
  /* DIREÇÃO "INSTRUMENTO" (2026-08-17) — o produto mede uma coisa e responde
     uma pergunta, então veste papel técnico, tinta grafite e UMA cor de caneta.
     O que saiu daqui: creme #faf8f5, serifada de display e raio de 16px.

     ⚠️ 2026-08-17, mais tarde: o acento voltou a ser TERRACOTA, e a razão que
     o tinha tirado caiu. Ela era "creme + serifada + terracota é o visual
     padrão que ferramenta de IA desenha para qualquer produto". Verdade, e
     irrelevante aqui: o Kostria é vendido para quem passa o dia dentro do
     Claude Code, e parecer do mesmo mundo é sinal de pertencimento à
     categoria, não de preguiça (decisão do dono). O que valia mesmo naquele
     diagnóstico era a ESTRUTURA — papel frio, mono nos números, canto quase
     vivo, sombra que não flutua —, e ela fica.

     ⚠️ E o tom mudou de #c25432 para #b34a2b por MEDIÇÃO, não por gosto: o
     papel frio é mais escuro que o creme, e o terracota original cai para
     4,20:1 sobre ele (mínimo de texto é 4,5). Um tom abaixo devolve 4,93. */
  --ink:#14181a; --ink-2:#3d474c; --muted:#7b8790;
  --paper:#f4f6f7; --paper-2:#e9edef; --panel:#ffffff;
  --rule:#dbe2e5; --rule-strong:#c2ccd1;
  /* terracota: o único acento, gasto com parcimônia */
  --accent:#b34a2b; --accent-hover:#93381f; --accent-ink:#ffffff; --accent-soft:#fbeee8;
  --green:#0f766e; --green-bg:#e6f4f2;
  --warn:#a16207; --warn-bg:#fbf3e3; --yellow:#a16207; --yellow-bg:#fbf3e3;
  /* vermelho de revisão: reservado para o que sangra dinheiro */
  --danger:#b91c1c; --danger-bg:#fceaea;

  /* Série categórica dos gráficos — VALIDADA, não escolhida a olho.
     Antes eram 8 cores CICLADAS entre 25 projetos (RULER[i % 8]): o 9º
     projeto recebia a cor do 1º, então a legenda mentia sobre qual fatia era
     qual. E o par que sobrava reprovava até para quem enxerga cor: ΔE 7.9
     entre #8a6d20 e #8a8a2d, num piso de 15.
     Ordem fixa começando pelo laranja da marca. Conferida com o validador do
     skill de dataviz: passa banda de luminosidade, croma, separação para
     daltonismo e piso de visão normal (ΔE 19.6 no pior par adjacente).
     ⚠️ A ordem É o contrato: reordenar sem revalidar quebra as garantias. */
  --viz-1:#eb6834; --viz-2:#2a78d6; --viz-3:#1baf7a; --viz-4:#eda100;
  --viz-5:#e87ba4; --viz-6:#008300; --viz-7:#4a3aa7; --viz-8:#e34948;
  /* A cauda longa some numa fatia neutra: cinza não compete com as séries. */
  --viz-outros:#8b857c;

  /* canto quase vivo: instrumento não tem cápsula.

     ⚠️ 2026-08-18: a INTENSIDADE recalibrada, a filosofia não. 2px/3px/4px
     de raio com sombra a 4-5% de opacidade é tão sutil que na prática lê
     como zero — e zero-raio + hairline em toda borda é justo o outro
     clichê de IA que o "instrumento" tentava evitar (o da mesa de jornal).
     O degrau novo ainda não é cápsula (o dobro de antes continua abaixo do
     que qualquer app "amigável" usaria), só deixa de ser invisível. */
  --radius-xs:4px; --radius-sm:6px; --radius:8px; --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(20,24,26,.06);
  --shadow:0 1px 3px rgba(20,24,26,.07),0 1px 2px rgba(20,24,26,.04);
  --shadow-lg:0 2px 4px rgba(20,24,26,.06),0 12px 28px -8px rgba(20,24,26,.14);

  /* A MONO é a face de display, não um detalhe de código: o conteúdo deste
     produto é número, e número tabular é o que ele precisa exibir bem.
     `--serif` continua declarada porque templates antigos ainda a chamam;
     aponta para a mono de propósito, para nenhuma tela voltar à serifada
     sem alguém decidir isso. */
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --transition:150ms cubic-bezier(.4,0,.2,1);
  --skeleton:linear-gradient(90deg,var(--paper-2) 25%,var(--rule) 37%,var(--paper-2) 63%);

  /* Terminal: escuro nos DOIS temas, porque é a cor de um terminal e não a do
     produto. NÃO redefina abaixo — quem usava `background:var(--ink)` com o
     texto cravado ficava claro sobre claro no escuro, e foi esse par que
     custou o dark mode das cinco páginas de marketing em 12/08/2026. */
  --term-bg:#14181a;
  --term-ink:#e8ddd0;
  --term-bar:#1b2023;
  --term-muted:#7c8083;
}

/* ---------- tokens: tema escuro ----------
   Só os tokens que mudam são redefinidos. Ativo por preferência do SO E por
   [data-theme=dark] (o toggle vence).
   O acento tem DEGRAU PRÓPRIO aqui, não é o mesmo do claro: o terracota que
   lê bem sobre papel branco some sobre grafite, então o escuro usa a versão
   clara (#e8a07f, 8,6:1 contra o papel). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

  /* Mesmas oito matizes, degrau próprio para a superfície escura — não é
     inversão automática. Revalidada no modo dark (pior par normal ΔE 19.3). */
  --viz-1:#d95926; --viz-2:#3987e5; --viz-3:#199e70; --viz-4:#c98500;
  --viz-5:#d55181; --viz-6:#008300; --viz-7:#9085e9; --viz-8:#e66767;
  --viz-outros:#7d776e;

    /* Escuro é grafite frio, não marrom quente: o papel técnico continua
       técnico quando a luz apaga. Degrau próprio, não inversão. */
    --ink:#e6ecef; --ink-2:#aab8be; --muted:#79878f;
    --paper:#0f1416; --paper-2:#1a2225; --panel:#161d20;
    --rule:#263034; --rule-strong:#354247;
    --accent:#e8a07f; --accent-hover:#f0b394; --accent-ink:#0f1416; --accent-soft:#2e1d15;
    --green:#5ec4b6; --green-bg:#0f2523;
    --warn:#d9a441; --warn-bg:#251d10; --yellow:#d9a441; --yellow-bg:#251d10;
    --danger:#f0857f; --danger-bg:#2a1516;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 12px 28px -8px rgba(0,0,0,.55);
    --skeleton:linear-gradient(90deg,var(--paper-2) 25%,var(--rule-strong) 37%,var(--paper-2) 63%);
  }
}
:root[data-theme="dark"] {

  /* Mesmas oito matizes, degrau próprio para a superfície escura — não é
     inversão automática. Revalidada no modo dark (pior par normal ΔE 19.3). */
  --viz-1:#d95926; --viz-2:#3987e5; --viz-3:#199e70; --viz-4:#c98500;
  --viz-5:#d55181; --viz-6:#008300; --viz-7:#9085e9; --viz-8:#e66767;
  --viz-outros:#7d776e;

  /* Escuro é grafite frio, não marrom quente: o papel técnico continua
     técnico quando a luz apaga. Degrau próprio, não inversão. */
  --ink:#e6ecef; --ink-2:#aab8be; --muted:#79878f;
  --paper:#0f1416; --paper-2:#1a2225; --panel:#161d20;
  --rule:#263034; --rule-strong:#354247;
  --accent:#e8a07f; --accent-hover:#f0b394; --accent-ink:#0f1416; --accent-soft:#2e1d15;
  --green:#5ec4b6; --green-bg:#0f2523;
  --warn:#d9a441; --warn-bg:#251d10; --yellow:#d9a441; --yellow-bg:#251d10;
  --danger:#f0857f; --danger-bg:#2a1516;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 12px 28px -8px rgba(0,0,0,.55);
  --skeleton:linear-gradient(90deg,var(--paper-2) 25%,var(--rule-strong) 37%,var(--paper-2) 63%);
}

/* ---------- reset mínimo ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--serif); font-weight:600; letter-spacing:-.4px; }
code,pre { font-family:var(--mono); }
a { color:var(--accent); }

/* ---------- acessibilidade ---------- */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* O raio do anel só para quem não define o próprio. Como regra geral, ela
   reescrevia o raio de botão e campo (10px -> 3px) no instante do foco:
   medido no /auth/login, o botão mudava de forma ao receber Tab. */
a:focus-visible, summary:focus-visible { border-radius:3px; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ---------- botões ----------
   Uma ação primária só por tela. A cor de marca (terracota) é a primária;
   preto/branco é a secundária/neutra; ghost é para ações de baixa ênfase.
   Toda variante traz hover, foco visível e disabled. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13.5px; font-weight:550; padding:8px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--rule-strong); background:var(--panel); color:var(--ink-2);
  cursor:pointer; font-family:var(--sans); text-decoration:none; white-space:nowrap;
  transition:background var(--transition),border-color var(--transition),color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.btn:hover { background:var(--paper-2); border-color:var(--ink-2); color:var(--ink); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.55; cursor:default; }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.btn-primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-ink); }
.btn-primary:disabled { opacity:.55; }

.btn-secondary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-secondary:hover { background:var(--ink-2); border-color:var(--ink-2); color:var(--paper); }
.btn-secondary:disabled { opacity:.55; }

.btn-ghost { background:transparent; color:var(--ink-2); border-color:var(--rule-strong); }
.btn-ghost:hover { background:var(--paper-2); color:var(--ink); border-color:var(--ink-2); }
.btn-ghost:disabled { opacity:.55; }

.btn-danger { background:transparent; color:var(--danger); border-color:var(--danger); }
.btn-danger:hover { background:var(--danger-bg); color:var(--danger); }
.btn-danger:disabled { opacity:.55; }

.btn-sm { padding:5px 12px; font-size:12.5px; }
.btn-block { width:100%; }
.btn.copied { background:var(--green-bg); color:var(--green); border-color:transparent; }

/* ---------- cartão / seção ---------- */
.card, .k-section {
  background:var(--panel); border:1px solid var(--rule);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.k-section { padding:26px 28px; margin-bottom:20px; }

/* ---------- tabela ---------- */
.k-table-wrap { overflow-x:auto; border-radius:var(--radius-sm); }
.k-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.k-table th {
  text-align:left; font-weight:600; color:var(--muted); font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; padding:8px 12px;
  border-bottom:1px solid var(--rule);
}
.k-table td { padding:11px 12px; border-bottom:1px solid var(--rule); }
.k-table tr:last-child td { border-bottom:0; }
.k-table .num { text-align:right; font-variant-numeric:tabular-nums; }

/* O atributo `hidden` do HTML é semântica, não sugestão: qualquer `display`
   de classe vence a regra do navegador e o elemento reaparece. Já aconteceu
   duas vezes aqui — com `.btn` (corrigido pontualmente em ae4c120) e com
   `.field`, que fazia a tela de LOGIN pedir "Nome", campo que só existe no
   cadastro. Esta linha fecha a classe inteira do problema, presente e futura. */
[hidden] { display: none !important; }

/* ---------- campo de formulário ---------- */
.field { display:block; margin-bottom:14px; }
.field label, .field > span { display:block; font-size:12.5px; font-weight:550; color:var(--ink-2); margin-bottom:5px; }
.field input, .field select, .k-input {
  width:100%; padding:10px 12px; border:1px solid var(--rule-strong);
  border-radius:8px; font-size:14px; font-family:var(--sans);
  color:var(--ink); background:var(--panel); transition:border-color var(--transition),box-shadow var(--transition);
}
.field input:focus, .field select:focus, .k-input:focus {
  border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft);
}

/* ---------- chip / badge ---------- */
.badge {
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px;
  font-weight:600; background:var(--paper-2); color:var(--ink-2); border:1px solid var(--rule);
}
.badge-ok { background:var(--green-bg); color:var(--green); border-color:transparent; }
.badge-owner { background:var(--accent-soft); color:var(--accent); border-color:transparent; }

/* ---------- comando copiável (guia de instalação) ----------
   O comando NÃO leva o `$` do prompt — quem copia recebe só o comando, sem o
   cifrão que o shell rejeita ("$: comando não encontrado"). */
.kcmd { display:flex; align-items:stretch; gap:0; margin:8px 0;
  border:1px solid var(--rule-strong); border-radius:var(--radius-sm); overflow:hidden; }
.kcmd code { flex:1; font-family:var(--mono); font-size:13px; color:var(--ink);
  background:var(--paper-2); padding:11px 14px; white-space:pre-wrap; overflow-wrap:anywhere;
  user-select:all; line-height:1.5; }
.kcmd button { flex-shrink:0; border:0; border-left:1px solid var(--rule-strong);
  background:var(--panel); color:var(--ink-2); font-size:12.5px; font-weight:600;
  padding:0 16px; cursor:pointer; font-family:var(--sans); transition:background var(--transition); }
.kcmd button:hover { background:var(--paper-2); color:var(--ink); }
.kcmd button.copied { background:var(--green-bg); color:var(--green); }
.guide-step { font-size:13px; color:var(--ink-2); margin:14px 0 2px; font-weight:550; }
.guide-step b { color:var(--accent); font-family:var(--mono); font-size:11px; margin-right:6px; }

/* ---------- estados: vazio / erro / loading ---------- */
.k-empty { color:var(--muted); font-size:13.5px; padding:8px 0; }
.k-error { color:var(--danger); font-size:13.5px; padding:8px 0; }

/* skeleton: substitui o "Carregando…" cru por blocos que pulsam */
.skeleton {
  background:var(--skeleton); background-size:400% 100%;
  animation:sk 1.4s ease infinite; border-radius:var(--radius-xs);
  display:block; height:1em;
}
.skeleton.row { height:44px; margin-bottom:8px; border-radius:var(--radius-sm); }
.skeleton.line { height:14px; margin:6px 0; }
.skeleton.line.short { width:40%; }
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ---------- toggle de tema (botão de canto) ---------- */
.theme-toggle {
  background:var(--panel); border:1px solid var(--rule-strong); color:var(--ink-2);
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--transition),border-color var(--transition);
}
.theme-toggle:hover { background:var(--paper-2); border-color:var(--ink-2); }
/* Nas páginas públicas o toggle mora no rodapé: quem chega quer o produto, e
   quem quer trocar o tema procura embaixo. */
.footer-tema { display:flex; justify-content:center; margin-top:18px; }

/* ---------- app shell: navegação lateral única ----------
   Spec visual: ops/ui-prototypes/shell.html (aprovado 2026-08-12).
   Uma sidebar em TODAS as telas autenticadas — board, settings, e as
   futuras Começar/Conta. Não redefina estes seletores nos templates. */
.app { display:flex; min-height:100vh; align-items:stretch; }
.side {
  width:236px; flex:0 0 236px; position:sticky; top:0; height:100vh;
  border-right:1px solid var(--rule); background:var(--panel);
  display:flex; flex-direction:column; padding:16px 0 14px; z-index:10;
}
.side .brand {
  display:flex; align-items:center; gap:9px; padding:4px 18px 16px;
  margin-bottom:6px; text-decoration:none; color:var(--ink);
}
.side .brand svg { width:22px; height:22px; flex-shrink:0; }
.side .brand b {
  font-family:var(--serif); font-size:19px; font-weight:650;
  letter-spacing:-.3px; color:var(--ink);
}
.side-nav { display:flex; flex-direction:column; gap:1px; padding:0 12px; }
.nav-item {
  display:flex; align-items:center; gap:11px; padding:8px 12px;
  border-radius:9px; font-size:13.5px; font-weight:500; color:var(--ink-2);
  text-decoration:none; transition:background var(--transition),color var(--transition);
}
.nav-item svg {
  width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.85;
}
.nav-item:hover { background:var(--paper-2); color:var(--ink); }
.nav-item.active { background:var(--accent-soft); color:var(--accent); }
.nav-item.active svg { opacity:1; }
.nav-label-compact { display:none; }
.side-sep { height:1px; background:var(--rule); margin:12px 18px; }
/* corta o menu em dois assuntos: o que se olha e o que se administra. Sem
   isto os itens vinham chapados e "Configurações" parecia mais uma tela de
   análise. */
.nav-sep { height:1px; background:var(--rule); margin:9px 12px; }
/* só existe na fita do celular (ver a media query) */
.side-actions .so-mobile { display:none; }
.side-label {
  font-family:var(--mono); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  padding:0 20px; margin-bottom:6px;
}
.side-ws { padding:0 14px; }
.side-ws select {
  width:100%; font-size:13px; padding:8px 32px 8px 10px; border-radius:8px;
  border:1px solid var(--rule-strong); background:var(--panel); color:var(--ink);
  appearance:none; cursor:pointer; font-family:var(--sans);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2378716c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.side-foot { margin-top:auto; padding:12px 14px 0; border-top:1px solid var(--rule); }
.side-user { display:flex; align-items:center; gap:9px; padding:6px 6px; min-width:0; }
.side-user .av {
  width:28px; height:28px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:600; flex-shrink:0;
  overflow:hidden;
}
.side-user .av img { width:100%; height:100%; object-fit:cover; }
.side-user .u-name {
  font-size:12.5px; font-weight:550; color:var(--ink); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-user .u-mail {
  font-size:11px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-user > div:last-child { min-width:0; }
.side-actions { display:flex; align-items:center; gap:6px; padding:4px 6px 0; }
.side-actions a { font-size:11.5px; color:var(--muted); text-decoration:none; }
.side-actions a:hover { color:var(--accent); }
.side-actions .sp { flex:1; }
.side-actions .theme-toggle { width:28px; height:28px; font-size:13px; }

.main { flex:1; min-width:0; max-width:1440px; padding:30px 40px 80px; }
.topbar {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:22px; flex-wrap:wrap;
}
.page-title {
  font-family:var(--serif); font-size:25px; font-weight:600; letter-spacing:-.5px;
}
.page-sub { font-size:12.5px; color:var(--muted); margin-top:2px; }

/* No estreito a barra lateral vira faixa no topo. Empilhar os blocos na
   ordem do desktop custava ~420px dos 844px do celular — metade da tela de
   navegação antes de qualquer conteúdo. Aqui a marca e o tema dividem a
   primeira linha, os itens viram uma fita horizontal rolável e o cartão de
   usuário sai (o mesmo nome e e-mail estão na tela Conta, que está no menu). */
@media (max-width:800px) {
  .app { flex-direction:column; }
  .side {
    position:static; width:100%; flex-basis:auto; height:auto;
    border-right:0; border-bottom:1px solid var(--rule);
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:0 12px; padding:12px 14px;
  }
  .side .brand { padding:0; margin:0; }
  .side-nav {
    grid-column:1 / -1; flex-direction:row; gap:4px; padding:10px 0 0;
    overflow-x:auto; scrollbar-width:none;
  }
  .side-nav::-webkit-scrollbar { display:none; }
  /* com ícone os quatro itens somam 471px e "Configurações" cai fora dos 390
     do celular — a fita rola, mas ninguém rola um menu que parece completo */
  .nav-item { white-space:nowrap; padding:8px 10px; gap:0; }
  .nav-item svg { display:none; }
  .side-sep, .side-label, .side-user { display:none; }
  /* na fita horizontal, Configurações passa para o canto (ver `.so-mobile` no
     shell), então o corte e o próprio item saem daqui */
  .nav-sep, .side-nav .nav-item[href="/settings"] { display:none; }
  .side-actions .so-mobile { display:inline; }
  .side-ws { grid-column:1 / -1; padding:10px 0 0; }
  /* ocupa a coluna que sobra ao lado da marca, em vez de abrir linha própria */
  .side-foot { grid-row:1; grid-column:2; margin:0; padding:0; border-top:0; }
  /* o espaçador empurra "Sair" contra a borda quando a coluna é `auto` */
  .side-actions { padding:0; gap:10px; }
  .side-actions .sp { display:none; }
  .main { padding:24px 16px 80px; }
}

/* ---------- responsividade base ---------- */
@media (max-width:640px) {
  body { font-size:14.5px; }
  .side-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow-x:visible; }
  .nav-item { justify-content:center; min-height:44px; padding:10px 4px; font-size:12px; }
  .nav-label-full { display:none; }
  .nav-label-compact { display:inline; }
  .k-section { padding:20px 18px; }
  .k-table th, .k-table td { padding:9px 10px; }
}


/* ---------- painéis do board e da tela de colaborador ----------
   Estas regras moravam dentro do <style> do board.html. A tela de
   colaborador reusa as mesmas classes (.panel, .hero-card, .row-*) e
   renderizava como texto puro empilhado, porque o CSS não a alcançava.
   Vocabulário compartilhado mora no arquivo compartilhado. */
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:22px;align-items:start}
@media(max-width:1080px){.content-grid{grid-template-columns:1fr}}

.hero-card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px 28px 22px;position:relative;overflow:hidden;margin-bottom:22px}
/* Traço do acento, não faixa arco-íris: o gradiente de quatro cores era da
   paleta anterior e sobreviveu à troca porque o board só o mostra no estado
   VAZIO — a tela que ninguém reabre depois do primeiro sync. */
.hero-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.hero-row{display:flex;align-items:flex-end;gap:36px;flex-wrap:wrap}
.hero-total .num{font-family:var(--serif);font-size:32px;font-weight:700;line-height:1;letter-spacing:-2px;color:var(--ink)}
.hero-total .lab{font-size:12px;color:var(--muted);margin-top:6px}
.hero-stats{display:flex;gap:26px;margin-left:auto}
.hero-stat .val{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--ink)}
.hero-stat .lab{font-size:11px;color:var(--muted);margin-top:2px}
@media(max-width:640px){
  .hero-stats{width:100%;margin-left:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media(max-width:360px){
  .hero-card{padding:20px}
  .hero-stat .val{font-size:15px}
  .kcmd code{font-size:12px;padding:11px 10px}
  .kcmd button{padding:0 12px}
  /* O Sobre continua no rodapé; aqui ele não pode expulsar o CTA da tela. */
  .nav-right .nav-link[href="/about"]{display:none}
}
.ruler-wrap{margin-top:20px}
.ruler-track{display:flex;height:11px;border-radius:6px;background:var(--paper-2);overflow:hidden}
.ruler-seg{height:100%;transition:width .4s ease}
.ruler-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px}
.ruler-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-family:var(--mono)}
.ruler-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
/* O valor ao lado do nome é o rótulo direto que o WARN de contraste do
   modo claro exige como alívio: a identidade nunca depende só da cor. */
.ruler-item b{font-weight:600;color:var(--muted);font-size:11px}
/* Fatias vizinhas precisam de um respiro de superfície entre elas, senão
   duas cores adjacentes viram uma mancha só. */
.ruler-seg+.ruler-seg{border-left:2px solid var(--panel)}

.panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:22px;overflow:hidden}
.panel-head{font-family:var(--mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:15px 20px 0}
.panel-body{padding:8px 20px 16px}
.col-side .panel-body{padding:6px 18px 14px}

.row-item{padding:11px 0;border-bottom:1px solid var(--rule)}
.row-item:last-child{border-bottom:0}
.row-head{display:flex;align-items:center;gap:9px}
.row-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.row-av{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:600;overflow:hidden}
.row-av img{width:100%;height:100%;object-fit:cover}
.row-name{font-size:13.5px;font-weight:550;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-val{margin-left:auto;font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--ink);flex-shrink:0}
.row-bar{height:4px;background:var(--paper-2);border-radius:2px;margin:8px 0 5px;overflow:hidden}
.row-bar i{display:block;height:100%;border-radius:2px;transition:width .6s ease}
.row-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-family:var(--mono)}
.row-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.row-tags .tag{font-family:var(--mono);font-size:10px;background:var(--paper-2);color:var(--ink-2);border-radius:20px;padding:2px 8px}

.chart-body svg{width:100%;height:150px;display:block}
.chart-foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:6px}
.state{padding:24px 20px;text-align:center;color:var(--muted);font-size:13px}
.hidden{display:none!important}


/* ---------- atalhos da home ----------
   A home resume e manda para a página do assunto. Antes tudo vinha empilhado
   numa folha só e ver o custo por modelo exigia rolar até o fim. */
.atalhos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
@media (max-width:800px) { .atalhos { grid-template-columns:1fr; } }
.atalho {
  display:block; text-decoration:none; color:inherit; padding:16px 18px;
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:border-color var(--transition),transform var(--transition);
}
.atalho:hover { border-color:var(--accent); transform:translateY(-1px); }
.atalho .a-top {
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
}
.atalho .a-top span { color:var(--accent); letter-spacing:0; text-transform:none; font-size:11px; }
.atalho .a-val { font-family:var(--serif); font-size:21px; font-weight:600; margin-top:6px; }
.atalho .a-nota { font-size:12px; color:var(--ink-2); margin-top:2px; }

.ver-mais {
  display:inline-block; margin-top:10px; font-size:12.5px; font-weight:550;
  color:var(--accent); text-decoration:none;
}
.ver-mais:hover { text-decoration:underline; }


/* Linha clicável, usada no board E nas telas de detalhe — por isso mora
   aqui. Ficou no <style> do board e as outras telas mostravam o nome como
   link sublinhado no meio de uma lista de números. Precisa parecer clicável
   sem virar link azul. */
.row-link{display:block;text-decoration:none;color:inherit;border-radius:8px;margin:0 -8px;padding:0 8px;transition:background var(--transition)}
.row-link:hover{background:var(--paper-2)}
.row-link:hover .row-name{color:var(--accent)}

/* Veredito de "quanto dá para recuperar": o número que faz a pessoa agir no
   mesmo dia. Fica acima da lista porque, misturado a ela, virava mais uma
   linha de tabela. Vive aqui, e não no <style> de uma tela, porque a home e o
   Time mostram o mesmo painel — em duas cópias, uma renderiza crua. */
.panel-alerta{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.veredito{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:6px 0 14px}
.veredito-cifra{font-family:var(--serif,var(--sans));font-size:34px;font-weight:600;color:var(--accent);line-height:1;white-space:nowrap}
.veredito-cifra span{font-size:14px;font-weight:500;color:var(--muted)}
.veredito-texto{flex:1 1 260px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.veredito-texto strong{color:var(--ink)}
.veredito-item{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:7px 0;border-top:1px solid var(--rule)}
.val-alerta{color:var(--accent)}
.tag-alerta{color:var(--accent);font-weight:600}
@media (max-width:640px){
  .veredito{gap:10px}
  .veredito-cifra{font-size:28px}
}

/* Navegação por seção das Configurações.
   Vive no CSS global e não no <style> da página porque a régua de foco e de
   transição é a mesma dos botões — repetir aqui seria a sétima variante numa
   tela que acabou de sair de cinco. */
.sec-nav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 24px;
  padding-bottom:2px;border-bottom:1px solid var(--rule)}
.sec-tab{font:inherit;font-size:13.5px;font-weight:500;font-family:var(--sans);
  color:var(--muted);background:transparent;border:0;cursor:pointer;
  padding:9px 14px;border-radius:8px 8px 0 0;
  border-bottom:2px solid transparent;margin-bottom:-3px;
  transition:color var(--transition),border-color var(--transition),
             background var(--transition)}
.sec-tab:hover{color:var(--ink);background:var(--paper-2)}
.sec-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* A aba ativa carrega COR e uma barra embaixo: só mudar o tom de cinza não
   sobrevive a quem enxerga pouco contraste, e a barra é o que responde
   "onde eu estou" de relance. */
.sec-tab.on{color:var(--accent);border-bottom-color:var(--accent);
  background:transparent}
@media(max-width:640px){
  .sec-nav{gap:2px}
  .sec-tab{padding:8px 10px;font-size:12.5px}
}