@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ══════════════════════════════════════════════════════
   ROOT / TOKENS
══════════════════════════════════════════════════════ */
:root {
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Sora', sans-serif;
  --radius:        12px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --sidebar-w:     256px;
  --sidebar-icon:  64px;
  --topbar-h:      60px;
  --bottom-nav-h:  76px;
  --ease:          cubic-bezier(.4, 0, .2, 1);
  --dur:           .18s;
  --dur-slow:      .3s;
  --glass-blur:    24px;
  --nav-inactive:  #64748b;
}

[data-theme="dark"] {
  --bg:             #0a0f1a;
  --bg2:            #101724;
  --bg3:            #161e2f;
  --bg4:            #1e2740;
  --bg-grad:        linear-gradient(135deg, #0a0f1a 0%, #0d1520 50%, #0a1228 100%);
  --blob-1:         radial-gradient(circle, rgba(0, 212, 160, .15) 0%, rgba(0, 212, 160, .05) 40%, transparent 70%);
  --blob-2:         radial-gradient(circle, rgba(59, 130, 246, .10) 0%, rgba(59, 130, 246, .03) 40%, transparent 70%);
  --glass-bg:       rgba(255, 255, 255, .05);
  --glass-bg-hi:    rgba(255, 255, 255, .08);
  --glass-border:   rgba(255, 255, 255, .10);
  --sidebar-bg:     rgba(10, 15, 26, .60);
  --sidebar-border: rgba(255, 255, 255, .06);
  --bnav-bg:        rgba(10, 15, 26, .75);
  --bnav-border:    rgba(255, 255, 255, .06);
  --border:         rgba(255, 255, 255, .08);
  --border-hi:      rgba(255, 255, 255, .12);
  --accent:         #00d4a0;
  --accent-dim:     rgba(0, 212, 160, .12);
  --accent-faint:   rgba(0, 212, 160, .06);
  --accent-pill:    rgba(0, 212, 160, .15);
  --accent-glow:    rgba(0, 212, 160, .22);
  --accent2:        #00b98c;
  --accent-chart:   rgba(0, 212, 160, .24);
  --purple:         #7c6fff;
  --purple-dim:     rgba(124, 111, 255, .12);
  --text:           #f1f5f9;
  --text-muted:     #475569;
  --text-dim:       #94a3b8;
  --red:            #ef4444;
  --red-dim:        rgba(239, 68, 68, .12);
  --warn-chart:     rgba(239, 68, 68, .20);
  --green:          #22d572;
  --green-dim:      rgba(34, 213, 114, .12);
  --yellow:         #f5a623;
  --orange:         #ff9f43;
  --orange-dim:     rgba(255, 159, 67, .14);
  --blue:           #4da8ff;
  --blue-dim:       rgba(77, 168, 255, .14);
  --shadow:         0 12px 48px rgba(0, 0, 0, .55);
  --shadow-sm:      0 4px 20px rgba(0, 0, 0, .35);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
  --shadow-xs:      0 1px 6px  rgba(0, 0, 0, .3);
}

[data-theme="light"] {
  --bg:             #f0f4f8;
  --bg2:            #ffffff;
  --bg3:            #e7ecf5;
  --bg4:            #dbe2ef;
  --bg-grad:        linear-gradient(135deg, #f0f4f8 0%, #e8f0f8 100%);
  --blob-1:         radial-gradient(circle, rgba(0, 179, 137, .12) 0%, rgba(0, 179, 137, .04) 40%, transparent 70%);
  --blob-2:         radial-gradient(circle, rgba(99, 102, 241, .08) 0%, rgba(99, 102, 241, .02) 40%, transparent 70%);
  --glass-bg:       rgba(255, 255, 255, .70);
  --glass-bg-hi:    rgba(255, 255, 255, .9);
  --glass-border:   rgba(255, 255, 255, .95);
  --sidebar-bg:     rgba(255, 255, 255, .55);
  --sidebar-border: rgba(0, 0, 0, .06);
  --bnav-bg:        rgba(255, 255, 255, .75);
  --bnav-border:    rgba(0, 0, 0, .06);
  --border:         rgba(15, 23, 42, .08);
  --border-hi:      rgba(15, 23, 42, .14);
  --accent:         #00b389;
  --accent-dim:     rgba(0, 179, 137, .12);
  --accent-faint:   rgba(0, 179, 137, .06);
  --accent-pill:    rgba(0, 179, 137, .15);
  --accent-glow:    rgba(0, 179, 137, .2);
  --accent2:        #009873;
  --accent-chart:   rgba(0, 179, 137, .22);
  --purple:         #5b4fd4;
  --purple-dim:     rgba(91, 79, 212, .10);
  --text:           #0f172a;
  --text-muted:     #94a3b8;
  --text-dim:       #64748b;
  --red:            #e53935;
  --red-dim:        rgba(229, 57, 53, .10);
  --warn-chart:     rgba(229, 57, 53, .18);
  --green:          #1da85c;
  --green-dim:      rgba(29, 168, 92, .10);
  --yellow:         #c97800;
  --orange:         #e07f1f;
  --orange-dim:     rgba(224, 127, 31, .12);
  --blue:           #2460d4;
  --blue-dim:       rgba(36, 96, 212, .10);
  --shadow:         0 12px 48px rgba(30, 45, 80, .12);
  --shadow-sm:      0 4px 20px rgba(30, 45, 80, .08);
  --shadow-card:    0 2px 16px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, 1);
  --shadow-xs:      0 1px 6px  rgba(30, 45, 80, .05);
}

[data-theme="system"] {
  --bg:             #f0f4f8;
  --bg2:            #ffffff;
  --bg3:            #e7ecf5;
  --bg4:            #dbe2ef;
  --bg-grad:        linear-gradient(135deg, #f0f4f8 0%, #e8f0f8 100%);
  --blob-1:         radial-gradient(circle, rgba(0, 179, 137, .12) 0%, rgba(0, 179, 137, .04) 40%, transparent 70%);
  --blob-2:         radial-gradient(circle, rgba(99, 102, 241, .08) 0%, rgba(99, 102, 241, .02) 40%, transparent 70%);
  --glass-bg:       rgba(255, 255, 255, .70);
  --glass-bg-hi:    rgba(255, 255, 255, .9);
  --glass-border:   rgba(255, 255, 255, .95);
  --sidebar-bg:     rgba(255, 255, 255, .55);
  --sidebar-border: rgba(0, 0, 0, .06);
  --bnav-bg:        rgba(255, 255, 255, .75);
  --bnav-border:    rgba(0, 0, 0, .06);
  --border:         rgba(15, 23, 42, .08);
  --border-hi:      rgba(15, 23, 42, .14);
  --accent:         #00b389;
  --accent-dim:     rgba(0, 179, 137, .12);
  --accent-faint:   rgba(0, 179, 137, .06);
  --accent-pill:    rgba(0, 179, 137, .15);
  --accent-glow:    rgba(0, 179, 137, .2);
  --accent2:        #009873;
  --accent-chart:   rgba(0, 179, 137, .22);
  --purple:         #5b4fd4;
  --purple-dim:     rgba(91, 79, 212, .10);
  --text:           #0f172a;
  --text-muted:     #94a3b8;
  --text-dim:       #64748b;
  --red:            #e53935;
  --red-dim:        rgba(229, 57, 53, .10);
  --warn-chart:     rgba(229, 57, 53, .18);
  --green:          #1da85c;
  --green-dim:      rgba(29, 168, 92, .10);
  --yellow:         #c97800;
  --orange:         #e07f1f;
  --orange-dim:     rgba(224, 127, 31, .12);
  --blue:           #2460d4;
  --blue-dim:       rgba(36, 96, 212, .10);
  --shadow:         0 12px 48px rgba(30, 45, 80, .12);
  --shadow-sm:      0 4px 20px rgba(30, 45, 80, .08);
  --shadow-card:    0 2px 16px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, 1);
  --shadow-xs:      0 1px 6px  rgba(30, 45, 80, .05);
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg:             #0a0f1a;
    --bg2:            #101724;
    --bg3:            #161e2f;
    --bg4:            #1e2740;
    --bg-grad:        linear-gradient(135deg, #0a0f1a 0%, #0d1520 50%, #0a1228 100%);
    --blob-1:         radial-gradient(circle, rgba(0, 212, 160, .15) 0%, rgba(0, 212, 160, .05) 40%, transparent 70%);
    --blob-2:         radial-gradient(circle, rgba(59, 130, 246, .10) 0%, rgba(59, 130, 246, .03) 40%, transparent 70%);
    --glass-bg:       rgba(255, 255, 255, .05);
    --glass-bg-hi:    rgba(255, 255, 255, .08);
    --glass-border:   rgba(255, 255, 255, .10);
    --sidebar-bg:     rgba(10, 15, 26, .60);
    --sidebar-border: rgba(255, 255, 255, .06);
    --bnav-bg:        rgba(10, 15, 26, .75);
    --bnav-border:    rgba(255, 255, 255, .06);
    --border:         rgba(255, 255, 255, .08);
    --border-hi:      rgba(255, 255, 255, .12);
    --accent:         #00d4a0;
    --accent-dim:     rgba(0, 212, 160, .12);
    --accent-faint:   rgba(0, 212, 160, .06);
    --accent-pill:    rgba(0, 212, 160, .15);
    --accent-glow:    rgba(0, 212, 160, .22);
    --accent2:        #00b98c;
    --accent-chart:   rgba(0, 212, 160, .24);
    --purple:         #7c6fff;
    --purple-dim:     rgba(124, 111, 255, .12);
    --text:           #f1f5f9;
    --text-muted:     #475569;
    --text-dim:       #94a3b8;
    --red:            #ef4444;
    --red-dim:        rgba(239, 68, 68, .12);
    --warn-chart:     rgba(239, 68, 68, .20);
    --green:          #22d572;
    --green-dim:      rgba(34, 213, 114, .12);
    --yellow:         #f5a623;
    --orange:         #ff9f43;
    --orange-dim:     rgba(255, 159, 67, .14);
    --blue:           #4da8ff;
    --blue-dim:       rgba(77, 168, 255, .14);
    --shadow:         0 12px 48px rgba(0, 0, 0, .55);
    --shadow-sm:      0 4px 20px rgba(0, 0, 0, .35);
    --shadow-card:    0 4px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
    --shadow-xs:      0 1px 6px  rgba(0, 0, 0, .3);
  }
}

/* ══════════════════════════════════════════════════════
   RESET + BASE
══════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  position: relative;
  background: var(--bg-grad), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Blobs decorativos de fundo — dão matéria para o backdrop-filter desfocar ── */
body::before {
  content: '';
  position: fixed;
  top: -20vh;
  right: -10vw;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  border-radius: 50%;
  background: var(--blob-1);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  bottom: -15vh;
  left: -10vw;
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  border-radius: 50%;
  background: var(--blob-2);
  pointer-events: none;
  z-index: 0;
}

/* Conteúdo acima dos blobs */
.sidebar,
.main {
  position: relative;
  z-index: 1;
}

/* Card glass utilitário */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Valores monetários — Sora, peso alto, tracking apertado */
.valor-financeiro,
.saldo-valor,
.lista-valor,
.mes-resumo-valor,
.cat-linha-valor,
.caixinha-mini-meta,
.lcard-valor,
.ccard-valor {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}