/* ============================================================================
   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:#5f6a72;
  --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:#868a8d;
}

/* ---------- 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:#87949c;
    --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:#87949c;
  --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; }
/* O cinza padrão do navegador no placeholder dá 3,7:1 sobre o painel escuro. */
::placeholder { color:var(--muted); opacity:1; }
.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-badge { margin-left:auto; min-width:18px; padding:1px 6px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font:600 11px var(--mono); text-align:center; }
.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}
}

/* ---------- leitura em frases ----------
   Custos, Projetos, Modelos e Time abrem por 2 ou 3 frases calculadas dos
   dados. Número sozinho não diz se é muito, pouco ou normal; a frase diz o
   que mudou e quem puxou, e leva para onde conferir. */
.leitura-nota{font-size:12px;color:var(--muted);line-height:1.5;margin:4px 0 0}
.leitura-editorial{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin-bottom:12px}
.leitura-editorial p{margin:0;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.leitura-editorial b{color:var(--ink);font-weight:600}
.leitura-principal{grid-column:1/-1;font-size:18px;max-width:65ch}
.leitura-apoio{font-size:13px;padding-top:12px;border-top:1px solid var(--rule)}
.leitura-editorial .ir{color:var(--accent);font:500 12px var(--sans);display:inline-block;margin-left:4px;text-underline-offset:3px}
.historico-modelos{margin:18px 0 24px}
.historico-modelos>summary,.pessoas-mais>summary{cursor:pointer;font:500 14px var(--sans);padding:12px 0;color:var(--ink-2)}
.historico-modelos .duas-colunas{margin-top:16px}
.pessoas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.pessoa-uso{padding:16px 0;border-top:1px solid var(--rule);min-width:0}
.pessoa-cab{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pessoa-cab h3{font:600 15px/1.4 var(--sans);margin:0;overflow-wrap:anywhere}
.pessoa-posicao{font:600 13px var(--mono);color:var(--muted);margin-right:2px}
.pessoa-cab a{color:var(--ink);text-decoration:none}.pessoa-cab a:hover{color:var(--accent);text-decoration:underline}
.pessoa-tokens,.pessoa-valor span{font:12px var(--mono);color:var(--muted)}
.pessoa-valor{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.pessoa-valor strong{font:500 20px var(--mono);color:var(--ink)}
.pessoa-valor span{font-family:var(--sans)}
.pessoa-share{display:flex;align-items:center;gap:8px;margin:14px 0 10px;font:12px var(--sans);color:var(--muted)}
.pessoa-share .fatia{flex:1}.pessoa-share .fatia .trilho{display:block}
.pessoa-contexto{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:12px var(--sans);color:var(--muted);min-height:24px}
.pessoa-projeto{font:13px/1.5 var(--sans);color:var(--ink-2);margin:10px 0 0;overflow-wrap:anywhere}
@media(max-width:700px){.pessoas-grid,.leitura-editorial{grid-template-columns:minmax(0,1fr)}.leitura-principal{font-size:16px}}

/* "o que é esse valor?" — a régua explicada uma vez, no primeiro número */
.sobre-uso{margin-top:8px;font-size:12.5px;color:var(--ink-2);max-width:62ch}
.sobre-uso summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--accent);font-weight:550;list-style:none}
.sobre-uso summary::-webkit-details-marker{display:none}
.sobre-uso summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid currentColor;font:600 10px var(--mono)}
.sobre-uso p{margin:8px 0 0;line-height:1.55}
.sobre-uso p b{color:var(--ink)}

/* ---------- tabela compacta dos painéis ----------
   Substitui a pilha de barras ("lista atrás de lista"): uma linha por item,
   participação como barra fina dentro da célula. A coluna do nome absorve a
   sobra e corta com reticências, então a tabela cabe em 390px sem rolar de
   lado; colunas `.opcional` saem no celular. */
