/* ═══════════════════════════════════════════════════════════════════
   VAULT — Premium Dark Fintech UI
   Cinematic motion · Glass morphism · Electric accents
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* — Surfaces — */
  --bg:           #06080d;
  --bg-elev:      #0a0d14;
  --surface:      #0e1218;
  --surface-2:    #141925;
  --surface-3:    #1a2030;
  --glass:        rgba(20, 25, 37, 0.6);
  --glass-light:  rgba(255, 255, 255, 0.03);

  /* — Borders — */
  --border:       rgba(255, 255, 255, 0.06);
  --border-2:     rgba(255, 255, 255, 0.1);
  --border-focus: rgba(0, 255, 136, 0.4);

  /* — Accents — */
  --green:        #00ff88;
  --green-dim:    #00cc6e;
  --green-glow:   rgba(0, 255, 136, 0.18);
  --cyan:         #22d3ee;
  --cyan-glow:    rgba(34, 211, 238, 0.15);
  --red:          #ff3d71;
  --red-glow:     rgba(255, 61, 113, 0.18);
  --amber:        #ffb454;
  --purple:       #a78bfa;
  --pink:         #f472b6;
  --blue:         #60a5fa;

  /* — Text — */
  --text:         #ffffff;
  --text-2:       #d4dae6;
  --text-3:       #9ba3b4;
  --text-4:       #5a6478;
  --text-5:       #3d4456;

  /* — Radii — */
  --r-sm:  10px;
  --r:     14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* — Shadows — */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.5);
  --shadow:     0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.6);
  --shadow-xl:  0 40px 100px rgba(0,0,0,.7);
  --glow:       0 0 0 1px var(--green-glow), 0 0 24px var(--green-glow);
  --glow-cyan:  0 0 0 1px var(--cyan-glow), 0 0 24px var(--cyan-glow);

  /* — Easing — */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: #051026; color: var(--text); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(255,179,200,.28) 0%, rgba(255,179,200,.1) 30%, transparent 60%),
    linear-gradient(180deg, #2a1538 0%, #1a1a4d 30%, #0f1640 60%, #051026 100%);
  background-attachment: fixed;
}

/* — Animated background mesh — */
body::before {
  content: '';
  position: fixed;
  inset: -200px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 80% 70%, rgba(30,58,138,.4), transparent 50%),
    radial-gradient(circle at 20% 20%, rgba(255,179,200,.15), transparent 40%),
    radial-gradient(circle at 60% 50%, rgba(244,114,182,.08), transparent 45%);
  animation: mesh-drift 30s ease-in-out infinite;
  filter: blur(80px);
  opacity: .7;
}

@keyframes mesh-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(40px, -30px) rotate(2deg); }
  66%      { transform: translate(-30px, 40px) rotate(-2deg); }
}

@keyframes fade-up      { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in      { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in     { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-up     { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spin         { to { transform: rotate(360deg); } }
@keyframes pulse        { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.95); } }
@keyframes shimmer      { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes glow-pulse   { 0%, 100% { box-shadow: 0 0 0 0 var(--green-glow); } 50% { box-shadow: 0 0 0 8px transparent; } }
@keyframes draw-line    { from { stroke-dashoffset: var(--len, 1000); } to { stroke-dashoffset: 0; } }

::selection { background: rgba(0,255,136,.3); color: white; }
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 5px; transition: background .2s; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.12); }

/* ═══ AUTH ═══ */
#auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.auth-card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 48px 44px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.05);
  animation: fade-up .7s var(--ease-out);
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,255,136,.3), transparent 40%, rgba(34,211,238,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .6;
}

.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.auth-brand {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #ffffff 0%, #d4dae6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-tagline {
  font-size: 0.7rem;
  color: var(--text-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 36px 56px;
  font-weight: 600;
}

.tab-row {
  display: flex;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 28px;
}
.tab-btn {
  flex: 1;
  padding: 11px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.tab-btn:hover { color: var(--text-2); }
.tab-btn.active {
  background: linear-gradient(135deg, rgba(0,255,136,.12), rgba(34,211,238,.08));
  color: var(--green);
  box-shadow: 0 0 0 1px rgba(0,255,136,.2), inset 0 1px 0 rgba(255,255,255,.05);
}

.fg { margin-bottom: 16px; }
.fg label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.fg input, .fg select {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-2);
  border-radius: 11px;
  padding: 13px 15px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.94rem;
  outline: none;
  transition: all .25s var(--ease-out);
  font-weight: 500;
}
.fg input::placeholder { color: var(--text-4); }
.fg input:focus, .fg select:focus {
  border-color: var(--border-focus);
  background: rgba(0,255,136,.04);
  box-shadow: 0 0 0 4px var(--green-glow);
}

.btn-primary {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dim) 100%);
  color: #04130a;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all .3s var(--spring);
  margin-top: 8px;
  box-shadow: 0 4px 12px rgba(0,255,136,.3), inset 0 1px 0 rgba(255,255,255,.25);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,255,136,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; transform: none; }

.auth-err { font-size: 0.82rem; color: var(--red); margin-top: 14px; text-align: center; font-weight: 500; }
.auth-info {
  display: none;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 13px 15px;
  background: rgba(255,180,84,.08);
  border: 1px solid rgba(255,180,84,.2);
  border-radius: 11px;
  font-size: 0.78rem;
  color: var(--amber);
  line-height: 1.5;
}
.auth-info code { background: rgba(255,180,84,.15); padding: 2px 6px; border-radius: 5px; font-family: 'JetBrains Mono', monospace; font-size: .85em; }

/* ═══ APP LAYOUT ═══ */
#app { display: none; min-height: 100vh; position: relative; z-index: 1; }
.layout { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }

/* ═══ SIDEBAR ═══ */
.sidebar {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-right: 1px solid var(--border);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 5;
}

.sb-logo { display: flex; align-items: center; gap: 12px; padding: 6px 8px; margin-bottom: 28px; }
.sb-brand {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #fff 0%, #9ba3b4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sb-sec {
  font-size: 0.6rem;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0 10px;
  margin: 22px 0 10px;
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s var(--ease-out);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
}
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(0,255,136,.1) 0%, rgba(34,211,238,.04) 100%);
  color: var(--green);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(0,255,136,.15);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--green);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--green-glow);
}

.nav-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  flex-shrink: 0;
  transition: all .2s var(--ease-out);
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 700;
}
.nav-item.active .nav-ico {
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  color: #04130a;
  box-shadow: 0 0 16px var(--green-glow);
}

.sb-bottom { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }

.connected-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(0,255,136,.06);
  border: 1px solid rgba(0,255,136,.18);
  border-radius: 9px;
  margin-bottom: 12px;
  font-size: 0.7rem;
  color: var(--green);
  font-weight: 600;
}
.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
  flex-shrink: 0;
  box-shadow: 0 0 10px var(--green), 0 0 0 3px rgba(0,255,136,.2);
}

.sb-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: 11px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s var(--ease-out);
  background: rgba(255,255,255,.02);
}
.sb-user:hover { background: rgba(255,255,255,.05); border-color: var(--border-2); }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--cyan) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.84rem;
  color: #04130a;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(0,255,136,.25);
}
.sb-uname { font-size: 0.85rem; font-weight: 600; line-height: 1.2; color: var(--text); }
.sb-urole { font-size: 0.7rem; color: var(--text-4); }

/* ═══ MAIN ═══ */
.main { padding: 36px 44px; overflow-y: auto; max-width: 1600px; margin: 0 auto; width: 100%; }
.page { display: none; }
.page.active { display: block; animation: fade-up .5s var(--ease-out); }

.pg-hd { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; gap: 24px; flex-wrap: wrap; }
.pg-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.25rem;
  letter-spacing: -0.04em;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #9ba3b4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.pg-sub { font-size: 0.84rem; color: var(--text-3); margin-top: 8px; font-weight: 500; }

/* ═══ BUTTONS ═══ */
.btn-g {
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  color: #04130a;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s var(--spring);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 12px rgba(0,255,136,.25), inset 0 1px 0 rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
}
.btn-g::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s var(--ease-out);
}
.btn-g:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,255,136,.4); }
.btn-g:hover::before { transform: translateX(100%); }
.btn-g:disabled { opacity: 0.6; cursor: wait; transform: none; }

.btn-ghost {
  padding: 11px 18px;
  background: rgba(255,255,255,.03);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 11px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btn-ghost:hover { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }

.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ═══ DATE RANGE PILLS ═══ */
.range-pills {
  display: inline-flex;
  gap: 3px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px;
}
.range-pill {
  padding: 8px 16px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease-out);
}
.range-pill:hover { color: var(--text); }
.range-pill.active {
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  color: #04130a;
  box-shadow: 0 2px 8px var(--green-glow);
}

/* ═══ STAT CARDS ═══ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }

.stat-card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  overflow: hidden;
  transition: all .3s var(--ease-out);
  cursor: default;
  animation: fade-up .6s var(--ease-out) backwards;
}
.stat-grid > .stat-card:nth-child(1) { animation-delay: .05s; }
.stat-grid > .stat-card:nth-child(2) { animation-delay: .1s; }
.stat-grid > .stat-card:nth-child(3) { animation-delay: .15s; }
.stat-grid > .stat-card:nth-child(4) { animation-delay: .2s; }

.stat-card:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: var(--shadow-lg); }

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.stat-card.green::before  { background: linear-gradient(90deg, var(--green), transparent); box-shadow: 0 0 16px var(--green-glow); }
.stat-card.red::before    { background: linear-gradient(90deg, var(--red), transparent); box-shadow: 0 0 16px var(--red-glow); }
.stat-card.cyan::before   { background: linear-gradient(90deg, var(--cyan), transparent); box-shadow: 0 0 16px var(--cyan-glow); }
.stat-card.amber::before  { background: linear-gradient(90deg, var(--amber), transparent); box-shadow: 0 0 16px rgba(255,180,84,.18); }
.stat-card.purple::before { background: linear-gradient(90deg, var(--purple), transparent); box-shadow: 0 0 16px rgba(167,139,250,.18); }
.stat-card.navy::before   { background: linear-gradient(90deg, var(--blue), transparent); box-shadow: 0 0 16px rgba(96,165,250,.18); }
.stat-card.brass::before  { background: linear-gradient(90deg, var(--amber), transparent); box-shadow: 0 0 16px rgba(255,180,84,.18); }
.stat-card.blue::before   { background: linear-gradient(90deg, var(--blue), transparent); box-shadow: 0 0 16px rgba(96,165,250,.18); }

.sc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sc-lbl {
  font-size: 0.66rem;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.sc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(255,255,255,.04);
  color: var(--text-3);
  font-weight: 700;
}
.stat-card.green .sc-icon  { background: rgba(0,255,136,.1); color: var(--green); box-shadow: 0 0 16px var(--green-glow); }
.stat-card.red .sc-icon    { background: rgba(255,61,113,.1); color: var(--red); box-shadow: 0 0 16px var(--red-glow); }
.stat-card.cyan .sc-icon   { background: rgba(34,211,238,.1); color: var(--cyan); box-shadow: 0 0 16px var(--cyan-glow); }
.stat-card.amber .sc-icon, .stat-card.brass .sc-icon { background: rgba(255,180,84,.1); color: var(--amber); }
.stat-card.purple .sc-icon { background: rgba(167,139,250,.1); color: var(--purple); }
.stat-card.navy .sc-icon, .stat-card.blue .sc-icon { background: rgba(96,165,250,.1); color: var(--blue); }

.sc-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  letter-spacing: -0.03em;
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sc-chg { font-size: 0.76rem; color: var(--text-3); font-weight: 500; }
.sc-chg.up { color: var(--green); font-weight: 600; }
.sc-chg.dn { color: var(--red); font-weight: 600; }

/* ═══ CHART CARDS ═══ */
.chart-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 24px; }

.chart-card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: all .3s var(--ease-out);
  position: relative;
  overflow: hidden;
  animation: fade-up .6s var(--ease-out) backwards;
  animation-delay: .25s;
}
.chart-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-lg); }

.chart-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.chart-title { font-size: 1rem; font-weight: 700; color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; }
.chart-sub { font-size: 0.74rem; color: var(--text-3); margin-top: 3px; font-weight: 500; }

.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.76rem; color: var(--text-3); font-weight: 500; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 8px currentColor; }

.svg-chart { width: 100%; display: block; }
.svg-chart text { font-family: 'Inter', sans-serif; }

/* Chart drawing animation */
.svg-chart .draw {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: draw-line 2s var(--ease-out) forwards;
}

/* ═══ TXN CARD / CARD ═══ */
.card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 16px;
  transition: all .3s var(--ease-out);
  animation: fade-up .6s var(--ease-out) backwards;
  animation-delay: .3s;
}
.card:hover { border-color: var(--border-2); }
.card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.card-title { font-size: 1rem; font-weight: 700; color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; }
.ctag {
  font-size: 0.7rem;
  color: var(--text-3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-weight: 600;
}

.txn-list { display: flex; flex-direction: column; gap: 2px; }
.ti {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border-radius: 11px;
  transition: all .2s var(--ease-out);
  cursor: default;
}
.ti:hover { background: rgba(255,255,255,.03); }

.ti-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  font-weight: 700;
  color: var(--text-2);
}
.ti-info { flex: 1; min-width: 0; }
.ti-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ti-cat { font-size: 0.72rem; color: var(--text-3); font-weight: 500; }
.ti-r { text-align: right; flex-shrink: 0; }
.ti-amt { font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ti-amt.pos { color: var(--green); text-shadow: 0 0 12px var(--green-glow); }
.ti-amt.neg { color: var(--text); }
.ti-date { font-size: 0.68rem; color: var(--text-4); margin-top: 2px; font-weight: 500; }

/* ═══ EMPTY STATE ═══ */
.empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--text-3);
}
.empty-ico {
  font-size: 3.5rem;
  margin-bottom: 16px;
  opacity: 0.6;
  filter: grayscale(.3);
}
.empty h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; font-family: 'Plus Jakarta Sans', sans-serif; }
.empty p { font-size: 0.86rem; margin-bottom: 20px; max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.empty-hint {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  background: rgba(255,180,84,.08);
  border: 1px solid rgba(255,180,84,.2);
  border-radius: 11px;
  font-size: 0.78rem;
  color: var(--amber);
  margin-top: 16px;
  font-weight: 500;
}
.empty-hint code { background: rgba(255,180,84,.15); padding: 2px 6px; border-radius: 5px; font-family: 'JetBrains Mono', monospace; font-size: .85em; }

/* ═══ LOADING ═══ */
.loading { display: flex; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-3); gap: 12px; font-weight: 500; }
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-2);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  filter: drop-shadow(0 0 6px var(--green-glow));
}

/* ═══ TOAST ═══ */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0,255,136,.3);
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 0.86rem;
  box-shadow: var(--shadow-lg), 0 0 24px var(--green-glow);
  transform: translateY(120%);
  opacity: 0;
  transition: all .4s var(--spring);
  z-index: 300;
  max-width: 400px;
  font-weight: 500;
  color: var(--text);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { border-color: rgba(255,61,113,.3); box-shadow: var(--shadow-lg), 0 0 24px var(--red-glow); }

/* ═══ CATEGORIES ═══ */
.cat-list { display: flex; flex-direction: column; gap: 14px; }
.cat-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 13px; }
.cat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid var(--border);
}
.cat-info { min-width: 0; }
.cat-name { font-size: 0.86rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.cat-bar-bg { height: 6px; background: rgba(255,255,255,.04); border-radius: 3px; overflow: hidden; }
.cat-bar { height: 100%; border-radius: 3px; transition: width 1s var(--ease-out); box-shadow: 0 0 12px currentColor; }
.cat-amt { font-size: 0.88rem; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.cat-pct { font-size: 0.7rem; color: var(--text-3); font-weight: 500; text-align: right; }

/* ═══ RECURRING & BILLS ═══ */
.recur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }

.recur-card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  transition: all .3s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.recur-card:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: var(--shadow-lg); }
.recur-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.recur-card.urgent::before    { background: var(--red); box-shadow: 0 0 16px var(--red-glow); }
.recur-card.upcoming::before  { background: var(--amber); box-shadow: 0 0 16px rgba(255,180,84,.3); }
.recur-card.scheduled::before { background: var(--cyan); box-shadow: 0 0 16px var(--cyan-glow); }
.recur-card.paused::before    { background: var(--text-4); }

.recur-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.recur-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 700;
}
.recur-status {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.recur-status.urgent    { background: rgba(255,61,113,.12); color: var(--red); }
.recur-status.upcoming  { background: rgba(255,180,84,.12); color: var(--amber); }
.recur-status.scheduled { background: rgba(34,211,238,.12); color: var(--cyan); }
.recur-status.paused    { background: rgba(255,255,255,.04); color: var(--text-4); }

.recur-name { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.recur-cat { font-size: 0.72rem; color: var(--text-3); margin-bottom: 14px; }
.recur-bottom { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); }
.recur-amt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.recur-meta { font-size: 0.7rem; color: var(--text-3); text-align: right; font-weight: 500; }
.recur-meta strong { display: block; color: var(--text-2); font-size: 0.74rem; font-weight: 600; margin-top: 2px; }

/* ═══ NET WORTH ═══ */
.nw-hero {
  position: relative;
  background:
    radial-gradient(circle at 80% 20%, rgba(0,255,136,.12), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(34,211,238,.08), transparent 50%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  margin-bottom: 20px;
  overflow: hidden;
  animation: fade-up .6s var(--ease-out);
}
.nw-hero::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,255,136,.2), transparent 40%, rgba(34,211,238,.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.nw-hero::after {
  content: '';
  position: absolute;
  right: -150px; top: -150px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,136,.18) 0%, transparent 65%);
  pointer-events: none;
  animation: mesh-drift 20s ease-in-out infinite;
}

.nw-hero-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
  font-weight: 700;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nw-hero-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
  line-height: 1;
  position: relative;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff 0%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nw-hero-chg { font-size: 0.9rem; color: var(--text-3); font-weight: 500; position: relative; }

