/* ── FONTS (self-hosted, KNOWN_INCONSISTENCIES #51 S-3) ─────────────────────
   Single variable-weight woff2 per family (Inter: wght 100-900, JetBrains
   Mono: wght 400-800) instead of loading from Google's CDN — avoids leaking
   visitor IPs to a third party on every page load and works offline for the
   PWA/self-host goal. Files are the same latin-subset static assets Google
   serves, just fetched once and committed under public/fonts/ (SIL OFL —
   see public/fonts/LICENSE-OFL.txt). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-var.woff2') format('woff2');
}

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
  --bg-primary:    #0D0F14;
  --bg-secondary:  #141820;
  --bg-tertiary:   #1C2130;
  --bg-hover:      #222840;

  --text-primary:   #EDF0F7;
  --text-secondary: #8B95B0;
  --text-tertiary:  #4E5B78;

  --positive: #12B981;
  --negative: #F04B4B;
  --caution:  #F0A030;
  --accent:   #5B6AF0;
  /* Same value as --accent, decomposed for rgba() composition — translucent
     accent overlays (badges, FAB shadow, selected-card backgrounds, year-view
     activity levels) previously hardcoded rgba(91,106,240,...) directly
     instead of deriving from the --accent token. */
  --accent-rgb: 91, 106, 240;

  --cat-work:    #3B7EF0;
  --cat-school:  #A855F7;
  --cat-growth:  #12B981;
  --cat-fun:     #F97316;
  --cat-rel:     #F43F8E;
  --cat-health:  #06B6D4;
  /* Not one of the six named categories — the sentinel color for "no
     category" (progress.js's Uncategorized bucket), previously hardcoded
     as #64748B in three places in progress.js. */
  --cat-uncategorized: #64748B;

  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --transition: 150ms ease;

  --sidebar-w: 220px;
  --tab-bar-h: 64px;
}

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

html { font-size: 16px; }

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

a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select {
  font-family: inherit;
  font-size:   1rem;
  background:  var(--bg-tertiary);
  color:       var(--text-primary);
  border:      1px solid var(--bg-hover);
  border-radius: var(--radius-sm);
  padding:     var(--space-2) var(--space-3);
  outline:     none;
  transition:  border-color var(--transition);
  width:       100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */
.text-xs  { font-size: .75rem; }
.text-sm  { font-size: .875rem; }
.text-md  { font-size: 1rem; }
.text-lg  { font-size: 1.125rem; }
.text-xl  { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 2rem; }
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.color-secondary { color: var(--text-secondary); }
.color-tertiary  { color: var(--text-tertiary); }
.color-positive  { color: var(--positive); }
.color-negative  { color: var(--negative); }
.color-caution   { color: var(--caution); }
.color-accent    { color: var(--accent); }

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */
#app-shell {
  display:  flex;
  height:   100dvh;
  overflow: hidden;
}

/* Sidebar (desktop) */
.sidebar {
  width:      var(--sidebar-w);
  background: var(--bg-secondary);
  border-right: 1px solid var(--bg-tertiary);
  display:    flex;
  flex-direction: column;
  padding:    var(--space-6) 0;
  flex-shrink: 0;
}

.sidebar-logo {
  padding:    0 var(--space-5) var(--space-6);
  font-size:  1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.sidebar-logo span { color: var(--accent); }

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-3); }

.nav-item {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  padding:      var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color:        var(--text-secondary);
  font-size:    .875rem;
  font-weight:  500;
  transition:   background var(--transition), color var(--transition);
}
.nav-item:hover  { background: var(--bg-tertiary); color: var(--text-primary); }
.nav-item.active { background: var(--bg-tertiary); color: var(--text-primary); }
.nav-item .nav-icon { font-size: 1.1rem; width: 20px; text-align: center; }

/* Main content area */
.main-content {
  flex:     1;
  display:  flex;
  flex-direction: column;
  overflow: hidden;
}

.tab-panels {
  flex:     1;
  overflow: hidden;
  position: relative;
}

.tab-panel {
  position:  absolute;
  inset:     0;
  overflow-y: auto;
  padding:   var(--space-6);
  display:   none;
}
.tab-panel.active { display: block; }

