/* =====================================================
   FinançasPro v2 — Neon Perfumaria (tema preto puro)
   ===================================================== */

/* --- Tokens de design (Tema Escuro — preto + neon dourado) --- */
:root {
  --bg:          #050505;
  --surface:     #090909;
  --card:        #0c0c0c;
  --card-hover:  #121212;
  --border:      rgba(212,160,23,.11);
  --border-soft: rgba(212,160,23,.06);

  --text:        #F0F0F0;
  --text-2:      #909090;
  --text-3:      #555555;

  /* Dourado PuraMargem */
  --brand:       #D4A017;
  --brand-light: #F7DC6F;
  --brand-dark:  #B8860B;
  --brand-soft:  rgba(212,160,23,.12);
  --brand-hover: #F7DC6F;

  /* Neon glows */
  --neon-gold:      rgba(212,160,23,.6);
  --neon-gold-dim:  rgba(212,160,23,.25);
  --neon-green:     rgba(74,222,128,.45);
  --neon-red:       rgba(248,113,113,.45);

  /* Gradientes */
  --grad-gold:  linear-gradient(135deg, #FFE98A 0%, #D4A017 50%, #B8860B 100%);
  --grad-card:  linear-gradient(145deg, #0a0a0a 0%, #111111 100%);

  --income:      #4ade80;
  --income-soft: rgba(74,222,128,.1);
  --expense:     #f87171;
  --expense-soft:rgba(248,113,113,.1);
  --warn:        #fbbf24;
  --warn-soft:   rgba(251,191,36,.1);

  --nav-h:       64px;
  --fab-size:    56px;
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   20px;

  --shadow:      0 4px 20px rgba(0,0,0,.7);
  --shadow-lg:   0 12px 48px rgba(0,0,0,.8);
  --shadow-gold: 0 4px 22px rgba(212,160,23,.4), 0 0 40px rgba(212,160,23,.15);

  --transition:  .18s ease;
  --font:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;
}

/* --- Tema Claro --- */
[data-theme="light"] {
  --bg:           #F2F4F7;
  --surface:      #FFFFFF;
  --card:         #FFFFFF;
  --card-hover:   #F8FAFC;
  --border:       rgba(0,0,0,.09);
  --border-soft:  rgba(0,0,0,.05);
  --text:         #0F172A;
  --text-2:       #334155;
  --text-3:       #64748B;
  /* Brand no light = dourado escuro legível no branco */
  --brand:        #A07610;
  --brand-light:  #7A5A0C;
  --brand-soft:   rgba(160,118,16,.1);
  --income:       #15803D;
  --income-soft:  rgba(21,128,61,.1);
  --expense:      #B91C1C;
  --expense-soft: rgba(185,28,28,.1);
  --warn:         #B45309;
  --warn-soft:    rgba(180,83,9,.1);
  --shadow:       0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.12);
  --shadow-gold:  0 4px 14px rgba(160,118,16,.2);
  --neon-gold:    rgba(160,118,16,.3);
}

/* ══ Light theme — overrides de elementos hardcoded ══ */
[data-theme="light"] body { background: var(--bg); }

[data-theme="light"] #app {
  background:
    radial-gradient(ellipse 300px 200px at 80% 5%, rgba(212,160,23,.06), transparent),
    var(--bg);
}

[data-theme="light"] .app-header {
  background: rgba(255,255,255,.92);
  border-bottom-color: rgba(0,0,0,.07);
}

[data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,.96);
  border-top-color: rgba(0,0,0,.08);
}

