/* ---------------------------------------------------------------------------
   Oxyvon — sistema visual compartilhado (painel, pagamento, link, referência).

   Três regras que governam tudo:

   1. UMA FAMÍLIA DE FORMAS. Cartão 20px, botão pílula, barra 4px, ponto 6px.
      Quando falta um componente, ele nasce dessas quatro — não de uma quinta.
   2. CARBONO É A INTERFACE. Papel e carvão, sem acento colorido. Verde e
      vermelho são as ÚNICAS cores, e só aparecem carregando significado
      (subiu, caiu, falhou) — quando tudo é cinza, uma cor grita sozinha.
      A hierarquia é feita de peso, tamanho e espaço, não de matiz.
   3. MOVIMENTO É RESPOSTA, NÃO ENFEITE. Toda transição usa a curva do macOS
      (0.32, 0.72, 0, 1): sai rápido, chega devagar. E some inteira sob
      `prefers-reduced-motion`.
   --------------------------------------------------------------------------- */
/* `hidden` vence qualquer `display` da folha.

   Sem esta linha, todo componente que declara `display:flex` ou `display:grid`
   ignora o atributo `hidden` em silêncio — e "em silêncio" aqui significa um
   menu de administrador aparecendo para lojista. O navegador só aplica
   `display:none` ao `hidden` como estilo de agente, que é o mais fraco de
   todos; qualquer regra nossa passa por cima. */
[hidden] { display:none !important; }


:root {
  /* Escala neutra: a interface inteira sai daqui. */
  --ink-50:#f7f7f8;
  --ink-100:#eeeef0;
  --ink-200:#d9d9dc;
  --ink-300:#a1a1a6;
  --ink-400:#48484a;
  --accent:#1d1d1f;
  --ink-600:#2c2c2e;
  --ink-700:#000000;
  /* Sobre o acento carvão, o texto é papel. */
  --on-accent:#ffffff;
  /* A marca não inverte: o anel do .svg é branco e precisa de fundo escuro. */
  --mark-bg:linear-gradient(150deg, #3a3a3c, #1d1d1f);

  --bg:#f5f5f7;
  --bg-tint:radial-gradient(120% 90% at 50% -10%, #ececef 0%, rgba(245,245,247,0) 62%);
  --surface:#ffffff;
  --surface-2:#fbfbfd;
  --surface-tint:var(--ink-50);
  --text:#1d1d1f;
  --text-2:#6e6e73;
  --text-3:#86868b;
  --line:#d2d2d7;
  --line-soft:rgba(0,0,0,.07);
  --accent-hover:#000000;
  --accent-soft:rgba(0,0,0,.06);
  --accent-glow:rgba(0,0,0,.14);
  --pos:#0a7d32;
  --neg:#c9252d;
  --warn:#9a6200;
  --nav:rgba(255,255,255,.72);

  /* Coluna da esquerda: largura e superfície. */
  --side:250px;
  --side-bg:rgba(255,255,255,.74);
  --side-tint:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0) 280px);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 34px rgba(0,0,0,.05);
  --shadow-hover:0 2px 6px rgba(0,0,0,.05), 0 18px 48px rgba(0,0,0,.09);
  --shadow-lg:0 30px 80px rgba(0,0,0,.14);
  --r:20px;
  --r-sm:13px;
  --pill:980px;
  --w:1180px;

  /* A curva do macOS: aceleração curta, desaceleração longa. */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-spring:cubic-bezier(.34,1.32,.5,1);
  --fast:.18s;
  --normal:.34s;
  --slow:.62s;

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* 50 e 100 são superfície (escuras); 200+ sobem para o papel. */
  --ink-50:#141416;
  --ink-100:#1c1c1e;
  --ink-200:#8e8e93;
  --ink-300:#c7c7cc;
  --ink-400:#d1d1d6;
  --accent:#f5f5f7;
  --ink-600:#ffffff;
  --ink-700:#e5e5ea;
  /* Acento invertido: sobre papel, o texto é carvão. */
  --on-accent:#1d1d1f;
  --mark-bg:linear-gradient(150deg, #48484a, #242426);

  --bg:#000000;
  /* No escuro a luz é branca: um halo neutro atrás do topo, sem matiz. */
  --bg-tint:radial-gradient(130% 100% at 50% -20%, rgba(255,255,255,.09) 0%, rgba(0,0,0,0) 60%);
  --surface:#141416;
  --surface-2:#0e0e10;
  --surface-tint:#18181a;
  --text:#f5f5f7;
  --text-2:#a1a1a6;
  --text-3:#86868b;
  --line:#3a3a3e;
  --line-soft:rgba(255,255,255,.09);
  --accent-hover:#ffffff;
  --accent-soft:rgba(255,255,255,.12);
  --accent-glow:rgba(255,255,255,.16);
  --pos:#30d158;
  --neg:#ff453a;
  --warn:#ffd60a;
  --nav:rgba(18,18,20,.72);

  /* A coluna é grafite sobre o preto: ela se separa do fundo por densidade,
     não por cor. */
  --side-bg:rgba(24,24,26,.86);
  --side-tint:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 300px);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 34px rgba(0,0,0,.35);
  --shadow-hover:0 2px 8px rgba(0,0,0,.55), 0 20px 54px rgba(0,0,0,.45);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);

  color-scheme: dark;
}