/* Bottom tab bar (mobile) */
.tab-bar {
  display: none;
  height:  var(--tab-bar-h);
  background: var(--bg-secondary);
  border-top: 1px solid var(--bg-tertiary);
  flex-shrink: 0;
}

.tab-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
}

/* Mobile top bar — houses Settings access on mobile, since the bottom tab
   bar is limited to the 3 primary tabs (Pulse/Plan/Progress) */
.mobile-topbar {
  display:     none;
  align-items: center;
  justify-content: space-between;
  height:      56px;
  padding:     calc(env(safe-area-inset-top) + 0px) var(--space-5) 0;
  flex-shrink: 0;
  background:  var(--bg-secondary);
  border-bottom: 1px solid var(--bg-tertiary);
}
.mobile-topbar-logo {
  font-size:   1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.mobile-topbar-logo span { color: var(--accent); }
.mobile-topbar-settings {
  font-size: 1.2rem;
  padding:   var(--space-2);
  color:     var(--text-secondary);
}

.tab-btn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            var(--space-1);
  color:          var(--text-tertiary);
  font-size:      .7rem;
  font-weight:    500;
  transition:     color var(--transition);
}
.tab-btn.active { color: var(--accent); }
.tab-btn .tab-icon { font-size: 1.25rem; }

@media (max-width: 1023px) {
  .sidebar        { display: none; }
  .tab-bar        { display: block; }
  .mobile-topbar  { display: flex; }
  .tab-panel { padding: var(--space-4); }
}

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background:    var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  margin-bottom: var(--space-4);
}

.card-bordered-positive { border-left: 3px solid var(--positive); }
.card-bordered-negative { border-left: 3px solid var(--negative); }
.card-bordered-accent   { border-left: 3px solid var(--accent); }
.card-bordered-caution  { border-left: 3px solid var(--caution); }

.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-4);
}
.card-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); }

/* ── HERO NUMBER ────────────────────────────────────────────────────────── */
.hero-number {
  font-family: var(--font-mono);
  font-size:   2.5rem;
  font-weight: 700;
  line-height: 1;
}
.hero-label {
  font-size:   .8rem;
  color:       var(--text-secondary);
  margin-top:  var(--space-1);
}

/* ── PROGRESS BAR ───────────────────────────────────────────────────────── */
.progress-bar {
  height:        6px;
  background:    var(--bg-tertiary);
  border-radius: 99px;
  overflow:      hidden;
  margin-top:    var(--space-2);
}
.progress-fill {
  height:        100%;
  border-radius: 99px;
  background:    var(--accent);
  transition:    width .6s ease;
}

/* ── BADGES ─────────────────────────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 8px;
  border-radius: 99px;
  font-size:     .7rem;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-high     { background: rgba(240,75,75,.15);  color: var(--negative); }
.badge-medium   { background: rgba(240,160,48,.15); color: var(--caution); }
.badge-low      { background: rgba(var(--accent-rgb),.12); color: var(--accent); }
.badge-done     { background: rgba(18,185,129,.12); color: var(--positive); }
.badge-open     { background: rgba(139,149,176,.1); color: var(--text-secondary); }

/* ── TASK ITEM ──────────────────────────────────────────────────────────── */
.task-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  padding:       var(--space-3) 0;
  border-bottom: 1px solid var(--bg-tertiary);
}
.task-item:last-child { border-bottom: none; }

.task-check {
  width:         20px;
  height:        20px;
  border-radius: 50%;
  border:        2px solid var(--bg-hover);
  flex-shrink:   0;
  margin-top:    2px;
  cursor:        pointer;
  transition:    border-color var(--transition), background var(--transition);
}
.task-check:hover          { border-color: var(--accent); }
.task-check.checked        { background: var(--positive); border-color: var(--positive); }

.task-body     { flex: 1; min-width: 0; }
.task-title    { font-size: .9rem; font-weight: 500; line-height: 1.35; }
.task-meta     { display: flex; gap: var(--space-2); margin-top: var(--space-1); align-items: center; flex-wrap: wrap; }
.task-cat-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.task-due      { font-size: .75rem; color: var(--text-tertiary); }
.task-due.overdue { color: var(--negative); }
/* Hard deadlines get a stronger treatment once overdue — previously "soft" and
   "hard" were indistinguishable everywhere except the Add/Edit Task Form's own
   selector, which nothing downstream ever read. */