.nw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.nw-tile {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: all .3s var(--ease-out);
}
.nw-tile:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.nw-tile-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.nw-tile-title { font-size: 0.88rem; font-weight: 700; color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; }
.nw-tile-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.nw-tile.assets .nw-tile-val { color: var(--green); text-shadow: 0 0 24px var(--green-glow); }
.nw-tile.debts .nw-tile-val { color: var(--red); text-shadow: 0 0 24px var(--red-glow); }
.nw-tile-meta { font-size: 0.76rem; color: var(--text-3); font-weight: 500; }

.holding-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.holding-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 13px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 9px;
  transition: all .2s var(--ease-out);
}
.holding-row:hover { background: rgba(255,255,255,.03); }
.holding-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
}
.holding-name { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.holding-meta { font-size: 0.7rem; color: var(--text-3); }
.holding-amt { font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.holding-amt.asset { color: var(--green); }
.holding-amt.debt { color: var(--red); }
.holding-del { background: none; border: none; color: var(--text-4); cursor: pointer; padding: 5px 7px; border-radius: 6px; transition: all .15s; font-size: .9rem; }
.holding-del:hover { background: rgba(255,61,113,.1); color: var(--red); }

/* ═══ MODAL ═══ */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(6,8,13,.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fade-in .25s;
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 32px;
  width: 90%;
  max-width: 460px;
  box-shadow: var(--shadow-xl);
  animation: scale-in .35s var(--spring);
  position: relative;
  overflow: hidden;
}
.modal::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,255,136,.3), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .5;
}
.modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  position: relative;
}
.modal-sub { font-size: 0.84rem; color: var(--text-3); margin-bottom: 22px; position: relative; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; position: relative; }

/* ═══ AI ASSISTANT ═══ */
.ai-fab {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--cyan) 100%);
  color: #04130a;
  border: none;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(0,255,136,.35), 0 0 60px rgba(0,255,136,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all .35s var(--spring);
  z-index: 150;
}
.ai-fab::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  opacity: .35;
  filter: blur(20px);
  z-index: -1;
  animation: pulse 3s ease-in-out infinite;
}
.ai-fab:hover {
  transform: scale(1.1) rotate(-8deg);
  box-shadow: 0 20px 50px rgba(0,255,136,.5), 0 0 80px rgba(0,255,136,.3);
}

.ai-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 440px;
  max-width: 100vw;
  height: 640px;
  max-height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border-2);
  border-top: 1px solid var(--border-2);
  border-radius: 22px 0 0 0;
  box-shadow: var(--shadow-xl);
  display: none;
  flex-direction: column;
  z-index: 160;
  backdrop-filter: blur(20px) saturate(140%);
  animation: slide-up .4s var(--spring);
}
.ai-panel.show { display: flex; }

.ai-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(0,255,136,.12) 0%, rgba(34,211,238,.06) 100%);
  border-bottom: 1px solid var(--border);
  border-radius: 22px 0 0 0;
  position: relative;
  overflow: hidden;
}
.ai-hd::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(0,255,136,.12), transparent 60%);
  pointer-events: none;
}
.ai-hd-l { display: flex; align-items: center; gap: 12px; position: relative; }
.ai-hd-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #04130a;
  box-shadow: 0 0 20px var(--green-glow);
}
.ai-hd-title { font-weight: 700; font-size: 1rem; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.ai-hd-sub { font-size: 0.72rem; color: var(--text-3); display: flex; align-items: center; gap: 6px; margin-top: 2px; }

.ai-close {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s var(--ease-out);
  position: relative;
}
.ai-close:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }

.ai-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
}

.ai-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  animation: fade-up .3s var(--ease-out);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ai-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  color: #04130a;
  border-bottom-right-radius: 4px;
  font-weight: 500;
  box-shadow: 0 4px 14px var(--green-glow);
}
.ai-msg.assistant {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-bottom-left-radius: 4px;
}
.ai-msg.thinking {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  border-bottom-left-radius: 4px;
  display: flex;
  gap: 4px;
}
.ai-msg.thinking::after {
  content: '...';
  animation: pulse 1.5s ease-in-out infinite;
  letter-spacing: 2px;
}

.ai-suggestions { padding: 0 20px 14px; display: flex; flex-direction: column; gap: 7px; background: var(--bg); }
.ai-sg {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s var(--ease-out);
  text-align: left;
  font-weight: 500;
}
.ai-sg:hover { border-color: var(--green); color: var(--green); background: rgba(0,255,136,.04); transform: translateX(2px); }

.ai-input-row { padding: 14px 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; background: var(--surface); }
.ai-input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  outline: none;
  resize: none;
  max-height: 100px;
  font-weight: 500;
  transition: all .25s var(--ease-out);
}
.ai-input::placeholder { color: var(--text-4); }
.ai-input:focus { border-color: var(--border-focus); background: var(--surface); box-shadow: 0 0 0 4px var(--green-glow); }

.ai-send {
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  color: #04130a;
  border: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  transition: all .25s var(--spring);
  box-shadow: 0 4px 12px var(--green-glow);
}
.ai-send:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--green-glow); }
.ai-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ═══ BANK CARDS ═══ */
.bank-card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 14px;
  transition: all .3s var(--ease-out);
}
.bank-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.bank-hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.bank-info { display: flex; align-items: center; gap: 14px; }
.bank-logo {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #04130a;
  font-weight: 800;
  font-size: 1.1rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 0 20px var(--green-glow);
}
.bank-name { font-weight: 700; font-size: 0.98rem; color: var(--text); }
.bank-meta { font-size: 0.74rem; color: var(--text-3); margin-top: 2px; font-weight: 500; }
.bank-status { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--green); font-weight: 600; }
.unlink-btn {
  background: rgba(255,61,113,.06);
  border: 1px solid rgba(255,61,113,.2);
  color: var(--red);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.73rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s var(--ease-out);
  font-weight: 500;
  margin-left: 10px;
}
.unlink-btn:hover { background: rgba(255,61,113,.12); border-color: rgba(255,61,113,.35); }

.acc-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; font-size: 0.86rem; transition: all .2s var(--ease-out); }
.acc-row:hover { background: rgba(255,255,255,.02); }
.acc-l { display: flex; align-items: center; gap: 12px; }
.acc-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
}
.acc-name { font-weight: 600; color: var(--text); }
.acc-mask { font-size: 0.72rem; color: var(--text-3); }
.acc-bal { font-weight: 700; font-variant-numeric: tabular-nums; }
.acc-bal.pos { color: var(--green); }
.acc-bal.neg { color: var(--red); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
  .nw-split { grid-template-columns: 1fr; }
  .nw-hero-val { font-size: 3rem; }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 20px; }
  .stat-grid { grid-template-columns: 1fr; }
  .ai-panel { width: 100vw; height: 100vh; border-radius: 0; }
  .pg-title { font-size: 1.7rem; }
  .nw-hero-val { font-size: 2.5rem; }
  .nw-hero { padding: 28px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 3: Budgets, Goals, AI demo state
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ BUDGETS ═══ */
.budget-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 12px;
  border-radius: 12px;
  transition: all .25s var(--ease-out);
  border-bottom: 1px solid var(--border);
}
.budget-row:last-child { border-bottom: none; }
.budget-row:hover { background: rgba(255,255,255,.02); }
.budget-info { min-width: 0; }
.budget-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.budget-amounts {
  font-size: .8rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.budget-amounts strong { color: var(--text); font-weight: 700; }
.budget-bar-bg {
  height: 8px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.budget-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 1s var(--ease-out);
  background: linear-gradient(90deg, var(--green), var(--green-dim));
  box-shadow: 0 0 12px var(--green-glow);
}
.budget-bar.warn  { background: linear-gradient(90deg, var(--amber), #f59e0b); box-shadow: 0 0 12px rgba(255,180,84,.3); }
.budget-bar.over  { background: linear-gradient(90deg, var(--red), #dc2626); box-shadow: 0 0 12px var(--red-glow); }

.budget-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.budget-pct {
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.budget-pct.warn { color: var(--amber); }
.budget-pct.over { color: var(--red); }
.budget-del {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  transition: all .15s;
  font-size: .8rem;
}
.budget-del:hover { background: rgba(255,61,113,.1); color: var(--red); }

/* ═══ GOALS ═══ */
.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.goal-card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: all .35s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.goal-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
  box-shadow: var(--shadow-lg);
}
.goal-card.complete {
  border-color: rgba(0,255,136,.35);
  box-shadow: 0 0 30px var(--green-glow);
}
.goal-card.complete::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--green), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.goal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.goal-emoji {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.goal-card.complete .goal-emoji {
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  border-color: rgba(0,255,136,.4);
}
.goal-info { flex: 1; min-width: 0; }
.goal-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  letter-spacing: -.01em;
}
.goal-meta {
  font-size: .74rem;
  color: var(--text-3);
  font-weight: 500;
}
.goal-menu {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  color: var(--text-3);
  width: 28px; height: 28px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.goal-menu:hover { background: rgba(255,61,113,.1); border-color: rgba(255,61,113,.25); color: var(--red); }

.goal-progress {
  margin-bottom: 18px;
}
.goal-amounts {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.goal-current {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff, var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.goal-target {
  font-size: .82rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.goal-bar-bg {
  height: 8px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
  overflow: hidden;
}
.goal-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  transition: width 1.2s var(--ease-out);
  box-shadow: 0 0 12px var(--green-glow);
}
.goal-pct-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: .74rem;
}
.goal-pct {
  color: var(--green);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.goal-time {
  color: var(--text-3);
  font-weight: 500;
}
.goal-actions {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.goal-actions button {
  flex: 1;
  padding: 9px 12px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: all .2s var(--ease-out);
  border: none;
}
.goal-act-add {
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  color: #04130a;
  box-shadow: 0 4px 12px var(--green-glow);
}
.goal-act-add:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,255,136,.4); }
.goal-act-edit {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid var(--border-2) !important;
}
.goal-act-edit:hover { background: rgba(255,255,255,.08); }

/* ═══ AI DEMO / CONFIG STATE ═══ */
.ai-config-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  background: var(--bg);
  overflow-y: auto;
}
.ai-config-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 18px;
  box-shadow: 0 0 30px var(--green-glow);
}
.ai-config-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.ai-config-msg {
  font-size: .86rem;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 20px;
}
.ai-config-msg code {
  background: rgba(0,255,136,.08);
  border: 1px solid rgba(0,255,136,.18);
  color: var(--green);
  padding: 2px 7px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .82em;
}
.ai-config-steps {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  text-align: left;
  width: 100%;
  max-width: 360px;
  margin-bottom: 16px;
}
.ai-config-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.5;
}
.ai-config-step:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.ai-config-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  color: #04130a;
  font-weight: 800;
  font-size: .72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ai-config-step a {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
}
.ai-config-step a:hover { text-decoration: underline; }
.ai-config-tip {
  font-size: .76rem;
  color: var(--text-4);
  margin-top: 8px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 4: Rules, Tags, Calendar, Search
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ TX SEARCH BAR ═══ */
.search-card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.search-input-wrap {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-2);
  border-radius: 11px;
  padding: 10px 14px;
  transition: all .25s var(--ease-out);
}
.search-input-wrap:focus-within {
  border-color: var(--border-focus);
  background: rgba(0,255,136,.04);
  box-shadow: 0 0 0 4px var(--green-glow);
}
.search-icon { color: var(--text-3); font-size: 1rem; flex-shrink: 0; }
.search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  outline: none;
  font-weight: 500;
}
.search-input::placeholder { color: var(--text-4); }
.search-clear {
  background: rgba(255,255,255,.06);
  border: none;
  color: var(--text-3);
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.search-clear:hover { background: rgba(255,61,113,.1); color: var(--red); }
.search-meta {
  font-size: 0.78rem;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
}
.search-meta strong { color: var(--green); font-weight: 700; }

/* ═══ TAGS ON TRANSACTIONS ═══ */
.ti-tags {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  flex-wrap: wrap;
}
.ti-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: rgba(167,139,250,.12);
  border: 1px solid rgba(167,139,250,.25);
  color: var(--purple);
  border-radius: var(--r-pill);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ti-overridden::before {
  content: '✏';
  color: var(--cyan);
  font-size: 0.7rem;
  margin-right: 4px;
  opacity: 0.7;
}
.ti.editable { cursor: pointer; }
.ti.editable:hover { background: rgba(0,255,136,.04); }

/* ═══ CALENDAR HEATMAP ═══ */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.cal-weekdays span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-cell {
  position: relative;
  aspect-ratio: 1;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all .25s var(--ease-out);
  overflow: hidden;
}
.cal-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.cal-cell:hover:not(.empty) {
  border-color: rgba(0,255,136,.3);
  transform: scale(1.05);
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.cal-cell.today {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 1px var(--green), 0 0 16px var(--green-glow);
}
.cal-cell.selected {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 1px var(--cyan), 0 0 16px var(--cyan-glow);
  z-index: 1;
}
.cal-day {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-2);
  position: relative;
  z-index: 1;
}
.cal-cell.today .cal-day { color: var(--green); }
.cal-amt {
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-align: right;
}
.cal-cell.has-spend::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cell-color, transparent);
  pointer-events: none;
  border-radius: inherit;
}
.cal-zero-marker {
  font-size: 0.85rem;
  color: var(--green);
  opacity: 0.7;
  text-align: right;
  font-weight: 600;
}
.cal-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cal-legend-label {
  font-size: 0.7rem;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.cal-cell-mini {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* ═══ RULES PAGE ═══ */
.rules-info-card {
  display: flex;
  gap: 16px;
  background: rgba(0,255,136,.04);
  border: 1px solid rgba(0,255,136,.18);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.rules-info-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,255,136,.15), rgba(34,211,238,.08));
  border: 1px solid rgba(0,255,136,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.rules-info-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  font-size: .92rem;
}
.rules-info-text {
  font-size: 0.84rem;
  color: var(--text-3);
  line-height: 1.6;
}

.rule-section-title {
  font-size: 0.7rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.rule-section-title:first-of-type { margin-top: 6px; }

.rule-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  margin-bottom: 10px;
  transition: all .2s var(--ease-out);
}
.rule-row:hover {
  background: rgba(255,255,255,.04);
  border-color: var(--border-2);
}
.rule-row.disabled { opacity: 0.5; }
.rule-priority {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.78rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-2);
  flex-shrink: 0;
}
.rule-info { min-width: 0; }
.rule-condition {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.rule-condition .field { color: var(--cyan); }
.rule-condition .op { color: var(--text-3); font-weight: 500; }
.rule-condition .value { background: rgba(34,211,238,.08); padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.85em; }
.rule-actions-text {
  font-size: 0.75rem;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rule-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.72rem;
}
.rule-action-pill.cat { background: rgba(0,255,136,.1); color: var(--green); border: 1px solid rgba(0,255,136,.18); }
.rule-action-pill.tag { background: rgba(167,139,250,.1); color: var(--purple); border: 1px solid rgba(167,139,250,.18); }
.rule-action-pill.hide { background: rgba(255,180,84,.1); color: var(--amber); border: 1px solid rgba(255,180,84,.18); }
.rule-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.rule-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.rule-toggle::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 16px; height: 16px;
  background: var(--text-3);
  border-radius: 50%;
  transition: all .25s var(--ease-out);
}
.rule-toggle.on {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 12px var(--green-glow);
}
.rule-toggle.on::after {
  left: 17px;
  background: #04130a;
}
.rule-edit-btn, .rule-del-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  width: 28px; height: 28px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.rule-edit-btn:hover { background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.2); color: var(--cyan); }
.rule-del-btn:hover { background: rgba(255,61,113,.08); border-color: rgba(255,61,113,.2); color: var(--red); }

/* ═══════════════════════════════════════════════════════════════════
   PHASE 5: Recap, Investments, Action Items
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ ACTION ITEMS CARD ═══ */
.action-items-card {
  position: relative;
  overflow: hidden;
}
.action-items-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(0,255,136,.06) 0%, transparent 65%);
  pointer-events: none;
}
.action-items-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #04130a;
  box-shadow: 0 0 24px var(--green-glow);
}
.action-items-sub {
  font-size: .76rem;
  color: var(--text-3);
  margin-top: 2px;
  font-weight: 500;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.action-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  padding: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all .25s var(--ease-out);
  align-items: center;
}
.action-item:hover {
  background: rgba(0,255,136,.03);
  border-color: rgba(0,255,136,.18);
  transform: translateX(2px);
}
.action-item-emoji {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(0,255,136,.12), rgba(34,211,238,.06));
  border: 1px solid rgba(0,255,136,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.action-item-info { min-width: 0; }
.action-item-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}
.action-item-desc {
  font-size: .8rem;
  color: var(--text-3);
  line-height: 1.5;
}
.action-item-saving {
  font-size: .82rem;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: rgba(0,255,136,.08);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0,255,136,.2);
}

.action-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-3);
}
.action-empty-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: 0.7;
}
.action-empty-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  font-size: .95rem;
}
.action-empty-msg {
  font-size: .82rem;
  line-height: 1.5;
  max-width: 360px;
  margin: 0 auto;
}

/* ═══ RECAP ═══ */
.recap-hero {
  position: relative;
  background:
    radial-gradient(circle at 80% 20%, rgba(0,255,136,.1), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(167,139,250,.07), transparent 50%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 36px;
  margin-bottom: 18px;
  overflow: hidden;
}
.recap-hero::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,255,136,.18), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.recap-period-label {
  font-size: .72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
  font-weight: 700;
}
.recap-net-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  margin-bottom: 8px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.recap-net-val.pos {
  background: linear-gradient(135deg, #fff, var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.recap-net-val.neg {
  background: linear-gradient(135deg, #fff, var(--red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.recap-net-label {
  font-size: .9rem;
  color: var(--text-3);
  font-weight: 500;
}
.recap-vs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  font-size: .78rem;
  font-weight: 600;
}
.recap-vs.up   { color: var(--green); border-color: rgba(0,255,136,.2); background: rgba(0,255,136,.06); }
.recap-vs.down { color: var(--red);   border-color: rgba(255,61,113,.2); background: rgba(255,61,113,.06); }

.recap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .recap-grid { grid-template-columns: 1fr; } }