/* ----------------------------------------------------------------- base */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
html { background-color:var(--bg); }
/* Âncora não deve teletransportar: quem clica precisa ver para onde foi. */
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
body {
  margin:0; color:var(--text);
  /*
    Longhands, não o atalho: `background: var(--bg)` na mesma regra que
    `background-image` deixa a cor pendente de substituição e ela simplesmente
    não pinta. Foi assim que o tema escuro ficou com fundo claro.
  */
  background-color:var(--bg);
  background-image:var(--bg-tint);
  background-repeat:no-repeat;
  background-size:100% 900px;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size:15px; line-height:1.47; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /*
    Sem transição no fundo da página de propósito: o macOS troca de aparência
    num corte, não num fade. Cross-fade de tela cheia custa composição e deixa
    um rastro cinza no meio do caminho. Quem suaviza são os componentes.
  */
}
button, input, select, textarea { font:inherit; color:inherit; letter-spacing:inherit; }
button { cursor:pointer; border:0; background:none; }
h1, h2, h3 { margin:0; font-weight:600; letter-spacing:-.022em; }
/*
  Sem azul, a cor não distingue mais um link. Quem faz isso é o sublinhado —
  o mesmo recurso que a web usava antes de ter cor, e que continua sendo o
  único que funciona para quem não distingue matiz.
*/
a { color:var(--text); text-decoration-color:var(--ink-300); text-underline-offset:3px; }
a:hover { text-decoration-color:var(--text); }
code, .mono {
  font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size:.92em;
}
::selection { background:var(--accent-soft); }
:focus-visible { outline:none; box-shadow:0 0 0 4px var(--accent-soft); border-radius:8px; }

/* Números com largura fixa: coluna de valores não pode dançar. */
.num { font-variant-numeric:tabular-nums; letter-spacing:-.022em; }