.task-due.hard          { color: var(--caution); font-weight: 600; }
.task-due.overdue.hard  { color: var(--negative); font-weight: 700; background: rgba(240,75,75,.12); padding: 1px 6px; border-radius: 4px; }

/* ── SCHEDULE ITEM ──────────────────────────────────────────────────────── */
.schedule-item {
  display:    flex;
  gap:        var(--space-3);
  padding:    var(--space-3) 0;
  border-bottom: 1px solid var(--bg-tertiary);
}
.schedule-item:last-child { border-bottom: none; }

.schedule-time {
  font-family: var(--font-mono);
  font-size:   .75rem;
  color:       var(--text-tertiary);
  width:       80px;
  flex-shrink: 0;
  padding-top: 2px;
}

.schedule-bar {
  width:         3px;
  border-radius: 99px;
  flex-shrink:   0;
}

.schedule-body { flex: 1; }
.schedule-title { font-size: .9rem; font-weight: 500; }
.schedule-sub   { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size:     .875rem;
  font-weight:   600;
  transition:    background var(--transition), opacity var(--transition);
}
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-primary  { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #6b7cf0; }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-danger { background: rgba(240,75,75,.15); color: var(--negative); }

/* ── FAB ────────────────────────────────────────────────────────────────── */
.fab {
  position:      fixed;
  bottom:        calc(var(--tab-bar-h) + var(--space-4));
  right:         var(--space-4);
  width:         52px;
  height:        52px;
  border-radius: 50%;
  background:    var(--accent);
  color:         #fff;
  font-size:     1.5rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 4px 20px rgba(var(--accent-rgb),.4);
  z-index:       100;
  transition:    transform var(--transition), box-shadow var(--transition);
}
.fab:hover { transform: scale(1.06); box-shadow: 0 6px 28px rgba(var(--accent-rgb),.5); }
@media (min-width: 1024px) { .fab { display: none; } }

/* ── DAY VIEW TASK DRAWER ──────────────────────────────────────────────────
   Pinned above the bottom tab bar, Day View only. Three states set a max-
   height on this fixed container; content inside scrolls independently. */
.day-drawer {
  position:        fixed;
  left:             0;
  right:            0;
  bottom:           var(--tab-bar-h);
  background:       var(--bg-secondary);
  border-top:       1px solid var(--bg-tertiary);
  border-radius:    var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:       0 -4px 20px rgba(0,0,0,.25);
  z-index:          90;
  overflow:         hidden;
  display:          flex;
  flex-direction:   column;
  transition:       max-height var(--transition);
}
.day-drawer.hidden    { display: none; }
.day-drawer.collapsed { max-height: 52px; }
.day-drawer.split     { max-height: 46vh; }
.day-drawer.full      { max-height: calc(100vh - var(--tab-bar-h) - 56px); }
.day-drawer-handle {
  width: 36px; height: 4px; background: var(--bg-tertiary); border-radius: 99px;
  margin: 10px auto 4px; flex-shrink: 0; cursor: pointer;
}
.day-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px var(--space-4) var(--space-2); flex-shrink: 0; cursor: pointer;
}
.day-drawer-body { overflow-y: auto; padding: 0 var(--space-4) var(--space-4); }
@media (min-width: 1024px) { .day-drawer { display: none !important; } }

/* ── BOTTOM SHEET ───────────────────────────────────────────────────────── */
.sheet-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.5);
  z-index:    200;
  opacity:    0;
  pointer-events: none;
  transition: opacity .25s;
}
.sheet-overlay.open { opacity: 1; pointer-events: all; }

.sheet {
  position:    fixed;
  bottom:      0;
  left:        0;
  right:       0;
  background:  var(--bg-secondary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding:     var(--space-5);
  z-index:     201;
  transform:   translateY(100%);
  transition:  transform .3s cubic-bezier(.32,.72,0,1);
  max-height:  92dvh;
  overflow-y:  auto;
}
.sheet.open { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; background: var(--bg-tertiary); border-radius: 99px; margin: 0 auto var(--space-5); }
.sheet-title { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--space-5); }

/* ── FORM ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: .06em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ── AUTH SCREEN ─────────────────────────────────────────────────────────── */
#auth-screen {
  min-height:     100dvh;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        var(--space-6);
}