.recap-tile {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.recap-tile-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.recap-tile-sub {
  font-size: .76rem;
  color: var(--text-3);
  margin-bottom: 18px;
}

.recap-savings-rate {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.recap-savings-bar-bg {
  height: 8px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
  overflow: hidden;
  margin: 18px 0 8px;
}
.recap-savings-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transition: width 1.2s var(--ease-out);
  box-shadow: 0 0 16px rgba(34,211,238,.4);
}

.recap-biggest {
  display: flex;
  align-items: center;
  gap: 14px;
}
.recap-biggest-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,61,113,.15), rgba(255,180,84,.08));
  border: 1px solid rgba(255,61,113,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.recap-biggest-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}
.recap-biggest-meta {
  font-size: .76rem;
  color: var(--text-3);
  margin-top: 2px;
}
.recap-biggest-amt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-top: 2px;
}

.recap-rank-list { display: flex; flex-direction: column; gap: 12px; }
.recap-rank-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
}
.recap-rank-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-4);
  letter-spacing: -.02em;
}
.recap-rank-row:nth-child(1) .recap-rank-num { color: var(--green); }
.recap-rank-row:nth-child(2) .recap-rank-num { color: var(--cyan); }
.recap-rank-row:nth-child(3) .recap-rank-num { color: var(--purple); }
.recap-rank-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recap-rank-meta {
  font-size: .72rem;
  color: var(--text-3);
}
.recap-rank-amt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .98rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ═══ INVESTMENTS ═══ */
.inv-hero {
  position: relative;
  background:
    radial-gradient(circle at 80% 20%, rgba(34,211,238,.1), transparent 50%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 36px;
  margin-bottom: 18px;
  overflow: hidden;
}
.inv-hero-label {
  font-size: .72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
  font-weight: 700;
}
.inv-hero-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff, var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.inv-hero-meta {
  font-size: .9rem;
  color: var(--text-3);
  margin-top: 8px;
  font-weight: 500;
}

.inv-allocation {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 16px;
}
.inv-alloc-bar {
  display: flex;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  background: rgba(255,255,255,.04);
}
.inv-alloc-seg {
  height: 100%;
  transition: width 1s var(--ease-out);
  position: relative;
}
.inv-alloc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.inv-alloc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-2);
}
.inv-alloc-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.inv-alloc-name {
  font-weight: 600;
}
.inv-alloc-pct {
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.inv-table-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.inv-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 16px;
  padding: 16px 22px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: all .2s var(--ease-out);
}
.inv-row:last-child { border-bottom: none; }
.inv-row:hover { background: rgba(255,255,255,.02); }
.inv-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34,211,238,.1), rgba(0,255,136,.06));
  border: 1px solid rgba(34,211,238,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem;
  color: var(--cyan);
}
.inv-ico.crypto { background: linear-gradient(135deg, rgba(255,180,84,.12), rgba(244,114,182,.06)); border-color: rgba(255,180,84,.25); color: var(--amber); }
.inv-ico.etf    { background: linear-gradient(135deg, rgba(167,139,250,.12), rgba(34,211,238,.06)); border-color: rgba(167,139,250,.25); color: var(--purple); }
.inv-ico.cash   { background: linear-gradient(135deg, rgba(0,255,136,.1), rgba(34,211,238,.06)); border-color: rgba(0,255,136,.25); color: var(--green); }
.inv-info { min-width: 0; }
.inv-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-meta {
  font-size: .74rem;
  color: var(--text-3);
  margin-top: 2px;
}
.inv-quantity {
  text-align: right;
  font-size: .82rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.inv-quantity strong {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 2px;
}
.inv-value {
  text-align: right;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -.01em;
}

@media (max-width: 760px) {
  .inv-row { grid-template-columns: 36px 1fr auto; }
  .inv-quantity { display: none; }
  .recap-net-val { font-size: 2.6rem; }
  .recap-hero { padding: 26px; }
  .inv-hero { padding: 26px; }
  .inv-hero-val { font-size: 2.6rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6: Dashboard projections, bills timeline, live indicator
   ═══════════════════════════════════════════════════════════════════ */

.live-strip{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 18px;
  padding:8px 16px;
  background:rgba(0,255,136,.04);
  border:1px solid rgba(0,255,136,.15);
  border-radius:var(--r-pill);
  width:fit-content;
  font-size:.76rem;
  color:var(--text-3);
  font-weight:500;
}
.live-strip .live-dot{
  width:7px;height:7px;
  background:var(--green);
  border-radius:50%;
  animation:pulse 2s infinite;
  box-shadow:0 0 10px var(--green), 0 0 0 3px rgba(0,255,136,.2);
}
.live-strip .live-text strong{color:var(--green);font-weight:700}

/* Dashboard bills timeline */
.bills-track-dash{
  display:flex;
  gap:12px;
  padding:6px 0 14px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:thin;
}
.bills-track-dash::-webkit-scrollbar{height:6px}
.bills-track-dash::-webkit-scrollbar-track{background:transparent}
.bills-track-dash::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:3px}
.bills-track-dash::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.12)}

.bill-mini{
  flex-shrink:0;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
  min-width:200px;
  position:relative;
  overflow:hidden;
  transition:all .25s var(--ease-out);
}
.bill-mini::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
}
.bill-mini.urgent::before  {background:var(--red);box-shadow:0 0 10px rgba(255,61,113,.4)}
.bill-mini.soon::before    {background:var(--amber);box-shadow:0 0 10px rgba(255,180,84,.4)}
.bill-mini.later::before   {background:var(--green);box-shadow:0 0 10px rgba(0,255,136,.3)}
.bill-mini:hover{transform:translateY(-2px);background:rgba(255,255,255,.04);border-color:var(--border-2)}
.bm-merch{font-size:.86rem;font-weight:700;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-meta{font-size:.7rem;color:var(--text-3);margin-bottom:9px;font-weight:500}
.bm-amt{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.bm-due{
  font-size:.66rem;
  font-weight:700;
  margin-top:5px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.bill-mini.urgent .bm-due{color:var(--red)}
.bill-mini.soon .bm-due  {color:var(--amber)}
.bill-mini.later .bm-due {color:var(--green)}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.1: Dashboard accounts grid with credit card tags
   ═══════════════════════════════════════════════════════════════════ */
.accounts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
  padding:6px 0 4px;
}
.acc-card{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 20px;
  position:relative;
  overflow:hidden;
  transition:all .25s var(--ease-out);
}
.acc-card::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
}
.acc-card.depository::before{background:var(--green);box-shadow:0 0 10px rgba(0,255,136,.4)}
.acc-card.credit::before    {background:var(--red);  box-shadow:0 0 10px rgba(255,61,113,.4)}
.acc-card.investment::before{background:var(--cyan); box-shadow:0 0 10px rgba(34,211,238,.4)}
.acc-card.loan::before      {background:var(--amber);box-shadow:0 0 10px rgba(255,180,84,.4)}
.acc-card.other::before     {background:var(--text-4)}
.acc-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.04);border-color:var(--border-2)}