/* Números grandes descem do carvão para o cinza: o valor se dissolve. */
.display-ink {
  background:linear-gradient(180deg, var(--text) 34%, #7c7c82 148%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-theme="dark"] .display-ink {
  background:linear-gradient(180deg, #ffffff 20%, #8e8e93 138%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --------------------------------------------------------------- marca */
.mark {
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:var(--mark-bg);
  box-shadow:0 3px 12px rgba(0,0,0,.18);
  flex:none; overflow:hidden;
  transition:transform var(--fast) var(--ease-spring), box-shadow var(--normal) var(--ease);
}
.mark img { width:70%; height:70%; display:block; }
a:hover > .mark, .brand:hover .mark { transform:scale(1.06); box-shadow:0 5px 18px var(--accent-glow); }
.wordmark { font-weight:600; font-size:16px; letter-spacing:-.02em; }

/* -------------------------------------------------------------- botões */
.btn {
  position:relative; overflow:hidden;
  background:var(--accent); color:var(--on-accent); border-radius:var(--pill);
  padding:9px 20px; font-size:14px; font-weight:500;
  transition:background var(--fast) var(--ease), transform var(--fast) var(--ease-spring),
             box-shadow var(--fast) var(--ease);
}
.btn:hover { background:var(--accent-hover); box-shadow:0 4px 14px var(--accent-glow); }
.btn:active { transform:scale(.96); }
.btn:disabled { opacity:.4; cursor:default; transform:none; box-shadow:none; }
.btn.quiet {
  background:transparent; color:var(--text);
  border:1px solid var(--line); padding:8px 16px; box-shadow:none;
}
.btn.quiet:hover { background:var(--accent-soft); border-color:transparent; box-shadow:none; }
.btn.sm { padding:5px 14px; font-size:13px; }
.btn.block { width:100%; padding:13px; font-size:15px; }
.link {
  color:var(--text); font-size:14px; text-decoration:underline;
  text-decoration-color:var(--ink-300); text-underline-offset:3px;
  transition:opacity var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease);
}
.link:hover { text-decoration-color:var(--text); }
.link:active { opacity:.6; }

/* --------------------------------------------------------------- campos */
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; color:var(--text-3); margin-bottom:7px; }
input, select, textarea {
  width:100%; background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  outline:none;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
}
input[aria-invalid="true"] { border-color:var(--neg); }

.select { position:relative; display:inline-flex; align-items:center; }
.select select {
  appearance:none; -webkit-appearance:none;
  width:auto; padding:9px 38px 9px 18px; border-radius:var(--pill);
  background:var(--surface); font-size:14px; cursor:pointer;
}
.select svg { position:absolute; right:15px; pointer-events:none; color:var(--text-3); }

.msg { font-size:13.5px; margin-top:12px; min-height:18px; color:var(--text-2); }
.msg.bad { color:var(--neg); }
.msg.good { color:var(--pos); }

/* Medidor de senha.
   O aviso de senha fraca nao pode ser a coisa mais apagada da tela — era, e
   por isso ninguem lia. Ele ganha peso e cor quando ha o que avisar, e volta
   a sussurrar quando a senha esta boa. */
.forca { margin-top:8px; font-size:12px; line-height:1.5; color:var(--muted); }
.forca.f1 { color:var(--neg); font-weight:600; }
.forca.f2 { color:var(--warn); font-weight:600; }
.forca.f3 { color:var(--pos); }

/* ------------------------------------------------------------------ nav */
nav.bar {
  position:sticky; top:0; z-index:20;
  background:var(--nav);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color var(--normal) var(--ease);
}
/* A borda só aparece quando há conteúdo passando por baixo. */
nav.bar.scrolled { border-bottom-color:var(--line-soft); }
nav.bar .inner {
  max-width:var(--w); margin:0 auto; padding:0 28px; height:56px;
  display:flex; align-items:center; gap:26px;
}
nav.bar .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
nav.bar .brand .mark { width:27px; height:27px; border-radius:9px; }
nav.bar .links { display:flex; gap:4px; }
nav.bar .links a {
  color:var(--text-2); text-decoration:none; font-size:13.5px; white-space:nowrap;
  padding:6px 11px; border-radius:var(--pill);
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
nav.bar .links a:hover { color:var(--text); background:var(--line-soft); }
nav.bar .links a.on { color:var(--accent); background:var(--accent-soft); }
nav.bar .right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.who { font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:7px; }
.dot { width:6px; height:6px; border-radius:50%; background:var(--pos); flex:none; }
.dot.test { background:var(--warn); }
.iconbtn {
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  color:var(--text-2);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease),
             transform var(--fast) var(--ease-spring);
}
.iconbtn:hover { background:var(--line-soft); color:var(--text); }
.iconbtn:active { transform:scale(.9); }

/* --------------------------------------------------------------- layout */
.wrap { max-width:var(--w); margin:0 auto; padding:0 28px; }
.card {
  background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); padding:34px;
  transition:box-shadow var(--normal) var(--ease), transform var(--normal) var(--ease),
             background var(--normal) var(--ease);
}
.card.lift:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.card.flat { box-shadow:none; border:1px solid var(--line-soft); }
.card.tinted { background:var(--surface-tint); }
.card.tight { padding:22px 24px; }
.split { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; }
.head { display:flex; align-items:flex-end; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.head h2 { font-size:26px; }
.head .sub { color:var(--text-2); font-size:14px; }

/* --------------------------------------------------------------- estado */
.state { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; }
.state i { width:6px; height:6px; border-radius:50%; background:var(--text-3); flex:none; }
.state.ok i { background:var(--pos); box-shadow:0 0 0 3px rgba(10,125,50,.14); }
.state.bad i { background:var(--neg); box-shadow:0 0 0 3px rgba(201,37,45,.14); }
.state.mid i { background:var(--warn); box-shadow:0 0 0 3px rgba(154,98,0,.14); }

/* -------------------------------------------------------------- tabelas */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:16px 18px; white-space:nowrap; font-size:14px; }
th {
  color:var(--text-3); font-weight:500; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; padding-bottom:12px;
}
tbody tr { border-top:1px solid var(--line-soft); transition:background var(--fast) var(--ease); }
tbody tr:hover { background:var(--surface-2); }
td.num, th.num { text-align:right; }
.id { color:var(--text-3); font-size:12.5px; font-variant-numeric:tabular-nums; }
.empty { color:var(--text-3); text-align:center; padding:44px 0; font-size:14px; }

/* ---------------------------------------------------------------- modal */
dialog {
  border:0; border-radius:var(--r); padding:34px; width:min(400px,92vw);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg);
}
dialog[open] { animation:modal-in var(--normal) var(--ease-spring); }
dialog::backdrop { background:rgba(0,0,0,.32); backdrop-filter:blur(4px); }
dialog[open]::backdrop { animation:fade-in var(--normal) var(--ease); }
@keyframes modal-in { from { opacity:0; transform:scale(.94) translateY(8px); } }
@keyframes fade-in { from { opacity:0; } }
dialog h3 { font-size:21px; margin-bottom:8px; }
dialog p { color:var(--text-2); font-size:14px; margin:0 0 22px; }
.actions { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }

