/* Finanças (app estático) — visual "7X": fundo quase-branco/preto puro, cartões
arredondados, acento monocromático (preto no claro, branco no escuro),
verde-menta só em chips/positivos, display font nos títulos e números.
Claro/escuro automáticos. Design system portado de assets/app.css (app local);
fontes carregadas via no index.html. */
* { box-sizing: border-box; }
/* o atributo hidden SEMPRE vence (senão display:flex dos campos o anula) */
[hidden] { display: none !important; }
:root {
color-scheme: light dark;
--bg: #fafafa;
--card: #ffffff;
--hairline: #ececec;
--linha-fina: #f1f1f1;
--ink: #111111;
--ink-forte: #050505;
--cinza: #3f3f46;
--mut: #71717a;
--mut2: #a1a1aa;
--accent: #111111; /* cor de marca/dados: preto no claro, branco no escuro */
--accent-inv: #ffffff;
--tile: #f1f1f1; /* quadradinho dos ícones e superfícies neutras */
--track: #ececec; /* trilho de barras */
--area: rgba(17, 17, 17, 0.06);
--pos: #059669;
--neg: #dc2626;
--mint-bg: #d3f8df; /* chip verde-menta da referência */
--mint-tx: #0c6b4a;
--amber: #b45309;
--amber-bg: #fff7e0;
--verm: #dc2626;
--verm-bg: #fdeeee;
--campo-borda: #e2e2e2;
--sombra: 0 1px 2px rgba(0, 0, 0, 0.03);
--anel: rgba(17, 17, 17, 0.12);
/* rampa monocromática dos gráficos categóricos (ordenados por valor) */
--c0: #111111; --c1: #3f3f3f; --c2: #6e6e6e;
--c3: #9a9a9a; --c4: #c2c2c2; --c-outros: #e2e2e2;
--disp: "Space Grotesk", "Inter", sans-serif;
--mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
/* tema escuro: pelo sistema (sem escolha explícita) OU forçado via
html[data-tema="escuro"] pelo botão de tema (js) */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
--bg: #050505;
--card: #0d0d0d;
--hairline: #1e1e1e;
--linha-fina: #181818;
--ink: #f5f5f5;
--ink-forte: #ffffff;
--cinza: #d4d4d8;
--mut: #a1a1aa;
--mut2: #74747d;
--accent: #ffffff;
--accent-inv: #0a0a0a;
--tile: #1a1a1a;
--track: #242424;
--area: rgba(255, 255, 255, 0.08);
--pos: #34d399;
--neg: #f87171;
--mint-bg: #d3f8df; /* o chip menta continua claro no escuro (referência) */
--mint-tx: #0c6b4a;
--amber: #f5a623;
--amber-bg: #2a2008;
--verm: #f87171;
--verm-bg: #2a1212;
--campo-borda: #2a2a2a;
--sombra: none;
--anel: rgba(255, 255, 255, 0.18);
--c0: #ffffff; --c1: #d0d0d0; --c2: #9d9d9d;
--c3: #6d6d6d; --c4: #454545; --c-outros: #262626;
}
}
/* mesmas variáveis, para quando a pessoa força o escuro num sistema claro
(manter em sincronia com o bloco acima) */
:root[data-tema="escuro"] {
--bg: #050505;
--card: #0d0d0d;
--hairline: #1e1e1e;
--linha-fina: #181818;
--ink: #f5f5f5;
--ink-forte: #ffffff;
--cinza: #d4d4d8;
--mut: #a1a1aa;
--mut2: #74747d;
--accent: #ffffff;
--accent-inv: #0a0a0a;
--tile: #1a1a1a;
--track: #242424;
--area: rgba(255, 255, 255, 0.08);
--pos: #34d399;
--neg: #f87171;
--mint-bg: #d3f8df;
--mint-tx: #0c6b4a;
--amber: #f5a623;
--amber-bg: #2a2008;
--verm: #f87171;
--verm-bg: #2a1212;
--campo-borda: #2a2a2a;
--sombra: none;
--anel: rgba(255, 255, 255, 0.18);
--c0: #ffffff; --c1: #d0d0d0; --c2: #9d9d9d;
--c3: #6d6d6d; --c4: #454545; --c-outros: #262626;
}
html, body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 15px/1.45 "Inter", "Segoe UI", system-ui, sans-serif;
}
a { color: var(--ink); }
/* ---------------- topo ---------------- */
.topo {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--hairline);
}
.topo-in {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 14px;
padding: 11px 24px;
}
.marca {
font-family: var(--disp);
font-weight: 700;
font-size: 15.5px;
letter-spacing: -0.01em;
color: var(--ink-forte);
display: flex;
align-items: center;
text-decoration: none;
}
/* logo Dino: o