.acc-card-hd{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.acc-card-info{min-width:0;flex:1}
.acc-card-name{
  font-size:.92rem;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:4px;
}
.acc-card-meta{
  font-size:.72rem;
  color:var(--text-3);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.acc-tag{
  flex-shrink:0;
  padding:3px 9px;
  border-radius:var(--r-pill);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.acc-tag.depository{background:rgba(0,255,136,.1);  color:var(--green); border:1px solid rgba(0,255,136,.25)}
.acc-tag.credit    {background:rgba(255,61,113,.1); color:var(--red);   border:1px solid rgba(255,61,113,.25)}
.acc-tag.investment{background:rgba(34,211,238,.1); color:var(--cyan);  border:1px solid rgba(34,211,238,.25)}
.acc-tag.loan      {background:rgba(255,180,84,.1); color:var(--amber); border:1px solid rgba(255,180,84,.25)}
.acc-tag.other     {background:rgba(255,255,255,.05);color:var(--text-3);border:1px solid rgba(255,255,255,.1)}

.acc-card-bal{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  line-height:1.1;
}
.acc-card-bal.debt{color:var(--red)}
.acc-card-avail{
  font-size:.7rem;
  color:var(--text-3);
  margin-top:4px;
  font-weight:500;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.2: 3 stream sections (Income / Expenses / Credit Cards)
   ═══════════════════════════════════════════════════════════════════ */
.stream-section{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px 26px 22px;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.stream-section::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
}
.stream-section.income::before  {background:linear-gradient(90deg, var(--green) 0%, transparent 100%);  box-shadow:0 0 20px var(--green-glow)}
.stream-section.expense::before {background:linear-gradient(90deg, var(--red) 0%, transparent 100%);    box-shadow:0 0 20px rgba(255,61,113,.4)}
.stream-section.credit::before  {background:linear-gradient(90deg, var(--purple) 0%, transparent 100%); box-shadow:0 0 20px rgba(167,139,250,.4)}

.stream-hd{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.stream-info{display:flex;align-items:center;gap:14px}
.stream-icon{
  width:42px;height:42px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;
  font-weight:800;
  font-family:'Plus Jakarta Sans',sans-serif;
  flex-shrink:0;
}
.stream-section.income .stream-icon  {background:linear-gradient(135deg, rgba(0,255,136,.15), rgba(0,255,136,.04));border:1px solid rgba(0,255,136,.3); color:var(--green)}
.stream-section.expense .stream-icon {background:linear-gradient(135deg, rgba(255,61,113,.15), rgba(255,61,113,.04));border:1px solid rgba(255,61,113,.3);color:var(--red)}
.stream-section.credit .stream-icon  {background:linear-gradient(135deg, rgba(167,139,250,.15), rgba(167,139,250,.04));border:1px solid rgba(167,139,250,.3);color:var(--purple)}
.stream-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.stream-sub{font-size:.74rem;color:var(--text-3);margin-top:2px;font-weight:500}
.stream-kpi{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.9rem;
  font-weight:800;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.stream-section.income .stream-kpi{
  background:linear-gradient(135deg, #fff, var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.stream-section.expense .stream-kpi{
  background:linear-gradient(135deg, #fff, var(--red));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.stream-section.credit .stream-kpi{
  background:linear-gradient(135deg, #fff, var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

.stream-chart-wrap{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px 12px;
  margin-bottom:18px;
}
.stream-chart-wrap .range-pills{
  display:inline-flex;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:10px;
  padding:2px;
  gap:2px;
  margin-bottom:10px;
}
.stream-chart-wrap .range-pill{
  padding:5px 12px;
  border-radius:7px;
  border:none;
  background:transparent;
  color:var(--text-3);
  font-family:inherit;
  font-size:.74rem;
  font-weight:600;
  cursor:pointer;
  transition:all .25s var(--ease-out);
}
.stream-chart-wrap .range-pill.active{
  background:var(--surface-2);
  color:var(--text);
}
.stream-section.income  .range-pill.active{box-shadow:inset 0 0 0 1px rgba(0,255,136,.3); color:var(--green)}
.stream-section.expense .range-pill.active{box-shadow:inset 0 0 0 1px rgba(255,61,113,.3);color:var(--red)}
.stream-section.credit  .range-pill.active{box-shadow:inset 0 0 0 1px rgba(167,139,250,.3);color:var(--purple)}
.stream-svg{width:100%;height:200px;display:block}

.stream-list-wrap{margin-top:6px}
.stream-list-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:.74rem;
  color:var(--text-3);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.stream-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:260px;
  overflow-y:auto;
  padding-right:6px;
}
.stream-list::-webkit-scrollbar{width:4px}
.stream-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}
.stream-row{
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  border-radius:9px;
  transition:all .2s var(--ease-out);
}
.stream-row:hover{background:rgba(255,255,255,.04);border-color:var(--border)}
.stream-row-ico{
  width:32px;height:32px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;
  background:rgba(255,255,255,.04);
}
.stream-row-name{
  font-size:.86rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:2px;
}
.stream-row-meta{
  font-size:.7rem;
  color:var(--text-3);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stream-row-amt{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.94rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.stream-section.income  .stream-row-amt{color:var(--green)}
.stream-section.expense .stream-row-amt{color:var(--red)}
.stream-section.credit  .stream-row-amt{color:var(--purple)}

.stream-empty{
  text-align:center;
  padding:32px 16px;
  color:var(--text-3);
  font-size:.84rem;
}
.stream-empty .empty-ico{font-size:1.6rem;margin-bottom:8px;opacity:.6}

@media (max-width:760px){
  .stream-section{padding:18px 16px}
  .stream-kpi{font-size:1.5rem}
  .stream-svg{height:160px}
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.3: Date-grouped Transactions list
   ═══════════════════════════════════════════════════════════════════ */
.txn-groups{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.txn-day-group{
  background:rgba(255,255,255,.015);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  position:relative;
}
.txn-day-group::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:linear-gradient(180deg, var(--green) 0%, transparent 100%);
  opacity:.4;
}
.txn-day-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px 10px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(0,255,136,.04), transparent);
}
.txn-day-label{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.86rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.01em;
}
.txn-day-meta{
  font-size:.74rem;
  color:var(--text-3);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:10px;
}
.txn-day-net{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:.84rem;
  padding:2px 9px;
  border-radius:var(--r-pill);
}
.txn-day-net.pos{
  color:var(--green);
  background:rgba(0,255,136,.08);
  border:1px solid rgba(0,255,136,.2);
}
.txn-day-net.neg{
  color:var(--red);
  background:rgba(255,61,113,.08);
  border:1px solid rgba(255,61,113,.2);
}
.txn-day-group .txn-list{
  padding:6px 8px 8px;
}
.txn-day-group .ti{
  cursor:pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.4: Interactive Net Worth chart
   ═══════════════════════════════════════════════════════════════════ */
.nw-chart-card{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px 26px;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.nw-chart-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:14px;
}
.nw-chart-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.nw-chart-sub{
  font-size:.74rem;
  color:var(--text-3);
  margin-top:2px;
  font-weight:500;
}
.nw-chart-wrap{
  position:relative;
  width:100%;
}
.nw-chart-svg{
  width:100%;
  height:280px;
  display:block;
  cursor:crosshair;
}
.nw-chart-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.nw-chart-legend{
  display:flex;
  gap:18px;
  margin-top:14px;
  font-size:.72rem;
  color:var(--text-3);
  font-weight:500;
}
.nw-chart-legend-item{display:flex;align-items:center;gap:7px}
.nw-legend-line{
  display:inline-block;
  width:18px;height:2px;
  border-radius:1px;
}
.nw-legend-line.solid {background:var(--green);box-shadow:0 0 8px var(--green-glow)}
.nw-legend-line.dashed{
  background:repeating-linear-gradient(90deg, var(--green) 0 5px, transparent 5px 10px);
  opacity:.6;
}

.nw-hero{position:relative}
.nw-hero-scrub-date{
  position:absolute;
  top:24px;right:30px;
  background:rgba(0,255,136,.08);
  border:1px solid rgba(0,255,136,.3);
  color:var(--green);
  padding:6px 14px;
  border-radius:var(--r-pill);
  font-size:.78rem;
  font-weight:700;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.02em;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .2s var(--ease-out);
}
.nw-hero-val{
  transition:none;  /* keep snappy when scrubbing */
}
.nw-hero-val.scrubbing{
  text-shadow:0 0 30px rgba(0,255,136,.4);
}
.nw-hero-chg.delta-up   {color:var(--green)}
.nw-hero-chg.delta-down {color:var(--red)}

@keyframes fadeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:760px){
  .nw-chart-svg{height:200px}
  .nw-hero-scrub-date{top:14px;right:14px;font-size:.7rem;padding:4px 10px}
  .nw-chart-legend{flex-direction:column;gap:6px}
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.6: Trends KPI drill-down
   ═══════════════════════════════════════════════════════════════════ */

/* Make stat-cards on Trends page clickable when they have data-trend-tile */
.stat-card[data-trend-tile]{
  cursor:pointer;
  transition:all .25s var(--ease-out);
  position:relative;
}
.stat-card[data-trend-tile]:hover{
  transform:translateY(-3px);
  border-color:var(--border-2);
}
.stat-card[data-trend-tile][data-active="true"]{
  background:linear-gradient(135deg, rgba(0,255,136,.06), rgba(0,255,136,.02));
}
.stat-card[data-trend-tile][data-active="true"][data-tile-type="income"]{
  border-color:rgba(0,255,136,.45);
  box-shadow:0 0 28px rgba(0,255,136,.18), 0 8px 32px rgba(0,0,0,.4);
}
.stat-card[data-trend-tile][data-active="true"][data-tile-type="expense"]{
  border-color:rgba(255,61,113,.45);
  box-shadow:0 0 28px rgba(255,61,113,.18), 0 8px 32px rgba(0,0,0,.4);
  background:linear-gradient(135deg, rgba(255,61,113,.06), rgba(255,61,113,.02));
}
.stat-card[data-trend-tile][data-active="true"][data-tile-type="netsaved"]{
  border-color:rgba(255,180,84,.45);
  box-shadow:0 0 28px rgba(255,180,84,.18), 0 8px 32px rgba(0,0,0,.4);
  background:linear-gradient(135deg, rgba(255,180,84,.06), rgba(255,180,84,.02));
}

/* Subtle "click me" hint on hover */
.stat-card[data-trend-tile]::after{
  content:'›';
  position:absolute;
  bottom:14px; right:18px;
  font-size:1.3rem;
  color:var(--text-4);
  opacity:0;
  transition:all .25s var(--ease-out);
  font-family:'Plus Jakarta Sans',sans-serif;
}
.stat-card[data-trend-tile]:hover::after,
.stat-card[data-trend-tile][data-active="true"]::after{
  opacity:.7;
  right:14px;
}

/* Drilldown container */
.trend-drilldown{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px 26px;
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
  animation:slideDownFade .3s var(--ease-out);
}
.trend-drilldown::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
}
.trend-drilldown[data-tile-type="income"]::before  {background:linear-gradient(90deg, var(--green),  transparent); box-shadow:0 0 20px var(--green-glow)}
.trend-drilldown[data-tile-type="expense"]::before {background:linear-gradient(90deg, var(--red),    transparent); box-shadow:0 0 20px rgba(255,61,113,.4)}
.trend-drilldown[data-tile-type="netsaved"]::before{background:linear-gradient(90deg, var(--amber),  transparent); box-shadow:0 0 20px rgba(255,180,84,.4)}
@keyframes slideDownFade{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

.td-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.td-info{display:flex;align-items:center;gap:14px}
.td-icon{
  width:42px;height:42px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
  font-weight:800;
  flex-shrink:0;
}
.trend-drilldown[data-tile-type="income"]   .td-icon{background:rgba(0,255,136,.12);  color:var(--green); border:1px solid rgba(0,255,136,.3)}
.trend-drilldown[data-tile-type="expense"]  .td-icon{background:rgba(255,61,113,.12); color:var(--red);   border:1px solid rgba(255,61,113,.3)}
.trend-drilldown[data-tile-type="netsaved"] .td-icon{background:rgba(255,180,84,.12); color:var(--amber); border:1px solid rgba(255,180,84,.3)}
.td-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.td-sub{font-size:.74rem;color:var(--text-3);margin-top:2px;font-weight:500}

.td-close{
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text-3);
  cursor:pointer;
  font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
  font-family:inherit;
  flex-shrink:0;
}
.td-close:hover{background:rgba(255,255,255,.08);color:var(--text);transform:rotate(90deg)}

.td-chart{
  width:100%;
  height:220px;
  display:block;
  margin-bottom:18px;
}

.td-list-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:.74rem;
  color:var(--text-3);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.td-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:340px;
  overflow-y:auto;
  padding-right:6px;
}
.td-list::-webkit-scrollbar{width:5px}
.td-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

.td-row{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:14px;
  align-items:center;
  padding:11px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  border-radius:10px;
  transition:all .2s var(--ease-out);
}
.td-row:hover{background:rgba(255,255,255,.04);border-color:var(--border)}
.td-row-ico{
  width:36px;height:36px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  background:rgba(255,255,255,.04);
}
.td-row-name{
  font-size:.9rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:2px;
}
.td-row-meta{
  font-size:.72rem;
  color:var(--text-3);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.td-row-amt{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.trend-drilldown[data-tile-type="income"]   .td-row-amt{color:var(--green)}
.trend-drilldown[data-tile-type="expense"]  .td-row-amt{color:var(--red)}
.trend-drilldown[data-tile-type="netsaved"] .td-row-amt.pos{color:var(--green)}
.trend-drilldown[data-tile-type="netsaved"] .td-row-amt.neg{color:var(--red)}

@media (max-width:760px){
  .trend-drilldown{padding:18px 16px}
  .td-chart{height:160px}
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.8: Credit Cards page
   ═══════════════════════════════════════════════════════════════════ */
.cards-tabs{
  display:flex;
  gap:4px;
  margin-bottom:18px;
  border-bottom:1px solid var(--border);
  padding:0 4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.cards-tabs::-webkit-scrollbar{display:none}
.cards-tab{
  padding:14px 22px 12px;
  background:transparent;
  border:none;
  color:var(--text-3);
  cursor:pointer;
  font-family:inherit;
  font-size:.86rem;
  font-weight:600;
  border-radius:10px 10px 0 0;
  transition:all .25s var(--ease-out);
  white-space:nowrap;
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.cards-tab:hover{color:var(--text);background:rgba(255,255,255,.02)}
.cards-tab.active{
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.cards-tab.active::after{
  content:'';
  position:absolute;
  left:8px; right:8px; bottom:-1px;
  height:2px;
  background:linear-gradient(90deg, var(--green), var(--cyan));
  border-radius:2px;
  box-shadow:0 0 12px var(--green-glow);
}
.cards-tab-mask{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  color:var(--text-4);
  font-weight:500;
}

.card-detail{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Hero — card visual + key metrics */
.card-hero{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:24px;
}
@media (max-width:900px){ .card-hero{grid-template-columns:1fr} }

/* The credit card visual */
.card-visual{
  background:linear-gradient(135deg, #1a1d2e 0%, #0a0d14 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:22px;
  height:200px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.card-visual::before{
  content:'';
  position:absolute;
  top:-50%; right:-30%;
  width:80%; height:200%;
  background:radial-gradient(circle, rgba(0,255,136,.15) 0%, transparent 60%);
  pointer-events:none;
}
.card-visual-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.card-issuer{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:.9rem;
  color:var(--text);
  letter-spacing:-.01em;
}
.card-chip{
  width:38px; height:28px;
  background:linear-gradient(135deg, #d4af37, #f4d03f, #b8860b);
  border-radius:5px;
  position:relative;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.3);
}
.card-chip::before, .card-chip::after{
  content:'';
  position:absolute;
  background:rgba(0,0,0,.2);
}
.card-chip::before{ top:5px; left:5px; right:5px; height:2px; }
.card-chip::after{ bottom:5px; left:5px; right:5px; height:2px; }
.card-number{
  font-family:'JetBrains Mono',monospace;
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text);
  position:relative;
  z-index:1;
}
.card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  position:relative;
  z-index:1;
}
.card-name{
  font-size:.78rem;
  font-weight:600;
  color:var(--text-2);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.card-balance{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--red);
  font-variant-numeric:tabular-nums;
}

/* Key metrics tiles next to the card */
.card-metrics{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.cm-tile{
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  position:relative;
  overflow:hidden;
}
.cm-tile-lbl{
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-4);
  font-weight:700;
  margin-bottom:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.cm-edit-btn{
  background:transparent;
  border:none;
  color:var(--text-4);
  cursor:pointer;
  font-size:.85rem;
  padding:0;
  font-family:inherit;
  opacity:.6;
  transition:opacity .2s;
}
.cm-edit-btn:hover{opacity:1;color:var(--green)}
.cm-tile-val{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cm-tile-sub{
  font-size:.7rem;
  color:var(--text-3);
  margin-top:3px;
  font-weight:500;
}
.cm-source{
  display:inline-block;
  font-size:.62rem;
  padding:2px 6px;
  border-radius:var(--r-pill);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.cm-source.plaid {background:rgba(0,255,136,.1); color:var(--green); border:1px solid rgba(0,255,136,.25)}
.cm-source.manual{background:rgba(255,180,84,.1); color:var(--amber);border:1px solid rgba(255,180,84,.25)}
.cm-source.missing{background:rgba(255,255,255,.04); color:var(--text-4); border:1px solid var(--border)}

/* Trend chart */
.card-trend-card{
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:22px 24px;
}
.card-trend-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:14px;
}
.card-trend-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.05rem;
  font-weight:700;
}
.card-trend-sub{font-size:.74rem;color:var(--text-3);margin-top:2px}
.card-trend-svg{width:100%;height:220px;display:block}

/* Payoff calculator */
.payoff-card{
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px 26px;
  position:relative;
  overflow:hidden;
}
.payoff-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--green), var(--cyan), var(--purple));
}
.payoff-hd{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:14px;
}
.payoff-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.1rem;
  font-weight:700;
}
.payoff-sub{font-size:.74rem;color:var(--text-3);margin-top:2px}

.payoff-mode-toggle{
  display:inline-flex;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:10px;
  padding:3px;
  gap:2px;
}
.payoff-mode-btn{
  padding:6px 14px;
  border-radius:7px;
  border:none;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  font-family:inherit;
  font-size:.74rem;
  font-weight:600;
  transition:all .25s var(--ease-out);
}
.payoff-mode-btn.active{
  background:linear-gradient(135deg, var(--green), #00cc6e);
  color:#04130a;
  box-shadow:0 2px 8px var(--green-glow);
}

.payoff-input-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:20px;
}
@media (max-width:540px){ .payoff-input-row{grid-template-columns:1fr} }
.payoff-input-group{display:flex;flex-direction:column;gap:6px}
.payoff-input-label{
  font-size:.7rem;
  font-weight:700;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.payoff-input-wrap{
  position:relative;
}
.payoff-input{
  width:100%;
  padding:11px 14px 11px 28px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:all .2s;
}
.payoff-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,255,136,.1)}
.payoff-input-prefix{
  position:absolute;
  left:12px; top:50%;
  transform:translateY(-50%);
  color:var(--text-3);
  font-weight:600;
  font-family:'Plus Jakarta Sans',sans-serif;
  pointer-events:none;
}

.scenarios{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-bottom:18px;
}
@media (max-width:760px){ .scenarios{grid-template-columns:1fr} }
.scenario{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.scenario::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
}
.scenario.minimum::before  {background:var(--red);   box-shadow:0 0 12px rgba(255,61,113,.4)}
.scenario.user::before     {background:var(--cyan);  box-shadow:0 0 12px rgba(34,211,238,.4)}
.scenario.double::before   {background:var(--green); box-shadow:0 0 12px var(--green-glow)}
.scenario-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-4);
  font-weight:700;
  margin-bottom:6px;
}
.scenario-payment{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  margin-bottom:14px;
}
.scenario.minimum .scenario-payment{color:var(--red)}
.scenario.user    .scenario-payment{color:var(--cyan)}
.scenario.double  .scenario-payment{color:var(--green)}
.scenario-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.82rem;
}
.scenario-row:last-child{border-bottom:none}
.scenario-row-label{color:var(--text-3);font-weight:500}
.scenario-row-val{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.scenario-savings{
  margin-top:10px;
  padding:8px 12px;
  background:rgba(0,255,136,.08);
  border:1px solid rgba(0,255,136,.2);
  border-radius:8px;
  font-size:.74rem;
  color:var(--green);
  font-weight:600;
  text-align:center;
}

.payoff-table-wrap{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  margin-top:18px;
}
.payoff-table-hd{
  padding:12px 16px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
  font-size:.74rem;
  font-weight:700;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:.08em;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.payoff-table{
  width:100%;
  border-collapse:collapse;
  font-size:.84rem;
}
.payoff-table th{
  text-align:left;
  padding:10px 16px;
  font-size:.7rem;
  font-weight:700;
  color:var(--text-4);
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.01);
}
.payoff-table th.num{text-align:right}
.payoff-table td{
  padding:9px 16px;
  border-bottom:1px solid rgba(255,255,255,.03);
  font-variant-numeric:tabular-nums;
}
.payoff-table td.num{text-align:right;font-weight:600}
.payoff-table tr:last-child td{border-bottom:none}
.payoff-table tr:hover td{background:rgba(255,255,255,.02)}
.payoff-table-scroll{max-height:340px;overflow-y:auto}
.payoff-table-scroll::-webkit-scrollbar{width:5px}
.payoff-table-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* Setup banner when Plaid Liabilities not enabled */
.cards-setup-banner{
  background:linear-gradient(135deg, rgba(255,180,84,.06), rgba(34,211,238,.04));
  border:1px solid rgba(255,180,84,.2);
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:18px;
  font-size:.84rem;
  line-height:1.6;
  color:var(--text-2);
}
.cards-setup-banner h4{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.95rem;
  font-weight:700;
  margin-bottom:8px;
  color:var(--amber);
  display:flex;
  align-items:center;
  gap:8px;
}
.cards-setup-banner code{
  background:rgba(0,255,136,.08);
  padding:2px 6px;
  border-radius:5px;
  font-family:'JetBrains Mono',monospace;
  font-size:.85em;
  color:var(--green);
}
.cards-setup-banner ol{padding-left:22px;margin-top:8px}
.cards-setup-banner li{margin-bottom:4px}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.11: Account toggle switches + Settings page
   ═══════════════════════════════════════════════════════════════════ */

/* Toggle switch */
.toggle-sw{
  position:relative;
  display:inline-block;
  width:42px;
  height:24px;
  flex-shrink:0;
  cursor:pointer;
}
.toggle-sw input{
  opacity:0;
  width:0;
  height:0;
}
.toggle-sw-slider{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  border-radius:13px;
  transition:all .25s var(--ease-out);
}
.toggle-sw-slider::before{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:2px;
  top:2px;
  background:#5a6478;
  border-radius:50%;
  transition:all .25s cubic-bezier(.34, 1.56, .64, 1);
}
.toggle-sw input:checked + .toggle-sw-slider{
  background:rgba(0,255,136,.15);
  border-color:rgba(0,255,136,.4);
}
.toggle-sw input:checked + .toggle-sw-slider::before{
  transform:translateX(18px);
  background:var(--green);
  box-shadow:0 0 12px var(--green-glow);
}

/* Disabled account card variant */
.acc-card.disabled{
  opacity:.45;
}
.acc-card.disabled .acc-card-bal{
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.3);
}
.acc-card.disabled::before{
  background:var(--text-4) !important;
  box-shadow:none !important;
}
.acc-disabled-tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:var(--r-pill);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(255,255,255,.04);
  color:var(--text-4);
  border:1px solid var(--border);
  margin-left:6px;
}

/* Bank account row toggle on Linked Banks page */
.acc-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-top:1px solid var(--border);
}
.acc-row.disabled .acc-name,
.acc-row.disabled .acc-bal{
  opacity:.45;
}
.acc-row.disabled .acc-bal{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.acc-toggle-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.acc-toggle-label{
  font-size:.62rem;
  color:var(--text-4);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ═══════════ Settings page ═══════════ */
.settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media (max-width:900px){ .settings-grid{grid-template-columns:1fr} }

.settings-card{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px 26px;
  position:relative;
  overflow:hidden;
}
.settings-card.full{grid-column:1 / -1}
.settings-card-hd{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}
.settings-card-info{display:flex;align-items:center;gap:14px}
.settings-card-icon{
  width:42px;height:42px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;
  background:rgba(0,255,136,.08);
  border:1px solid rgba(0,255,136,.2);
  color:var(--green);
  flex-shrink:0;
}
.settings-card-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.settings-card-sub{
  font-size:.74rem;
  color:var(--text-3);
  margin-top:2px;
  font-weight:500;
}

.settings-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  gap:14px;
}
.settings-row:last-child{border-bottom:none}
.settings-row-label{
  font-size:.82rem;
  color:var(--text-3);
  font-weight:500;
}
.settings-row-val{
  font-size:.86rem;
  color:var(--text);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:right;
  word-break:break-word;
}
.settings-row-val .badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--r-pill);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.badge-free{background:rgba(255,255,255,.04);color:var(--text-3);border:1px solid var(--border)}
.badge-pro {background:rgba(0,255,136,.1); color:var(--green);border:1px solid rgba(0,255,136,.3)}

.settings-action{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

/* Plan upgrade card */
.plan-upgrade{
  background:linear-gradient(135deg, rgba(0,255,136,.08), rgba(34,211,238,.04));
  border:1px solid rgba(0,255,136,.25);
  border-radius:14px;
  padding:18px 20px;
  margin-top:14px;
}
.plan-upgrade-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:.92rem;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.plan-upgrade-desc{
  font-size:.78rem;
  color:var(--text-3);
  line-height:1.55;
  margin-bottom:12px;
}
.plan-upgrade-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 14px;
  font-size:.78rem;
  color:var(--text-2);
  margin-bottom:14px;
}
.plan-upgrade-feature{display:flex;align-items:center;gap:6px}
.plan-upgrade-feature::before{content:'✓';color:var(--green);font-weight:700}

/* Bank list inside settings */
.settings-bank-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:8px;
  gap:14px;
}
.settings-bank-row:last-child{margin-bottom:0}
.settings-bank-info{display:flex;align-items:center;gap:12px;min-width:0}
.settings-bank-logo{
  width:36px;height:36px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--green),#00cc6e);
  color:#04130a;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-family:'Plus Jakarta Sans',sans-serif;
  flex-shrink:0;
}
.settings-bank-name{font-weight:700;color:var(--text);font-size:.86rem}
.settings-bank-meta{font-size:.7rem;color:var(--text-3);margin-top:2px}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.13: Categories page
   ═══════════════════════════════════════════════════════════════════ */
.cat-metric-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:18px;
}
@media (max-width:760px){ .cat-metric-row{grid-template-columns:1fr} }

.cat-metric-tile{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:16px;
  position:relative;
  overflow:hidden;
  transition:all .25s var(--ease-out);
}
.cat-metric-tile::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
}
.cat-metric-tile:hover{transform:translateY(-2px)}
.cat-metric-tile.recurring::before {background:var(--cyan);  box-shadow:0 0 14px rgba(34,211,238,.4)}
.cat-metric-tile.paid::before      {background:var(--green); box-shadow:0 0 14px var(--green-glow)}
.cat-metric-tile.due::before       {background:var(--amber); box-shadow:0 0 14px rgba(255,180,84,.4)}

.cmt-icon{
  width:46px;height:46px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  flex-shrink:0;
}
.cat-metric-tile.recurring .cmt-icon{background:rgba(34,211,238,.1);  color:var(--cyan);  border:1px solid rgba(34,211,238,.25)}
.cat-metric-tile.paid      .cmt-icon{background:rgba(0,255,136,.1);   color:var(--green); border:1px solid rgba(0,255,136,.25)}
.cat-metric-tile.due       .cmt-icon{background:rgba(255,180,84,.1);  color:var(--amber); border:1px solid rgba(255,180,84,.25)}

.cmt-info{flex:1;min-width:0}
.cmt-lbl{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-4);
  font-weight:700;
  margin-bottom:5px;
}
.cmt-val{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  margin-bottom:3px;
}
.cat-metric-tile.recurring .cmt-val{
  background:linear-gradient(135deg, #fff, var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.cat-metric-tile.paid .cmt-val{
  background:linear-gradient(135deg, #fff, var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.cat-metric-tile.due .cmt-val{
  background:linear-gradient(135deg, #fff, var(--amber));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.cmt-sub{
  font-size:.74rem;
  color:var(--text-3);
  font-weight:500;
}

/* Categories list (full page) */
#cat-page-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cat-page-row{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  border-radius:11px;
  cursor:pointer;
  transition:all .25s var(--ease-out);
  position:relative;
}
.cat-page-row:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--border-2);
  transform:translateX(2px);
}
.cat-page-row.active{
  background:rgba(0,255,136,.04);
  border-color:rgba(0,255,136,.3);
  box-shadow:0 0 18px rgba(0,255,136,.1);
}
.cat-page-row::after{
  content:'›';
  position:absolute;
  right:18px;top:50%;
  transform:translateY(-50%);
  font-size:1.2rem;
  color:var(--text-4);
  opacity:0;
  transition:opacity .25s, right .25s;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.cat-page-row:hover::after,
.cat-page-row.active::after{
  opacity:.8;
  right:14px;
}

.cat-page-icon{
  width:42px;height:42px;
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
  font-weight:800;
  font-family:'Plus Jakarta Sans',sans-serif;
}

.cat-page-info{min-width:0}
.cat-page-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.94rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}
.cat-page-bar-bg{
  height:6px;
  background:rgba(255,255,255,.04);
  border-radius:3px;
  overflow:hidden;
  position:relative;
}
.cat-page-bar{
  height:100%;
  border-radius:3px;
  transition:width .5s var(--ease-out);
}
.cat-page-meta{
  font-size:.7rem;
  color:var(--text-3);
  margin-top:4px;
  font-weight:500;
}

.cat-page-amt-wrap{
  text-align:right;
  padding-right:18px;
}
.cat-page-amt{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.05rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  letter-spacing:-.02em;
}
.cat-page-pct{
  font-size:.7rem;
  color:var(--text-3);
  margin-top:2px;
  font-weight:600;
}

/* Drill-down panel for categories */
.cat-drilldown{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px 26px;
  margin-top:14px;
  position:relative;
  overflow:hidden;
  animation:slideDownFade .3s var(--ease-out);
}
.cat-drilldown::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--green), transparent);
  box-shadow:0 0 18px var(--green-glow);
}