.auth-card {
  width:         100%;
  max-width:     400px;
  background:    var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding:       var(--space-8);
}

.auth-logo {
  font-size:    1.5rem;
  font-weight:  800;
  margin-bottom: var(--space-2);
}
.auth-logo span { color: var(--accent); }

.auth-sub {
  color:         var(--text-secondary);
  font-size:     .875rem;
  margin-bottom: var(--space-8);
}

.auth-tabs {
  display:       flex;
  gap:           var(--space-2);
  margin-bottom: var(--space-6);
  background:    var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding:       4px;
}
.auth-tab {
  flex:          1;
  padding:       var(--space-2);
  border-radius: var(--radius-sm);
  font-size:     .875rem;
  font-weight:   600;
  color:         var(--text-secondary);
  transition:    background var(--transition), color var(--transition);
  text-align:    center;
}
.auth-tab.active { background: var(--bg-secondary); color: var(--text-primary); }

.auth-error {
  background:    rgba(240,75,75,.12);
  color:         var(--negative);
  border-radius: var(--radius-sm);
  padding:       var(--space-3);
  font-size:     .875rem;
  margin-bottom: var(--space-4);
  display:       none;
}
.auth-error.show { display: block; }

/* ── CALENDAR ───────────────────────────────────────────────────────────── */
.cal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-4);
}
.cal-month { font-size: 1rem; font-weight: 700; }
.cal-nav { display: flex; gap: var(--space-2); }

.cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   var(--space-1);
}
.cal-day-label {
  text-align:  center;
  font-size:   .7rem;
  font-weight: 600;
  color:       var(--text-tertiary);
  text-transform: uppercase;
  padding-bottom: var(--space-2);
}
.cal-day {
  aspect-ratio:   1;
  display:        flex;
  align-items:    center;
  justify-content: center;
  border-radius:  var(--radius-sm);
  font-size:      .8rem;
  cursor:         pointer;
  transition:     background var(--transition);
  position:       relative;
}
.cal-day:hover     { background: var(--bg-tertiary); }
.cal-day.today     { background: var(--accent); color: #fff; font-weight: 700; }
.cal-day.other-month { color: var(--text-tertiary); }
.cal-day.has-event::after {
  content:         '';
  position:        absolute;
  bottom:          3px;
  width:           4px;
  height:          4px;
  border-radius:   50%;
  background:      var(--accent);
}
.cal-day.today::after { background: #fff; }

/* ── NET WORTH CHART ────────────────────────────────────────────────────── */
.nw-chart-wrap { position: relative; height: 120px; margin-top: var(--space-3); }

/* ── UTIL ───────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.p-4  { padding: var(--space-4); }
.w-full { width: 100%; }
.spinner { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── LOADING SKELETON ───────────────────────────────────────────────────── */
.skeleton {
  background:    linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation:     shimmer 1.5s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 99px; }

/* ── ONBOARDING WIZARD ──────────────────────────────────────────────────── */
#onboarding-screen {
  min-height:     100dvh;
  display:        flex;
  align-items:    flex-start;
  justify-content: center;
  padding:        var(--space-6) var(--space-4) var(--space-10);
  overflow-y:     auto;
}

.onboarding-wrap {
  width:     100%;
  max-width: 480px;
  padding-top: var(--space-4);
}

/* Progress dots */
.onboarding-progress {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  margin-bottom:   var(--space-8);
}
.progress-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--bg-hover);
  transition:    background .25s, transform .25s;
}
.progress-dot.active {
  background: var(--accent);
  transform:  scale(1.3);
}
.progress-dot.done {
  background: var(--positive);
}

/* Step header */
.step-back {
  display:      flex;
  align-items:  center;
  gap:          var(--space-2);
  color:        var(--text-secondary);
  font-size:    .875rem;
  margin-bottom: var(--space-5);
  cursor:       pointer;
  width:        fit-content;
}
.step-back:hover { color: var(--text-primary); }

.step-title {
  font-size:    1.5rem;
  font-weight:  800;
  line-height:  1.2;
  margin-bottom: var(--space-2);
  letter-spacing: -.02em;
}
.step-subtitle {
  font-size:    .9rem;
  color:        var(--text-secondary);
  margin-bottom: var(--space-6);
  line-height:  1.5;
}