/* -------------------------------------------------------------- rodapé */
footer.page {
  max-width:var(--w); margin:0 auto; padding:26px 28px 60px;
  border-top:1px solid var(--line-soft); color:var(--text-3); font-size:12.5px;
}

/* ------------------------------------------------------- leitura de dados */
.delta {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12.5px; font-weight:500; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.delta.up { color:var(--pos); }
.delta.down { color:var(--neg); }
.delta svg { flex:none; }

.meter { height:4px; border-radius:var(--pill); background:var(--line-soft); overflow:hidden; }
.meter i {
  display:block; height:100%; border-radius:var(--pill);
  background:linear-gradient(90deg, var(--ink-400), var(--accent));
  transition:width var(--slow) var(--ease);
}
.meter.warn i { background:var(--warn); }
.meter.neg i { background:var(--neg); }

/* Controle segmentado com indicador deslizante — o padrão do macOS. */
.seg {
  position:relative; display:inline-flex; padding:3px; gap:2px; border-radius:var(--pill);
  background:var(--line-soft); max-width:100%; overflow-x:auto;
}
.seg .thumb {
  position:absolute; top:3px; bottom:3px; left:0; width:0;
  border-radius:var(--pill); background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  transition:transform var(--normal) var(--ease), width var(--normal) var(--ease);
  pointer-events:none;
}
.seg button {
  position:relative; z-index:1;
  border-radius:var(--pill); padding:7px 16px; font-size:13.5px; white-space:nowrap;
  color:var(--text-2); transition:color var(--fast) var(--ease);
}
.seg button:hover { color:var(--text); }
.seg button[aria-pressed="true"] { color:var(--text); font-weight:500; }
/* Sem o indicador (JS desligado), o botão marcado ainda se destaca. */
.seg:not(:has(.thumb)) button[aria-pressed="true"] { background:var(--surface); }

.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chips button {
  border:1px solid var(--line); border-radius:var(--pill); padding:6px 14px;
  font-size:13px; color:var(--text-2);
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease),
             background var(--fast) var(--ease), transform var(--fast) var(--ease-spring);
}
.chips button:hover { border-color:var(--ink-300); color:var(--text); }
.chips button:active { transform:scale(.95); }
.chips button[aria-pressed="true"] {
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
  box-shadow:0 3px 10px var(--accent-glow);
}

