/* Fontes servidas pelo próprio site (nada vai ao Google: LGPD). Os mesmos arquivos e declarações que o
   Google Fonts servia, só o subconjunto latin (cobre o português). Licença OFL em /static/fonts/.
   Arquivo de fonte nunca muda no lugar: versão nova = nome novo (o cache é de 1 ano). */
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/atkinson-hyperlegible-v12-latin-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/atkinson-hyperlegible-v12-latin-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/static/fonts/atkinson-hyperlegible-v12-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bricolage: um arquivo variável só, declarado nos 3 pesos como o Google fazia (render idêntico). */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
  src: url(/static/fonts/bricolage-grotesque-v9-latin-variable.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap;
  src: url(/static/fonts/bricolage-grotesque-v9-latin-variable.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url(/static/fonts/bricolage-grotesque-v9-latin-variable.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #14213D;
  --ink-soft: #4A5670;
  --ink-faint: #7C869B;
  --bg: #F3F5F2;
  --panel: #FFFFFF;
  --line: #DDE2DC;
  --cobalt: #2346A8;  /* azul-jacinto da marca Arazul */
  --cobalt-soft: #E4EBFA;
  --up: #1B7F5B;
  --up-soft: #DDF1E8;
  --down: #C2412D;
  --down-soft: #F8E2DD;
  --warn: #B7791F;
  --warn-soft: #F7ECD6;
  --radius-s: 6px;
  --radius-m: 10px;
  --noite: #14213D;          /* fundo escuro do menu e do cartão do coach (nos 2 temas) */
  --amarelo: #F6C343;        /* amarelo-atento: cor de AÇÃO, nunca de informação; só sobre fundo escuro */
  --btn-h: 48px;             /* botões do V2: 48 px de altura, cantos de 10 px (padrão do site) */
  --radius-btn: 10px;
  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
  color-scheme: light;
}
/* Tema escuro (T1): o script no <head> do index.html põe data-theme no <html> (chave arazul-tema, a mesma da landing) */
:root[data-theme="escuro"] {
  --ink: #E8ECF5; --ink-soft: #B3BCD0; --ink-faint: #8792AA;
  --bg: #0F1729; --panel: #172238; --line: #27344F;
  --cobalt: #7FA2F0; --cobalt-soft: #1E2E52;
  --up: #4CC492; --up-soft: #143A2D; --down: #F07A64; --down-soft: #45211C;
  --warn: #E3AE52; --warn-soft: #3E3019;
  --noite: #0A1020;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--cobalt); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: .9rem; }
.up { color: var(--up); } .down { color: var(--down); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Troca de tema (T1, igual à landing): esmaecer de 180 ms só durante a troca (classe posta pelo app.js), para
   nenhum hover mudar; com "reduzir movimento", a troca é seca (a regra acima perde para o !important daqui). */
html.trocando-tema, html.trocando-tema *, html.trocando-tema *::before, html.trocando-tema *::after {
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out, fill 180ms ease-out !important; }
@media (prefers-reduced-motion: reduce) {
  html.trocando-tema, html.trocando-tema *, html.trocando-tema *::before, html.trocando-tema *::after { transition: none !important; } }

/* ---------- Estrutura */
/* minmax(0, 1fr): o conteúdo pode encolher até a tela (com 1fr, a largura "natural" do formulário de Alertas
   empurrava a página para 442 px num celular de 375 e criava rolagem lateral) */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--noite); color: #fff; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; }
:where([data-theme="escuro"]) .side { border-right: 1px solid var(--line); }
/* Logo Arazul: em fundo escuro, sempre a versão "fundo-escuro" (arara sobre o quadrado claro) */
.brand { padding: 0 8px; }
.brand img { display: block; width: 176px; height: auto; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { color: #C9D2E6; text-decoration: none; padding: 9px 10px; border-radius: var(--radius-s); display: flex; gap: 10px; align-items: center; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a[aria-current="page"] { background: rgba(127,162,240,.18); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--amarelo); }
.nav svg { width: 18px; height: 18px; flex: none; }
.side .who { margin-top: auto; font-size: .85rem; color: #C9D2E6; padding: 0 8px; }
.side .who button { margin-top: 6px; }
main { padding: 32px clamp(16px, 4vw, 48px) 96px; max-width: 1080px; width: 100%; }
/* Troca de tela (B6b): a tela que sai fica visível e sem cliques até a nova chegar; a nova entra com esmaecer
   de 180 ms, só opacidade. "Reduzir movimento" desliga o esmaecer (regra global acima): troca seca. */
main.trocando { pointer-events: none; }
@keyframes entra-tela { from { opacity: 0; } to { opacity: 1; } }
main.entrando { animation: entra-tela 180ms ease-out; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { margin-top: 6px; max-width: 62ch; }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; padding: 6px; flex-direction: row; z-index: 5; gap: 0; }
  .brand, .side .who { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-between; }
  .nav a { flex: 1; min-width: 0; flex-direction: column; gap: 2px; font-size: .66rem; padding: 6px 2px; text-align: center; line-height: 1.2; }
  .nav a[aria-current="page"] { box-shadow: inset 0 3px 0 var(--amarelo); }
  main { padding-top: 20px; }
}

/* ---------- Superfícies */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 10px; gap: 12px; }

/* ---------- HUD do dia (elemento principal): cartão do coach, sempre escuro nos 2 temas */
.hud { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "coach main charges" "budget budget budget"; gap: 20px 28px; align-items: center;
  background: var(--noite); color: #fff; border-radius: 14px; padding: 24px 26px 52px; }
:where([data-theme="escuro"]) .hud { border: 1px solid var(--line); }
.hud > :not(.penas) { position: relative; z-index: 1; }
.hud[data-state="ok"] { --estado: #3FD08F; }
.hud[data-state="atencao"] { --estado: #F2B53C; }
.hud[data-state="pare"] { --estado: #F0644E; }

/* Coach arara num quadrado claro, anel e selo na cor do estado, semáforo ao lado. Tudo estático. */
.coach { grid-area: coach; display: flex; align-items: center; gap: 14px; }
.coach-face { position: relative; flex: none; width: 84px; height: 84px; border-radius: 24px; background: #F3F5F2;
  display: grid; place-items: center; box-shadow: 0 0 0 4px var(--estado), 0 0 22px color-mix(in srgb, var(--estado) 55%, transparent); }
.coach-face img { width: 64px; height: 64px; }
.coach-face .selo { position: absolute; right: -11px; bottom: -11px; width: 30px; height: 30px; padding: 5px;
  border-radius: 50%; background: var(--estado); color: #14213D; box-shadow: 0 0 0 3px var(--noite); }
.semaforo { flex: none; display: inline-flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 999px;
  background: #171B26; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.semaforo i { width: 14px; height: 14px; border-radius: 50%; opacity: .22; }
.semaforo .verde { background: #3FD08F; }
.semaforo .ambar { background: #F2B53C; }
.semaforo .vermelho { background: #F0644E; }
.hud[data-state="ok"] .semaforo .verde,
.hud[data-state="atencao"] .semaforo .ambar,
.hud[data-state="pare"] .semaforo .vermelho { opacity: 1; box-shadow: 0 0 10px var(--estado); }

.hud-main { grid-area: main; }
.hud-main h2 { color: #fff; font-size: 1.6rem; font-weight: 800; }
.hud-main p { color: #C9D2E6; margin-top: 6px; max-width: 58ch; }

/* "Quanto ainda pode perder hoje": o número que mais importa. Destaque pelo tamanho e pela posição, não pela cor. */
.budget { grid-area: budget; background: rgba(255,255,255,.05); border-radius: 12px; padding: 16px 18px; }
.budget-label { color: #C9D2E6; font-size: .9rem; }
.budget-row { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.budget-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.05; color: #fff; white-space: nowrap; }
.budget-of { color: #C9D2E6; font-size: .95rem; white-space: nowrap; }
.budget .track { height: 14px; background: #26324A; border-radius: 7px; overflow: hidden; }
.budget .fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #3FD08F, #7BE3B4); transition: width .6s ease; }
.budget .fill[data-level="mid"] { background: #F2B53C; }
.budget .fill[data-level="low"] { background: #F0644E; }

/* Zigue-zague das penas no pé do cartão (o mesmo traço do site, que vem da borda das penas da arara). */
.penas { display: block; width: 100%; pointer-events: none; }
.hud .penas { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; fill: rgba(127,162,240,.14); }

.charges { grid-area: charges; display: flex; flex-direction: column; align-items: end; gap: 8px; color: #C9D2E6; font-size: .85rem; }
.pips { display: flex; gap: 6px; }
.pips span { width: 14px; height: 22px; border-radius: 3px; border: 1.5px solid #7FA2F0; }
.pips span.used { background: #7FA2F0; }
.pips span.over { background: #F0644E; border-color: #F0644E; }
.big-num { white-space: nowrap; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: #fff; }
@media (max-width: 640px) {
  .hud { grid-template-columns: auto 1fr; grid-template-areas: "coach main" "budget budget" "charges charges";
    gap: 16px 18px; padding: 20px 18px 44px; }
  .coach { gap: 10px; }
  .coach-face { width: 64px; height: 64px; border-radius: 18px; }
  .coach-face img { width: 48px; height: 48px; }
  .coach-face .selo { width: 26px; height: 26px; padding: 4px; right: -9px; bottom: -9px; }
  .semaforo { gap: 4px; padding: 5px; }
  .semaforo i { width: 10px; height: 10px; }
  .hud-main h2 { font-size: 1.3rem; }
  .charges { flex-direction: row; justify-content: space-between; align-items: center; }
  .hud .penas { height: 28px; }
}

/* ---------- Lista de ativos (placar) */
.board { display: flex; flex-direction: column; }
.board-row { display: grid; grid-template-columns: 116px 120px 90px 1fr auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.board-row:last-child { border-bottom: 0; }
.board-row .sym { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.board-row .sym small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--ink-faint); }
.board-row button.link { justify-self: end; }
@media (max-width: 760px) { .board-row { grid-template-columns: 1fr auto; } .board-row .tags { grid-column: 1 / -1; } .board-row .chg { text-align: right; } .board-row > :nth-child(2) { display: none; } }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: .8rem; padding: 3px 9px; border-radius: 999px; background: var(--cobalt-soft); color: var(--ink); border: 0; font-family: inherit; cursor: help; }
.tag[data-tone="positive"] { background: var(--up-soft); }
.tag[data-tone="negative"] { background: var(--down-soft); }
.tag[data-tone="warning"] { background: var(--warn-soft); }

/* ---------- Formulários e botões */
label { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; color: var(--ink-soft); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 11px; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 3px var(--cobalt-soft); }
.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
/* Seletor de tema (T1, Ajustes): as 3 opções em linha, como as caixinhas (.check); o radio fica fora da altura de
   48 px dos campos do V2 */
.tema-box { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tema-box legend { padding: 0; margin-bottom: 8px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.tema-box label { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
main .tema-box input[type="radio"] { min-height: 0; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--cobalt); }
.tema-box p { flex-basis: 100%; margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
button { font: inherit; cursor: pointer; border-radius: var(--radius-s); border: 1px solid transparent; padding: 9px 16px; font-weight: 700; }
.btn { background: var(--cobalt); color: #fff; }
:where([data-theme="escuro"]) .btn { color: #0F1729; }
.btn:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-faint); }
/* "Sair": ação secundária sobre o azul-noite (protótipo do V2): contorno claro, 36 px, cantos de 10 px */
.side .btn-ghost { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--radius-btn);
  color: #C9D2E6; border-color: rgba(255,255,255,.2); font-size: .85rem; }
.side .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.45); }
button.link { background: none; border: 0; padding: 4px; color: var(--cobalt); font-weight: 700; }
button.danger { color: var(--down); }
button:disabled { opacity: .55; cursor: progress; }

/* Retorno de uma ação, em linha, perto do botão. Erro em vermelho; sucesso com o selo ✓ na cor de estado "ok"
   (o verde #3FD08F não tem contraste como texto sobre fundo claro: ele fica no selo, o texto na cor normal).
   Nunca amarelo, que é cor de ação. */
.action-line { margin: 0; font-size: .92rem; font-weight: 700; }
.row > .action-line, .banner > .action-line { flex-basis: 100%; }    /* em linha de botões: ocupa a linha de baixo */
.auth-form .action-error { color: #F0644E; }                          /* sobre o azul-noite do login */
.action-ok { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.action-ok .selo, #toast.ok .selo { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #3FD08F; color: #14213D; }
/* O item que mudou: selo ✓ pequeno ao lado do nome até a próxima ação (sem borda nem fundo no item) */
.just-done { display: inline-flex; vertical-align: -2px; margin-left: 6px; }
.just-done .selo { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: #3FD08F; color: #14213D; }

/* ---------- V2 em todas as telas do painel (Hoje no B3, Lista/Alertas/Playbooks/Risco no B5a,
   Diário/Ajustes/Assinatura no B5b). As janelas (Raio-X, confirmações) ficam fora do <main>: seguem o padrão antigo. */
main :is(.btn, .btn-ghost) { display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-h); padding: 0 20px; border-radius: var(--radius-btn); }
main .banner { border-left: 4px solid var(--warn); }  /* fundo claro: token de atenção, nunca o amarelo */
/* Campos na altura dos botões, cantos de 10 px (padrão dos campos do login, B4) */
main :is(input:not([type="checkbox"]), select) { min-height: var(--btn-h); border-radius: var(--radius-btn); }
/* "Sair" em Ajustes (o do menu some no celular): mesma forma do "Sair" do menu (ação secundária, 36 px, cantos de
   10 px), com o contorno do tema, porque aqui o fundo é claro */
main .btn-ghost.exit { min-height: 36px; padding: 0 12px; font-size: .85rem; }
/* Explicação de uma etiqueta: o cartão claro do B4c (sem o selo: é informação), logo abaixo das etiquetas */
.tag-explain { flex-basis: 100%; margin: 4px 0 0; padding: 10px 14px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 8px 24px rgba(10,16,32,.18); font-size: .9rem; }

/* ---------- Alertas e itens */
.item { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; }
.item:last-child { border-bottom: 0; }
.item .meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-faint); margin-top: 4px; }
.rule-text { font-size: .92rem; color: var(--ink-soft); margin-top: 2px; }
.pill { white-space: nowrap; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--cobalt-soft); }
.pill.off { background: var(--line); color: var(--ink-soft); }
.pill.high { background: var(--warn-soft); }
.insight { border-left: 3px solid var(--cobalt); padding: 4px 0 4px 12px; margin: 8px 0; }
.insight.warn { border-color: var(--warn); }
.insight.stop { border-color: var(--down); }
.tg-connect { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin: 12px 0; }
.qr { margin: 0; }
.qr svg { display: block; width: 230px; height: 230px; border-radius: 8px; image-rendering: pixelated; }  /* preto no branco, também no tema escuro */
details summary { cursor: pointer; }
.tg-steps { margin: 6px 0 10px; padding-left: 20px; }
.tg-steps li { margin: 3px 0; }
a.btn, a.btn-ghost { display: inline-block; padding: 9px 16px; border-radius: var(--radius-s); border: 1px solid transparent; font-weight: 700; text-decoration: none; }
a.btn-ghost { border-color: var(--line); }
@media (max-width: 600px) { .tg-connect { grid-template-columns: 1fr; } .qr { margin: 0 auto; } }

.playbook { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.playbook:last-child { border-bottom: 0; }
.playbook dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 12px 0 0; font-size: .92rem; }
.playbook dt { font-weight: 700; } .playbook dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 760px) { .playbook { grid-template-columns: 1fr; } }

.result { background: var(--cobalt-soft); border-radius: var(--radius-m); padding: 16px; }
.result .big { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; }

table.plain { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.plain th { text-align: left; color: var(--ink-faint); font-weight: 400; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.plain td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.table-wrap { overflow-x: auto; }

.banner { background: var(--warn-soft); border-radius: var(--radius-m); padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; font-size: .92rem; }
.empty { padding: 28px 8px; text-align: left; }
.empty p { margin: 6px 0 14px; color: var(--ink-soft); max-width: 52ch; }
.disclaimer { margin-top: 40px; font-size: .8rem; color: var(--ink-faint); max-width: 75ch; }
.disclaimer a { text-decoration: underline; text-underline-offset: 3px; }  /* link visível no texto pequeno e discreto */
.legal-links { white-space: nowrap; }  /* "Termos de uso · Privacidade" nunca parte no meio da linha */

/* ---------- Login com a voz do site: tudo no azul-noite, botão amarelo (ação), zigue-zague no pé */
.auth { background: var(--noite); color: #fff; }
.auth-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px;
  align-items: center; padding: 56px 24px 24px; min-height: calc(100vh - 230px); }
.auth-art { display: flex; flex-direction: column; gap: 22px; }
.auth-art .auth-logo { display: block; width: min(240px, 70vw); height: auto; }
.auth-art h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.6rem); max-width: 15ch; }
.auth-art p { color: #C9D2E6; font-size: 1.1rem; max-width: 42ch; }
.auth-art ul { color: #C9D2E6; padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.auth-form form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; margin-left: auto; }
.auth-form h2 { color: #fff; font-size: 1.6rem; }
.auth-form label, .auth-form .check { color: #C9D2E6; }
.auth-form input:not([type="checkbox"]) { min-height: var(--btn-h); border-radius: var(--radius-btn); background: #fff; color: #14213D; border-color: transparent; }
:where([data-theme="escuro"]) .auth-form input:not([type="checkbox"]) { background: var(--panel); color: var(--ink); border-color: var(--line); }
.auth-form input:focus { border-color: var(--amarelo); box-shadow: 0 0 0 3px rgba(246,195,67,.35); }
.auth-form .check { align-items: flex-start; }
.auth-form input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--amarelo); }
.auth-form .btn { width: 100%; min-height: var(--btn-h); border-radius: var(--radius-btn); font-size: 1rem; }
.btn-yellow, .btn.btn-yellow { background: var(--amarelo); color: #14213D; border: 0; }   /* só sobre fundo escuro */
.btn-yellow:hover { background: #FFD465; filter: none; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-links button.link { color: #C9D2E6; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.auth-links button.link:hover { color: #fff; }
.auth .penas { height: 90px; margin-top: 32px; fill: var(--bg); }
.auth-foot { background: var(--bg); padding: 8px 24px 40px; }
.auth-foot .disclaimer { max-width: 1180px; margin: 0 auto; }
/* Painel que não carregou (boot): mesma cara do login; mensagem no vermelho de estado sobre o azul-noite */
.auth-grid.boot-error { grid-template-columns: 1fr; }
.auth-art .boot-msg { color: #F0644E; font-weight: 700; font-size: 1.2rem; }
.boot-error .btn { min-height: var(--btn-h); border-radius: var(--radius-btn); padding: 0 28px; font-size: 1rem; }
/* Erro do login sai no aviso flutuante: no tema claro ele tem a mesma cor do fundo do login, então ganha contorno. */
body:has(.auth) #toast { box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 8px 24px rgba(0,0,0,.45); }
@media (max-width: 860px) {
  .auth-grid { grid-template-columns: 1fr; gap: 36px; padding: 36px 20px 8px; min-height: 0; }
  .auth-form form { margin-left: 0; max-width: none; }
  .auth .penas { height: 54px; margin-top: 24px; }
  .auth-foot { padding-bottom: 32px; }
}

/* ---------- Gráfico e modal */
.spark { width: 100%; height: 140px; display: block; }
dialog { border: 0; border-radius: 14px; padding: 0; max-width: min(640px, 94vw); width: 100%; background: var(--panel); color: var(--ink); }
dialog::backdrop { background: rgba(10, 16, 32, .55); }
#modal-body { padding: 24px; max-height: 86vh; overflow-y: auto; }
#toast { visibility: hidden; position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 10px; transition: transform .25s ease; z-index: 20; max-width: 90vw; }
#toast.show { visibility: visible; transform: translate(-50%, 0); }
/* Reserva para sucesso sem lugar na tela (ex.: depois de trocar a tela inteira): cartão claro no topo, com o selo ✓ */
#toast.ok { top: 24px; bottom: auto; transform: translate(-50%, -140px); display: flex; align-items: center; gap: 10px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(10,16,32,.18); }
#toast.ok.show { transform: translate(-50%, 0); }
@media (max-width: 860px) { #toast { bottom: 84px; } }