/* Hero */
[data-theme="light"] .dash-hero {
  background: linear-gradient(135deg, #fff 0%, #fffdf4 100%);
  border-color: rgba(160,118,16,.3);
  box-shadow: 0 4px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(160,118,16,.2);
}
[data-theme="light"] .dash-hero-glow { display: none; }
[data-theme="light"] .dash-hero::before { opacity: .4; }
[data-theme="light"] .dash-hero-label { color: #A07610; }
[data-theme="light"] .dash-balance-main {
  color: #7A5A0C;
  text-shadow: none;
  animation: none;
}
[data-theme="light"] .dash-spark { filter: none; }
[data-theme="light"] .dash-spark-axis { color: #94A3B8; }
[data-theme="light"] .dash-month-badge {
  background: rgba(160,118,16,.1);
  color: #7A5A0C;
  border-color: rgba(160,118,16,.3);
}
[data-theme="light"] .dash-balance-delta.up   { background: rgba(21,128,61,.1);  color: #15803D; border-color: rgba(21,128,61,.25); }
[data-theme="light"] .dash-balance-delta.down { background: rgba(185,28,28,.1); color: #B91C1C; border-color: rgba(185,28,28,.25); }
[data-theme="light"] .dash-balance-delta.flat { background: rgba(0,0,0,.05); color: #64748B; border-color: rgba(0,0,0,.1); }

/* KPI cards */
[data-theme="light"] .kpi-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.07);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
[data-theme="light"] .kpi-label { color: #64748B; }
[data-theme="light"] .kpi-foot  { color: #94A3B8; }
[data-theme="light"] .kpi-income  .kpi-value { color: #15803D; text-shadow: none; }
[data-theme="light"] .kpi-expense .kpi-value { color: #B91C1C; text-shadow: none; }
[data-theme="light"] .kpi-savings .kpi-value { color: #7A5A0C; text-shadow: none; }
[data-theme="light"] .kpi-delta.up   { color: #15803D; background: rgba(21,128,61,.08); }
[data-theme="light"] .kpi-delta.down { color: #B91C1C; background: rgba(185,28,28,.08); }
[data-theme="light"] .kpi-delta.flat { color: #64748B; background: rgba(0,0,0,.05); }

/* Dashboard card (categorias, vencimentos) */
[data-theme="light"] .dash-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.07);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .dash-card::before { opacity: .5; }

/* Quick actions */
[data-theme="light"] .quick-action {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.07);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
[data-theme="light"] .quick-action:hover {
  background: #fffef6;
  border-color: rgba(212,160,23,.4);
  box-shadow: 0 4px 16px rgba(212,160,23,.15), 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="light"] .qa-icon { background: rgba(0,0,0,.07); }
[data-theme="light"] .qa-icon svg { color: #334155; }
[data-theme="light"] .qa-title { color: #0F172A; }
[data-theme="light"] .qa-sub   { color: #64748B; }
[data-theme="light"] .quick-action:hover .qa-title { color: #7A5A0C; }
[data-theme="light"] .quick-action:hover .qa-icon svg { color: #A07610; }

/* Categoria barras */
[data-theme="light"] .cat-bar-icon { background: rgba(0,0,0,.05); }
[data-theme="light"] .cat-bar-track { background: rgba(0,0,0,.07); }
[data-theme="light"] .cat-bar-name { color: #0F172A; }
[data-theme="light"] .cat-bar-value { color: #0F172A; }

/* Vencimentos */
[data-theme="light"] .payable-date {
  background: #F8FAFC;
  border-color: rgba(212,160,23,.3);
}
[data-theme="light"] .payable-row { border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .payable-desc { color: #0F172A; }

/* Section headers */
[data-theme="light"] .section-title {
  color: #64748B;
  text-shadow: none;
}
[data-theme="light"] .section-link { color: #A07610; }

/* Transações */
[data-theme="light"] .tx-item {
  background: #FFFFFF;
  border-color: rgba(0,0,0,.07);
}
[data-theme="light"] .tx-icon.income  { background: rgba(21,128,61,.12); }
[data-theme="light"] .tx-icon.expense { background: rgba(185,28,28,.1); }
[data-theme="light"] .tx-desc { color: #0F172A; }
[data-theme="light"] .tx-amount.income  { color: #15803D; text-shadow: none; }
[data-theme="light"] .tx-amount.expense { color: #B91C1C; text-shadow: none; }
[data-theme="light"] .text-income  { color: #15803D; text-shadow: none; }
[data-theme="light"] .text-expense { color: #B91C1C; text-shadow: none; }

/* Modais e sheets */
[data-theme="light"] .modal { background: #FFFFFF; }
[data-theme="light"] .sheet { background: #FFFFFF; }
[data-theme="light"] .modal-header { border-bottom-color: rgba(0,0,0,.08); }

/* Sidebar desktop */
[data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,.97);
  border-right-color: rgba(0,0,0,.08);
  box-shadow: 2px 0 16px rgba(0,0,0,.06);
}
[data-theme="light"] .nav-item { color: #475569; }
[data-theme="light"] .nav-item.active {
  background: rgba(212,160,23,.1);
  color: #B8860B;
  border-left-color: #D4A017;
  text-shadow: none;
  box-shadow: none;
}
[data-theme="light"] .sidebar-logo { filter: none; }

/* Sem neon animation no light */
[data-theme="light"] .dash-balance-main { animation: none; }
[data-theme="light"] .kpi-bar-fill { box-shadow: none; }
[data-theme="light"] .cat-bar-fill { box-shadow: none; }

/* --- Keyframes neon --- */
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 10px var(--neon-gold-dim), 0 0 25px rgba(212,160,23,.06); }
  50%       { box-shadow: 0 0 18px rgba(212,160,23,.45), 0 0 45px rgba(212,160,23,.12); }
}
@keyframes neonGoldAnim {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(212,160,23,.5)); }
  50%       { filter: drop-shadow(0 0 16px rgba(212,160,23,.85)); }
}
@keyframes scanLight {
  0%   { left: -60%; }
  100% { left: 120%; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes badgePop {
  0%   { transform: scale(0); }
  80%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
img { max-width: 100%; display: block; }

/* --- App Shell --- */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  /* Sutil aurora neon de fundo */
  background:
    radial-gradient(ellipse 300px 200px at 80% 5%, rgba(212,160,23,.07), transparent),
    radial-gradient(ellipse 200px 200px at 10% 95%, rgba(255,80,40,.04), transparent),
    var(--bg);
}

/* --- Header --- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5,5,5,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-soft);
}

.app-header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.app-header .header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.weather-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: default;
  white-space: nowrap;
  transition: background .2s;
}
.weather-chip:hover { background: rgba(255,255,255,.1); }
#weather-icon { font-size: .9rem; line-height: 1; }
#weather-temp { letter-spacing: -.02em; }
[data-theme="light"] .weather-chip {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.08);
  color: var(--text-2);
}

/* --- Main Content --- */
.app-main {
  flex: 1;
  padding: 0 16px calc(var(--nav-h) + 16px);
  overflow-y: auto;
}

/* --- Bottom Navigation --- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--nav-h);
  background: rgba(7,7,7,.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  z-index: 100;
  box-shadow: 0 -4px 30px rgba(0,0,0,.6);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: .7rem;
  font-weight: 600;
  transition: color var(--transition);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
}

.nav-item svg { width: 22px; height: 22px; }

.nav-item.active {
  color: var(--brand-light);
  text-shadow: 0 0 8px rgba(212,160,23,.4);
}
.nav-item.active svg {
  filter: drop-shadow(0 0 5px rgba(212,160,23,.5));
}

.nav-item:not(.nav-fab):hover {
  color: var(--text-2);
}

/* FAB Central — dourado neon */
.nav-fab {
  background: var(--grad-gold);
  color: #050505 !important;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-gold);
  flex: 0 0 auto;
  transform: translateY(-8px);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  animation: neonPulse 4s ease-in-out infinite;
}

.nav-fab:hover, .nav-fab:active {
  transform: translateY(-10px) scale(1.08);
  box-shadow: 0 10px 36px rgba(212,160,23,.6), 0 0 60px rgba(212,160,23,.2);
  filter: brightness(1.1);
}

.nav-fab svg { width: 26px; height: 26px; }

/* --- Views --- */
.view { display: none; animation: fadeIn .2s ease; }
.view.active { display: block; }

/* --- Cards --- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border);
  transition: border-color .2s, box-shadow .25s;
}
.card:hover {
  border-color: rgba(212,160,23,.2);
  box-shadow: 0 0 20px rgba(212,160,23,.06);
}

.card-lg {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
  transition: border-color .2s, box-shadow .25s;
}
.card-lg:hover {
  border-color: rgba(212,160,23,.2);
}

/* Card de destaque — preto com borda neon dourada */
.card-highlight {
  background: linear-gradient(145deg, #0a0a0a 0%, #0f0f0f 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  border: 1px solid rgba(212,160,23,.2);
  box-shadow:
    0 12px 48px rgba(0,0,0,.7),
    0 0 40px rgba(212,160,23,.08),
    inset 0 1px 0 rgba(212,160,23,.1);
}

.card-highlight .amount {
  color: var(--brand-light);
  text-shadow: 0 0 20px rgba(247,220,111,.4);
}

/* --- Tipografia --- */
.text-xl   { font-size: 1.5rem; font-weight: 700; }
.text-lg   { font-size: 1.125rem; font-weight: 600; }
.text-md   { font-size: .95rem; font-weight: 500; }
.text-sm   { font-size: .8rem; }
.text-xs   { font-size: .72rem; }
.text-2    { color: var(--text-2); }
.text-3    { color: var(--text-3); }
.text-income  { color: var(--income); text-shadow: 0 0 10px rgba(74,222,128,.3); }
.text-expense { color: var(--expense); text-shadow: 0 0 10px rgba(248,113,113,.3); }
.text-brand   { color: var(--brand); }
.text-center  { text-align: center; }

.amount {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.amount-sm {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
}

/* Título com gradiente dourado neon */
.title-gold {
  background: linear-gradient(135deg, #FFE98A, #D4A017);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  filter: drop-shadow(0 0 8px rgba(212,160,23,.35));
}

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
}
.badge-income  { background: var(--income-soft);  color: var(--income); }
.badge-expense { background: var(--expense-soft); color: var(--expense); }
.badge-brand   { background: var(--brand-soft);   color: var(--brand-light); }
.badge-warn    { background: var(--warn-soft);     color: var(--warn); }
.badge-blue    { background: rgba(59,130,246,.1);  color: #60a5fa; }

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 700;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
}

/* Botão primário — neon dourado */
.btn-primary {
  background: var(--grad-gold);
  color: #050505;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: var(--shadow-gold);
  border: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
/* Dentro de modal/sheet o botão ocupa a largura toda */
.modal .btn-primary,
.sheet .btn-primary { width: 100%; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-15deg);
  animation: scanLight 3s ease-in-out infinite;
}
.btn-primary:hover  {
  filter: brightness(1.1);
  box-shadow: 0 8px 30px rgba(212,160,23,.55), 0 0 50px rgba(212,160,23,.2);
}
.btn-primary:active { filter: brightness(.96); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }

.btn-secondary {
  background: var(--surface);
  color: var(--text-1);
  border: 1px solid var(--border);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
}
.btn-secondary:hover { background: var(--card); }

.btn-danger {
  background: rgba(239,68,68,.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.25);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}
.btn-danger:hover { background: rgba(239,68,68,.2); }

/* Quando btn-primary está dentro de um flex container no modal, não força 100% */
.modal div[style*="flex"] .btn-primary,
.modal div[style*="flex"] .btn-danger { width: auto; }

.btn-ghost {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--card-hover);
  border-color: rgba(212,160,23,.2);
}

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: all var(--transition);
}
.btn-icon:hover {
  background: var(--card-hover);
  color: var(--brand-light);
  border-color: rgba(212,160,23,.3);
  box-shadow: 0 0 14px rgba(212,160,23,.2);
}
.btn-icon svg { width: 18px; height: 18px; }

/* --- Inputs --- */
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-label { font-size: .8rem; font-weight: 600; color: var(--text-2); }

.input {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.input:focus {
  border-color: rgba(212,160,23,.45);
  box-shadow: 0 0 0 3px rgba(212,160,23,.1), 0 0 16px rgba(212,160,23,.1);
}
.input::placeholder { color: var(--text-3); }

.input-prefix-wrap { position: relative; }
.input-prefix {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  font-weight: 600;
  pointer-events: none;
}
.input-prefix + .input { padding-left: 32px; }

/* --- Lista de transações --- */
.tx-list { display: flex; flex-direction: column; gap: 2px; }

.day-group { margin-bottom: 4px; }
.day-label {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(212,160,23,.5);
  padding: 8px 12px 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.tx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
}
.tx-item:hover {
  background: var(--card);
  border-color: var(--border);
}

.tx-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.tx-icon.income  { background: var(--income-soft); }
.tx-icon.expense { background: var(--expense-soft); }

.tx-info { flex: 1; min-width: 0; }
.tx-desc { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-sub  { font-size: .75rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.tx-date { font-size: .75rem; color: var(--text-3); }

.tx-amount { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; text-align: right; white-space: nowrap; }
.tx-amount.income  { color: var(--income);  text-shadow: 0 0 8px rgba(74,222,128,.3); }
.tx-amount.expense { color: var(--expense); text-shadow: 0 0 8px rgba(248,113,113,.3); }

/* --- Section Header --- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 12px;
}
.section-title {
  font-size: .72rem;
  font-weight: 800;
  color: rgba(212,160,23,.55);
  text-shadow: 0 0 8px rgba(212,160,23,.25);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.section-link  { font-size: .8rem; color: var(--brand-light); font-weight: 600; }

/* --- Divider --- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 12px 0;
}

/* --- Spacers --- */
.space-4  { height: 4px; }
.space-8  { height: 8px; }
.space-12 { height: 12px; }
.space-16 { height: 16px; }
.space-20 { height: 20px; }
.space-24 { height: 24px; }

/* --- Grid --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --- Pill tabs --- */
.pill-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid var(--border);
}
.pill-tab {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--transition);
}
.pill-tab.active {
  background: var(--grad-gold);
  color: #050505;
  box-shadow: 0 2px 12px rgba(212,160,23,.3);
}

/* --- Avatar --- */
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-light);
  border: 2px solid rgba(212,160,23,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(212,160,23,.2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --- Empty state --- */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-3);
}
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state p { font-size: .9rem; }

/* --- Spinner --- */
.spinner {
  width: 24px; height: 24px;
  border: 2.5px solid rgba(212,160,23,.15);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  box-shadow: 0 0 10px rgba(212,160,23,.2);
}

/* --- Toast --- */
.toast-container {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: #0e0e0e;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease;
  pointer-events: auto;
  white-space: nowrap;
}
.toast.success { border-color: rgba(74,222,128,.4); color: var(--income); }
.toast.error   { border-color: rgba(248,113,113,.4); color: var(--expense); }
.toast.brand   { border-color: rgba(212,160,23,.4); color: var(--brand-light); }

/* --- Modal / Bottom Sheet --- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: overlayIn .2s ease;
}

.sheet {
  background: #0a0a0a;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  animation: sheetIn .25s ease;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.sheet-handle {
  width: 40px; height: 4px;
  background: rgba(212,160,23,.2);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.sheet-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; }

/* --- Utilitários --- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* --- Toggle tipo tx --- */
[data-tx-type].active { border-color: currentColor !important; font-weight: 700; }
[data-tx-type="expense"].active { background: var(--expense-soft) !important; color: var(--expense) !important; }
[data-tx-type="income"].active  { background: var(--income-soft)  !important; color: var(--income)  !important; }

/* --- Modal (bottom sheet padrão) --- */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.88);
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.modal-overlay.active { display: flex; }
.modal {
  background: #0a0a0a;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  animation: sheetIn .22s ease;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.modal-title { font-size: 1.05rem; font-weight: 700; }
.form-col { display: flex; flex-direction: column; gap: 14px; }

/* --- Cartão de Crédito (visual card) --- */
.credit-card {
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  color: #fff;
  min-height: 90px;
}

/* ── Johanna Chat ─────────────────────────────────────────────── */
#view-johanna.active {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: calc(100dvh - var(--nav-h) - 56px);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
}
.chat-hd-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.chat-hd-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand);
}
.chat-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--surface);
  animation: onlinePulse 2.5s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.chat-hd-info { flex: 1; min-width: 0; }
.chat-hd-name { font-weight: 700; font-size: .95rem; color: var(--text); }
.chat-hd-sub  { font-size: .72rem; color: var(--text-3); transition: color .2s; }

.chat-autonomia-badge {
  text-align: center;
  padding: 5px 12px;
  font-size: .72rem;
  color: var(--text-3);
  background: rgba(212,160,23,.04);
  border-bottom: 1px solid var(--border);
  min-height: 28px;
}

.chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 14px 12px;
}

.johanna-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 86%;
}
.johanna-msg.johanna { align-self: flex-start; }
.johanna-msg.user    { align-self: flex-end; flex-direction: row-reverse; }

.msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--brand);
}

.johanna-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: .9rem;
  line-height: 1.5;
  word-break: break-word;
  max-width: 100%;
}
.johanna-msg.johanna .johanna-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  color: var(--text);
}
.johanna-msg.user .johanna-bubble {
  background: var(--grad-gold);
  color: #050505;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}

/* Typing dots */
.johanna-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 2px 4px;
}
.johanna-typing span {
  width: 7px; height: 7px;
  background: var(--text-3);
  border-radius: 50%;
  animation: typingDot .9s ease-in-out infinite;
}
.johanna-typing span:nth-child(2) { animation-delay: .18s; }
.johanna-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%            { transform: translateY(-6px); opacity: 1; }
}

/* Foto no chat */
.msg-photo {
  max-width: 200px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
}
.msg-photo img { width: 100%; display: block; }

/* Barra de input */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
}
.chat-text-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 11px 16px;
  font-size: .9rem;
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color .2s;
}
.chat-text-input:focus { border-color: rgba(212,160,23,.45); }
.chat-text-input::placeholder { color: var(--text-3); }

.chat-tool-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--text-2);
  transition: background .15s, color .15s;
}
.chat-tool-btn:hover { background: var(--card-hover); color: var(--text); }
.chat-tool-btn.recording {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.4);
  color: #ef4444;
  animation: micPulse 1s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); }
  50%       { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.chat-send-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-gold);
  border: none;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #050505;
  box-shadow: var(--shadow-gold);
  transition: filter .15s, transform .1s;
}
.chat-send-btn:hover  { filter: brightness(1.12); }
.chat-send-btn:active { transform: scale(.9); }

[data-theme="light"] .chat-header { background: #fff; }
[data-theme="light"] .chat-input-bar { background: #fff; }
[data-theme="light"] .chat-text-input { background: #F4F6F9; }
[data-theme="light"] .johanna-msg.johanna .johanna-bubble { background: #F4F6F9; border-color: rgba(0,0,0,.08); }

/* --- Autonomia options --- */
.autonomia-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: var(--radius);
  border: 1px solid var(--border); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.autonomia-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.autonomia-option input { margin-top: 3px; accent-color: var(--brand); }

/* --- Report tabs --- */
.report-tab { font-size: .8rem; padding: 6px 12px; white-space: nowrap; }
.report-tab.active {
  background: var(--grad-gold);
  color: #050505;
  border-color: transparent;
}

/* --- Progress bar --- */
.progress-bar {
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--grad-gold);
  border-radius: 99px;
  transition: width .4s ease;
  box-shadow: 0 0 10px rgba(212,160,23,.4);
}

/* ══════════════════════════════════════════════
   DASHBOARD — Layout 2 colunas (desktop) + cards refinados
══════════════════════════════════════════════ */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.dash-col-main, .dash-col-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── Card padrão (sidebar direita) ── */
.dash-card {
  background: linear-gradient(180deg, #0c0c0c 0%, #080808 100%);
  border: 1px solid rgba(212,160,23,.1);
  border-radius: 20px;
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.dash-card::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.35), transparent);
  pointer-events: none;
}
.dash-card:hover {
  border-color: rgba(212,160,23,.18);
  box-shadow: 0 0 30px rgba(212,160,23,.05);
}
.dash-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.dash-card-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.dash-card-sub {
  font-size: .68rem;
  color: var(--text-3);
  margin-top: 3px;
  font-weight: 500;
}
.dash-card-link {
  font-size: .7rem;
  color: var(--brand-light);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: text-shadow .2s;
}
.dash-card-link:hover { text-shadow: 0 0 8px rgba(212,160,23,.5); }

/* ── HERO Saldo ── */
.dash-hero {
  background: radial-gradient(circle at 0% 0%, #0d0c08 0%, #050505 60%);
  border-radius: 24px;
  padding: 24px 24px 18px;
  border: 1px solid rgba(212,160,23,.16);
  box-shadow:
    0 24px 60px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(212,160,23,.12),
    0 0 80px rgba(212,160,23,.04);
  position: relative;
  overflow: hidden;
}
.dash-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,160,23,.4) 25%,
    rgba(247,220,111,.85) 50%,
    rgba(212,160,23,.4) 75%,
    transparent 100%);
  pointer-events: none;
}
.dash-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 95% 0%, rgba(212,160,23,.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(212,160,23,.05) 0%, transparent 60%);
  pointer-events: none;
}

.dash-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  position: relative;
}
.dash-hero-label {
  font-size: .68rem;
  font-weight: 800;
  color: rgba(212,160,23,.65);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.dash-month-badge {
  font-size: .7rem;
  font-weight: 700;
  background: rgba(212,160,23,.1);
  color: var(--brand-light);
  border: 1px solid rgba(212,160,23,.22);
  border-radius: 99px;
  padding: 4px 11px;
  letter-spacing: .04em;
}

.dash-balance-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  position: relative;
}
.dash-balance-main {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 700;
  color: var(--brand-light);
  letter-spacing: -.035em;
  line-height: 1;
  text-shadow:
    0 0 16px rgba(212,160,23,.35),
    0 2px 8px rgba(0,0,0,.7);
}
.dash-balance-delta {
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.dash-balance-delta.up   { background: rgba(74,222,128,.1);  color: var(--income);  border: 1px solid rgba(74,222,128,.25); }
.dash-balance-delta.down { background: rgba(248,113,113,.1); color: var(--expense); border: 1px solid rgba(248,113,113,.25); }
.dash-balance-delta.flat { background: rgba(255,255,255,.04); color: var(--text-3); border: 1px solid rgba(255,255,255,.08); }

/* ── Sparkline ── */
.dash-spark-wrap { position: relative; margin-top: 10px; }
.dash-spark {
  width: 100%;
  height: 56px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(212,160,23,.25));
}
.dash-spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ══ KPI Cards ══ */
.dash-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dash-kpis .kpi-savings { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .dash-kpis { grid-template-columns: repeat(3, 1fr); }
  .dash-kpis .kpi-savings { grid-column: auto; }
}
.kpi-card {
  background: linear-gradient(180deg, #0c0c0c 0%, #070707 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  pointer-events: none;
}
.kpi-income::before  { background: linear-gradient(90deg, transparent, rgba(74,222,128,.45), transparent); }
.kpi-expense::before { background: linear-gradient(90deg, transparent, rgba(248,113,113,.45), transparent); }
.kpi-savings::before { background: linear-gradient(90deg, transparent, rgba(212,160,23,.5), transparent); }

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,160,23,.18);
}

.kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.kpi-label {
  font-size: .62rem;
  font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.kpi-delta {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.kpi-delta.up   { color: var(--income);  background: rgba(74,222,128,.08); }
.kpi-delta.down { color: var(--expense); background: rgba(248,113,113,.08); }
.kpi-delta.flat { color: var(--text-3);  background: rgba(255,255,255,.04); }

.kpi-value {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 4.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-income  .kpi-value { color: var(--income);  text-shadow: 0 0 12px rgba(74,222,128,.25); }
.kpi-expense .kpi-value { color: var(--expense); text-shadow: 0 0 12px rgba(248,113,113,.25); }
.kpi-savings .kpi-value { color: var(--brand-light); text-shadow: 0 0 12px rgba(212,160,23,.3); }

.kpi-foot {
  font-size: .65rem;
  color: var(--text-3);
  margin-top: 5px;
  font-weight: 500;
}
.kpi-foot span {
  font-family: var(--font-mono);
  color: var(--text-2);
  font-weight: 600;
}

.kpi-bar {
  margin-top: 6px;
  height: 4px;
  background: rgba(255,255,255,.05);
  border-radius: 99px;
  overflow: hidden;
}
.kpi-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #B8860B, #F7DC6F);
  border-radius: 99px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 10px rgba(212,160,23,.5);
}

/* ══ Quick actions — cards horizontais ══ */
.dash-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .22s cubic-bezier(0.4,0,0.2,1);
  color: var(--text-2);
  font-family: var(--font);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.quick-action::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.08), transparent);
  transform: skewX(-15deg);
}
.quick-action:hover::before { animation: scanLight 1s ease-out; }
.quick-action:hover {
  border-color: rgba(212,160,23,.3);
  transform: translateY(-2px);
  background: linear-gradient(180deg, #121008 0%, #060503 100%);
  box-shadow:
    0 0 22px rgba(212,160,23,.12),
    0 8px 24px rgba(0,0,0,.5);
}
.quick-action:active { transform: translateY(0) scale(.98); }

.qa-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  flex-shrink: 0;
  transition: box-shadow .2s, transform .2s;
}
.qa-icon svg { width: 19px; height: 19px; color: var(--text-2); transition: color .2s; }
.quick-action:hover .qa-icon { transform: scale(1.05); box-shadow: 0 0 12px rgba(212,160,23,.2); }
.expense-qa { background: var(--expense-soft); }
.expense-qa svg { color: var(--expense) !important; }
.warn-qa    { background: var(--warn-soft); }
.warn-qa svg { color: var(--warn) !important; }
.gold-qa    { background: var(--brand-soft); }
.gold-qa svg { color: var(--brand-light) !important; }

.qa-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.qa-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.qa-sub {
  font-size: .65rem;
  color: var(--text-3);
  font-weight: 500;
}
.quick-action:hover .qa-title { color: var(--brand-light); }

/* ══ Categorias — barras horizontais ══ */
.cat-bars { display: flex; flex-direction: column; gap: 10px; }
.cat-bar-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
}
.cat-bar-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  background: rgba(255,255,255,.04);
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}
.cat-bar-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cat-bar-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-bar-track {
  height: 5px;
  background: rgba(255,255,255,.04);
  border-radius: 99px;
  overflow: hidden;
}
.cat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #B8860B 0%, #F7DC6F 100%);
  border-radius: 99px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(212,160,23,.35);
}
.cat-bar-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.cat-bar-value {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
}
.cat-bar-pct {
  font-size: .62rem;
  color: var(--text-3);
  font-weight: 600;
}

/* ══ Empty states refinadas ══ */
.empty-state.mini { padding: 14px 8px; }
.empty-state.mini .empty-icon { font-size: 2rem; margin-bottom: 6px; }
.empty-state.mini p { font-size: .8rem; color: var(--text-3); }
/* ── WhatsApp tips ── */
.wa-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
}
.wa-tip-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1.4;
}
.wa-tip-txt {
  font-size: .84rem;
  color: var(--text);
  line-height: 1.4;
}
.wa-tip-sub {
  font-size: .72rem;
  color: var(--text-3);
  margin-top: 2px;
}
[data-theme="light"] .wa-tip {
  background: #F8FAFC;
  border-color: rgba(0,0,0,.06);
}