.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.tabela th{font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:10px 10px 8px;border-bottom:1px solid var(--rule);white-space:nowrap}
.tabela td{padding:10px;border-bottom:1px solid var(--rule);vertical-align:middle;color:var(--ink-2)}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela th:first-child,.tabela td:first-child{padding-left:0}
.tabela th:last-child,.tabela td:last-child{padding-right:0}
.tabela .num{text-align:right;font-family:var(--mono);white-space:nowrap;color:var(--ink)}
.tabela th.num{color:var(--muted)}
.tabela .sub{display:block;font:450 11px var(--mono);color:var(--muted);margin-top:2px;white-space:normal}
.tabela .sub.tag-alerta{color:var(--accent);font-weight:600}
.tabela .nome{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:550}
.tabela .nome a{color:inherit;text-decoration:none}
.tabela .nome a:hover{color:var(--accent);text-decoration:underline}
.tabela .modelo-nome{white-space:normal;overflow-wrap:anywhere}
.tabela .nome .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabela .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:1px}
.tabela tr.grupo td{padding-top:16px;border-bottom:1px solid var(--rule-strong);font-weight:600;color:var(--ink)}
.tabela tr.grupo td .sub{font-weight:450}
.tabela tr.cauda td{color:var(--muted)}
.tabela tr.cauda .nome{color:var(--muted);font-weight:450}
.fatia{display:flex;align-items:center;gap:8px;min-width:132px}
.fatia .trilho{flex:1;height:6px;background:var(--paper-2);border-radius:3px;overflow:hidden;min-width:56px}
.fatia .trilho i{display:block;height:100%;border-radius:3px}
.fatia span{font:12px var(--mono);color:var(--ink-2);min-width:40px;text-align:right}
.delta{font:12px var(--mono);color:var(--ink-2);white-space:nowrap}
.delta.sem{color:var(--muted)}
.spark{display:block;width:88px;height:24px}
.spark path{fill:none;stroke:var(--ink-2);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tabela .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;white-space:normal}
.tabela .tag{font:450 10.5px var(--mono);background:var(--paper-2);color:var(--ink-2);border-radius:20px;padding:2px 8px;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabela a.tag:hover{color:var(--accent)}
.tabela .tag.ok{background:var(--green-bg);color:var(--green)}
.tabela .tag.ambiguo{background:var(--warn-bg);color:var(--warn)}
.painel-nota{font-size:12px;color:var(--muted);line-height:1.5;margin:10px 0 0}
.mais{display:inline-block;margin-top:12px;padding:4px 0;border:0;background:transparent;color:var(--accent);font:550 12.5px var(--sans);cursor:pointer;text-decoration:none}
.mais:hover{text-decoration:underline}
.mais:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.duas-colunas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media(max-width:900px){.duas-colunas{grid-template-columns:1fr;gap:0}}
@media(max-width:640px){.tabela .opcional{display:none}.fatia{min-width:88px}.fatia .trilho{min-width:32px}}
/* no celular a barra sai e fica o número: o nome precisa do espaço */
@media(max-width:480px){.fatia{min-width:0}.fatia .trilho{display:none}.fatia span{min-width:0}.tabela .modelo-nome .dot{display:none}}
@media print{.mais{display:none!important}.tabela-extra[hidden]{display:table-row-group!important}}

/* ---------- gráfico diário ----------
   SVG esticado (preserveAspectRatio=none) só para linha e área; texto e
   marcadores ficam em HTML por cima, posicionados em %, porque texto dentro
   de SVG esticado sai achatado. */
.grafico{padding-top:40px}
.grafico-area{position:relative;height:190px;margin-left:58px}
.grafico-area svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.grafico-area svg .grade{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.grafico-area svg .linha{fill:none;stroke:var(--accent);stroke-width:2.25;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.grafico-area svg .linha-parcial{stroke-dasharray:3 5;opacity:.75}
.grafico-area svg .media{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:5 5;opacity:.7;vector-effect:non-scaling-stroke}
.grafico-y{position:absolute;left:-58px;width:50px;text-align:right;font:10.5px var(--mono);color:var(--muted);transform:translateY(-50%);line-height:1}
.grafico-legenda{display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 0 58px;font:11px var(--mono);color:var(--muted)}
.grafico-legenda span{display:inline-flex;align-items:center;gap:6px}
.grafico-legenda i{display:inline-block;width:18px;height:0;border-top:2px solid var(--accent)}
.grafico-legenda i.leg-media{border-top:1px dashed var(--ink-2)}
.grafico-legenda i.leg-parcial{border-top:2px dotted var(--accent)}
.grafico-x{position:relative;height:22px;margin:6px 0 0 58px;font:10.5px var(--mono);color:var(--muted)}
.grafico-x span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.grafico-x span:first-child{transform:none}
.grafico-x span:last-child{transform:translateX(-100%)}
.grafico-ponto{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--panel);border:2px solid var(--accent);transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.grafico-ponto-parcial{width:8px;height:8px;border-style:dashed;border-width:1.5px}
.grafico-pico{position:absolute;display:flex;flex-direction:column;gap:1px;max-width:min(280px,70%);width:max-content;padding:5px 9px;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:var(--panel);box-shadow:var(--shadow-sm);font-size:11.5px;line-height:1.35;color:var(--ink-2);pointer-events:none;z-index:1;transform:translate(-50%,calc(-100% - 12px))}
.grafico-pico b{font:600 11.5px var(--mono);color:var(--ink)}
.grafico-pico-esq{transform:translate(-12px,calc(-100% - 12px))}
.grafico-pico-dir{transform:translate(calc(-100% + 12px),calc(-100% - 12px))}
.grafico-guia{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--rule-strong);pointer-events:none}
.grafico-tip{position:absolute;top:8px;display:flex;flex-direction:column;gap:2px;min-width:150px;max-width:240px;padding:8px 10px;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:var(--panel);box-shadow:var(--shadow);font-size:12px;line-height:1.4;color:var(--ink-2);pointer-events:none;z-index:2}
.grafico-tip.tip-dir{transform:translateX(12px)}
.grafico-tip.tip-esq{transform:translateX(calc(-100% - 12px))}
.grafico-tip b{font:600 13px var(--mono);color:var(--ink)}
.grafico-tip .t-dia{font:11px var(--mono);color:var(--muted)}
.grafico-alvos{position:absolute;inset:0;display:flex}
.grafico-alvos button{flex:1 1 0;min-width:0;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:crosshair}
.grafico-alvos button:focus-visible{outline:none;box-shadow:inset 0 -3px 0 var(--accent)}
.grafico-resumo{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
@media(max-width:640px){
  .grafico{padding-top:52px}
  .grafico-area{height:160px;margin-left:46px}
  .grafico-y{left:-46px;width:40px;font-size:10px}
  .grafico-x{margin-left:46px}
  .grafico-x .x-opc{display:none}
  .grafico-legenda{margin-left:0}
}

/* ---------- estado de máquina (Configurações) ---------- */
.estado{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--mono);white-space:nowrap;color:var(--ink-2)}
.estado::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.estado.ok{color:var(--green)}.estado.ok::before{background:var(--green)}
.estado.parada{color:var(--warn)}.estado.parada::before{background:var(--warn)}
.estado.revogada{color:var(--muted)}

/* ============================================================================
   INTERFACE v2 (2026-10-12) — a identidade do Kostria (papel frio, grafite,
   terracota, números em IBM Plex Mono) com a gramática do Human Interface
   Guidelines da Apple, a mesma base do painel da Núcleo:
   - duas camadas: navegação em vidro flutuando sobre conteúdo opaco;
   - título grande por tela e títulos de grupo em caixa de frase (nada de
     rótulo em caixa alta com espaçamento);
   - cantos concêntricos (janela 22, grupo 20, item 12) e nada abaixo de 12 px;
   - cada gráfico diz a conclusão no título.
   Esta camada vem por último de propósito: muda todas as telas de uma vez, e
   cada tela refinada depois mora no próprio template.
   ============================================================================ */
:root{
  --base:#eef1f3; --vidro:rgba(255,255,255,.66); --vidro-borda:rgba(255,255,255,.72);
  --sep:rgba(20,24,26,.09); --fill:rgba(20,24,26,.05);
  --faixa:radial-gradient(1200px 380px at 18% -40px,rgba(217,89,38,.18),transparent 70%),
          radial-gradient(900px 300px at 85% -60px,rgba(42,120,214,.09),transparent 70%);
  --sombra-grupo:0 1px 2px rgba(20,24,26,.05),0 8px 24px -12px rgba(20,24,26,.12);
  --raio-janela:22px; --raio-grupo:20px; --raio-item:12px;
  /* rampa de UM tom (terracota), clara → escura, para magnitude (calendário) */
  --q0:#e3e8eb; --q1:#f6dfd4; --q2:#efbea6; --q3:#e29572; --q4:#cd6a43; --q5:#b34a2b; --q6:#7c2e18;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --base:#0c1113; --vidro:rgba(21,28,31,.62); --vidro-borda:rgba(255,255,255,.08);
  --sep:rgba(232,238,241,.09); --fill:rgba(232,238,241,.06);
  --faixa:radial-gradient(1200px 380px at 18% -40px,rgba(217,89,38,.20),transparent 70%),
          radial-gradient(900px 300px at 85% -60px,rgba(57,135,229,.10),transparent 70%);
  --sombra-grupo:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
  --q0:#1c2427; --q1:#3a2219; --q2:#5c2c1b; --q3:#8a3a20; --q4:#bf5530; --q5:#e47a4f; --q6:#f6b394;
}}
:root[data-theme="dark"]{
  --base:#0c1113; --vidro:rgba(21,28,31,.62); --vidro-borda:rgba(255,255,255,.08);
  --sep:rgba(232,238,241,.09); --fill:rgba(232,238,241,.06);
  --faixa:radial-gradient(1200px 380px at 18% -40px,rgba(217,89,38,.20),transparent 70%),
          radial-gradient(900px 300px at 85% -60px,rgba(57,135,229,.10),transparent 70%);
  --sombra-grupo:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
  --q0:#1c2427; --q1:#3a2219; --q2:#5c2c1b; --q3:#8a3a20; --q4:#bf5530; --q5:#e47a4f; --q6:#f6b394;
}
body{background-color:var(--base);background-image:var(--faixa);background-repeat:no-repeat}

/* navegação: vidro flutuante, a única camada de vidro */
.app{display:block}
.side{position:fixed;inset:12px auto 12px 12px;width:232px;height:auto;border:1px solid var(--vidro-borda);
  border-radius:var(--raio-janela);background:var(--vidro);box-shadow:var(--sombra-grupo);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  padding:14px 0 12px;z-index:30;overflow-y:auto}
.side-nav{padding:0 10px}
.nav-item{border-radius:var(--raio-item);min-height:36px;font-size:14px}
.side-sep,.nav-sep{background:var(--sep)}
.side-foot{border-top-color:var(--sep)}
.side-label{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:12px}
.side-ws select{border-radius:var(--raio-item)}
.side-actions a{font-size:12px}
@media (prefers-reduced-transparency: reduce){.side{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* conteúdo centralizado no espaço ao lado da navegação */
.main{margin-left:256px;max-width:none;padding:28px 40px 72px}
.main > *{max-width:1440px;margin-left:auto;margin-right:auto}
.topbar{align-items:flex-end;margin-bottom:22px}
.page-title{font-family:var(--mono);font-size:34px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.page-sub{font-size:13px;color:var(--muted)}

/* grupos: opacos, cantos concêntricos, sombra que não flutua */
.panel,.hero-card,.card,.k-section{border:0;border-radius:var(--raio-grupo);box-shadow:var(--sombra-grupo)}
.hero-card::before{display:none}
.panel-head{font-family:var(--sans);font-size:17px;font-weight:600;text-transform:none;letter-spacing:0;
  color:var(--ink);padding:18px 22px 0;line-height:1.35}
.panel-body{padding:10px 22px 18px}

/* nada abaixo de 12 px */
.row-meta,.chart-foot,.ruler-item b,.hero-stat .lab,.hero-total .lab,.row-tags .tag,.tag{font-size:12px}
.k-table th,.tabela th{font-family:var(--sans);font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}

/* botões em cápsula, mesma altura */
.btn{border-radius:99px;min-height:32px}
.btn-sm{min-height:28px}
@media (pointer: coarse){.btn{min-height:44px}}

/* segmentado (período): cápsula com o selecionado elevado */
.period{border:0;background:var(--fill);border-radius:99px;padding:3px}
.period .pill{border-radius:99px;font-size:13px;padding:6px 14px}

/* barra de abas do celular (fica escondida no desktop) */
.abas{display:none}
.mais-folha{display:none}
@media (max-width:900px){
  .side{display:none}
  .main{margin-left:0;padding:20px 16px 104px}
  .page-title{font-size:30px}
  .abas{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));height:62px;
    border-radius:99px;z-index:40;background:var(--vidro);border:1px solid var(--vidro-borda);box-shadow:var(--sombra-grupo);
    -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
    justify-content:space-around;align-items:center;padding:0 6px}
  .abas a,.abas summary{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:500;
    color:var(--ink-2);padding:6px 10px;border-radius:99px;text-decoration:none;cursor:pointer;list-style:none;min-width:56px}
  .abas summary::-webkit-details-marker{display:none}
  .abas a.ativo,.abas details[open] summary{color:var(--accent);background:var(--accent-soft)}
  .abas svg{width:20px;height:20px}
  .abas details{position:static}
  .abas details .mais-folha{display:flex;flex-direction:column;position:fixed;left:12px;right:12px;bottom:86px;
    background:var(--panel);border-radius:var(--raio-janela);box-shadow:0 18px 50px -12px rgba(0,0,0,.45);padding:8px}
  .mais-folha a{flex-direction:row;justify-content:flex-start;gap:12px;font-size:15px;padding:12px 14px;border-radius:var(--raio-item);color:var(--ink);min-height:44px}
  .mais-folha a svg{width:20px;height:20px}
  .mais-folha select{margin:8px 14px;min-height:44px;border-radius:var(--raio-item);border:1px solid var(--sep);background:var(--panel);color:var(--ink);font:inherit;padding:0 10px}
  .mais-folha .rodape{display:flex;gap:16px;align-items:center;padding:10px 14px 4px;border-top:1px solid var(--sep);margin-top:6px}
  .mais-folha .rodape a{min-height:0;padding:6px 0;font-size:14px;color:var(--ink-2)}
}
@media (prefers-reduced-transparency: reduce){.abas{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ---------- visualizações v2 (kostria-viz.js) ---------- */
.viz-dica{position:fixed;pointer-events:none;z-index:60;background:var(--panel);color:var(--ink);border-radius:12px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.35),0 0 0 1px var(--sep);padding:9px 12px;font-size:13px;line-height:1.45;max-width:280px;
  opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.viz-dica.on{opacity:1;transform:none}
.viz-dica b{font-family:var(--mono)}
.viz-entra{animation:viz-entra .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes viz-entra{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.viz-entra{animation:none}}
.panel svg text,.janela svg text{font-family:var(--mono);font-size:12px;fill:var(--muted)}
.viz-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.viz-legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.viz-legenda i.tracejado{background:transparent;border-top:2px dashed var(--accent);width:14px;height:0;border-radius:0;vertical-align:3px}
.viz-escala{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-top:10px;justify-content:flex-end}
.viz-escala span{width:12px;height:12px;border-radius:3px}
.viz-vazio{color:var(--muted);font-size:13px;margin:6px 0 0}
.viz-linha{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-top:1px solid var(--sep);align-items:center;color:inherit;text-decoration:none}
.viz-linha:first-child{border-top:0}
a.viz-linha:hover .viz-nome{color:var(--accent)}
.viz-nome{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink)}
.viz-nome a{color:inherit;text-decoration:none}
.viz-nome a:hover{color:var(--accent)}
.viz-nome>i{width:10px;height:10px;border-radius:3px;flex:none}
.viz-valor{font:600 14px var(--mono);text-align:right;color:var(--ink)}
.viz-valor.sobe{color:var(--accent)} .viz-valor.desce{color:var(--green)}
.viz-sub{font-size:13px;color:var(--muted);grid-column:1/-1;display:flex;align-items:center;gap:10px}
.viz-barra{height:6px;border-radius:99px;background:var(--fill);overflow:hidden;grid-column:1/-1}
.viz-barra>i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.viz-pos{color:var(--muted);width:24px;font-weight:500}
.viz-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--sans);background:var(--accent-soft);color:var(--accent);flex:none;overflow:hidden}
.viz-av img{width:100%;height:100%;object-fit:cover}
.viz-mapa{position:relative;height:320px}
.viz-bloco{position:absolute;border-radius:14px;padding:12px 14px;overflow:hidden;color:var(--ink);text-decoration:none;
  background:color-mix(in srgb,var(--c) 16%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent);transition:background .15s}
.viz-bloco::before{content:"";display:block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-bottom:8px}
.viz-bloco.mudo::before{display:none}
.viz-bloco b{display:block;font:600 14px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viz-bloco span{display:block;font:500 13px var(--mono);color:var(--ink-2)}
.viz-bloco.grande span{font:600 28px/1.15 var(--mono);color:var(--ink);margin-top:4px}
.viz-bloco.grande small{display:block;font:500 13px var(--mono);color:var(--ink-2)}
a.viz-bloco:hover{background:color-mix(in srgb,var(--c) 26%,var(--panel))}
@media (max-width:900px){.viz-mapa{height:380px}}
.viz-pilha{display:flex;gap:2px;height:12px;border-radius:99px;overflow:hidden;margin:4px 0 6px}
.viz-pilha i{display:block;min-width:2px}
.v2-coluna{display:flex;flex-direction:column;gap:18px}
.v2-coluna .panel{margin:0}
.viz-nota{font:400 12px var(--sans);color:var(--muted);margin-left:2px;white-space:nowrap}

/* ---------- destaque das telas: número e leitura à esquerda, gráfico à direita ---------- */
.v2-destaque{display:grid;grid-template-columns:minmax(300px,.7fr) 1.8fr;gap:24px;align-items:stretch;margin-bottom:22px}
.v2-numero{display:flex;flex-direction:column;align-items:flex-start;padding-top:6px;min-width:0}
.v2-total{font:700 64px/1 var(--mono);letter-spacing:-.04em;color:var(--ink)}
.v2-total small{font-size:.4em;font-weight:600;color:var(--muted);letter-spacing:0;margin-right:6px}
.v2-frase{font-size:16px;line-height:1.5;color:var(--ink-2);margin:14px 0 0;max-width:36ch}
.v2-frase b{color:var(--ink);font-weight:600}
.v2-frase a.ir{font-size:13px;margin-left:4px}
.v2-numero .sobre-uso{margin-top:10px}
.v2-fatos{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:auto;padding-top:18px;border-top:1px solid var(--sep);align-self:stretch}
.v2-fatos div{display:flex;flex-direction:column}
.v2-fatos b{font:600 22px var(--mono);color:var(--ink)}
.v2-fatos span{font-size:13px;color:var(--muted)}
.v2-pulso{display:flex;flex-direction:column;margin:0}
.v2-pulso .panel-body{flex:1;display:flex;flex-direction:column}
#v-pulso{flex:1;display:flex;align-items:center;justify-content:center;min-height:180px}
.v2-grade{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;margin-bottom:18px}
.v2-grade .panel{margin:0}
.panel .nota-grafico{font-size:13px;color:var(--muted);margin:4px 0 12px}
@media (max-width:1100px){.v2-destaque,.v2-grade{grid-template-columns:1fr}}
@media (max-width:900px){.v2-total{font-size:52px}.v2-fatos{margin-top:22px}}
#v-pulso,.v2-principal [id^="v-"]{flex:1}
.v2-principal{display:flex;flex-direction:column;margin:0}
.v2-principal .panel-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.v2-grade-par{grid-template-columns:1fr 1fr}
/* a leitura (frases) dentro do destaque perde a moldura de grupo */
.v2-numero .panel{background:none;box-shadow:none;margin:0;border-radius:0;width:100%}
.v2-numero .panel-head{display:none}
.v2-numero .panel-body{padding:0}
.v2-numero .leitura-editorial{display:block;margin:14px 0 0}
.v2-numero .leitura-editorial p{font-size:14px;line-height:1.55;margin-top:8px;padding:0;border:0}
.v2-numero .leitura-editorial p.leitura-principal{font-size:16px;color:var(--ink-2);margin-top:0}
.v2-numero .leitura-nota{margin-top:10px}
.v2-legenda{font-size:13px;color:var(--muted);margin:6px 0 0}
.v2-voltar{font-size:13px;color:var(--accent);text-decoration:none;margin-bottom:6px;display:inline-flex;align-items:center;gap:4px}
.v2-voltar::before{content:"‹";font-size:18px;line-height:1}
.v2-voltar:hover{text-decoration:underline}
.v2-nome{font:600 22px/1.25 var(--sans);margin:2px 0 12px;overflow-wrap:anywhere;color:var(--ink)}
@media (max-width:1100px){.v2-grade-par{grid-template-columns:1fr}}

/* cartões de projeto */
.viz-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.viz-cartao{display:flex;flex-direction:column;gap:6px;padding:14px 16px 12px;border-radius:16px;text-decoration:none;color:var(--ink);
  background:color-mix(in srgb,var(--c) 7%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 18%,transparent);transition:background .15s,transform .15s}
.viz-cartao:hover{background:color-mix(in srgb,var(--c) 13%,var(--panel))}
.viz-cartao:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.viz-cartao-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.viz-cartao-nome{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;min-width:0}
.viz-cartao-nome span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz-cartao-nome i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.viz-cartao-valor{font:600 24px/1.1 var(--mono);letter-spacing:-.02em}
.viz-cartao-valor small{font:500 13px var(--mono);color:var(--muted);margin-left:8px;letter-spacing:0}
.viz-cartao-serie{width:100%;height:52px;display:block}
.viz-cartao-pe{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.viz-cartao-pe span:last-child{font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz-chip{font:600 12px var(--mono);padding:2px 8px;border-radius:99px;background:var(--fill);color:var(--ink-2);white-space:nowrap;flex:none}
.viz-chip.sobe{color:var(--accent);background:var(--accent-soft)}
.viz-chip.desce{color:var(--green);background:var(--green-bg)}
.viz-legenda span{cursor:default}
.viz-legenda b{font-weight:600;color:var(--ink);margin-left:4px}
.panel-head:empty{display:none}

/* Carteira v2 */
.main.carteira-page{max-width:none}
body .carteira-section{border:0;border-radius:var(--raio-grupo);box-shadow:var(--sombra-grupo)}
body .section-heading h2{font-family:var(--sans);font-size:17px}
body .carteira-secondary>summary{font-family:var(--sans)}
.cart-pilha{margin-top:18px;align-self:stretch}
.cart-barras{display:flex;flex-direction:column;gap:18px;margin:10px 0 6px}
.cart-barra{display:grid;grid-template-columns:190px minmax(0,1fr) 110px;gap:14px;align-items:center}
.cart-barra-nome{font-size:14px;color:var(--ink-2)}
.cart-barra-trilho{position:relative;height:28px;border-radius:8px;background:var(--fill)}
.cart-barra-trilho i{position:absolute;left:0;top:0;bottom:0;border-radius:8px}
.cart-barra-trilho i.cart-proj{background:none;border:2px dashed var(--accent);opacity:.5}
.cart-barra b{font:600 16px var(--mono);text-align:right;color:var(--ink)}
@media (max-width:640px){.cart-barra{grid-template-columns:1fr auto}.cart-barra-trilho{grid-column:1/-1;grid-row:2}}
.v2-principal .viz-mapa{flex:none;height:300px}

/* ---------- conta: botão único no rodapé da navegação e o menu dele ---------- */
.side-foot{position:relative;padding:8px 10px 0;border-top:1px solid var(--sep)}
.side-user,.side-actions{display:none}
.conta-botao{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:var(--raio-item);background:transparent;
  color:var(--ink);cursor:pointer;text-align:left;font:inherit;min-height:48px}
.conta-botao:hover,.conta-botao[aria-expanded="true"]{background:var(--fill)}
.conta-botao:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.conta-botao .av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:var(--accent-soft);color:var(--accent);font:600 12px var(--sans)}
.conta-botao .av img{width:100%;height:100%;object-fit:cover}
.conta-quem{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.conta-quem .u-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conta-quem .u-mail{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conta-seta{width:14px;height:14px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.conta-menu{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:40;padding:6px;border-radius:14px;
  background:var(--panel);box-shadow:0 0 0 1px var(--sep),0 18px 48px -12px rgba(0,0,0,.35);animation:conta-abre .14s ease-out}
@keyframes conta-abre{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.conta-menu{animation:none}}
.conta-menu-cab{display:flex;flex-direction:column;gap:1px;padding:8px 10px 10px;min-width:0}
.conta-menu-cab b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-menu-cab span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-menu-cab .conta-ws{margin-top:4px}
.conta-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:14px;min-height:36px}
.conta-menu a:hover,.conta-menu a:focus-visible{background:var(--fill);outline:none}
.conta-menu a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-2)}
.conta-menu-sep{height:1px;background:var(--sep);margin:5px 4px}
.conta-menu-tema{display:flex;flex-direction:column;gap:6px;padding:6px 10px 8px;font-size:12px;color:var(--muted)}
/* segmentado do tema (HIG: 2 a 5 opções, rótulo curto, só texto) */
.seg-tema{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;border-radius:9px;background:var(--fill)}
.seg-tema button{border:0;background:transparent;color:var(--ink-2);font:500 12.5px var(--sans);padding:6px 4px;border-radius:7px;cursor:pointer;min-height:30px}
.seg-tema button[aria-checked="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 .5px var(--sep)}
.seg-tema button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (pointer: coarse){.seg-tema button{min-height:44px}}
.mais-folha .rodape .seg-tema{flex:1;max-width:240px}

/* Carteira: quem paga vira controle segmentado (uma escolha entre três) */
body .pagador-seg{display:inline-grid;grid-auto-flow:column;gap:2px;padding:2px;border-radius:10px;background:var(--fill)}
body .pagador-op{border:0;background:transparent;border-radius:8px;min-height:32px;padding:5px 14px;color:var(--ink-2)}
body .pagador-op:hover{color:var(--ink)}
body .pagador-op[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 .5px var(--sep)}
body .conta{border:0;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--sep)}
body .conta-estado small{font-size:12px;color:var(--muted)}
@media (pointer: coarse){body .pagador-op{min-height:44px}}

/* "Baixar CSV" no cabeçalho do grupo: ação secundária, discreta */
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.panel-head .csv{flex:none;border:0;background:var(--fill);color:var(--ink-2);font:500 12px var(--sans);padding:5px 10px;border-radius:99px;cursor:pointer}
.panel-head .csv:hover{color:var(--ink)}
.panel-head .csv:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media print{.panel-head .csv{display:none}}

/* ---------- tabela de comparação (_comparacao.html): de relance, quem atende o quê ----------
   O placar vem logo abaixo dos nomes; a coluna do Kostria fica tingida e presa
   ao lado dos rótulos quando a tabela rola de lado no celular. */
.cmp-caixa{overflow-x:auto;background:var(--panel);border-radius:20px;box-shadow:var(--sombra-grupo)}
.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:14px}
.cmp.cmp-curta{min-width:760px}
.cmp th,.cmp td{padding:11px 12px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--sep)}
.cmp thead th{font:600 13.5px var(--sans);color:var(--ink-2);padding-top:16px}
.cmp .cmp-rot{text-align:left;position:sticky;left:0;background:var(--panel);z-index:2;min-width:210px;max-width:260px;font-weight:600;color:var(--ink);font-size:14px}
.cmp .cmp-k{background:color-mix(in srgb,var(--accent) 9%,var(--panel));position:sticky;left:210px;z-index:1}
.cmp thead .cmp-k{color:var(--accent);font-size:16px;font-family:var(--mono);font-weight:700}
.cmp-placar td,.cmp-placar th{border-bottom:2px solid var(--sep);padding-bottom:14px;color:var(--muted);font-size:13px}
.cmp-placar td b{display:block;font:700 22px/1.1 var(--mono);color:var(--ink-2)}
.cmp-placar .cmp-k b{font-size:30px;color:var(--accent)}
.cmp-grupo td{background:var(--base)!important;font:600 12.5px var(--sans);color:var(--muted);padding:7px 12px;text-align:left}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.3}
.cmp-ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 13px/1 var(--sans);vertical-align:middle}
.cmp-s .cmp-ic{background:var(--green-bg);color:var(--green)}
.cmp-s .cmp-ic::before{content:"✓"}
.cmp-k.cmp-s .cmp-ic{background:var(--accent);color:var(--accent-ink,#fff);width:26px;height:26px}
.cmp-p .cmp-ic{box-shadow:inset 0 0 0 2px var(--muted);background:linear-gradient(90deg,var(--muted) 50%,transparent 50%)}
.cmp-n .cmp-ic{color:var(--muted);opacity:.7}
.cmp-n .cmp-ic::before{content:"–";font-size:18px}
.cmp-i .cmp-ic{color:var(--muted);font-size:12px;box-shadow:inset 0 0 0 1px var(--sep)}
.cmp-i .cmp-ic::before{content:"?"}
.cmp-k.cmp-n small{color:var(--ink-2)}
.cmp-legenda{font-size:12.5px;color:var(--muted);margin:12px 4px 0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.cmp-legenda > span{display:inline-flex;align-items:center;gap:6px}
.cmp-legenda .cmp-ic{width:16px;height:16px;font-size:10px}
@media (max-width:640px){.cmp .cmp-rot{min-width:150px;max-width:150px;font-size:13px}.cmp .cmp-k{left:150px}
  /* sombra na borda direita enquanto há tabela para ver; some ao chegar no fim */
  .cmp-caixa{background:linear-gradient(to left,var(--panel) 30%,transparent) 100% 0/44px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 45%,transparent),transparent) 100% 0/22px 100% no-repeat scroll,var(--panel)}}

.cmp-resumo{font-size:17px;color:var(--ink-2);margin:0 4px 14px;text-align:center}
.cmp-resumo b{color:var(--ink);font-family:var(--mono)}
.cmp-resumo .cmp-resumo-k{color:var(--accent)}
.cmp-placar .cmp-rot small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px}
.cmp-placar small{margin-top:4px}
.cmp-barra{display:block;width:56px;height:6px;margin:6px auto 0;border-radius:99px;background:var(--fill);overflow:hidden}
.cmp-barra i{display:block;height:100%;border-radius:99px;background:var(--muted)}
.cmp-k .cmp-barra{width:72px}
.cmp-k .cmp-barra i{background:var(--accent)}