/* Income type card grid */
.income-type-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-3);
  margin-bottom:         var(--space-6);
}
.income-type-card {
  background:    var(--bg-secondary);
  border:        2px solid var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding:       var(--space-4);
  cursor:        pointer;
  transition:    border-color .15s, background .15s;
  text-align:    left;
}
.income-type-card:hover { border-color: var(--bg-hover); }
.income-type-card.selected {
  border-color: var(--accent);
  background:   rgba(var(--accent-rgb),.08);
}
.income-type-card .card-label {
  font-size:   .875rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.income-type-card .card-desc {
  font-size: .75rem;
  color:     var(--text-secondary);
  line-height: 1.4;
}
.income-type-card .selected-dot {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  border:        2px solid var(--bg-hover);
  margin-bottom: var(--space-2);
  transition:    border-color .15s, background .15s;
}
.income-type-card.selected .selected-dot {
  background:   var(--accent);
  border-color: var(--accent);
}

/* Section header (assets / liabilities) */
.section-header {
  font-size:    .7rem;
  font-weight:  700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding:      var(--space-3) 0 var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--bg-tertiary);
}
.section-header.assets     { color: var(--positive); }
.section-header.liabilities { color: var(--negative); }

/* Live net worth preview */
.nw-preview {
  background:    var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  margin-top:    var(--space-5);
  text-align:    center;
}
.nw-preview-label { font-size: .75rem; color: var(--text-secondary); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.nw-preview-value { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; transition: color .2s; }

/* Step helpers */
.field-helper {
  font-size:  .75rem;
  color:      var(--text-tertiary);
  margin-top: var(--space-1);
  line-height: 1.4;
}

/* Birthday triple input */
.birthday-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: var(--space-2);
}

/* Allocation rows */
.alloc-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) 0;
  border-bottom: 1px solid var(--bg-tertiary);
}
.alloc-row:last-child { border-bottom: none; }
.alloc-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.alloc-name { flex: 1; font-size: .9rem; font-weight: 500; }
.alloc-input { width: 70px; text-align: right; }

/* Allocation total bar */
.alloc-total {
  background:    var(--bg-secondary);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  margin-top:    var(--space-4);
}
.alloc-total-row { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: var(--space-2); }
.alloc-total-num { font-family: var(--font-mono); font-weight: 700; }

/* Step 5 — choice cards */
.data-choice-grid { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.data-choice-card {
  background:    var(--bg-secondary);
  border:        2px solid var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  cursor:        pointer;
  transition:    border-color .15s;
  display:       flex;
  gap:           var(--space-4);
  align-items:   flex-start;
}
.data-choice-card:hover   { border-color: var(--bg-hover); }
.data-choice-card.selected { border-color: var(--accent); background: rgba(var(--accent-rgb),.06); }
.data-choice-radio {
  width:         18px;
  height:        18px;
  border-radius: 50%;
  border:        2px solid var(--bg-hover);
  flex-shrink:   0;
  margin-top:    2px;
  transition:    border-color .15s, background .15s;
}
.data-choice-card.selected .data-choice-radio { background: var(--accent); border-color: var(--accent); }
.data-choice-body .choice-title { font-weight: 700; margin-bottom: var(--space-1); }
.data-choice-body .choice-desc  { font-size: .8rem; color: var(--text-secondary); line-height: 1.5; }

/* Sample data banner */
.sample-banner {
  background:  rgba(240,160,48,.1);
  border:      1px solid rgba(240,160,48,.3);
  border-radius: var(--radius-md);
  padding:     var(--space-3) var(--space-4);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         var(--space-3);
  margin-bottom: var(--space-4);
}
.sample-banner-label { font-size: .8rem; color: var(--caution); font-weight: 600; }
.sample-banner-clear { font-size: .75rem; color: var(--caution); cursor: pointer; text-decoration: underline; }

/* First-week checklist */
.checklist-card {
  background:    var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  margin-bottom: var(--space-4);
  border-left:   3px solid var(--accent);
}
.checklist-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.checklist-title  { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); }
.checklist-count  { font-size: .75rem; font-family: var(--font-mono); color: var(--text-secondary); }
.checklist-item {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-2) 0;
  cursor:      pointer;
  font-size:   .875rem;
}
.checklist-item.done { text-decoration: line-through; opacity: .5; }
.checklist-check {
  width:         18px;
  height:        18px;
  border-radius: 4px;
  border:        2px solid var(--bg-hover);
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     .7rem;
  transition:    background .15s, border-color .15s;
}
.checklist-item.done .checklist-check { background: var(--positive); border-color: var(--positive); }