/* ── Johanna FAB ─────────────────────────────────────────────── */
.johanna-fab {
  position: fixed;
  bottom: 86px;
  right: 16px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 0;
  border: 2.5px solid var(--brand);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  z-index: 90;
  transition: transform .2s ease, opacity .25s ease, box-shadow .2s ease;
  animation: johannaRing 2.8s ease-in-out infinite;
}
.johanna-fab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.johanna-fab:active { transform: scale(.9); }
.johanna-fab.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(.75) translateY(10px);
}
@keyframes johannaRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,.45), 0 6px 24px rgba(0,0,0,.45); }
  55%       { box-shadow: 0 0 0 9px rgba(212,160,23,0), 0 6px 24px rgba(0,0,0,.45); }
}
@media (min-width: 768px) {
  .johanna-fab {
    bottom: 32px;
    right: 32px;
    width: 68px;
    height: 68px;
    border-width: 3px;
  }
}

.btn-empty {
  margin-top: 14px;
  background: rgba(212,160,23,.1);
  border: 1px solid rgba(212,160,23,.3);
  color: var(--brand-light);
  font-weight: 700;
  font-size: .8rem;
  padding: 9px 18px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .2s;
}
.btn-empty:hover {
  background: rgba(212,160,23,.18);
  box-shadow: 0 0 16px rgba(212,160,23,.3);
}