/* Carteira: conferir com a fatura */
.fat-passos{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:12px 0}
.fat-campo{display:flex;flex-direction:column;gap:5px;font:500 12.5px var(--sans);color:var(--muted)}
.fat-campo input,.fat-campo select{font:14px var(--sans);color:var(--ink);padding:8px 10px;border-radius:10px;border:1px solid var(--sep);background:var(--panel);min-height:38px;min-width:180px}
.fat-resumo{display:flex;flex-wrap:wrap;gap:12px 32px;padding:14px 0;border-top:1px solid var(--sep);border-bottom:1px solid var(--sep);margin:8px 0 14px}
.fat-resumo div{display:flex;flex-direction:column}
.fat-resumo b{font:700 22px var(--mono)}
.fat-resumo span{font-size:12.5px;color:var(--muted)}
#fat-resultado h3{font:600 15px var(--sans);margin:18px 0 6px}
.fat-tab{width:100%;border-collapse:collapse;font-size:14px}
.fat-tab th,.fat-tab td{padding:8px 6px;border-bottom:1px solid var(--sep);text-align:left}
.fat-tab th{font-size:12.5px;color:var(--muted);font-weight:600}
.fat-tab .n{text-align:right;font-family:var(--mono)}
.fat-bate{color:var(--green);font-weight:600}
.fat-longe{color:var(--warn);font-weight:600}
.fat-sem{color:var(--muted)}