.grid { display:grid; gap:20px; }
.grid.g2 { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.grid.g3 { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }

.kv { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; }
.kv + .kv { border-top:1px solid var(--line-soft); }
.kv span { color:var(--text-2); font-size:14px; }
.kv b { font-weight:500; font-variant-numeric:tabular-nums; }

.stack { display:flex; flex-direction:column; gap:10px; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.muted { color:var(--text-2); }
.dim { color:var(--text-3); }
.tiny { font-size:12.5px; }

/* ------------------------------------------------------------- movimento */
/*
  O bloco só se esconde quando existe JavaScript para revelá-lo: a classe
  `anima` é posta na raiz pela própria página. Sem script — ou com um
  observador que nunca dispara, que acontece em aba de fundo e em janela que
  parou de compor — o conteúdo simplesmente aparece. Página em branco não se lê.
*/
.fade { transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
:root.anima .fade:not(.in) { opacity:0; transform:translateY(16px); }

/* Esqueleto: enquanto o número não chegou, o lugar dele já existe. */
.skeleton {
  background:linear-gradient(90deg, var(--line-soft) 25%, var(--surface-2) 50%, var(--line-soft) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
  border-radius:8px; color:transparent !important;
}
@keyframes shimmer { to { background-position:-200% 0; } }

/* Traço do gráfico se desenhando da esquerda para a direita. */
@keyframes draw { to { stroke-dashoffset:0; } }
.drawing { animation:draw 1.1s var(--ease) forwards; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  :root.anima .fade:not(.in) { opacity:1; transform:none; }
}

@media (max-width:980px) {
  .split { grid-template-columns:1fr; }
  nav.bar .links { display:none; }
}
@media (max-width:560px) {
  .wrap, nav.bar .inner, footer.page { padding-left:18px; padding-right:18px; }
  .card { padding:24px; }
}

/* --------------------------------------------------------- barra lateral */
/*
   O painel é um aplicativo, não um site: a navegação mora numa coluna fixa à
   esquerda, como a barra lateral do Finder. O item ativo é uma pílula que
   DESLIZA entre os itens em vez de piscar de um lugar para o outro — é o mesmo
   indicador do controle segmentado, virado de lado. Uma família de formas só.
*/
.side {
  position:fixed; top:0; left:0; bottom:0; width:var(--side); z-index:30;
  display:flex; flex-direction:column;
  padding:18px 14px 14px;
  /* Longhands: cor e imagem separadas, senão a cor não pinta. */
  background-color:var(--side-bg);
  background-image:var(--side-tint);
  background-repeat:no-repeat;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-right:1px solid var(--line-soft);
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none;
}
.side::-webkit-scrollbar { width:0; height:0; }

.side .brand {
  display:flex; align-items:center; gap:11px; padding:6px 12px 18px;
  text-decoration:none; color:inherit;
}

.side .nav { position:relative; display:flex; flex-direction:column; gap:2px; }
.side .group {
  padding:19px 15px 7px; font-size:10.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-3);
}
.side .nav > .group:first-of-type { padding-top:2px; }

/* Um indicador só, para a coluna inteira. */
.side .thumb {
  position:absolute; left:0; right:0; top:0; height:0; opacity:0;
  border-radius:var(--pill);
  background:linear-gradient(130deg, var(--ink-400), var(--accent));
  box-shadow:0 6px 18px var(--accent-glow);
  transition:transform var(--normal) var(--ease), height var(--normal) var(--ease),
             opacity var(--fast) var(--ease);
  pointer-events:none;
}

.side a.item {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:12px;
  padding:10px 15px; border-radius:var(--pill);
  color:var(--text-2); text-decoration:none; font-size:14px; white-space:nowrap;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.side a.item svg {
  flex:none; opacity:.72;
  transition:transform var(--fast) var(--ease-spring), opacity var(--fast) var(--ease);
}
.side a.item:hover { color:var(--text); background:var(--line-soft); }
.side a.item:hover svg { transform:scale(1.09); opacity:1; }
.side a.item.on { color:var(--on-accent); font-weight:500; background:transparent; }
.side a.item.on svg { opacity:1; }
.side a.item .tail { margin-left:auto; opacity:.5; }
/* Sem JS não há indicador — aí o próprio item se pinta. */
.side .nav:not(:has(.thumb)) a.item.on { background:var(--accent); }

.side .foot {
  margin-top:auto; padding:13px 7px 0; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:5px;
}
.side .foot .who { flex:1; min-width:0; }
.side .foot .who > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Botão de menu e véu: só existem quando a coluna não cabe. */
.menubtn {
  display:none; position:fixed; top:14px; left:14px; z-index:32;
  width:40px; height:40px; border-radius:50%; place-items:center;
  color:var(--text);
  background-color:var(--nav);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:var(--shadow);
  transition:transform var(--fast) var(--ease-spring);
}
.menubtn:active { transform:scale(.92); }
.scrim {
  position:fixed; inset:0; z-index:29; background:rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity var(--normal) var(--ease);
}
.scrim.on { opacity:1; pointer-events:auto; }

@media (max-width:1120px) { :root { --side:226px; } }
@media (max-width:900px) {
  .side {
    transform:translateX(-100%);
    transition:transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
  }
  .side.open { transform:none; box-shadow:var(--shadow-lg); }
  .menubtn { display:grid; }
}

/* ------------------------------------------------------------- componentes */
/*
   O que veio depois da primeira geração de telas. Mesma disciplina: nada aqui
   inventa uma quinta forma — tudo sai do cartão 20px, da pílula, da barra 4px
   e do ponto 6px.
*/

/* Uma tela por vez. O painel virou aplicativo: a navegação troca de tela em
   vez de rolar a página inteira. */
.view { display:none; }
.view.on { display:block; animation:view-in var(--normal) var(--ease); }
@keyframes view-in { from { opacity:0; transform:translateY(10px); } }

/* Selo curto: estado, categoria, "em breve". */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:500; letter-spacing:.01em;
  padding:3px 9px; border-radius:var(--pill);
  background:var(--line-soft); color:var(--text-2); white-space:nowrap;
}
.badge.accent { background:var(--accent-soft); color:var(--text); }
.badge.pos { background:rgba(10,125,50,.12); color:var(--pos); }
.badge.neg { background:rgba(201,37,45,.12); color:var(--neg); }
.badge.warn { background:rgba(154,98,0,.14); color:var(--warn); }
:root[data-theme="dark"] .badge.pos { background:rgba(48,209,88,.16); }
:root[data-theme="dark"] .badge.neg { background:rgba(255,69,58,.16); }
:root[data-theme="dark"] .badge.warn { background:rgba(255,214,10,.16); }

/* Bloco de número com rótulo. A unidade de leitura do painel. */
.tile { display:flex; flex-direction:column; gap:5px; }
.tile .k {
  color:var(--text-3); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
}
.tile .v { font-size:23px; font-weight:600; letter-spacing:-.026em; font-variant-numeric:tabular-nums; }
.tile .v.lg { font-size:30px; letter-spacing:-.03em; }

/* Barra de progresso com rótulo — marco, meta, participação. */
.progress { height:6px; border-radius:var(--pill); background:var(--line-soft); overflow:hidden; }
.progress i {
  display:block; height:100%; border-radius:var(--pill); width:0;
  background:linear-gradient(90deg, var(--ink-400), var(--accent));
  transition:width var(--slow) var(--ease);
}

/* Campo de copiar: o valor é o botão. */
.copyfield {
  display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--pill); padding:6px 6px 6px 16px; max-width:100%;
}
.copyfield code {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13.5px; color:var(--text-2);
}
.copyfield .btn { flex:none; }

/* Vazio com voz: diz o que fazer, não só que não há nada. */
.empty-state { text-align:center; padding:52px 24px; }
.empty-state .ring {
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);
}
.empty-state b { display:block; font-weight:600; margin-bottom:6px; }
.empty-state p { color:var(--text-3); font-size:13.5px; margin:0 auto; max-width:34ch; }

/* Paginação por página — para gente, não para robô. */
.pager {
  display:flex; align-items:center; gap:12px; padding-top:18px;
  border-top:1px solid var(--line-soft); margin-top:8px;
}
.pager .conta { color:var(--text-3); font-size:12.5px; font-variant-numeric:tabular-nums; }
.pager .setas { margin-left:auto; display:flex; gap:6px; }
.pager button {
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--text-2);
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease),
             background var(--fast) var(--ease), transform var(--fast) var(--ease-spring);
}
.pager button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.pager button:active:not(:disabled) { transform:scale(.9); }
.pager button:disabled { opacity:.3; cursor:default; }