.cd-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.cd-info{display:flex;align-items:center;gap:14px}
.cd-icon{
  width:46px;height:46px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  font-weight:800;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.cd-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.cd-sub{font-size:.74rem;color:var(--text-3);margin-top:2px;font-weight:500}

.cd-chart{
  width:100%;
  height:200px;
  display:block;
  margin-bottom:16px;
}

.cd-list-hd{
  font-size:.72rem;
  color:var(--text-3);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.cd-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:380px;
  overflow-y:auto;
  padding-right:6px;
}
.cd-list::-webkit-scrollbar{width:5px}
.cd-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

.cd-row{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:14px;
  align-items:center;
  padding:11px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  border-radius:10px;
  transition:all .2s var(--ease-out);
}
.cd-row:hover{background:rgba(255,255,255,.04);border-color:var(--border)}
.cd-row-ico{
  width:36px;height:36px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;
  background:rgba(255,255,255,.04);
}
.cd-row-name{
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:2px;
}
.cd-row-meta{
  font-size:.7rem;
  color:var(--text-3);
  font-weight:500;
}
.cd-row-amt{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.95rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--red);
}
.cd-row-amt.pos{color:var(--green)}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.14: Custom chart toolbar + Monthly page
   ═══════════════════════════════════════════════════════════════════ */