/* ---------- sino de notificações (049) ---------- */
.escolha-sugestao{display:block;margin-top:2px;font:400 12.5px var(--sans);color:var(--muted)}
.sino{position:fixed;top:29px;left:198px;z-index:30;width:34px;height:34px;border:0;border-radius:9px;background:transparent;
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.sino:hover,.sino[aria-expanded="true"]{background:var(--fill)}
.sino:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sino svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.sino-n{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font:600 10px/16px var(--mono);text-align:center}
/* fica no <body> (kostria.js): a barra de vidro recorta o que passa da borda */
.sino-painel{position:fixed;width:min(380px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 80px));
  overflow:auto;z-index:40;padding:6px;border-radius:14px;background:var(--panel);
  box-shadow:0 0 0 1px var(--sep),0 18px 48px -12px rgba(0,0,0,.35);animation:conta-abre .14s ease-out}
@media (prefers-reduced-motion: reduce){.sino-painel{animation:none}}
.sino-cab{padding:8px 10px 6px;font-size:14px}
.sino-vazio{padding:14px 10px 16px;font-size:13.5px;color:var(--muted)}
.sino-item{position:relative;padding:10px 10px 10px 22px;border-radius:10px}
.sino-item+.sino-item{border-top:1px solid var(--sep)}
.sino-item.nova::before{content:"";position:absolute;left:8px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sino-item b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.sino-item p{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.sino-item time{display:block;margin-top:4px;font:12px var(--mono);color:var(--muted)}
.sino-acoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sino-acoes button,.sino-acoes a{border:1px solid var(--rule);background:var(--panel);color:var(--ink);font:500 12.5px var(--sans);
  padding:5px 10px;border-radius:8px;cursor:pointer;text-decoration:none;min-height:30px;display:inline-flex;align-items:center}
.sino-acoes .principal{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sino-acoes button:hover,.sino-acoes a:hover{border-color:var(--rule-strong)}
.sino-acoes button:focus-visible,.sino-acoes a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sino-erro{margin-top:6px;font-size:12.5px;color:var(--warn)}
/* celular: a barra lateral some (abas embaixo); o sino vai para o alto da
   página, ao lado do título, e rola com ela para não cobrir conteúdo */
@media (max-width:900px){
  .sino{position:absolute;top:14px;left:auto;right:16px;width:40px;height:40px;border-radius:99px;
    background:var(--vidro);border:1px solid var(--vidro-borda);box-shadow:var(--sombra-grupo);
    -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%)}
  .sino-n{top:-2px;right:-2px}
}
@media (prefers-reduced-transparency: reduce){.sino{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Alvo de toque no celular (40px+; o piso do iOS é 44). Medido em 390x844: os
   controles abaixo ficavam em 19-34px de altura. Só `pointer: coarse`, então
   o desktop com mouse não muda. */
@media (pointer: coarse){
  .period .pill{min-height:40px}
  .panel-head .csv,.mais,.feature-toggle,.extra-toggle{min-height:40px;display:inline-flex;align-items:center}
  .btn.btn-sm,.esc-acao{min-height:40px}
  .esc-acao{padding-left:8px;padding-right:8px}
  .sec-tab{min-height:44px}
  .sobre-uso summary,.v2-voltar,details.filtros-detalhe>summary{min-height:40px;display:inline-flex;align-items:center}
  .main input:not([type=checkbox]):not([type=radio]):not([type=range]),.main select{min-height:40px}
  .seg-tema button{min-width:44px}
  .mais-folha .rodape a{min-height:44px;display:inline-flex;align-items:center;padding:0 10px}
}

/* ---------- barra lateral recolhível (desktop): trilho só de ícones ---------- */
.lateral-botao{display:flex;align-items:center;gap:11px;width:100%;min-height:36px;margin:0 0 6px;padding:8px 12px;border:0;
  border-radius:var(--raio-item);background:transparent;color:var(--muted);font:500 13px var(--sans);cursor:pointer;text-align:left}
.lateral-botao:hover{background:var(--fill);color:var(--ink)}
.lateral-botao:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lateral-botao svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:901px){
  .side{transition:width .18s ease}
  .main{transition:margin-left .18s ease}
  html[data-lateral="recolhida"] .side{width:64px;overflow:visible}
  html[data-lateral="recolhida"] .main{margin-left:88px}
  html[data-lateral="recolhida"] .side .brand b,
  html[data-lateral="recolhida"] .side .nav-txt,
  html[data-lateral="recolhida"] .side-label,
  html[data-lateral="recolhida"] .side-ws,
  html[data-lateral="recolhida"] .side-visao,
  html[data-lateral="recolhida"] .conta-quem,
  html[data-lateral="recolhida"] .conta-seta{display:none}
  html[data-lateral="recolhida"] .side .brand{justify-content:center;padding-left:0;padding-right:0}
  html[data-lateral="recolhida"]:has(.sino:not(.hidden)) .side .brand{margin-bottom:44px}
  html[data-lateral="recolhida"] .side-nav{padding:0 8px}
  html[data-lateral="recolhida"] .side-sep{margin-left:12px;margin-right:12px}
  html[data-lateral="recolhida"] .side .nav-item,
  html[data-lateral="recolhida"] .lateral-botao,
  html[data-lateral="recolhida"] .conta-botao{justify-content:center;padding-left:0;padding-right:0;gap:0}
  html[data-lateral="recolhida"] .side-foot{padding-left:8px;padding-right:8px}
  html[data-lateral="recolhida"] .lateral-botao svg{transform:scaleX(-1)}
  /* o sino sai da linha da marca e fica logo abaixo do logo */
  html[data-lateral="recolhida"] .sino{left:27px;top:62px}
  /* o número de "Meus projetos" vira um ponto no canto do ícone */
  html[data-lateral="recolhida"] .side .nav-item{position:relative}
  html[data-lateral="recolhida"] .side .nav-badge{position:absolute;top:4px;right:6px;min-width:0;width:8px;height:8px;padding:0;font-size:0}
  /* o nome aparece ao passar o mouse e no foco do teclado */
  html[data-lateral="recolhida"] .side .nav-item:hover::after,
  html[data-lateral="recolhida"] .side .nav-item:focus-visible::after{content:attr(aria-label);position:absolute;left:calc(100% + 12px);top:50%;
    transform:translateY(-50%);padding:5px 9px;border-radius:8px;background:var(--ink);color:var(--paper);
    font:500 12px var(--sans);white-space:nowrap;pointer-events:none;z-index:50}
  html[data-lateral="recolhida"] .conta-menu{left:0;right:auto;width:240px}
}
@media (min-width:901px) and (prefers-reduced-motion: reduce){.side,.main{transition:none}}