/* Between-session banner */
.session-banner {
  background:    var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding:       var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  border-left:   3px solid var(--accent);
}
.session-banner.payday     { border-color: var(--positive); }
.session-banner.commission { border-color: var(--caution); }
.session-banner.credit     { border-color: var(--negative); }
.session-banner.review     { border-color: var(--accent); }
.session-banner-title { font-weight: 700; margin-bottom: var(--space-1); }
.session-banner-sub   { font-size: .8rem; color: var(--text-secondary); margin-bottom: var(--space-3); }
.session-banner-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Birthday overlay */
.birthday-overlay {
  position:    fixed;
  inset:       0;
  background:  rgba(13,15,20,.96);
  z-index:     500;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     var(--space-6);
}
/* Subtle confetti dots — a static radial-gradient field, not animated, so it
   doesn't compete with the actual content. Colors pulled from the existing
   category palette so it stays in-system rather than introducing new hues. */
.birthday-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(circle, var(--accent) 2px, transparent 2.5px),
    radial-gradient(circle, var(--cat-fun) 2px, transparent 2.5px),
    radial-gradient(circle, var(--cat-growth) 2px, transparent 2.5px),
    radial-gradient(circle, var(--cat-rel) 2px, transparent 2.5px);
  background-size: 140px 140px, 180px 180px, 160px 160px, 200px 200px;
  background-position: 0 0, 60px 90px, 120px 20px, 30px 140px;
}
.birthday-card {
  max-width:   420px;
  width:       100%;
  text-align:  center;
}
.birthday-emoji  { font-size: 3.5rem; margin-bottom: var(--space-5); }
.birthday-name   { font-size: 1.75rem; font-weight: 800; margin-bottom: var(--space-2); }
.birthday-age    { font-size: 1rem; color: var(--text-secondary); margin-bottom: var(--space-6); }
.birthday-snap   { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-6); }
.birthday-snap-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--bg-tertiary); font-size: .875rem; }
.birthday-snap-row:last-child { border-bottom: none; }
.birthday-snap-val { font-family: var(--font-mono); font-weight: 700; }
.birthday-quote  { font-style: italic; color: var(--text-secondary); font-size: .9rem; line-height: 1.6; margin-bottom: var(--space-6); }

/* ── SETTINGS ────────────────────────────────────────────────────────────── */
.settings-section {
  margin-bottom: var(--space-8);
}
.settings-section-title {
  font-size:      .7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--text-tertiary);
  margin-bottom:  var(--space-3);
}
.cat-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) 0;
  border-bottom: 1px solid var(--bg-tertiary);
}
.cat-row:last-child { border-bottom: none; }
.color-swatch { transition: border-color .15s; }

/* ── QUICK CAPTURE GRID ──────────────────────────────────────────────────── */
.qc-btn {
  background:    var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding:       var(--space-4);
  text-align:    center;
  cursor:        pointer;
  transition:    background var(--transition), transform var(--transition);
  border:        1px solid transparent;
}
.qc-btn:hover {
  background: var(--bg-hover);
  transform:  translateY(-1px);
}
.qc-btn:active { transform: scale(.97); }

/* ── PLAN: DAY VIEW ──────────────────────────────────────────────────────── */
.day-strip {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  margin-bottom:   var(--space-4);
  overflow-x:      auto;
  scrollbar-width: none;
  padding-bottom:  2px;
}
.day-strip::-webkit-scrollbar { display: none; }