.trend-toolbar{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.chart-type-group{
  display:inline-flex;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:10px;
  padding:3px;
  gap:2px;
}
.ct-btn{
  width:36px;
  height:32px;
  border-radius:7px;
  border:none;
  background:transparent;
  color:var(--text-3);
  font-size:1rem;
  cursor:pointer;
  transition:all .25s var(--ease-out);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ct-btn:hover{background:rgba(255,255,255,.04);color:var(--text)}
.ct-btn.active{
  background:linear-gradient(135deg, var(--green), #00cc6e);
  color:#04130a;
  box-shadow:0 2px 8px var(--green-glow);
}

.series-toggle-group{
  display:flex;
  gap:14px;
  align-items:center;
}
.series-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-size:.82rem;
  font-weight:600;
  color:var(--text-2);
  user-select:none;
}
.series-toggle input{
  width:16px;
  height:16px;
  accent-color:var(--green);
  cursor:pointer;
}
.series-toggle .st-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

.date-range-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
}
.quick-dates{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.qd-btn{
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:7px;
  background:transparent;
  color:var(--text-3);
  font-family:inherit;
  font-size:.74rem;
  font-weight:600;
  cursor:pointer;
  transition:all .25s var(--ease-out);
}
.qd-btn:hover{color:var(--text);border-color:var(--border-2)}
.qd-btn.active{
  background:rgba(0,255,136,.1);
  border-color:rgba(0,255,136,.4);
  color:var(--green);
}
.custom-dates{
  display:flex;
  gap:10px;
  margin-left:auto;
}
.dt-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.74rem;
  color:var(--text-3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.dt-label input[type="date"]{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:7px;
  color:var(--text);
  padding:6px 10px;
  font-family:inherit;
  font-size:.78rem;
  cursor:pointer;
  color-scheme:dark;
}
.dt-label input[type="date"]:focus{
  outline:none;
  border-color:var(--green);
}

/* ═══════════ Monthly page ═══════════ */
.monthly-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
.month-tab{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 22px;
  cursor:pointer;
  transition:all .25s var(--ease-out);
  position:relative;
  overflow:hidden;
}
.month-tab:hover{
  transform:translateY(-3px);
  border-color:var(--border-2);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.month-tab.active{
  background:linear-gradient(135deg, rgba(0,255,136,.06), rgba(34,211,238,.04));
  border-color:rgba(0,255,136,.45);
  box-shadow:0 0 28px rgba(0,255,136,.15), 0 12px 32px rgba(0,0,0,.4);
}
.month-tab::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, var(--green), var(--cyan));
  opacity:0;
  transition:opacity .25s;
}
.month-tab.active::before, .month-tab:hover::before{opacity:1}

.mt-month-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.mt-tx-count{
  font-size:.7rem;
  color:var(--text-3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.mt-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.84rem;
}
.mt-row:last-child{border-bottom:none}
.mt-row-lbl{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-3);
  font-weight:500;
}
.mt-row-lbl::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
}
.mt-row.income .mt-row-lbl::before  {background:var(--green);box-shadow:0 0 6px var(--green-glow)}
.mt-row.expense .mt-row-lbl::before {background:var(--red);  box-shadow:0 0 6px rgba(255,61,113,.5)}
.mt-row.net .mt-row-lbl::before     {background:var(--text-4)}
.mt-row-val{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.mt-row.income .mt-row-val{color:var(--green)}
.mt-row.expense .mt-row-val{color:var(--red)}
.mt-row.net.pos .mt-row-val{color:var(--green)}
.mt-row.net.neg .mt-row-val{color:var(--red)}

/* Monthly drill-down (shares CSS conventions with Categories drilldown) */
.monthly-drilldown{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px 26px;
  margin-top:18px;
  position:relative;
  overflow:hidden;
  animation:slideDownFade .3s var(--ease-out);
}
.monthly-drilldown::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow:0 0 18px var(--green-glow);
}

.md-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.md-info{display:flex;flex-direction:column}
.md-month{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.md-summary{font-size:.78rem;color:var(--text-3);margin-top:2px;font-weight:500}

.md-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:20px;
}
@media (max-width:760px){ .md-stats{grid-template-columns:repeat(2,1fr)} }
.md-stat{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:11px;
  padding:14px 16px;
}
.md-stat-lbl{
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-4);
  font-weight:700;
  margin-bottom:6px;
}
.md-stat-val{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.md-stat-val.pos{color:var(--green)}
.md-stat-val.neg{color:var(--red)}

.md-list-hd{
  font-size:.74rem;
  color:var(--text-3);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.md-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:480px;
  overflow-y:auto;
  padding-right:6px;
}
.md-list::-webkit-scrollbar{width:5px}
.md-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

.md-row{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:14px;
  align-items:center;
  padding:11px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  border-radius:10px;
  transition:all .2s var(--ease-out);
}
.md-row:hover{background:rgba(255,255,255,.04);border-color:var(--border)}
.md-row-ico{
  width:36px;height:36px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;
  background:rgba(255,255,255,.04);
}
.md-row-name{
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:2px;
}
.md-row-meta{
  font-size:.7rem;
  color:var(--text-3);
  font-weight:500;
}
.md-row-amt{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.95rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.md-row-amt.pos{color:var(--green)}
.md-row-amt.neg{color:var(--red)}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.20: Five fixes — CSS additions
   ═══════════════════════════════════════════════════════════════════ */

/* Job 4: Smaller calendar cells */
.cal-cell-sm{
  min-height:62px !important;
  padding:6px 7px !important;
  border-radius:8px !important;
}
.cal-cell-sm .cal-day{
  font-size:.78rem !important;
  margin-bottom:2px !important;
}
.cal-cell-sm .cal-amt,
.cal-cell-sm .cal-amt-pos,
.cal-cell-sm .cal-amt-neg{
  font-size:.7rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
}
.cal-cell-sm .cal-amt-pos{color:var(--green);text-shadow:0 0 6px var(--green-glow)}
.cal-cell-sm .cal-amt-neg{color:var(--red)}
.cal-amt-stack{
  display:flex;
  flex-direction:column;
  gap:0px;
}
.cal-amt-mini{
  font-size:.62rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
  line-height:1.15;
}
.cal-amt-mini.pos{color:var(--green)}
.cal-amt-mini.neg{color:var(--red)}

/* Income halo on cells with income */
.cal-cell.has-income{
  border-color:rgba(0,255,136,0.25);
  box-shadow:inset 0 0 12px rgba(0,255,136,0.08);
}
.cal-cell.has-income.has-spend{
  border-color:rgba(255,255,255,0.08);
  box-shadow:inset 0 0 8px rgba(0,255,136,0.04);
}

/* Job 1c: Credit Cards — gradient tabs */
.cc-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.cc-tab{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 18px;
  cursor:pointer;
  transition:all .25s var(--ease-out);
  position:relative;
  overflow:hidden;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.cc-tab::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  opacity:0;
  transition:opacity .25s;
  pointer-events:none;
  background:var(--cc-gradient, linear-gradient(135deg, #00ff88, #22d3ee));
  filter:blur(28px);
  z-index:0;
}
.cc-tab:hover::before{opacity:0.18}
.cc-tab.active::before{opacity:0.35}
.cc-tab.active{
  border-color:var(--cc-border, rgba(0,255,136,0.5));
  box-shadow:0 0 24px var(--cc-glow, rgba(0,255,136,0.2)), inset 0 1px 0 rgba(255,255,255,0.1);
}
.cc-tab > *{position:relative;z-index:1}
.cc-tab-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--text);
}
.cc-tab-meta{
  font-size:.7rem;
  color:var(--text-3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.cc-tab-bal{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.1rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  margin-top:3px;
}

/* Different gradient per card via nth-child */
.cc-tab:nth-child(6n+1){--cc-gradient:linear-gradient(135deg, #00ff88, #22d3ee); --cc-border:rgba(0,255,136,0.5); --cc-glow:rgba(0,255,136,0.2)}
.cc-tab:nth-child(6n+2){--cc-gradient:linear-gradient(135deg, #a78bfa, #f472b6); --cc-border:rgba(167,139,250,0.5); --cc-glow:rgba(167,139,250,0.2)}
.cc-tab:nth-child(6n+3){--cc-gradient:linear-gradient(135deg, #ffb454, #ff3d71); --cc-border:rgba(255,180,84,0.5); --cc-glow:rgba(255,180,84,0.2)}
.cc-tab:nth-child(6n+4){--cc-gradient:linear-gradient(135deg, #22d3ee, #60a5fa); --cc-border:rgba(34,211,238,0.5); --cc-glow:rgba(34,211,238,0.2)}
.cc-tab:nth-child(6n+5){--cc-gradient:linear-gradient(135deg, #f472b6, #a78bfa); --cc-border:rgba(244,114,182,0.5); --cc-glow:rgba(244,114,182,0.2)}
.cc-tab:nth-child(6n+6){--cc-gradient:linear-gradient(135deg, #ff8a4c, #ffb454); --cc-border:rgba(255,138,76,0.5); --cc-glow:rgba(255,138,76,0.2)}

/* Job 1d: Credit Cards split-pane layout */
.cc-split-container{
  position:relative;
  overflow:hidden;
}
.cc-split-main{
  transition:transform .4s var(--ease-out);
  transform:translateX(0);
}
.cc-split-container.has-detail .cc-split-main{
  transform:translateX(calc(-1 * var(--cc-detail-shift, 40%)));
}
.cc-split-detail{
  position:absolute;
  top:0;
  right:-100%;
  width:48%;
  height:100%;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  transition:right .4s var(--ease-out);
  z-index:5;
  overflow-y:auto;
}
.cc-split-container.has-detail .cc-split-detail{
  right:0;
}
.cc-split-detail-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.cc-split-detail-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-0.02em;
}
.cc-split-detail-sub{
  font-size:.74rem;
  color:var(--text-3);
  margin-top:2px;
}

@media (max-width:980px){
  .cc-split-container.has-detail .cc-split-main{
    transform:translateX(-100%);
  }
  .cc-split-detail{
    width:100%;
  }
}

/* Job 3: Recap "more features" cards */
.recap-features{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-top:18px;
}
@media (max-width:760px){ .recap-features{grid-template-columns:1fr} }

.recap-feature-card{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px 24px;
  position:relative;
  overflow:hidden;
}
.recap-feature-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
}
.recap-feature-card.ytd::before    {background:var(--cyan); box-shadow:0 0 14px rgba(34,211,238,.4)}
.recap-feature-card.drift::before  {background:var(--purple); box-shadow:0 0 14px rgba(167,139,250,.4)}
.recap-feature-card.streaks::before{background:var(--green); box-shadow:0 0 14px var(--green-glow)}
.recap-feature-card.goals::before  {background:#ffb454; box-shadow:0 0 14px rgba(255,180,84,.4)}
.recap-feature-card.attribution::before{background:#f472b6; box-shadow:0 0 14px rgba(244,114,182,.4)}

.recap-feature-card.full{grid-column:1 / -1}

.recap-feature-hd{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
}
.recap-feature-icon{
  width:36px;height:36px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  font-weight:800;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.recap-feature-card.ytd .recap-feature-icon       {background:rgba(34,211,238,.1);  color:var(--cyan);  border:1px solid rgba(34,211,238,.25)}
.recap-feature-card.drift .recap-feature-icon     {background:rgba(167,139,250,.1); color:var(--purple);border:1px solid rgba(167,139,250,.25)}
.recap-feature-card.streaks .recap-feature-icon   {background:rgba(0,255,136,.1);   color:var(--green); border:1px solid rgba(0,255,136,.25)}
.recap-feature-card.goals .recap-feature-icon     {background:rgba(255,180,84,.1);  color:#ffb454;      border:1px solid rgba(255,180,84,.25)}
.recap-feature-card.attribution .recap-feature-icon{background:rgba(244,114,182,.1); color:#f472b6;     border:1px solid rgba(244,114,182,.25)}

.recap-feature-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:-0.02em;
}
.recap-feature-sub{
  font-size:.72rem;
  color:var(--text-3);
  font-weight:500;
  margin-top:2px;
}

.recap-feature-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.86rem;
}
.recap-feature-row:last-child{border-bottom:none}
.recap-feature-row-lbl{color:var(--text-3);font-weight:500}
.recap-feature-row-val{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.recap-feature-row-val.pos{color:var(--green)}
.recap-feature-row-val.neg{color:var(--red)}

/* Streak counter big number */
.recap-streak-big{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:2.2rem;
  font-weight:800;
  letter-spacing:-0.03em;
  background:linear-gradient(135deg, #fff, var(--green));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:4px;
}
.recap-streak-lbl{
  font-size:.78rem;
  color:var(--text-3);
  font-weight:500;
  margin-bottom:14px;
}

/* Drift bars (category over/under last year) */
.drift-row{
  display:grid;
  grid-template-columns:1fr 60px 1fr;
  gap:8px;
  align-items:center;
  font-size:.78rem;
  margin-bottom:9px;
}
.drift-cat{
  color:var(--text-2);
  font-weight:600;
}
.drift-bar-wrap{
  position:relative;
  height:8px;
  background:rgba(255,255,255,.04);
  border-radius:4px;
  overflow:hidden;
}
.drift-bar{
  position:absolute;
  top:0;
  height:100%;
  border-radius:4px;
}
.drift-bar.up{background:var(--red);right:50%;box-shadow:0 0 8px rgba(255,61,113,.4)}
.drift-bar.down{background:var(--green);left:50%;box-shadow:0 0 8px var(--green-glow)}
.drift-pct{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.drift-pct.up{color:var(--red)}
.drift-pct.down{color:var(--green)}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.22: Card icon "Show transactions" hint
   ═══════════════════════════════════════════════════════════════════ */
.card-visual{
  position:relative;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.card-visual:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 24px rgba(0,255,136,.18);
}
.card-show-tx-hint{
  position:absolute;
  bottom:14px;
  right:18px;
  font-size:.7rem;
  font-weight:700;
  color:rgba(255,255,255,0.5);
  letter-spacing:0.04em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
  pointer-events:none;
}
.card-visual:hover .card-show-tx-hint{
  opacity:1;
  transform:translateY(0);
  color:var(--green);
  text-shadow:0 0 8px var(--green-glow);
}
/* Permanent subtle hint at bottom always visible on mobile */
@media (hover:none){
  .card-show-tx-hint{
    opacity:0.7;
    transform:translateY(0);
    position:relative;
    bottom:auto;right:auto;
    margin-top:10px;
    text-align:right;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.22: Sharp chart rendering across the app
   ═══════════════════════════════════════════════════════════════════ */
/* Apply geometricPrecision to all chart SVGs for sharp lines */
.svg-chart,
.nw-chart-svg,
.card-trend-svg,
.cd-chart,
.td-chart,
#cf-chart,
#custom-chart,
#card-trend-svg,
#nw-svg{
  shape-rendering:geometricPrecision;
}
/* Ensure all text inside SVG charts uses Inter font consistently */
.svg-chart text,
.nw-chart-svg text,
.card-trend-svg text,
.cd-chart text,
.td-chart text,
#cf-chart text,
#custom-chart text,
#card-trend-svg text,
#nw-svg text{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-feature-settings:'tnum';
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.24: Date-grouped transaction lists
   ═══════════════════════════════════════════════════════════════════ */
.g-day-group{
  margin-bottom:14px;
}
.g-day-group:last-child{margin-bottom:0}

.g-day-hd{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all .2s var(--ease-out);
  user-select:none;
  margin-bottom:6px;
}
.g-day-hd:hover{
  background:rgba(255,255,255,0.04);
  border-color:var(--border-2);
}
.g-day-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  font-size:.78rem;
  color:var(--text-4);
  transition:transform .2s var(--ease-out);
  flex-shrink:0;
}
.g-day-group.collapsed .g-day-arrow{transform:rotate(-90deg)}
.g-day-group.collapsed .g-day-body{display:none}

.g-day-label{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.84rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
  flex-shrink:0;
}
.g-day-count{
  font-size:.7rem;
  color:var(--text-4);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  flex-shrink:0;
}
.g-day-summary{
  margin-left:auto;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.82rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  display:inline-flex;
  gap:8px;
  flex-shrink:0;
  text-align:right;
}
.g-day-summary .pos,
.g-day-summary > .pos{color:var(--green)}
.g-day-summary .neg,
.g-day-summary > .neg{color:var(--red)}

.g-day-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-left:6px;
}

.g-row{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:14px;
  align-items:center;
  padding:10px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  border-radius:10px;
  transition:all .2s var(--ease-out);
}
.g-row:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--border);
}
.g-row-ico{
  width:36px;
  height:36px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  background:rgba(255,255,255,.04);
  flex-shrink:0;
}
.g-row-mid{
  min-width:0;
}
.g-row-name{
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:2px;
}
.g-row-meta{
  font-size:.7rem;
  color:var(--text-3);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.g-row-amt{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.95rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.g-row-amt.pos{color:var(--green)}
.g-row-amt.neg{color:var(--red)}

/* Compact mode for narrow side panels (Credit Card slide) */
@media (max-width:1100px){
  .cc-split-detail .g-day-summary{
    font-size:.74rem;
    flex-direction:column;
    gap:2px;
    text-align:right;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.25: Monthly chart + time slider component
   ═══════════════════════════════════════════════════════════════════ */
.monthly-chart-card{margin-top:18px}

/* Time slider row */
.time-slider-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin:18px 0 14px;
  padding:14px 18px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
}
.time-slider-lbl{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.86rem;
  font-weight:700;
  color:var(--text);
  min-width:140px;
  letter-spacing:-0.01em;
}
.time-slider-edge{
  font-size:.7rem;
  color:var(--text-4);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
  min-width:60px;
  text-align:right;
}

/* Slider input — custom styled */
.time-slider{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:linear-gradient(90deg, var(--green), var(--cyan));
  border-radius:3px;
  outline:none;
  cursor:pointer;
  margin:0;
}
.time-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  background:#fff;
  border:3px solid var(--green);
  border-radius:50%;
  cursor:grab;
  transition:all .2s var(--ease-out);
  box-shadow:0 2px 8px rgba(0,255,136,.35), 0 0 0 4px rgba(0,255,136,0);
}
.time-slider::-webkit-slider-thumb:hover{
  transform:scale(1.15);
  box-shadow:0 4px 12px rgba(0,255,136,.45), 0 0 0 6px rgba(0,255,136,.12);
}
.time-slider::-webkit-slider-thumb:active{
  cursor:grabbing;
  transform:scale(1.2);
}
.time-slider::-moz-range-thumb{
  width:22px;
  height:22px;
  background:#fff;
  border:3px solid var(--green);
  border-radius:50%;
  cursor:grab;
  box-shadow:0 2px 8px rgba(0,255,136,.35);
}
.time-slider::-moz-range-thumb:hover{
  transform:scale(1.15);
}

@media (max-width:640px){
  .time-slider-row{flex-wrap:wrap;gap:10px}
  .time-slider-lbl{min-width:0;width:100%;text-align:center}
  .time-slider{width:100%;flex-basis:100%}
  .time-slider-edge{display:none}
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 6.31: All Credit combined view
   ═══════════════════════════════════════════════════════════════════ */
/* All Credit tab — distinguishable from individual cards */
.cc-tab.cc-tab-all{
  --cc-gradient:linear-gradient(135deg, #ff3d71, #f472b6);
  --cc-border:rgba(255,61,113,0.55);
  --cc-glow:rgba(255,61,113,0.25);
  position:relative;
}
.cc-tab.cc-tab-all::after{
  content:'★';
  position:absolute;
  top:8px;
  right:10px;
  font-size:.7rem;
  color:rgba(255,61,113,.7);
  letter-spacing:0;
}
.cc-tab.cc-tab-all .cc-tab-meta{
  color:#f472b6;
  font-weight:800;
}

/* All Credit visual — different color scheme */
.card-visual.all-credit-visual{
  background:linear-gradient(135deg, #3a0a1a 0%, #1a0510 50%, #051026 100%);
  border:1px solid rgba(255,61,113,0.3);
}

/* Per-card breakdown list at bottom of All Credit view */
.all-credit-cards-list{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border);
  border-radius:var(--r-lg, 18px);
  padding:24px;
  margin-bottom:18px;
}
.all-credit-cards-hd{
  margin-bottom:16px;
}
.all-credit-cards-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-0.02em;
}
.all-credit-cards-sub{
  color:var(--text-3);
  font-size:.78rem;
  margin-top:2px;
}

.acl-row{
  display:grid;
  grid-template-columns:2fr 1fr 2fr 16px;
  gap:18px;
  align-items:center;
  padding:14px 16px;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
  border-radius:12px;
  cursor:pointer;
  transition:all .2s var(--ease-out);
  margin-bottom:8px;
}
.acl-row:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--border);
  transform:translateX(2px);
}
.acl-row:last-child{margin-bottom:0}

.acl-info{min-width:0}
.acl-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:.92rem;
  color:var(--text);
  margin-bottom:2px;
}
.acl-meta{font-size:.74rem;color:var(--text-3);font-weight:500}

.acl-bal{text-align:right}
.acl-bal-val{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:1rem;
  color:var(--red);
  font-variant-numeric:tabular-nums;
}
.acl-apr{font-size:.7rem;color:var(--text-3);font-weight:600;margin-top:2px}
.acl-apr.none{color:var(--text-4);font-style:italic}

.acl-util-wrap{min-width:0}
.acl-util-bar-bg{
  height:6px;
  background:rgba(255,255,255,.04);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:5px;
}
.acl-util-bar{
  height:100%;
  border-radius:3px;
  transition:width .3s var(--ease-out);
}
.acl-util-bar.low{background:var(--green);box-shadow:0 0 6px var(--green-glow)}
.acl-util-bar.mid{background:#ffb454;box-shadow:0 0 6px rgba(255,180,84,.3)}
.acl-util-bar.high{background:var(--red);box-shadow:0 0 6px rgba(255,61,113,.3)}
.acl-util-pct{
  font-size:.72rem;
  color:var(--text-3);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.acl-arrow{
  color:var(--text-4);
  font-size:1.2rem;
  font-weight:300;
  text-align:center;
}

@media (max-width:760px){
  .acl-row{grid-template-columns:1fr 1fr;gap:10px}
  .acl-util-wrap,.acl-arrow{display:none}
}

/* Avalanche calculator */
.avalanche-config{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:18px;
}
.avalanche-config-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.86rem;
  gap:12px;
}
.avalanche-config-row:last-child{border-bottom:none}
.avalanche-config-row.total{
  border-top:1px solid rgba(0,255,136,.2);
  margin-top:6px;
  padding-top:14px;
  border-bottom:none;
}
.avalanche-config-lbl{color:var(--text-3);font-weight:600}
.avalanche-config-val{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:1rem;
}
.avalanche-config-val.pos{color:var(--green)}
.avalanche-input{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-2);
  border-radius:8px;
  padding:8px 12px;
  color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  width:120px;
  text-align:right;
  font-size:.95rem;
}
.avalanche-input:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-glow);
}

.avalanche-results{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-bottom:20px;
}
@media (max-width:760px){.avalanche-results{grid-template-columns:1fr}}
.ar-tile{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
}
.ar-lbl{
  font-size:.7rem;
  color:var(--text-4);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.ar-val{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.ar-val.pos{color:var(--green)}
.ar-val.neg{color:var(--red)}
.ar-sub{font-size:.72rem;color:var(--text-3);margin-top:4px;font-weight:500}

.avalanche-order{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
}
.ao-hd{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:.86rem;
  margin-bottom:12px;
  color:var(--text);
}
.ao-step{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 0;
}
.ao-step-num{
  width:28px;height:28px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--green), var(--green-dim));
  color:#04130a;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:.86rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ao-step-info{min-width:0;flex:1}
.ao-step-name{
  font-weight:700;
  font-size:.88rem;
  color:var(--text);
}
.ao-step-apr{
  color:var(--red);
  font-weight:600;
  font-size:.78rem;
  margin-left:6px;
}
.ao-step-meta{
  font-size:.74rem;
  color:var(--text-3);
  margin-top:2px;
}
/* ════════════════════════════════════════════════════════════════════
   PHASE 6.36 — APPLE WALLET LIGHT THEME (DEFAULT)
   
   Append to END of server/public/styles.css.
   Overrides earlier dark theme via specificity. Light theme is default.
   Set [data-theme="dark"] on <html> to opt back into dark.
   ════════════════════════════════════════════════════════════════════ */

/* Force light theme as default — applies whenever <html> has no theme attr
   OR explicitly has data-theme="light" */
   html:not([data-theme="dark"]) {
    /* === Apple Wallet warm palette === */
    --bg:           #faf8f3 !important;
    --bg-elev:      #f4f0e9 !important;
    --surface:      #ffffff !important;
    --surface-2:    #fbf9f4 !important;
    --surface-3:    #f4f0e9 !important;
    --glass:        rgba(255, 255, 255, 0.85) !important;
    --glass-light:  rgba(28, 25, 23, 0.03) !important;
  
    --border:       rgba(28, 25, 23, 0.06) !important;
    --border-2:     rgba(28, 25, 23, 0.10) !important;
    --border-focus: rgba(20, 184, 127, 0.4) !important;
  
    /* Darker greens for accessibility on light bg */
    --green:        #14b87f !important;
    --green-dim:    #047857 !important;
    --green-glow:   rgba(20, 184, 127, 0.18) !important;
    --cyan:         #0891b2 !important;
    --cyan-glow:    rgba(8, 145, 178, 0.15) !important;
    --red:          #dc2626 !important;
    --red-glow:     rgba(220, 38, 38, 0.18) !important;
    --amber:        #d97706 !important;
    --purple:       #7c3aed !important;
    --pink:         #db2777 !important;
    --blue:         #2563eb !important;
  
    /* Dark text on light bg */
    --text:         #1c1917 !important;
    --text-2:       #44403c !important;
    --text-3:       #78716c !important;
    --text-4:       #a8a29e !important;
    --text-5:       #d6d3d1 !important;
  
    /* Bigger radii (Apple pill aesthetic) */
    --r-sm:  10px;
    --r:     14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-pill: 9999px;
  
    /* Soft shadows instead of dark drop-shadows */
    --shadow-sm:  0 1px 2px rgba(28,25,23,.04), 0 1px 3px rgba(28,25,23,.06) !important;
    --shadow:     0 2px 4px rgba(28,25,23,.04), 0 4px 12px rgba(28,25,23,.06) !important;
    --shadow-lg:  0 8px 16px rgba(28,25,23,.06), 0 16px 40px rgba(28,25,23,.08) !important;
    --shadow-xl:  0 24px 80px rgba(28,25,23,.12) !important;
    --glow:       0 0 0 1px rgba(20,184,127,.15) !important;
    --glow-cyan:  0 0 0 1px rgba(8,145,178,.15) !important;
  }
  
  /* === Body background — replace dark gradients with warm cream === */
  html:not([data-theme="dark"]),
  html:not([data-theme="dark"]) body {
    background: #faf8f3 !important;
    color: var(--text) !important;
  }
  html:not([data-theme="dark"]) body {
    background:
      radial-gradient(ellipse 100% 40% at 50% 0%, rgba(255, 222, 196, 0.4) 0%, rgba(255, 222, 196, 0.1) 30%, transparent 60%),
      linear-gradient(180deg, #faf8f3 0%, #f4f0e9 60%, #faf8f3 100%) !important;
    background-attachment: fixed !important;
  }
  
  /* Kill the animated dark mesh */
  html:not([data-theme="dark"]) body::before {
    background:
      radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.04), transparent 50%),
      radial-gradient(circle at 20% 20%, rgba(20, 184, 127, 0.04), transparent 40%),
      radial-gradient(circle at 60% 50%, rgba(219, 39, 119, 0.03), transparent 45%) !important;
  }
  
  /* === Sidebar — warm cream surface, dark text === */
  html:not([data-theme="dark"]) .sidebar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  /* Sidebar header brand area */
  html:not([data-theme="dark"]) .sb-brand,
  html:not([data-theme="dark"]) .sb-logo {
    color: var(--text) !important;
  }
  html:not([data-theme="dark"]) .sb-logo {
    background: linear-gradient(135deg, #1c1917 0%, #44403c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  
  /* Sidebar section labels */
  html:not([data-theme="dark"]) .sb-section {
    color: var(--text-4) !important;
    font-weight: 700 !important;
  }
  
  /* Nav items — Apple Wallet pill style */
  html:not([data-theme="dark"]) .nav-item {
    color: var(--text-3) !important;
    border-radius: var(--r-pill) !important;
    margin: 1px 8px !important;
    padding: 9px 14px !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.2s var(--ease-out) !important;
  }
  html:not([data-theme="dark"]) .nav-item:hover {
    background: rgba(28, 25, 23, 0.04) !important;
    color: var(--text) !important;
  }
  html:not([data-theme="dark"]) .nav-item.active {
    background: var(--text) !important;
    color: var(--bg) !important;
    font-weight: 600 !important;
  }
  html:not([data-theme="dark"]) .nav-item.active .nav-ico {
    filter: invert(1) !important;
  }
  
  /* === Cards / surfaces === */
  html:not([data-theme="dark"]) .card,
  html:not([data-theme="dark"]) .stat-card,
  html:not([data-theme="dark"]) .acc-card,
  html:not([data-theme="dark"]) .kpi,
  html:not([data-theme="dark"]) .month-card,
  html:not([data-theme="dark"]) .recap-feature-card,
  html:not([data-theme="dark"]) .recap-hero,
  html:not([data-theme="dark"]) .nw-hero,
  html:not([data-theme="dark"]) .nw-tile,
  html:not([data-theme="dark"]) .cat-row,
  html:not([data-theme="dark"]) .cat-item,
  html:not([data-theme="dark"]) .ct-row,
  html:not([data-theme="dark"]) .cat-metric-tile,
  html:not([data-theme="dark"]) .cm-tile,
  html:not([data-theme="dark"]) .settings-card,
  html:not([data-theme="dark"]) .chart-card,
  html:not([data-theme="dark"]) .stream-card,
  html:not([data-theme="dark"]) .cc-tab,
  html:not([data-theme="dark"]) .bill-mini,
  html:not([data-theme="dark"]) .bill-row,
  html:not([data-theme="dark"]) .cal-cell,
  html:not([data-theme="dark"]) .ai-actions-card,
  html:not([data-theme="dark"]) .modal,
  html:not([data-theme="dark"]) .toast,
  html:not([data-theme="dark"]) .pg-hd,
  html:not([data-theme="dark"]) .ar-tile,
  html:not([data-theme="dark"]) .avalanche-config,
  html:not([data-theme="dark"]) .avalanche-order,
  html:not([data-theme="dark"]) .acl-row {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  html:not([data-theme="dark"]) .card:hover,
  html:not([data-theme="dark"]) .stat-card:hover,
  html:not([data-theme="dark"]) .acc-card:hover,
  html:not([data-theme="dark"]) .month-card:hover,
  html:not([data-theme="dark"]) .recap-feature-card:hover,
  html:not([data-theme="dark"]) .nw-tile:hover,
  html:not([data-theme="dark"]) .cm-tile:hover {
    box-shadow: var(--shadow) !important;
    transform: translateY(-1px) !important;
    border-color: var(--border-2) !important;
  }
  
  /* Card titles — solid dark text, no gradient (except hero numbers) */
  html:not([data-theme="dark"]) .card-title,
  html:not([data-theme="dark"]) .chart-title,
  html:not([data-theme="dark"]) .month-card-title,
  html:not([data-theme="dark"]) .stream-title,
  html:not([data-theme="dark"]) .recap-feature-title,
  html:not([data-theme="dark"]) .settings-card-title,
  html:not([data-theme="dark"]) .acc-card-name,
  html:not([data-theme="dark"]) .cat-name,
  html:not([data-theme="dark"]) .ct-name {
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
  }
  
  /* === Big number gradients — keep gradient only on hero numbers === */
  html:not([data-theme="dark"]) .sc-val,
  html:not([data-theme="dark"]) .kpi-val,
  html:not([data-theme="dark"]) .cmt-val,
  html:not([data-theme="dark"]) .cm-tile-val,
  html:not([data-theme="dark"]) .recap-feature-val,
  html:not([data-theme="dark"]) .nw-tile-val,
  html:not([data-theme="dark"]) .acc-card-bal,
  html:not([data-theme="dark"]) .month-card-net,
  html:not([data-theme="dark"]) .bm-amt,
  html:not([data-theme="dark"]) .br-amt,
  html:not([data-theme="dark"]) .stream-total,
  html:not([data-theme="dark"]) .cat-amt,
  html:not([data-theme="dark"]) .ct-amt {
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
  }
  
  /* Hero numbers — keep a tasteful gradient */
  html:not([data-theme="dark"]) .nw-hero-val,
  html:not([data-theme="dark"]) .recap-net-val {
    background: linear-gradient(135deg, var(--green-dim) 0%, var(--cyan) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  
  /* Page titles — keep a subtle gradient for personality */
  html:not([data-theme="dark"]) .pg-title {
    background: linear-gradient(135deg, #1c1917 0%, #44403c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  
  /* === Inputs === */
  html:not([data-theme="dark"]) input[type="text"],
  html:not([data-theme="dark"]) input[type="email"],
  html:not([data-theme="dark"]) input[type="password"],
  html:not([data-theme="dark"]) input[type="number"],
  html:not([data-theme="dark"]) input[type="search"],
  html:not([data-theme="dark"]) textarea,
  html:not([data-theme="dark"]) select {
    background: var(--surface) !important;
    border: 1px solid var(--border-2) !important;
    color: var(--text) !important;
    border-radius: var(--r-sm) !important;
  }
  html:not([data-theme="dark"]) input:focus,
  html:not([data-theme="dark"]) textarea:focus,
  html:not([data-theme="dark"]) select:focus {
    border-color: var(--green) !important;
    outline: 2px solid var(--green-glow) !important;
  }
  
  /* === Buttons === */
  html:not([data-theme="dark"]) .btn-g,
  html:not([data-theme="dark"]) button.btn,
  html:not([data-theme="dark"]) .btn {
    background: var(--surface) !important;
    border: 1px solid var(--border-2) !important;
    color: var(--text) !important;
    border-radius: var(--r-pill) !important;
  }
  html:not([data-theme="dark"]) .btn-g:hover,
  html:not([data-theme="dark"]) button.btn:hover,
  html:not([data-theme="dark"]) .btn:hover {
    background: var(--surface-2) !important;
    border-color: var(--text-4) !important;
  }
  html:not([data-theme="dark"]) .btn-primary,
  html:not([data-theme="dark"]) .btn.primary,
  html:not([data-theme="dark"]) button.primary {
    background: var(--text) !important;
    color: var(--bg) !important;
    border-color: var(--text) !important;
  }
  html:not([data-theme="dark"]) .btn-primary:hover,
  html:not([data-theme="dark"]) .btn.primary:hover,
  html:not([data-theme="dark"]) button.primary:hover {
    background: var(--text-2) !important;
  }
  
  /* === Tags / pills === */
  html:not([data-theme="dark"]) .ctag,
  html:not([data-theme="dark"]) .acc-tag {
    background: var(--surface-3) !important;
    color: var(--text-3) !important;
    border: none !important;
  }
  
  /* Icon backgrounds — use pastel tinted bg with darker accent */
  html:not([data-theme="dark"]) .sc-icon,
  html:not([data-theme="dark"]) .kpi-ico,
  html:not([data-theme="dark"]) .acc-card-icon,
  html:not([data-theme="dark"]) .acc-ico,
  html:not([data-theme="dark"]) .cat-ico,
  html:not([data-theme="dark"]) .recap-feature-ico,
  html:not([data-theme="dark"]) .stream-ico,
  html:not([data-theme="dark"]) .ai-action-ico {
    background: rgba(28, 25, 23, 0.04) !important;
    color: var(--text) !important;
    border: none !important;
    border-radius: var(--r-pill) !important;
  }
  
  /* Color-coded accent icons (green/red/blue/etc) */
  html:not([data-theme="dark"]) .sc-icon.green,
  html:not([data-theme="dark"]) .acc-ico.green {
    background: rgba(20, 184, 127, 0.1) !important;
    color: var(--green-dim) !important;
  }
  html:not([data-theme="dark"]) .sc-icon.red,
  html:not([data-theme="dark"]) .acc-ico.red {
    background: rgba(220, 38, 38, 0.1) !important;
    color: var(--red) !important;
  }
  
  /* === Topbar — sticky header === */
  html:not([data-theme="dark"]) .topbar,
  html:not([data-theme="dark"]) .top-bar,
  html:not([data-theme="dark"]) header.app-hdr {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
  }
  
  /* === Page header (the gradient banner at top of each page) === */
  html:not([data-theme="dark"]) .pg-hd {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
  }
  html:not([data-theme="dark"]) .pg-sub {
    color: var(--text-3) !important;
  }
  
  /* === Transaction rows === */
  html:not([data-theme="dark"]) .td-row,
  html:not([data-theme="dark"]) .cd-row,
  html:not([data-theme="dark"]) .tx-row,
  html:not([data-theme="dark"]) .stream-row,
  html:not([data-theme="dark"]) .g-row {
    background: transparent !important;
    border-color: var(--border) !important;
  }
  html:not([data-theme="dark"]) .td-row:hover,
  html:not([data-theme="dark"]) .tx-row:hover,
  html:not([data-theme="dark"]) .g-row:hover {
    background: var(--surface-2) !important;
  }
  html:not([data-theme="dark"]) .g-day-hd {
    background: var(--surface-3) !important;
    color: var(--text-2) !important;
  }
  
  /* Transaction icon */
  html:not([data-theme="dark"]) .td-ico,
  html:not([data-theme="dark"]) .cd-ico,
  html:not([data-theme="dark"]) .tx-ico,
  html:not([data-theme="dark"]) .stream-ico,
  html:not([data-theme="dark"]) .g-ico {
    background: var(--surface-3) !important;
    color: var(--text-2) !important;
  }
  
  /* === Progress bars === */
  html:not([data-theme="dark"]) .cat-bar-bg,
  html:not([data-theme="dark"]) .ct-bar-bg,
  html:not([data-theme="dark"]) .acl-util-bar-bg,
  html:not([data-theme="dark"]) .drift-bar-bg,
  html:not([data-theme="dark"]) .budget-bar-bg {
    background: rgba(28, 25, 23, 0.05) !important;
  }
  
  /* === Calendar === */
  html:not([data-theme="dark"]) .cal-cell {
    background: var(--surface) !important;
    border-color: var(--border) !important;
  }
  html:not([data-theme="dark"]) .cal-cell.muted {
    background: var(--surface-2) !important;
    opacity: 0.5 !important;
  }
  
  /* === Credit card visual stays dark even in light theme (Apple Wallet style) === */
  /* No override here - dark card on light bg looks like Apple Wallet */
  
  /* === Modal overlay === */
  html:not([data-theme="dark"]) .modal-backdrop,
  html:not([data-theme="dark"]) #paywall-overlay {
    background: rgba(28, 25, 23, 0.4) !important;
    backdrop-filter: blur(8px) !important;
  }
  
  /* === Trial banner (Phase 6.35) === */
  html:not([data-theme="dark"]) .trial-banner {
    background: linear-gradient(90deg, rgba(20, 184, 127, 0.08), rgba(8, 145, 178, 0.06)) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-2) !important;
  }
  
  /* === Upgrade modal === */
  html:not([data-theme="dark"]) .upgrade-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
  }
  html:not([data-theme="dark"]) .up-tier {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
  }
  html:not([data-theme="dark"]) .up-tier.featured {
    background: linear-gradient(180deg, rgba(20, 184, 127, 0.04), var(--surface)) !important;
    border-color: rgba(20, 184, 127, 0.4) !important;
  }
  
  /* === Range pills === */
  html:not([data-theme="dark"]) .range-pills {
    background: var(--surface-3) !important;
    border: 1px solid var(--border) !important;
  }
  html:not([data-theme="dark"]) .range-pill {
    color: var(--text-3) !important;
  }
  html:not([data-theme="dark"]) .range-pill.active {
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  
  /* === SVG chart grid lines on light bg === */
  html:not([data-theme="dark"]) svg line[stroke-dasharray] {
    stroke: rgba(28, 25, 23, 0.06) !important;
  }
  
  /* === Login / signup screen === */
  html:not([data-theme="dark"]) .auth-card,
  html:not([data-theme="dark"]) .login-card,
  html:not([data-theme="dark"]) .signup-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
  }
  
  /* === Theme toggle (Settings page) === */
  html:not([data-theme="dark"]) .theme-opt {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
  }
  html:not([data-theme="dark"]) .theme-opt.active {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 127, 0.15) !important;
  }
  
  /* ════════════════════════════════════════════════════════════════════
     FORCE LIGHT AS DEFAULT — runs before any localStorage check
     ════════════════════════════════════════════════════════════════════ */
  
  /* Default: light. Dark only if explicitly set via toggle. */
  html { color-scheme: light; }
  html[data-theme="dark"] { color-scheme: dark; }
  
  /* End Phase 6.36 */
  /* ════════════════════════════════════════════════════════════════════
   PHASE 6.37 — Modern chart redesign + contrast fix
   Append to END of server/public/styles.css (after Phase 6.36)
   ════════════════════════════════════════════════════════════════════ */

/* ─── CONTRAST FIX ─────────────────────────────────────────────────
   Phase 6.36 used --text-3:#78716c on cream which fails WCAG.
   Bumping to #52525b (4.6:1 ratio on #faf8f3 — passes AA).
   ────────────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) {
  --text-3: #57534e !important;  /* was #78716c — too light */
  --text-4: #78716c !important;  /* was #a8a29e — secondary labels */
  --text-5: #a8a29e !important;  /* tertiary, decorative only */
}

/* Direct selectors for stubborn cases */
html:not([data-theme="dark"]) .pg-sub,
html:not([data-theme="dark"]) .card-sub,
html:not([data-theme="dark"]) .acc-card-meta,
html:not([data-theme="dark"]) .cat-page-meta,
html:not([data-theme="dark"]) .td-meta,
html:not([data-theme="dark"]) .cd-meta,
html:not([data-theme="dark"]) .tx-meta,
html:not([data-theme="dark"]) .stream-row-meta,
html:not([data-theme="dark"]) .settings-card-sub,
html:not([data-theme="dark"]) .acc-card-avail,
html:not([data-theme="dark"]) .recap-feature-sub,
html:not([data-theme="dark"]) .recap-feature-foot,
html:not([data-theme="dark"]) .nw-tile-foot,
html:not([data-theme="dark"]) .cm-tile-sub,
html:not([data-theme="dark"]) .bill-meta,
html:not([data-theme="dark"]) .cmt-sub,
html:not([data-theme="dark"]) .ai-action-sub {
  color: #57534e !important;
}

html:not([data-theme="dark"]) .sc-lbl,
html:not([data-theme="dark"]) .kpi-lbl,
html:not([data-theme="dark"]) .nw-tile-lbl,
html:not([data-theme="dark"]) .cm-lbl,
html:not([data-theme="dark"]) .cmt-lbl,
html:not([data-theme="dark"]) .ar-lbl {
  color: #78716c !important;
  font-weight: 700 !important;
}

/* Day-group headers in transactions — readable! */
html:not([data-theme="dark"]) .g-day-hd,
html:not([data-theme="dark"]) .tx-day-hd {
  color: #1c1917 !important;
  background: #f4f0e9 !important;
  font-weight: 600 !important;
}

/* ─── NET WORTH RINGS ─────────────────────────────────────────────── */
.nw-rings-card {
  margin-bottom: 16px;
}
.nw-rings-hdr {
  margin-bottom: 16px;
}
.nw-rings-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.nw-rings-sub {
  font-size: 0.84rem;
  color: var(--text-3);
  margin-top: 3px;
}
.nw-rings-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 760px) {
  .nw-rings-body { grid-template-columns: 1fr; gap: 16px; }
  .nw-rings-svg-wrap { max-width: 260px; margin: 0 auto; }
}
.nw-rings-svg-wrap {
  position: relative;
}
.nw-rings-svg {
  width: 100%;
  height: auto;
  display: block;
}
.nw-rings-svg circle {
  transform-box: fill-box;
}
.nw-rings-center-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  fill: var(--text);
}
.nw-rings-center-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-3);
}
.nw-rings-legend {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nw-rings-legend-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.nw-rings-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 4px;
  box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.04);
}
.nw-rings-legend-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}
.nw-rings-legend-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-top: 2px;
}
.nw-rings-legend-goal {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 4px;
}
.nw-rings-legend-bar {
  width: 100%;
  height: 4px;
  background: rgba(28, 25, 23, 0.05);
  border-radius: 9999px;
  margin-top: 6px;
  overflow: hidden;
}
.nw-rings-legend-bar > div {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── CATEGORY DONUT ──────────────────────────────────────────────── */
.cat-donut-card {
  margin-bottom: 14px;
}
.cat-donut-hdr {
  margin-bottom: 14px;
}
.cat-donut-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 760px) {
  .cat-donut-body { grid-template-columns: 1fr; gap: 16px; }
  .cat-donut-svg-wrap { max-width: 220px; margin: 0 auto; }
}
.cat-donut-svg-wrap {
  position: relative;
}
.cat-donut-svg {
  width: 100%;
  display: block;
}
.cat-donut-svg path {
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: 110px 110px;
}
.cat-donut-svg path:hover {
  transform: scale(1.03);
}
.cat-donut-center-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  fill: var(--text);
}
.cat-donut-center-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-3);
}
.cat-donut-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
@media (max-width: 480px) {
  .cat-donut-legend { grid-template-columns: 1fr; }
}
.cat-donut-legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 0.82rem;
}
.cat-donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cat-donut-legend-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-donut-legend-amt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 0.82rem;
}
.cat-donut-legend-pct {
  font-size: 0.74rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}

@keyframes donut-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* ─── STAT TILE SPARKLINES ────────────────────────────────────────── */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-sparkline {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 80px;
  height: 24px;
  opacity: 0.85;
  pointer-events: none;
}
@media (max-width: 600px) {
  .stat-sparkline {
    width: 60px;
    opacity: 0.6;
  }
}

/* ─── SPENDING HEATMAP ────────────────────────────────────────────── */
.heatmap-card {
  margin-top: 14px;
  margin-bottom: 14px;
}
.heatmap-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 16px;
}
.heatmap-scale {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;
  max-width: 100%;
}
.heatmap-cell {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 4px;
  background: var(--surface-3);
  cursor: default;
  transition: transform 0.15s ease;
}
.heatmap-cell:hover {
  transform: scale(1.2);
  z-index: 2;
  position: relative;
}
.heatmap-cell.h0 { background: rgba(28, 25, 23, 0.05); }
.heatmap-cell.h1 { background: rgba(20, 184, 127, 0.25); }
.heatmap-cell.h2 { background: rgba(20, 184, 127, 0.5); }
.heatmap-cell.h3 { background: rgba(220, 38, 38, 0.55); }
.heatmap-cell.h4 { background: rgba(220, 38, 38, 0.85); }
.heatmap-scale .heatmap-cell {
  width: 12px;
  height: 12px;
  aspect-ratio: 1;
}

@keyframes heatmap-in {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .nw-rings-svg circle,
  .cat-donut-svg path,
  .nw-rings-legend-bar > div,
  .heatmap-cell {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── BONUS: Better hover on tx rows ──────────────────────────────── */
html:not([data-theme="dark"]) .td-row:hover,
html:not([data-theme="dark"]) .tx-row:hover,
html:not([data-theme="dark"]) .stream-row:hover,
html:not([data-theme="dark"]) .cat-page-row:hover {
  background: rgba(20, 184, 127, 0.04) !important;
  border-color: rgba(20, 184, 127, 0.2) !important;
}

/* End Phase 6.37 */
/* ════════════════════════════════════════════════════════════════════
   PHASE 6.41 — Dashboard Redesign
   Topnav + pure-black hero with circular trend + income/expense breakdown
   
   Append to END of server/public/styles.css (after Phase 6.37)
   ════════════════════════════════════════════════════════════════════ */

/* ─── TOPNAV (replaces sidebar on dashboard) ────────────────────── */
html:not([data-theme="dark"]) .vq-topnav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 20px;
}
html:not([data-theme="dark"]) .vq-tn-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
html:not([data-theme="dark"]) .vq-tn-brand-mark {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, #1c1917, #44403c);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #faf8f3;
  font-weight: 800;
  font-size: 0.92rem;
}
html:not([data-theme="dark"]) .vq-tn-nav {
  display: flex;
  gap: 2px;
  margin-left: 16px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
}
html:not([data-theme="dark"]) .vq-tn-nav::-webkit-scrollbar { display: none; }
html:not([data-theme="dark"]) .vq-tn-item {
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
}
html:not([data-theme="dark"]) .vq-tn-item:hover {
  background: rgba(28, 25, 23, 0.04);
  color: var(--text);
}
html:not([data-theme="dark"]) .vq-tn-item.active {
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}
html:not([data-theme="dark"]) .vq-tn-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
html:not([data-theme="dark"]) .vq-tn-sync {
  font-size: 0.74rem;
  color: var(--green-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(20, 184, 127, 0.08);
  border-radius: 9999px;
  font-weight: 600;
  white-space: nowrap;
}
html:not([data-theme="dark"]) .vq-tn-sync-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: vq-pulse 2s ease-in-out infinite;
}
@keyframes vq-pulse { 50% { opacity: 0.4; } }

/* Hide original sidebar when topnav is active */
html:not([data-theme="dark"]) body.vq-topnav-active aside.sidebar { display: none !important; }
html:not([data-theme="dark"]) body.vq-topnav-active main.main { margin-left: 0 !important; }

/* ─── REFRESH BUTTON ────────────────────────────────────────────── */
html:not([data-theme="dark"]) .vq-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
html:not([data-theme="dark"]) .vq-refresh:hover { background: var(--surface-2); }
html:not([data-theme="dark"]) .vq-refresh.loading { pointer-events: none; opacity: 0.7; }
html:not([data-theme="dark"]) .vq-refresh-ico {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
html:not([data-theme="dark"]) .vq-refresh.loading .vq-refresh-ico {
  animation: vq-spin 1s linear infinite;
}
@keyframes vq-spin { to { transform: rotate(360deg); } }

/* ─── HERO (pure black, circular trend with thin rings) ─────────── */
html:not([data-theme="dark"]) .vq-hero {
  background: #000000 !important;
  border-radius: 20px;
  padding: 36px 40px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 8px 16px rgba(28,25,23,.06), 0 16px 40px rgba(28,25,23,.12);
}
html:not([data-theme="dark"]) .vq-hero::before {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.14), transparent 60%);
  pointer-events: none;
}
html:not([data-theme="dark"]) .vq-hero::after {
  content: '';
  position: absolute;
  left: -120px; bottom: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.10), transparent 60%);
  pointer-events: none;
}
html:not([data-theme="dark"]) .vq-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 1;
}
html:not([data-theme="dark"]) .vq-rings-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
html:not([data-theme="dark"]) .vq-rings {
  width: 220px;
  height: 220px;
}
html:not([data-theme="dark"]) .vq-rings-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}
html:not([data-theme="dark"]) .vq-rings-center-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
  text-rendering: geometricPrecision;
}
html:not([data-theme="dark"]) .vq-rings-center-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
html:not([data-theme="dark"]) .vq-rings-center-val.pos { color: #10b981; }
html:not([data-theme="dark"]) .vq-rings-center-val.neg { color: #ef4444; }
html:not([data-theme="dark"]) .vq-rings-center-sub {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 5px;
  font-weight: 500;
}

html:not([data-theme="dark"]) .vq-stat-block { position: relative; }
html:not([data-theme="dark"]) .vq-stat-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-rendering: geometricPrecision;
}
html:not([data-theme="dark"]) .vq-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
html:not([data-theme="dark"]) .vq-stat-dot.income { background: #10b981; }
html:not([data-theme="dark"]) .vq-stat-dot.expense { background: #ef4444; }
html:not([data-theme="dark"]) .vq-stat-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.95rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  color: #ffffff;
}
html:not([data-theme="dark"]) .vq-stat-val.green { color: #10b981; }
html:not([data-theme="dark"]) .vq-stat-val.red { color: #ef4444; }
html:not([data-theme="dark"]) .vq-stat-meta {
  display: flex;
  gap: 12px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
html:not([data-theme="dark"]) .vq-stat-spark {
  width: 100%;
  height: 28px;
  margin-top: 12px;
  opacity: 0.85;
}
html:not([data-theme="dark"]) .vq-hero-quick {
  display: flex;
  gap: 36px;
  padding-top: 24px;
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1;
}
html:not([data-theme="dark"]) .vq-hqs { flex: 1; }
html:not([data-theme="dark"]) .vq-hqs-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
  text-rendering: geometricPrecision;
}
html:not([data-theme="dark"]) .vq-hqs-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-rendering: geometricPrecision;
}
html:not([data-theme="dark"]) .vq-hqs-val.green { color: #10b981; }
html:not([data-theme="dark"]) .vq-hqs-val.red { color: #ef4444; }

/* ─── INCOME / EXPENSE BREAKDOWN PANELS ─────────────────────────── */
html:not([data-theme="dark"]) .vq-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
html:not([data-theme="dark"]) .vq-bd-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
html:not([data-theme="dark"]) .vq-bd-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
html:not([data-theme="dark"]) .vq-bd-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  text-rendering: geometricPrecision;
}
html:not([data-theme="dark"]) .vq-bd-title-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
html:not([data-theme="dark"]) .vq-bd-title-dot.green { background: #10b981; }
html:not([data-theme="dark"]) .vq-bd-title-dot.red { background: #ef4444; }
html:not([data-theme="dark"]) .vq-bd-total { text-align: right; }
html:not([data-theme="dark"]) .vq-bd-total-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-rendering: geometricPrecision;
}
html:not([data-theme="dark"]) .vq-bd-total-val.green { color: #047857; }
html:not([data-theme="dark"]) .vq-bd-total-val.red { color: #dc2626; }
html:not([data-theme="dark"]) .vq-bd-total-lbl {
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 3px;
  font-weight: 600;
}
html:not([data-theme="dark"]) .vq-bd-list {
  display: flex;
  flex-direction: column;
}
html:not([data-theme="dark"]) .vq-bd-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
html:not([data-theme="dark"]) .vq-bd-row:last-child { border-bottom: none; }
html:not([data-theme="dark"]) .vq-bd-row-ico {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.84rem;
  color: var(--text-2);
}
html:not([data-theme="dark"]) .vq-bd-row-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
html:not([data-theme="dark"]) .vq-bd-row-meta {
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
html:not([data-theme="dark"]) .vq-bd-row-bar-wrap {
  height: 4px;
  background: var(--surface-3);
  border-radius: 9999px;
  margin-top: 5px;
  overflow: hidden;
}
html:not([data-theme="dark"]) .vq-bd-row-bar {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html:not([data-theme="dark"]) .vq-bd-row-bar.green {
  background: linear-gradient(90deg, #047857, #10b981);
}
html:not([data-theme="dark"]) .vq-bd-row-bar.red {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}
html:not([data-theme="dark"]) .vq-bd-row-amt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  text-align: right;
  color: var(--text);
}
html:not([data-theme="dark"]) .vq-bd-row-pct {
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}
html:not([data-theme="dark"]) .vq-bd-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 0.84rem;
}
html:not([data-theme="dark"]) .vq-bd-empty-icon {
  font-size: 1.4rem;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* Hide the OLD stat grid + live strip when Phase 6.41 is active */
html:not([data-theme="dark"]) body.vq-dashboard-v2 #page-dashboard > .stat-grid,
html:not([data-theme="dark"]) body.vq-dashboard-v2 #page-dashboard > .live-strip {
  display: none !important;
}

/* Mobile responsive */
@media (max-width: 920px) {
  html:not([data-theme="dark"]) .vq-hero-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  html:not([data-theme="dark"]) .vq-rings-wrap { margin: 0 auto; }
  html:not([data-theme="dark"]) .vq-breakdown { grid-template-columns: 1fr; }
  html:not([data-theme="dark"]) .vq-hero { padding: 24px 22px; }
  html:not([data-theme="dark"]) .vq-hero-quick { flex-direction: column; gap: 16px; }
}
@media (max-width: 600px) {
  html:not([data-theme="dark"]) .vq-tn-nav { display: none; }
  html:not([data-theme="dark"]) .vq-tn-sync { display: none; }
}

/* Sharper text everywhere on dashboard */
html:not([data-theme="dark"]) #page-dashboard {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* End Phase 6.41 */
/* ════════════════════════════════════════════════════════════════════
   PHASE 6.41 HOTFIX — Layout grid override
   
   Append to END of server/public/styles.css (after the existing 6.41 block)
   
   The original 6.41 hid the sidebar with display:none, but the parent
   .layout uses `grid-template-columns: 256px 1fr` so the 256px column
   was still reserved → main content squeezed into ~10% of viewport.
   
   Fix: when topnav is active, .layout becomes single-column.
   ════════════════════════════════════════════════════════════════════ */

html:not([data-theme="dark"]) body.vq-topnav-active .layout {
  grid-template-columns: 1fr !important;
}

/* Also for dark theme just in case */
body.vq-topnav-active .layout {
  grid-template-columns: 1fr !important;
}

/* Ensure main reclaims the full width and proper padding */
body.vq-topnav-active main.main {
  padding: 24px 32px !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Sidebar truly gone — release its space, not just hidden */
body.vq-topnav-active aside.sidebar {
  display: none !important;
  width: 0 !important;
}

/* End Phase 6.41 hotfix */
/* ════════════════════════════════════════════════════════════════════
   PHASE 6.42b — Hide AI surfaces (reversible)
   
   Append to END of server/public/styles.css
   
   Hides:
   - The floating AI Assistant button (✨ FAB, bottom-right)
   - The slide-out AI panel (opens when FAB is clicked)
   
   Does NOT delete:
   - Backend routes at /api/ai/* (preserved, just unreachable from UI)
   - app.js functions (toggleAI, sendAI, renderAIConfigState, etc.)
   - The HTML markup itself (just visually hidden)
   
   To re-enable later: delete this block, or set --ai-enabled: 1 on :root
   ════════════════════════════════════════════════════════════════════ */

/* Hide the floating ✨ button */
#ai-fab,
.ai-fab {
  display: none !important;
}

/* Hide the slide-out panel (even if toggled via JS) */
#ai-panel,
.ai-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Defensive: if any AI config card renders inline somewhere */
.ai-config-state,
.ai-config-card {
  display: none !important;
}

/* End Phase 6.42b */
/* ════════════════════════════════════════════════════════════════════
   PHASE 6.43 — Dark Theme Base Layer
   
   Append to END of server/public/styles.css (after Phase 6.42b hide-AI)
   
   What this does:
   - Overrides the light-theme block at line 5530 to restore dark mode
   - Updates palette to modern dark navy (matches preview you approved)
   - Removes ALL box-shadows, text-shadows, drop-shadows globally
   - Removes ALL linear-gradient + radial-gradient backgrounds
   - Forces green/red text colors for income/expense classes
   
   Coverage: WHOLE APP, not just dashboard. Overrides CSS variables so
   every page that uses those variables gets the new look automatically.
   
   Known follow-up needed (phases 6.44+):
   - Per-page polish for Trends, Categories, Calendar, Recap, Credit Cards,
     Transactions, Budgets, Goals, Settings, Auth screen
   - Chart color audits (SVG strokes/fills may have hardcoded light-theme colors)
   - Hover/focus state tuning per component
   
   Fully reversible: delete this block to restore the light Apple Wallet theme.
   ════════════════════════════════════════════════════════════════════ */

/* === 1. CSS VARIABLE OVERRIDE === */
/* Triple-selector specificity beats the light-theme block at line 5530 */
html,
html:not([data-theme="dark"]),
html[data-theme="dark"] {
  --bg:           #000000 !important;
  --bg-elev:      #0a1020 !important;
  --surface:      #0f1a2e !important;
  --surface-2:    #16243d !important;
  --surface-3:    #1e3155 !important;
  --glass:        rgba(15, 26, 46, 0.7) !important;
  --glass-light:  rgba(255, 255, 255, 0.04) !important;

  --border:       rgba(255, 255, 255, 0.06) !important;
  --border-2:     rgba(255, 255, 255, 0.12) !important;
  --border-focus: rgba(16, 185, 129, 0.4) !important;

  /* Modern green/red — matches the preview */
  --green:        #10b981 !important;
  --green-dim:    #047857 !important;
  --green-glow:   transparent !important;
  --cyan:         #06b6d4 !important;
  --cyan-glow:    transparent !important;
  --red:          #ef4444 !important;
  --red-glow:     transparent !important;
  --amber:        #f59e0b !important;
  --purple:       #8b5cf6 !important;
  --pink:         #ec4899 !important;
  --blue:         #3b82f6 !important;

  /* Light text on dark bg */
  --text:         #ffffff !important;
  --text-2:       #c7d2e5 !important;
  --text-3:       #8b9bb8 !important;
  --text-4:       #5a6a85 !important;
  --text-5:       #3d4456 !important;

  /* Zero all shadow variables */
  --shadow-sm:    none !important;
  --shadow:       none !important;
  --shadow-lg:    none !important;
  --shadow-xl:    none !important;
}

/* === 2. BODY + APP SHELL === */
html:not([data-theme="dark"]) body,
html[data-theme="dark"] body,
body {
  background: #000000 !important;
  background-image: none !important;
  color: var(--text) !important;
}

/* Kill any ::before mesh gradient that runs over the body */
html:not([data-theme="dark"]) body::before,
body::before {
  background: none !important;
  display: none !important;
}

/* === 3. SHADOW KILL — global === */
* {
  box-shadow: none !important;
  text-shadow: none !important;
}
*::before, *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Drop-shadow filters on SVGs / icons */
svg, .icon, [class*="icon"] {
  filter: none !important;
}

/* === 4. GRADIENT KILL on card-like surfaces === */
/* Replace gradient backgrounds with solid surface colors.
   We target common card/tile selectors; gradients on small accent
   elements (bars, sparkline fills, hero ring backgrounds) are preserved
   selectively below. */
.card,
.stat-card,
.acc-card,
.chart-card,
.bill-mini,
.ai-actions-card,
.heatmap-card,
.nw-rings-card,
.cat-donut-card,
.page,
.modal,
.toast,
.sidebar,
.topnav,
.pg-hd,
.acc,
aside.sidebar,
main.main,
.layout {
  background-image: none !important;
}

/* Explicit re-color for the common card shells */
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .stat-card,
html:not([data-theme="dark"]) .acc-card,
html:not([data-theme="dark"]) .chart-card,
html:not([data-theme="dark"]) .acc,
html:not([data-theme="dark"]) .bill-mini,
.card,
.stat-card,
.acc-card,
.chart-card,
.acc,
.bill-mini {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Sidebar and topnav dark */
html:not([data-theme="dark"]) aside.sidebar,
aside.sidebar {
  background: #050a14 !important;
  border-right-color: var(--border) !important;
}

/* Page background */
html:not([data-theme="dark"]) main.main,
main.main {
  background: transparent !important;
}

/* === 5. TEXT COLOR DEFAULTS === */
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) p,
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4,
html:not([data-theme="dark"]) h5,
html:not([data-theme="dark"]) h6,
html:not([data-theme="dark"]) .pg-title,
html:not([data-theme="dark"]) .stat-val,
html:not([data-theme="dark"]) .kpi-val {
  color: var(--text) !important;
}

html:not([data-theme="dark"]) .pg-sub,
html:not([data-theme="dark"]) .stat-lbl,
html:not([data-theme="dark"]) .kpi-lbl,
html:not([data-theme="dark"]) .acc-meta,
html:not([data-theme="dark"]) .acc-sub,
html:not([data-theme="dark"]) .meta {
  color: var(--text-3) !important;
}

/* === 6. GREEN/RED TEXT for income/expense === */
.amt-pos,
.amt-positive,
.amt-income,
.income,
.green,
[data-amount="positive"],
.stat-val.green,
.kpi-val.green {
  color: var(--green) !important;
}

.amt-neg,
.amt-negative,
.amt-expense,
.expense,
.red,
[data-amount="negative"],
.stat-val.red,
.kpi-val.red {
  color: var(--red) !important;
}

/* === 7. BUTTON RESETS === */
html:not([data-theme="dark"]) .btn,
html:not([data-theme="dark"]) .btn-ghost,
html:not([data-theme="dark"]) button,
.btn-ghost {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border-2) !important;
}

html:not([data-theme="dark"]) .btn-g,
html:not([data-theme="dark"]) .btn-primary {
  background: var(--text) !important;
  color: #000000 !important;
  border-color: var(--text) !important;
}

/* === 8. INPUT FIELDS === */
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) select,
input, textarea, select {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border-2) !important;
}

html:not([data-theme="dark"]) input::placeholder,
html:not([data-theme="dark"]) textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-4) !important;
}

/* === 9. BORDERS that were tied to old light-theme color === */
html:not([data-theme="dark"]) hr,
html:not([data-theme="dark"]) .divider,
hr, .divider {
  border-color: var(--border) !important;
  background: var(--border) !important;
}

/* === 10. PHASE 6.41 dashboard hero (still pure black — already fits) === */
.vq-hero {
  background: #000000 !important;
}
.vq-bd-panel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.vq-topnav {
  background: rgba(0, 0, 0, 0.85) !important;
  border-bottom-color: var(--border) !important;
}
.vq-refresh {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}

/* === 11. STATUS / TOAST / MODAL === */
html:not([data-theme="dark"]) .modal,
html:not([data-theme="dark"]) .toast,
.modal, .toast {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.modal-backdrop,
.overlay {
  background: rgba(0, 0, 0, 0.75) !important;
}

/* === 12. PROGRESS BARS / TRACK COLORS === */
html:not([data-theme="dark"]) .progress-track,
html:not([data-theme="dark"]) .vq-bd-row-bar-wrap,
.progress-track,
.vq-bd-row-bar-wrap {
  background: var(--surface-2) !important;
}

/* === 13. EDGE: keep gradient strokes on small accents that ADD info === */
/* Progress bars stay green/red gradient — they encode meaning */
.vq-bd-row-bar.green,
.progress-bar.green,
.bar.green {
  background: linear-gradient(90deg, var(--green-dim), var(--green)) !important;
}
.vq-bd-row-bar.red,
.progress-bar.red,
.bar.red {
  background: linear-gradient(90deg, var(--red), #b91c1c) !important;
}

/* End Phase 6.43 */
/* ════════════════════════════════════════════════════════════════════
   PHASE 6.45 — Fix faded page titles on black headers
   
   Append to END of server/public/styles.css (after Phase 6.44)
   
   Bug: .pg-title at line 443 uses a gradient text-fill clipped to text
   with transparent text fill. On the new black .pg-hd background
   (Phase 6.44), the white→grey gradient blends into black, making
   titles look ghostly/faded.
   
   Fix: properly unset background-clip and text-fill on titles inside
   .pg-hd so the explicit white color wins.
   ════════════════════════════════════════════════════════════════════ */

   .pg-hd .pg-title,
   .pg-hd > div > .pg-title {
     background: none !important;
     background-image: none !important;
     -webkit-background-clip: initial !important;
     background-clip: initial !important;
     -webkit-text-fill-color: #ffffff !important;
     color: #ffffff !important;
   }
   
   /* Also apply for any nested title structures */
   .pg-hd .pg-title * {
     color: #ffffff !important;
     -webkit-text-fill-color: #ffffff !important;
   }
   
   /* End Phase 6.45 */
/* ════════════════════════════════════════════════════════════════════
   PHASE 6.45 — Fix faded page titles on black headers
   
   Append to END of server/public/styles.css (after Phase 6.44)
   
   Bug: .pg-title at line 443 uses a gradient text-fill clipped to text
   with transparent text fill. On the new black .pg-hd background
   (Phase 6.44), the white→grey gradient blends into black, making
   titles look ghostly/faded.
   
   Fix: properly unset background-clip and text-fill on titles inside
   .pg-hd so the explicit white color wins.
   ════════════════════════════════════════════════════════════════════ */

   .pg-hd .pg-title,
   .pg-hd > div > .pg-title {
     background: none !important;
     background-image: none !important;
     -webkit-background-clip: initial !important;
     background-clip: initial !important;
     -webkit-text-fill-color: #ffffff !important;
     color: #ffffff !important;
   }
   
   /* Also apply for any nested title structures */
   .pg-hd .pg-title * {
     color: #ffffff !important;
     -webkit-text-fill-color: #ffffff !important;
   }
   
   /* End Phase 6.45 */