/* Layout: SaaS fintech. Sidebar fixa no desktop, navegação inferior no celular. Branco + preto estrutural + roxo elétrico da marca. */
:root{
  --bg:#F6F6F9; --surface:#FFFFFF; --surface2:#F3F2F8; --fg:#0B0B0F; --muted:#6A6A78; --line:#E7E6EE;
  --hero-a:#6A1BFA; --hero-b:#3B08A8; --topbg:#5B12F4;
  --brand:#5B12F4; --brand-fg:#FFFFFF; --brand-soft:#EEE8FE; --brand-deep:#3B08A8; --ink:#0B0B0F;
  --pos:#0A8F55; --pos-soft:#DFF4EA; --neg:#D12A45; --neg-soft:#FCE4E8; --warn:#B26A00; --warn-soft:#FDEFD3;
  --c1:#5B12F4; --c2:#0B0B0F; --c3:#8E63FF; --c4:#6A6A78; --c5:#C3AEFF; --c6:#B9B9C6;
  --shadow:0 1px 2px rgba(20,10,50,.05),0 4px 16px rgba(20,10,50,.05);
  --font-display:"Sora","Helvetica Neue",Arial,sans-serif; --font-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#09090D; --surface:#14141B; --surface2:#1C1C26; --fg:#F4F4F8; --muted:#9C9CB0; --line:#262633;
  --brand:#8F63FF; --brand-fg:#0B0620; --brand-soft:#241B45; --brand-deep:#2A0E78; --ink:#F4F4F8; --hero-a:#4A16C9; --hero-b:#2A0E78; --topbg:#2A0E78;
  --pos:#4FD598; --pos-soft:#10372A; --neg:#FF7B94; --neg-soft:#40182A; --warn:#F0B35A; --warn-soft:#3A2B0E;
  --c1:#8F63FF; --c2:#F4F4F8; --c3:#5B12F4; --c4:#9C9CB0; --c5:#4A3A86; --c6:#5A5A6C;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{
  --hero-a:#4A16C9; --hero-b:#2A0E78; --topbg:#2A0E78;
  --bg:#09090D; --surface:#14141B; --surface2:#1C1C26; --fg:#F4F4F8; --muted:#9C9CB0; --line:#262633;
  --brand:#8F63FF; --brand-fg:#0B0620; --brand-soft:#241B45; --brand-deep:#2A0E78; --ink:#F4F4F8;
  --pos:#4FD598; --pos-soft:#10372A; --neg:#FF7B94; --neg-soft:#40182A; --warn:#F0B35A; --warn-soft:#3A2B0E;
  --c1:#8F63FF; --c2:#F4F4F8; --c3:#5B12F4; --c4:#9C9CB0; --c5:#4A3A86; --c6:#5A5A6C;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.35);color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:15px/1.45 var(--font-body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
h1,h2,h3{margin:0}

/* ===== BASE DE DESIGN (7.63.0) — escalas únicas. Use estes tokens em vez de números soltos. ===== */
:root{
  /* raios */
  --r-2xs:4px;--r-xs:8px;--r-sm:10px;--r-md:12px;--r-lg:14px;--r-xl:16px;--r-2xl:20px;--r-3xl:24px;--r-4xl:28px;--r-pill:999px;
  /* tipografia */
  --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-base:15px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:20px;--fs-2xl2:22px;--fs-3xl:24px;--fs-3xl2:26px;--fs-4xl:28px;--fs-5xl:32px;--fs-6xl:36px;
  --fw-reg:400;--fw-med:500;--fw-semi:600;--fw-bold:700;--fw-black:800;
  --lh-tight:1.2;--lh-base:1.45;
  /* espaçamentos (múltiplos de 2) */
  --sp-0:2px;--sp-1:4px;--sp-2:6px;--sp-3:8px;--sp-4:10px;--sp-5:12px;--sp-6:14px;--sp-7:16px;--sp-8:20px;--sp-9:24px;
  /* cores fixas */
  --white:#fff;--amber:#F59E0B;--amber-ink:#B45309;
  /* estados: sucesso, alerta, erro e informação (cada um tem cor, fundo suave e borda) */
  --success:var(--pos);--success-soft:var(--pos-soft);
  --warning:var(--warn);--warning-soft:var(--warn-soft);
  --danger:var(--neg);--danger-soft:var(--neg-soft);
  --info:#1D5FD1;--info-soft:#E3EDFC;
  --success-line:color-mix(in srgb,var(--pos) 35%,transparent);--warning-line:color-mix(in srgb,var(--warn) 35%,transparent);
  --danger-line:color-mix(in srgb,var(--neg) 35%,transparent);--info-line:color-mix(in srgb,var(--info) 35%,transparent);
  /* títulos de bloco */
  --title-block:var(--fw-bold) var(--fs-base) var(--font-display);   /* título de card / seção */
  --title-block-ls:-.01em;
  --eyebrow-size:var(--fs-xs);--eyebrow-ls:.04em;                    /* rótulo pequeno em maiúsculas */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--info:#7FB0FF;--info-soft:#13294D}}
:root[data-theme="dark"]{--info:#7FB0FF;--info-soft:#13294D}
/* estados padrão (selo / aviso) — mesma regra para sucesso, alerta, erro e informação */
.pill.info,.st-info{background:var(--info-soft);color:var(--info)}
.pill.err,.pill.late,.st-err{background:var(--danger-soft);color:var(--danger)}
.pill.warn,.st-warn{background:var(--warning-soft);color:var(--warning)}
.pill.good,.st-ok{background:var(--success-soft);color:var(--success)}