.day-chip {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        var(--space-2) var(--space-3);
  border-radius:  var(--radius-md);
  cursor:         pointer;
  transition:     background var(--transition);
  flex-shrink:    0;
  min-width:      44px;
}
.day-chip:hover    { background: var(--bg-tertiary); }
.day-chip.active   { background: var(--accent); }
.day-chip .day-label { font-size: .65rem; font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); }
.day-chip.active .day-label { color: rgba(255,255,255,.7); }
.day-chip .day-num { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.day-chip.today:not(.active) .day-num { color: var(--accent); }

.time-grid {
  position:        relative;
  border-left:     1px solid var(--bg-tertiary);
  margin-left:     48px;
  min-height:      600px;
}
.time-row {
  display:  flex;
  position: relative;
  height:   60px;
  border-top: 1px solid var(--bg-tertiary);
}
.time-row:first-child { border-top: none; }
.time-label {
  position:    absolute;
  left:        -52px;
  top:         -9px;
  font-size:   .7rem;
  font-family: var(--font-mono);
  color:       var(--text-tertiary);
  width:       48px;
  text-align:  right;
  user-select: none;
}
.time-block-el {
  position:      absolute;
  left:          4px;
  right:         4px;
  border-radius: var(--radius-sm);
  padding:       4px 8px;
  font-size:     .75rem;
  font-weight:   600;
  cursor:        pointer;
  overflow:      hidden;
  transition:    opacity var(--transition);
  box-shadow:    0 1px 4px rgba(0,0,0,.3);
}
.time-block-el:hover { opacity: .85; }
.time-block-el.school { background: rgba(168,85,247,.25); border-left: 3px solid var(--cat-school); cursor: default; }

.current-time-line {
  position:   absolute;
  left:       0;
  right:      0;
  height:     2px;
  background: var(--negative);
  pointer-events: none;
  z-index: 5;
}
.current-time-line::before {
  content:       '';
  position:      absolute;
  left:          -6px;
  top:           -4px;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--negative);
}

/* ── PLAN: VIEW SWITCHER ────────────────────────────────────────────────── */
.view-switcher {
  display:       flex;
  background:    var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding:       3px;
  gap:           2px;
  margin-bottom: var(--space-4);
}
.view-btn {
  flex:          1;
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size:     .8rem;
  font-weight:   600;
  color:         var(--text-secondary);
  transition:    all var(--transition);
  text-align:    center;
}
.view-btn.active { background: var(--bg-secondary); color: var(--text-primary); }

/* ── PLAN: MONTH GRID ────────────────────────────────────────────────────── */
.month-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   2px;
}
.month-cell {
  aspect-ratio: 1;
  display:      flex;
  flex-direction: column;
  align-items:  center;
  padding:      4px;
  border-radius: var(--radius-sm);
  cursor:       pointer;
  position:     relative;
  transition:   background var(--transition);
  font-size:    .8rem;
}
.month-cell:hover { background: var(--bg-tertiary); }
.month-cell.today { background: var(--accent); color: #fff; font-weight: 700; }
.month-cell.other-month { opacity: .35; }
.month-cell.payday       { border-top: 2px solid var(--positive); }
.month-cell.commission   { border-top: 2px solid var(--caution); }
.month-cell.period-start { border-left: 2px solid var(--accent); }
.month-cell.semester     { box-shadow: inset 0 0 0 1px rgba(168,85,247,.5); }
.month-cell .month-dots  { display: flex; gap: 2px; margin-top: 2px; }
.month-dot { width: 4px; height: 4px; border-radius: 50%; }

/* ── PLAN: YEAR GRAPH ────────────────────────────────────────────────────── */
.year-graph {
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.year-grid {
  display:               grid;
  grid-template-rows:    repeat(7, 14px);
  grid-auto-flow:        column;
  gap:                   2px;
  width:                 max-content;
}
.year-cell {
  width:         14px;
  height:        14px;
  border-radius: 2px;
  background:    var(--bg-tertiary);
  cursor:        pointer;
  transition:    opacity var(--transition);
}
.year-cell:hover { opacity: .7; }
.year-cell.level-1 { background: rgba(var(--accent-rgb),.25); }
.year-cell.level-2 { background: rgba(var(--accent-rgb),.5); }
.year-cell.level-3 { background: rgba(var(--accent-rgb),.75); }
.year-cell.level-4 { background: var(--accent); }
.year-cell.semester   { box-shadow: inset 0 0 0 1px rgba(168,85,247,.5); }
.year-cell.payday     { box-shadow: inset 0 0 0 1px var(--positive); }
/* After .payday so it wins the cascade on days that are both (every
   commission day is also a payday) — same precedence Month view already
   uses (.commission is declared after .payday there too). */
.year-cell.commission { box-shadow: inset 0 0 0 1px var(--caution); }
/* Separate property (outline, not box-shadow) so "today" stays visible
   regardless of which of the above also applies to the same cell — it no
   longer piggybacks on .payday (that was the bug: today was marked as a
   payday outline unconditionally, not an actual payday check). */
.year-cell.today-outline { outline: 1px solid var(--text-primary); outline-offset: -1px; }



/* ── PROGRESS: SUB NAV ───────────────────────────────────────────────────── */
.sub-nav {
  display:       flex;
  background:    var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding:       3px;
  gap:           2px;
  margin-bottom: var(--space-5);
  overflow-x:    auto;
}
.sub-nav-btn {
  flex:          1;
  min-width:     max-content;
  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size:     .8rem;
  font-weight:   600;
  color:         var(--text-secondary);
  transition:    all var(--transition);
  white-space:   nowrap;
}
.sub-nav-btn.active { background: var(--bg-secondary); color: var(--text-primary); }

/* ── ALLOCATION BARS ─────────────────────────────────────────────────────── */
.alloc-bar-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-2) 0;
}
.alloc-bar-label { font-size: .8rem; width: 90px; flex-shrink: 0; }
.alloc-bar-track {
  flex:          1;
  height:        6px;
  background:    var(--bg-tertiary);
  border-radius: 99px;
  overflow:      hidden;
}
.alloc-bar-fill {
  height:        100%;
  border-radius: 99px;
  transition:    width .5s ease;
}
.alloc-bar-pct { font-size: .75rem; font-family: var(--font-mono); color: var(--text-tertiary); width: 36px; text-align: right; flex-shrink: 0; }