/* Marca d'água de identidade: iniciais quando não há foto. */
.avatar {
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:12px; font-weight:600;
  background:var(--accent-soft); color:var(--accent);
}
.avatar.lg { width:64px; height:64px; font-size:22px; }

/* Campo de valor grande: o número é o protagonista, o R$ é apoio. */
.amount-field {
  display:flex; align-items:baseline; gap:10px;
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); padding:18px 20px;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.amount-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.amount-field span { color:var(--text-3); font-size:18px; }
.amount-field input {
  border:0; background:none; padding:0; width:100%;
  font-size:34px; font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.amount-field input:focus { box-shadow:none; }

/* QR: quadrado branco, sempre. Leitor não gosta de fundo escuro. */
.qr {
  background:#fff; border-radius:var(--r-sm); padding:14px; display:block;
  width:min(230px, 100%); aspect-ratio:1; box-shadow:var(--shadow);
}
.qr svg { display:block; width:100%; height:100%; }

@media (max-width:560px) {
  .amount-field input { font-size:27px; }
}

/* ------------------------------------------------------------------ objetos */
/*
   A segunda leva de componentes: o que faltava para as telas pararem de ser
   tabela e virarem coisas. Mesma disciplina — cartão, pílula, barra, ponto.
*/

/* Selo de ícone: um quadrado arredondado com o desenho dentro. É o que dá
   identidade a uma integração, a um passo, a um objeto qualquer. */
.glyph {
  width:40px; height:40px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--text);
  transition:transform var(--fast) var(--ease-spring), background var(--fast) var(--ease);
}
.glyph.lg { width:52px; height:52px; border-radius:15px; }
.glyph.sm { width:30px; height:30px; border-radius:9px; }
.glyph.forte { background:var(--accent); color:var(--on-accent); }
.glyph.fraco { background:var(--line-soft); color:var(--text-3); }
a:hover > .glyph, .card:hover .glyph { transform:scale(1.06); }

/* Cartão-objeto: a unidade de "uma coisa" — integração, adquirente, link.
   Sempre com selo à esquerda, título, apoio, e ações no rodapé. */
.obj {
  display:flex; flex-direction:column; gap:14px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:22px;
  transition:transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease),
             border-color var(--normal) var(--ease);
}
.obj.clicavel { cursor:pointer; text-decoration:none; color:inherit; }
.obj.clicavel:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:transparent; }
.obj .topo { display:flex; align-items:flex-start; gap:14px; }
.obj .topo .txt { flex:1; min-width:0; }
.obj .topo b { display:block; font-size:15px; letter-spacing:-.01em; }
.obj .topo p { margin:5px 0 0; color:var(--text-2); font-size:13.5px; }
.obj .pe { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:2px; }
.obj.apagado { opacity:.62; }

/* Banner: faixa larga com o gráfico da marca respirando atrás. */
.banner {
  position:relative; overflow:hidden;
  border-radius:26px; padding:52px 44px;
  background-color:var(--surface-tint);
  border:1px solid var(--line-soft);
}
.banner > * { position:relative; z-index:1; }
.banner .fundo {
  position:absolute; inset:0; z-index:0; opacity:.5;
  color:var(--text-3);
  pointer-events:none;
}
.banner .fundo svg { width:100%; height:100%; display:block; }
.banner h2 {
  font-size:clamp(26px, 3.6vw, 40px); line-height:1.08; letter-spacing:-.03em;
  margin:14px 0 12px;
}
.banner p { color:var(--text-2); font-size:16px; margin:0; max-width:54ch; }
.banner.baixo { padding:34px; border-radius:var(--r); }