/* ══ Vencimentos — cartões com data destacada ══ */
.payable-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .15s;
}
.payable-row:last-child { border-bottom: none; }
.payable-row:hover { background: rgba(212,160,23,.03); }
.payable-date {
  width: 44px; height: 44px;
  background: linear-gradient(180deg, #0f0f0f 0%, #060606 100%);
  border: 1px solid rgba(212,160,23,.15);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font);
}
.payable-date .pd-day {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand-light);
  line-height: 1;
}
.payable-date .pd-mon {
  font-size: .55rem;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.payable-date.overdue { border-color: rgba(248,113,113,.4); }
.payable-date.overdue .pd-day { color: var(--expense); }
.payable-date.soon    { border-color: rgba(245,158,11,.4); }
.payable-date.soon    .pd-day { color: var(--warn); }

.payable-info { min-width: 0; }
.payable-desc {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.payable-sub {
  font-size: .68rem;
  color: var(--text-3);
  margin-top: 2px;
}
.payable-amount {
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 700;
  color: var(--expense);
  text-align: right;
  white-space: nowrap;
}

/* --- Scrollbar fina --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,160,23,.2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* --- Brand na sidebar (oculto no mobile) --- */
.sidebar-brand { display: none; }

/* ══════════════════════════════════════════════════════════
   LAYOUT DESKTOP — CSS Grid sidebar + conteúdo (≥ 768px)
══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  body { background: var(--bg); }

  /* Grid: [sidebar 230px] [conteúdo flex-col] */
  #app {
    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: auto 1fr;
    max-width: 100%;
    margin: 0;
    min-height: 100dvh;
    background: none;
  }

  /* ── Sidebar (coluna 1, todas as linhas) ── */
  .bottom-nav {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    height: 100dvh;
    width: 230px;
    max-width: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    padding: 0 10px 24px;
    border-top: none;
    border-right: 1px solid rgba(212,160,23,.1);
    border-radius: 0;
    transform: none;
    background: #060606;
    box-shadow: 4px 0 40px rgba(0,0,0,.7);
    overflow-y: auto;
    z-index: 10;
  }

  /* Neon line na borda direita */
  .bottom-nav::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
      rgba(212,160,23,.35) 0%,
      rgba(212,160,23,.07) 30%,
      rgba(212,160,23,.07) 70%,
      rgba(212,160,23,.25) 100%);
    pointer-events: none;
  }

  /* ── Logo no topo da sidebar ── */
  .sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 8px 16px;
    border-bottom: 1px solid rgba(212,160,23,.08);
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .sidebar-logo {
    width: 100%;
    max-width: 160px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(212,160,23,.35));
  }

  /* ── Nav items horizontais ── */
  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: .84rem;
    font-weight: 600;
    width: 100%;
    text-align: left;
    color: var(--text-2);
    border-left: 3px solid transparent;
    transition: all .18s cubic-bezier(.4,0,.2,1);
    flex: none;
  }
  .nav-item svg { width: 19px; height: 19px; flex-shrink: 0; }

  .nav-item.active {
    background: rgba(212,160,23,.1);
    color: var(--brand-light);
    border-left-color: var(--brand);
    padding-left: 11px;
    text-shadow: 0 0 8px rgba(212,160,23,.3);
    box-shadow: inset 0 0 20px rgba(212,160,23,.04),
                0 0 10px rgba(212,160,23,.06);
  }
  .nav-item.active svg {
    filter: drop-shadow(0 0 5px rgba(212,160,23,.5));
  }
  .nav-item:not(.nav-fab):hover {
    background: rgba(255,255,255,.04);
    color: var(--text);
    border-left-color: rgba(212,160,23,.2);
  }

  /* ── FAB → botão "Lançar" na sidebar ── */
  .nav-fab {
    transform: none;
    border-radius: 10px;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    justify-content: flex-start;
    gap: 12px;
    font-size: .84rem;
    font-weight: 700;
    background: var(--grad-gold);
    color: #050505 !important;
    box-shadow: var(--shadow-gold);
    margin: 8px 0 12px;
    flex: none;
    animation: none;
    border-left: 3px solid transparent !important;
    text-align: left;
    font-family: var(--font);
  }
  .nav-fab::after {
    content: 'Lançar';
    font-family: var(--font);
    font-size: .84rem;
    font-weight: 700;
    color: #050505;
  }
  .nav-fab svg { color: #050505; }
  .nav-fab:hover {
    transform: none;
    box-shadow: 0 0 28px rgba(212,160,23,.45), 0 6px 20px rgba(0,0,0,.4);
    filter: brightness(1.08);
  }

  /* ── Header (coluna 2, linha 1) ── */
  .app-header {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 9;
    margin-left: 0;
    border-bottom: 1px solid rgba(212,160,23,.07);
    background: rgba(5,5,5,.95);
    backdrop-filter: blur(20px);
  }

  /* ── Conteúdo principal (coluna 2, linha 2) ── */
  .app-main {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
    padding: 28px 48px 60px;
    min-height: calc(100dvh - 60px);
  }

  /* Toast centralizado no conteúdo */
  .toast-container {
    bottom: 24px;
    left: calc(115px + 50%);
  }

  /* Modais centralizados */
  .modal-overlay { align-items: center; }
  .modal {
    border-radius: var(--radius-lg);
    max-width: 480px;
    margin: 0 auto;
    max-height: 90dvh;
  }
  .sheet {
    max-width: 480px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
  }

  /* ══ Dashboard — desktop refinado ══ */
  .dash-hero { padding: 30px 32px 22px; border-radius: 28px; }
  .dash-balance-main { font-size: 3.4rem; }
  .dash-spark { height: 70px; }

  .dash-kpis { gap: 14px; }
  .kpi-card { padding: 16px 18px 14px; border-radius: 18px; }
  .kpi-value { font-size: 1.55rem; }

  .dash-quick-actions { gap: 12px; }
  .quick-action { padding: 14px 16px; }
  .qa-icon { width: 44px; height: 44px; border-radius: 12px; }
  .qa-icon svg { width: 21px; height: 21px; }
  .qa-title { font-size: .9rem; }
  .qa-sub { font-size: .7rem; }

  .dash-card { padding: 22px 22px 18px; border-radius: 22px; }
  .dash-card-title { font-size: 1rem; }

  /* Conteúdo full-width pra acomodar 2 colunas */
  .view { max-width: 1280px; margin: 0 auto; }
  .grid-2 { gap: 18px; }
  #johanna-messages { max-height: 70vh; min-height: 400px; }

  /* Seção "Mais" — grid de 2 colunas */
  #view-more .flex-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* ── Dashboard 2 colunas em telas médias+ ── */
@media (min-width: 1024px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    gap: 22px;
    align-items: start;
  }
  .dash-quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ── Telas muito largas ── */
@media (min-width: 1280px) {
  #app { grid-template-columns: 250px 1fr; }
  .bottom-nav { width: 250px; }
  .app-main { padding: 32px 72px 64px; }
  .dash-quick-actions { grid-template-columns: repeat(4, 1fr); }
}