/* ── MILESTONE TRACK ─────────────────────────────────────────────────────── */
.milestone-track {
  display:     flex;
  align-items: center;
  gap:         0;
  padding:     var(--space-4) 0;
  overflow-x:  auto;
}
.milestone-dot {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  border:        2px solid var(--bg-hover);
  flex-shrink:   0;
  background:    var(--bg-secondary);
  transition:    background .3s, border-color .3s;
}
.milestone-dot.reached { background: var(--positive); border-color: var(--positive); }
.milestone-dot.current { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.25); }
.milestone-line {
  flex:       1;
  height:     2px;
  background: var(--bg-tertiary);
  min-width:  20px;
}
.milestone-line.filled { background: var(--positive); }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── TRADES ──────────────────────────────────────────────────────────────── */
.trade-row {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) 0;
  border-bottom: 1px solid var(--bg-tertiary);
  cursor:        pointer;
  transition:    background var(--transition);
}
.trade-row:hover { background: var(--bg-tertiary); margin: 0 calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); }
.trade-row:last-child { border-bottom: none; }
.trade-ticker { font-family: var(--font-mono); font-weight: 700; font-size: .875rem; min-width: 60px; }
.trade-desc   { flex: 1; font-size: .8rem; color: var(--text-secondary); }
.trade-pnl    { font-family: var(--font-mono); font-weight: 700; font-size: .875rem; }

/* ── PNL BAR CHART ──────────────────────────────────────────────────────── */
.pnl-chart {
  display:     flex;
  align-items: flex-end;
  gap:         4px;
  height:      60px;
  padding-top: var(--space-2);
}
.pnl-bar {
  flex:          1;
  border-radius: 3px 3px 0 0;
  min-height:    4px;
  transition:    opacity var(--transition);
  cursor:        default;
}
.pnl-bar-label {
  font-size: .6rem;
  color:     var(--text-tertiary);
  text-align: center;
  margin-top: 2px;
}

/* ── IMPORT DROP ZONE ────────────────────────────────────────────────────── */
.drop-zone {
  border:        2px dashed var(--bg-hover);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  text-align:    center;
  cursor:        pointer;
  transition:    border-color var(--transition), background var(--transition);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent);
  background:   rgba(var(--accent-rgb),.05);
}

/* ── INLINE BUDGET ROWS ──────────────────────────────────────────────────── */
.budget-row {
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  padding:       var(--space-2) 0;
  border-bottom: 1px solid var(--bg-tertiary);
  font-size:     .875rem;
}
.budget-row:last-child { border-bottom: none; }
.budget-row-label { color: var(--text-secondary); }
.budget-row-amt   { font-family: var(--font-mono); font-weight: 600; }