/* Respiração: o motivo da marca — oxigênio entrando e saindo. */
@keyframes respira {
  0%, 100% { transform:scale(1); opacity:.55; }
  50%      { transform:scale(1.055); opacity:.95; }
}
@keyframes deriva {
  0%   { transform:translate3d(0,0,0); }
  50%  { transform:translate3d(10px,-14px,0); }
  100% { transform:translate3d(0,0,0); }
}
.respira { animation:respira 6s var(--ease) infinite; transform-origin:center; }
.deriva { animation:deriva 11s var(--ease) infinite; }

/* Dobra: o resto do formulário, escondido até alguém precisar. */
.dobra > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  color:var(--text-2); font-size:13.5px; padding:10px 0;
  transition:color var(--fast) var(--ease);
}
.dobra > summary::-webkit-details-marker { display:none; }
.dobra > summary:hover { color:var(--text); }
.dobra > summary svg { transition:transform var(--normal) var(--ease); }
.dobra[open] > summary svg { transform:rotate(90deg); }
.dobra .corpo { padding-top:6px; animation:view-in var(--normal) var(--ease); }

/* Passos numerados: para fluxos que precisam ser lidos em ordem. */
.passos { display:grid; gap:18px; counter-reset:passo; }
.passos > li { display:flex; gap:14px; align-items:flex-start; list-style:none; }
.passos > li::before {
  counter-increment:passo; content:counter(passo);
  width:26px; height:26px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:12px; font-weight:600;
  background:var(--accent); color:var(--on-accent);
}
.passos b { display:block; font-size:14.5px; }
.passos p { margin:4px 0 0; color:var(--text-2); font-size:13.5px; }

/* Placa de prêmio: um objeto físico, não um cartão com texto. */
.placa {
  position:relative; aspect-ratio:1.4; border-radius:var(--r-sm);
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(145deg, #3a3a3c, #1d1d1f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--shadow);
}
.placa.presa { background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-soft); }
.placa .grade {
  position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(var(--on-accent) 1px, transparent 1px),
                   linear-gradient(90deg, var(--on-accent) 1px, transparent 1px);
  background-size:14px 14px;
}
.placa.presa .grade { opacity:.05; background-image:linear-gradient(var(--text) 1px, transparent 1px),
                   linear-gradient(90deg, var(--text) 1px, transparent 1px); }
.placa .miolo { position:relative; text-align:center; color:#fff; }
.placa.presa .miolo { color:var(--text-3); }
.placa .miolo .nome {
  font-size:27px; font-weight:600; letter-spacing:-.03em; line-height:1.1;
}
.placa .miolo .marca {
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.7; margin-top:2px;
}
.placa .cadeado {
  position:absolute; top:12px; right:12px; color:var(--text-3);
}

/* Campo com prefixo colado: R$, %, https:// */
.comprefixo { display:flex; align-items:stretch; }
.comprefixo .pre {
  display:grid; place-items:center; padding:0 13px;
  background:var(--surface-2); border:1px solid var(--line); border-right:0;
  border-radius:12px 0 0 12px; color:var(--text-3); font-size:13px; white-space:nowrap;
}
.comprefixo input { border-radius:0 12px 12px 0; }

@media (max-width:560px) {
  .banner { padding:34px 24px; border-radius:20px; }
}

/* ------------------------------------------------------------------ monitor

   O farol é a única coisa da tela que pode ser lida de longe. Um administrador
   olha para isto de passagem, e o que ele precisa saber em meio segundo é se
   pode continuar andando. */
.farol {
  width:12px; height:12px; border-radius:50%; flex:none;
  background:var(--text-3); position:relative;
}
.farol.ok  { background:var(--pos); box-shadow:0 0 0 4px color-mix(in srgb, var(--pos) 16%, transparent); }
.farol.mid { background:var(--warn); box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); }
.farol.bad { background:var(--neg); box-shadow:0 0 0 4px color-mix(in srgb, var(--neg) 16%, transparent); }
.farol.dim { background:var(--text-3); }

/* Só o farol ruim pulsa. Se todos pulsassem, nenhum chamaria atenção. */
.farol.bad::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--neg); animation:pulso 1.8s var(--ease) infinite;
}
@keyframes pulso {
  0%   { transform:scale(1); opacity:.55; }
  70%  { transform:scale(2.6); opacity:0; }
  100% { transform:scale(2.6); opacity:0; }
}

.alertas { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.alerta {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:12px; font-size:13px;
  color:var(--neg);
  background:color-mix(in srgb, var(--neg) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--neg) 20%, transparent);
}
.alerta svg { flex:none; }

.monitor-linha { margin-bottom:14px; border-left:3px solid transparent; }
.monitor-linha.bad { border-left-color:var(--neg); }
.monitor-linha.mid { border-left-color:var(--warn); }
.monitor-linha.ok  { border-left-color:var(--pos); }

.badge.neg {
  color:var(--neg);
  background:color-mix(in srgb, var(--neg) 10%, transparent);
  border-color:color-mix(in srgb, var(--neg) 24%, transparent);
}

/* --------------------------------------------------------------- indicações */
.indicacao { display:flex; flex-direction:column; }
.indicacao p { color:var(--text-2); }
.perguntas summary {
  cursor:pointer; color:var(--text-2); list-style:none;
  padding:9px 0; border-top:1px solid var(--line-soft);
  transition:color var(--fast) var(--ease);
}
.perguntas summary::-webkit-details-marker { display:none; }
.perguntas summary::before {
  content:'+'; display:inline-block; width:14px;
  font-weight:600; color:var(--text-3);
  transition:transform var(--normal) var(--ease-spring);
}
.perguntas[open] summary::before { content:'−'; }
.perguntas summary:hover { color:var(--text); }
.perguntas ul { margin:4px 0 0; padding-left:22px; color:var(--text-2); line-height:1.7; }
.perguntas li { margin-bottom:4px; }

/* O diálogo de cadastro cabe em duas colunas sem ficar apertado. */
.dupla { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.select.block { display:block; }
.select.block select { width:100%; }
@media (max-width:560px) { .dupla { grid-template-columns:1fr; } }

/* Cadastrada mas não conectada: o aviso que responde "por que ela não aparece
   na lista?" no lugar exato em que a pergunta nasce. */
.aviso-conexao {
  margin-top:16px; padding:14px 16px; border-radius:12px;
  background:color-mix(in srgb, var(--warn) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 22%, transparent);
  font-size:12.5px; line-height:1.6;
}
.aviso-conexao b { display:block; margin-bottom:5px; }
.aviso-conexao p { margin:0; color:var(--text-2); }

/* =========================================================== movimento

   Três regras que valem para a folha inteira.

   1. Nada se move só para se mover. Cada animação daqui responde a uma
      pergunta: o que mudou, o que chegou, o que está errado.
   2. Entrada é curta e de baixo para cima; saída não existe. Elemento que sai
      com animação segura a tela de quem só queria clicar no próximo.
   3. Quem pediu menos movimento recebe menos movimento — inclusive o farol
      vermelho, que continua vermelho sem pulsar.
*/

/* A revelação ficou mais curta e mais rasa. 16px de deslocamento com .62s de
   duração é bonito na primeira vez e cansativo na vigésima — e este é um
   painel que se abre vinte vezes por dia. */
:root.anima .fade:not(.in) { opacity:0; transform:translateY(10px); }
.fade { transition:opacity .42s var(--ease), transform .42s var(--ease); }

/* Trocar de tela é a ação mais repetida do painel: ela precisa ser a mais
   rápida de todas, ou o aplicativo inteiro parece lento. */
.view.on { animation:view-in .22s var(--ease); }
@keyframes view-in { from { opacity:0; transform:translateY(6px); } }

/* O item do menu que recebe o clique afunda um pouco. É o retorno tátil que
   diz "eu ouvi", antes mesmo de a tela trocar. */
.side .item { transition:background var(--fast) var(--ease), color var(--fast) var(--ease), transform .1s var(--ease); }
.side .item:active { transform:scale(.975); }

/* Botão: mesma ideia, com mola na volta. */
.btn:active:not(:disabled) { transform:scale(.97); }

/* Números que mudam sozinhos piscam de leve quando chegam. Sem isto, o painel
   atualiza a cada 20 segundos e ninguém percebe que atualizou. */
@keyframes chegou {
  from { background:color-mix(in srgb, var(--accent) 14%, transparent); }
  to   { background:transparent; }
}
.chegou { animation:chegou 1.1s var(--ease); border-radius:8px; }

/* ------------------------------------------------- quem pediu menos movimento

   `prefers-reduced-motion` não é preferência estética: para parte das pessoas
   movimento na tela causa enjoo de verdade. Aqui tudo para — e o que estava
   escondido esperando uma animação aparece, porque o risco de respeitar a
   preferência não pode ser uma página em branco. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  :root.anima .fade:not(.in) { opacity:1; transform:none; }
  .respira, .deriva { animation:none; }
  .farol.bad::after { animation:none; opacity:0; }
  .skeleton { animation:none; }
}