/* ============================================================
   Budget Peace — Design System
   ============================================================ */

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

/* --- Tokens ------------------------------------------------- */
:root {
  /* Colors — Light Mode */
  --color-bg:            #EFEEE8;   /* warm linen */
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F6F4EF;   /* warm cream alt */
  --color-border:        rgba(15,23,42,0.08);
  --color-border-strong: rgba(15,23,42,0.14);

  --color-text-primary:   #111827;
  --color-text-secondary: #5C6B80;
  --color-text-tertiary:  #8B96A8;
  --color-text-inverse:   #FFFFFF;

  --color-accent:       #1B5E3B;   /* deep forest green */
  --color-accent-vivid: #2D9A64;   /* bright for progress/bars */
  --color-accent-light: #E5F4EC;   /* warm green tint */
  --color-accent-dark:  #134530;   /* deep for hover */

  --color-warn:         #D97706;
  --color-warn-light:   #FFFBEB;

  --color-danger:       #DC2626;
  --color-danger-light: #FEF2F2;

  --color-hero:         #111827;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  15px;
  --font-size-lg:  18px;
  --font-size-xl:  24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --font-weight-extra:  800;

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

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Shadows — multi-layer for real depth */
  --shadow-xs:  0 0 0 1px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.07);
  --shadow-sm:  0 0 0 1px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.07), 0 8px 24px rgba(15,23,42,0.04);
  --shadow-md:  0 0 0 1px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.09), 0 20px 48px rgba(15,23,42,0.06);
  --shadow-lg:  0 0 0 1px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.11), 0 40px 80px rgba(15,23,42,0.09);
  --shadow-nav: 0 0 0 1px rgba(15,23,42,0.06), 0 8px 40px rgba(15,23,42,0.20), 0 2px 8px rgba(15,23,42,0.10);

  /* Layout */
  --top-bar-height:       56px;
  --bottom-nav-clearance: 92px;
  --fab-size:             52px;
  --nav-width:            260px;
  --max-content:          760px;

  /* Transitions */
  --transition-fast: 140ms ease;
  --transition-mid:  240ms ease;
}

/* --- Dark Mode Tokens --------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Warm charcoal — no blue cast, closer to Claude/Anthropic dark */
  --color-bg:            #18181A;
  --color-surface:       #222224;
  --color-surface-alt:   #2C2C2E;
  --color-border:        rgba(255,255,255,0.09);
  --color-border-strong: rgba(255,255,255,0.16);

  /* Warm off-white text — not cold blue-white */
  --color-text-primary:   #E8E6E1;
  --color-text-secondary: #8C8A86;
  --color-text-tertiary:  #5A5856;

  /* Muted forest green — calm, recognizable, NOT neon */
  --color-accent:       #4E9E6A;
  --color-accent-vivid: #5DB87C;
  --color-accent-light: rgba(78,158,106,0.18);
  --color-accent-dark:  #3D8056;

  --color-warn:         #C47E18;
  --color-warn-light:   rgba(196,126,24,0.16);

  --color-danger:       #D96060;
  --color-danger-light: rgba(217,96,96,0.16);

  --color-hero: #E8E6E1;

  /* Shadows that work on warm dark background */
  --shadow-xs:  0 0 0 1px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:  0 0 0 1px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.36), 0 8px 24px rgba(0,0,0,0.20);
  --shadow-md:  0 0 0 1px rgba(0,0,0,0.50), 0 4px 16px rgba(0,0,0,0.44), 0 20px 48px rgba(0,0,0,0.26);
  --shadow-lg:  0 0 0 1px rgba(0,0,0,0.50), 0 8px 32px rgba(0,0,0,0.52), 0 40px 80px rgba(0,0,0,0.34);
  --shadow-nav: 0 0 0 1px rgba(0,0,0,0.60), 0 8px 40px rgba(0,0,0,0.56);
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family:      var(--font-family);
  font-size:        var(--font-size-md);
  color:            var(--color-text-primary);
  background-color: var(--color-bg);
  min-height:       100%;
  line-height:      1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 250ms ease, color 250ms ease;
}
a    { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }
img  { display: block; max-width: 100%; }

/* --- Top Bar ----------------------------------------------- */
.top-bar {
  position:       fixed;
  top:            0;
  left:           0;
  right:          0;
  height:         var(--top-bar-height);
  background:     rgba(239,238,232,0.88);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom:  1px solid var(--color-border);
  display:        flex;
  align-items:    center;
  padding:        0 var(--space-4);
  z-index:        100;
  transition: background 250ms ease, border-color 250ms ease;
}

.top-bar__hamburger {
  width:           40px;
  height:          40px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  border-radius:   var(--radius-sm);
  flex-shrink:     0;
  transition:      background var(--transition-fast);
}
.top-bar__hamburger:hover { background: var(--color-surface-alt); }
.top-bar__hamburger span {
  display:      block;
  width:        20px;
  height:       1.5px;
  background:   var(--color-text-primary);
  border-radius: var(--radius-pill);
}

.top-bar__brand {
  display:        none;
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-extra);
  letter-spacing: -0.04em;
  color:          var(--color-text-primary);
  text-decoration: none;
  white-space:    nowrap;
}
.top-bar__brand span { color: var(--color-accent); }

/* Dark mode toggle */
.top-bar__theme-toggle {
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-sm);
  color:           var(--color-text-secondary);
  flex-shrink:     0;
  transition:      background var(--transition-fast), color var(--transition-fast);
}
.top-bar__theme-toggle:hover {
  background: var(--color-surface-alt);
  color:      var(--color-text-primary);
}

/* ---- Avatar button in top bar ---- */
.top-bar__avatar-btn {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--color-accent);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  overflow:        hidden;
  padding:         0;
  transition:      opacity var(--transition-fast), transform var(--transition-fast);
}
.top-bar__avatar-btn:hover {
  opacity:   0.85;
  transform: scale(1.05);
}

.top-bar__title {
  flex:           1;
  text-align:     center;
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-semi);
  letter-spacing: -0.01em;
}

.top-bar__action {
  width:  40px;
  height: 40px;
  flex-shrink: 0;
}

/* Top bar desktop nav (hidden on mobile) */
.top-bar__nav {
  display:     none;
  align-items: center;
  gap:         2px;
}
.top-bar__nav-item {
  padding:       6px 14px;
  border-radius: var(--radius-pill);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semi);
  color:         var(--color-text-secondary);
  transition:    background var(--transition-fast), color var(--transition-fast);
  white-space:   nowrap;
}
.top-bar__nav-item:hover {
  background: var(--color-surface-alt);
  color:      var(--color-text-primary);
}
.top-bar__nav-item.is-active {
  background: var(--color-accent);
  color:      var(--color-text-inverse);
}

/* --- Side Nav ---------------------------------------------- */
.nav-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(15,23,42,0.4);
  z-index:        200;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition-mid);
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

.side-nav {
  position:   fixed;
  top:        0;
  left:       0;
  bottom:     0;
  width:      var(--nav-width);
  background: var(--color-surface);
  z-index:    300;
  display:    flex;
  flex-direction: column;
  transform:  translateX(-100%);
  transition: transform var(--transition-mid);
  box-shadow: var(--shadow-lg);
}
.side-nav.is-open { transform: translateX(0); }

.side-nav__header {
  padding:       var(--space-8) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.side-nav__logo {
  font-size:      var(--font-size-xl);
  font-weight:    var(--font-weight-extra);
  letter-spacing: -0.03em;
  color:          var(--color-text-primary);
}
.side-nav__logo span { color: var(--color-accent); }

.side-nav__links { flex: 1; padding: var(--space-3) 0; }

.side-nav__link {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     14px var(--space-6);
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-secondary);
  width:       100%;
  text-align:  left;
  transition:  background var(--transition-fast), color var(--transition-fast);
}
.side-nav__link:hover {
  background: var(--color-accent-light);
  color:      var(--color-accent-dark);
}
.side-nav__link.is-active {
  background:  var(--color-accent-light);
  color:       var(--color-accent-dark);
  font-weight: var(--font-weight-semi);
  box-shadow:  inset 3px 0 0 var(--color-accent);
}
.side-nav__link .nav-icon {
  width:            20px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  opacity:          0.65;
  transition:       opacity var(--transition-fast);
}
.side-nav__link:hover .nav-icon,
.side-nav__link.is-active .nav-icon { opacity: 1; }
.side-nav__secondary {
  padding:    var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}
.side-nav__section-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--color-text-tertiary);
  padding:        var(--space-3) var(--space-6) var(--space-1);
}

.side-nav__footer {
  padding:    var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.side-nav__footer .side-nav__link {
  padding:   10px var(--space-6);
  font-size: var(--font-size-sm);
}

/* --- Bottom Pill Nav --------------------------------------- */
.bottom-nav {
  position:        fixed;
  bottom:          28px;
  left:            50%;
  transform:       translateX(-50%);
  max-width:       calc(100% - 48px);
  background:      rgba(239,238,232,0.94);
  backdrop-filter:  blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-radius:   var(--radius-pill);
  padding:         6px;
  display:         flex;
  align-items:     center;
  gap:             4px;
  box-shadow:      var(--shadow-nav);
  z-index:         150;
  white-space:     nowrap;
  overflow:        hidden;
  border:          1px solid rgba(255,255,255,0.5);
  transition:      background 250ms ease, box-shadow 250ms ease;
}

.bottom-nav__item {
  padding:       10px 14px;
  border-radius: var(--radius-pill);
  flex-shrink:   1;
  min-width:     0;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semi);
  color:         var(--color-text-secondary);
  letter-spacing: -0.01em;
  transition:    background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.bottom-nav__item:hover {
  background: var(--color-accent-light);
  color:      var(--color-accent-dark);
}
.bottom-nav__item:active { transform: scale(0.95); }
.bottom-nav__item.is-active {
  background: var(--color-accent);
  color:      var(--color-text-inverse);
}

/* --- Main Content ------------------------------------------ */
.main-content {
  padding-top:    var(--top-bar-height);
  padding-bottom: var(--bottom-nav-clearance);
  min-height:     100vh;
}

.page {
  max-width: var(--max-content);
  margin:    0 auto;
  padding:   var(--space-5) var(--space-4) var(--space-8);
}

/* --- FAB --------------------------------------------------- */
.fab {
  position:        fixed;
  bottom:          calc(var(--bottom-nav-clearance) + var(--space-4));
  right:           var(--space-5);
  width:           var(--fab-size);
  height:          var(--fab-size);
  border-radius:   var(--radius-pill);
  background:      var(--color-accent);
  color:           var(--color-text-inverse);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      var(--shadow-md);
  z-index:         140;
  transition:      transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  flex-shrink:     0;
  padding:         0;
  line-height:     1;
}
.fab:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.fab:active { transform: scale(0.94); }
.fab.is-hidden { opacity: 0; pointer-events: none; }

/* --- Cards ------------------------------------------------- */
.card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--color-border);
  padding:       var(--space-4);
}
.card--flush { padding: 0; overflow: hidden; }

/* --- Pill List Item ---------------------------------------- */
.pill-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  background:    var(--color-surface);
  border-radius: var(--radius-pill);
  border:        1px solid var(--color-border);
  box-shadow:    var(--shadow-xs);
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.pill-item:hover {
  border-color: var(--color-accent);
  box-shadow:   var(--shadow-sm);
}
.pill-item__label  { flex: 1; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }
.pill-item__sub    { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.pill-item__amount { font-size: var(--font-size-md); font-weight: var(--font-weight-semi); }

/* --- Buttons ----------------------------------------------- */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-5);
  border-radius:   var(--radius-pill);
  font-size:       var(--font-size-md);
  font-weight:     var(--font-weight-semi);
  letter-spacing:  -0.01em;
  transition:      background var(--transition-fast), transform var(--transition-fast);
  white-space:     nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background:  var(--color-accent);
  color:       var(--color-text-inverse);
  box-shadow:  0 2px 8px rgba(27,94,59,0.30), 0 1px 2px rgba(27,94,59,0.20);
}
.btn--primary:hover {
  background:  var(--color-accent-dark);
  box-shadow:  0 4px 16px rgba(27,94,59,0.35), 0 2px 4px rgba(27,94,59,0.20);
  transform:   translateY(-1px);
}

.btn--ghost { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.btn--ghost:hover { background: var(--color-surface-alt); }

.btn--danger { background: var(--color-danger-light); color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger); color: white; }

.btn--full { width: 100%; }

/* --- Typography -------------------------------------------- */
.hero-number {
  font-size:      var(--font-size-3xl);
  font-weight:    var(--font-weight-extra);
  color:          var(--color-hero);
  letter-spacing: -0.04em;
  line-height:    1;
}

.hero-label {
  font-size:      var(--font-size-xs);
  color:          var(--color-text-secondary);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.section-title {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom:  var(--space-3);
}

/* --- Form Elements ----------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-secondary);
}

.form-input {
  width:         100%;
  padding:       var(--space-3) var(--space-4);
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-md);
  font-family:   inherit;
  color:         var(--color-text-primary);
  background:    var(--color-surface);
  outline:       none;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px var(--color-accent-light);
}
.form-input::placeholder { color: var(--color-text-secondary); opacity: 0.5; }

/* Date inputs: contain native control within border radius on mobile */
.form-input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 44px;
  line-height: 1.5;
}
.form-input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}
.form-input[type="date"]::-webkit-inner-spin-button {
  opacity: 0.5;
  cursor: pointer;
}
.form-input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.65;
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  transition: opacity 0.15s, background 0.15s;
}
.form-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.form-input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
  background: rgba(27,94,59,0.10);
}

.form-select {
  appearance:         none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right var(--space-4) center;
  padding-right:      var(--space-8);
}

/* iOS Safari auto-zooms inputs < 16px on focus — force 16px on touch devices */
@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea,
  .form-input,
  .form-select,
  .auth-input,
  .note-detail__textarea,
  .notes-page-item__textarea,
  .notes-item__input,
  .note-modal__textarea {
    font-size: 16px !important;
  }
}

/* --- Option Cards ------------------------------------------ */
.option-grid { display: grid; gap: var(--space-3); }
.option-grid--2 { grid-template-columns: 1fr 1fr; }
.option-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.option-card {
  padding:       var(--space-5) var(--space-4);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align:    center;
  cursor:        pointer;
  transition:    border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  background:    var(--color-surface);
}
.option-card:hover    { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.option-card.is-selected {
  border-color: var(--color-accent);
  background:   var(--color-accent-light);
  box-shadow:   0 0 0 1px var(--color-accent), var(--shadow-sm);
}
.option-card__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semi); }
.option-card__sub   { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }

/* --- Period Navigator -------------------------------------- */
.period-nav {
  display:       flex;
  align-items:   center;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding:       4px;
  margin-bottom: var(--space-4);
  box-shadow:    var(--shadow-sm);
}
.period-nav__arrow {
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-pill);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--color-text-secondary);
  flex-shrink:     0;
  font-size:       16px;
  transition:      background var(--transition-fast), color var(--transition-fast);
}
.period-nav__arrow:not([disabled]):hover {
  background: var(--color-accent-light);
  color:      var(--color-accent-dark);
}
.period-nav__arrow[disabled] { opacity: 0.25; cursor: default; }
.period-nav__label {
  flex:           1;
  text-align:     center;
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semi);
  color:          var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* --- Divider ----------------------------------------------- */
.divider { height: 1px; background: var(--color-border); margin: var(--space-4) 0; }

/* --- Stack ------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.stack--2 { gap: var(--space-2); }
.stack--3 { gap: var(--space-3); }
.period-item + .period-item { margin-top: var(--space-2); }
.stack--4 { gap: var(--space-4); }
.stack--6 { gap: var(--space-6); }

/* --- Utilities --------------------------------------------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-sm     { font-size: var(--font-size-sm); }
.text-xs     { font-size: var(--font-size-xs); }
.text-muted  { color: var(--color-text-secondary); }
.text-accent { color: var(--color-accent); }
.text-danger { color: var(--color-danger); }
.font-semi   { font-weight: var(--font-weight-semi); }
.font-bold   { font-weight: var(--font-weight-bold); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.hidden { display: none !important; }

/* --- Onboarding -------------------------------------------- */
.ob-wrap {
  max-width: var(--max-content);
  margin:    0 auto;
  padding:   var(--space-8) var(--space-5);
}

.ob-steps {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  margin-bottom:   var(--space-8);
}

.ob-step {
  height:        7px;
  width:         7px;
  border-radius: var(--radius-pill);
  background:    var(--color-border);
  transition:    width var(--transition-mid), background var(--transition-mid);
}
.ob-step.is-done   { background: var(--color-accent-light); width: 22px; }
.ob-step.is-active { background: var(--color-accent);       width: 22px; }

.ob-question {
  margin-bottom: var(--space-6);
}
.ob-question h2 {
  font-size:      var(--font-size-xl);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height:    1.2;
  margin-bottom:  var(--space-2);
}
.ob-question p {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
}

.ob-nav {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      var(--space-8);
  gap:             var(--space-3);
}
.ob-nav .btn { min-width: 100px; }

.ob-input-money {
  position: relative;
}
.ob-input-money::before {
  content:     '$';
  position:    absolute;
  left:        var(--space-4);
  top:         50%;
  transform:   translateY(-50%);
  color:       var(--color-text-secondary);
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}
.ob-input-money .form-input { padding-left: var(--space-7, 28px); }

/* Bottom nav visibility control */
.bottom-nav.is-hidden { display: none; }

/* --- Speed Dial -------------------------------------------- */
.speed-dial {
  position:       fixed;
  bottom:         calc(var(--bottom-nav-clearance) + var(--fab-size) + var(--space-4));
  right:          var(--space-5);
  z-index:        140;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            var(--space-3);
  pointer-events: none;
}
.speed-dial.is-open    { pointer-events: auto; }
.speed-dial.is-hidden  { display: none; }

.speed-dial__item {
  display:    flex;
  align-items: center;
  gap:        var(--space-3);
  opacity:    0;
  transform:  translateY(10px) scale(0.92);
  transition: opacity 180ms ease, transform 180ms ease;
}
.speed-dial.is-open .speed-dial__item              { opacity: 1; transform: translateY(0) scale(1); }
.speed-dial.is-open .speed-dial__item:nth-child(3) { transition-delay: 0ms;   }
.speed-dial.is-open .speed-dial__item:nth-child(2) { transition-delay: 50ms;  }
.speed-dial.is-open .speed-dial__item:nth-child(1) { transition-delay: 100ms; }

.speed-dial__label {
  background:    var(--color-text-primary);
  color:         var(--color-text-inverse);
  padding:       6px 14px;
  border-radius: var(--radius-pill);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  white-space:   nowrap;
  box-shadow:    var(--shadow-sm);
}

.speed-dial__btn {
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-pill);
  background:      var(--color-accent);
  color:           white;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      var(--shadow-md);
  font-size:       var(--font-size-lg);
  flex-shrink:     0;
  border:          none;
  cursor:          pointer;
  font-family:     inherit;
  transition:      background var(--transition-fast);
}
.speed-dial__btn:hover { background: var(--color-accent-dark); }

/* FAB rotation when dial is open */
.fab.dial-open { transform: rotate(45deg); }

/* --- Cents (dimmed decimal portion in money display) -------- */
.cents {
  font-size:   0.65em;
  opacity:     0.45;
  font-weight: inherit;
  letter-spacing: 0;
}

/* --- Card Header (title inside a card) --------------------- */
.card-header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  padding-bottom: 0;
  border-bottom: none;
}

/* --- Metric Tiles (monthly snapshot) ----------------------- */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: 0;
}
.metric-tile {
  background:    var(--color-bg);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
}
.metric-tile__label {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: 4px;
}
.metric-tile__value {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height:    1.2;
}

/* --- Spend Progress Bar ------------------------------------ */
.spend-bar {
  height:        6px;
  background:    var(--color-border);
  border-radius: var(--radius-pill);
  margin-top:    var(--space-4);
  overflow:      hidden;
}
.spend-bar__fill {
  height:        100%;
  border-radius: var(--radius-pill);
  background:    linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-vivid) 100%);
  transition:    width 400ms ease;
}
.spend-bar__fill.is-over { background: var(--color-danger); }
.spend-bar__label {
  font-size:  10px;
  color:      var(--color-text-secondary);
  text-align: right;
  margin-top: 4px;
}

/* --- Dashboard Sections ------------------------------------ */
.dash-section {
  margin-top: var(--space-4);
}

.dash-remaining {
  font-size:      var(--font-size-2xl);
  font-weight:    var(--font-weight-extra);
  letter-spacing: -0.04em;
  margin-top:     4px;
  line-height:    1;
}

.stat-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-2) 0;
}
.stat-row + .stat-row { border-top: 1px solid var(--color-border); }
.stat-row__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.stat-row__value { font-weight: var(--font-weight-semi); font-size: var(--font-size-sm); }

.breakdown-toggle {
  margin-top:  var(--space-3);
  font-size:   var(--font-size-sm);
  color:       var(--color-accent);
  font-weight: var(--font-weight-semi);
  display:     flex;
  align-items: center;
  gap:         4px;
  transition:  color var(--transition-fast);
}
.breakdown-toggle:hover { color: var(--color-accent-dark); }

.period-breakdown { padding-top: var(--space-1); }

/* --- Recurring / Overview Rows ----------------------------- */
.overview-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 0;
}
.overview-row + .overview-row { border-top: 1px solid var(--color-border); }
.overview-row__name {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  min-width: 0;
}
.overview-row__sub {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}
.overview-row__freq {
  font-size: 10px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-medium);
  opacity: 0.8;
  flex-shrink: 0;
}
.overview-row__amount {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  text-align: right;
  flex-shrink: 0;
}

/* --- Card Summary Rows ------------------------------------- */
.card-summary-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-2) 0;
}
.card-summary-row + .card-summary-row { border-top: 1px solid var(--color-border); }
.card-summary-dot        { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.card-summary-row__name  { flex: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.card-summary-row__count { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.card-summary-row__total { font-size: var(--font-size-sm); font-weight: var(--font-weight-semi); }

/* --- Horizon Selector -------------------------------------- */
.horizon-selector {
  display:         flex;
  gap:             4px;
  margin-bottom:   var(--space-5);
}
.horizon-btn {
  padding:         5px 14px;
  border-radius:   var(--radius-pill);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-semi);
  color:           var(--color-text-secondary);
  border:          1px solid transparent;
  transition:      all var(--transition-fast);
  letter-spacing:  0.01em;
}
.horizon-btn.is-active {
  background:    var(--color-surface);
  border-color:  var(--color-border);
  color:         var(--color-text-primary);
  box-shadow:    var(--shadow-sm);
}
.horizon-btn:not(.is-active):hover {
  color: var(--color-text-primary);
}

/* --- Projection Tiles -------------------------------------- */
.proj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: 0;
}
.proj-tile {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-4) var(--space-3);
  box-shadow:    var(--shadow-sm);
}
.proj-tile__label {
  font-size:      10px;
  color:          var(--color-text-secondary);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  var(--space-2);
}
.proj-tile__value {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height:    1.1;
}

/* Financial Health stat tiles — consistent tonal treatment across breakpoints */
.home-section-health .proj-tile {
  background: var(--color-surface-alt);
  border-color: transparent;
  box-shadow: none;
}

/* --- Distribution Bars ------------------------------------- */
.dist-bar-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     7px 0;
}
.dist-bar-row + .dist-bar-row { border-top: 1px solid var(--color-border); }
.dist-bar-row__name {
  width:         110px;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  flex-shrink:   0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.dist-bar-row__track {
  flex:          1;
  height:        6px;
  background:    var(--color-border);
  border-radius: var(--radius-pill);
  overflow:      hidden;
}
.dist-bar-row__fill {
  height:        100%;
  background:    var(--color-accent);
  border-radius: var(--radius-pill);
  min-width:     3px;
}
.dist-bar-row__amount {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  text-align:  right;
  width:       64px;
  flex-shrink: 0;
}

/* --- Budget Period List Item ------------------------------- */
.period-item {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-4) var(--space-5);
  cursor:        pointer;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.period-item:hover {
  border-color: var(--color-accent);
  box-shadow:   var(--shadow-md);
  transform:    translateY(-1px);
}
.period-item:active { transform: scale(0.99); }

.period-item.is-current {
  border-color: var(--color-accent);
  background:   linear-gradient(135deg, var(--color-surface) 0%, var(--color-accent-light) 100%);
}

.period-item__header {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-bottom: var(--space-3);
}

.period-item__dates {
  flex:        1;
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-semi);
  letter-spacing: -0.01em;
}

.period-item__badge {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--color-accent-dark);
  background:     var(--color-accent-light);
  padding:        2px 8px;
  border-radius:  var(--radius-pill);
}

/* Current-period badge: richer tint + dot indicator */
.period-item.is-current .period-item__badge {
  padding:        2px 8px 2px 6px;
  border:         1px solid rgba(27,94,59,0.28);
  box-shadow:     0 1px 4px rgba(27,94,59,0.20);
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
}
.period-item.is-current .period-item__badge::before {
  content:     '';
  display:     inline-block;
  width:       6px;
  height:      6px;
  border-radius: 50%;
  background:  var(--color-accent);
  flex-shrink: 0;
}

.period-item__rows {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
}

.period-item__row {
  display:     flex;
  align-items: center;
  justify-content: space-between;
}

.period-item__row-label {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
}

.period-item__row-value {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
}

.period-item__remaining {
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  margin-top:   var(--space-3);
  padding-top:  var(--space-3);
  border-top:   1px solid var(--color-border);
}

.period-item__remaining-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color:       var(--color-text-secondary);
}

.period-item__remaining-value {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-extra);
  letter-spacing: -0.03em;
}
.period-item__remaining-value.is-negative { color: var(--color-danger); }

/* --- Bottom Sheet ------------------------------------------ */
.sheet-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(15,23,42,0.45);
  z-index:        400;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition-mid);
}
.sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position:      fixed;
  top:           50%;
  left:          16px;
  right:         16px;
  bottom:        auto;
  background:    var(--color-surface);
  border-radius: var(--radius-xl);
  padding:       var(--space-5) var(--space-5) var(--space-6);
  z-index:       500;
  transform:     translate(0, -48%);
  opacity:       0;
  transition:    transform 220ms ease, opacity 220ms ease;
  max-height:    82vh;
  overflow-y:    auto;
}
.sheet.is-open {
  transform: translate(0, -50%);
  opacity:   1;
}
.sheet__handle { display: none; }

.sheet__handle {
  width:         36px;
  height:        4px;
  background:    var(--color-border);
  border-radius: var(--radius-pill);
  margin:        var(--space-2) auto var(--space-5);
}

.sheet__title {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  margin-bottom:  var(--space-5);
}

/* Expense sheet — title divider */
#expense-sheet .sheet__title {
  padding-bottom: var(--space-4);
  margin-bottom:  0;
  border-bottom:  1px solid var(--color-border);
}

/* Expense sheet — form label as section micro-label */
#expense-sheet .form-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Expense sheet — tight label-to-input association */
#expense-sheet .form-group { gap: var(--space-1); }

/* Expense sheet — option-card sizing inside modal */
#expense-sheet .option-card { padding: var(--space-4) var(--space-3); }

/* Expense sheet — section grouping blocks */
#expense-sheet .sh-body    { display: flex; flex-direction: column; gap: var(--space-3); }
#expense-sheet .sh-section {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
  background:    var(--color-bg);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
}

/* Expense sheet — footer action row */
#expense-sheet .sh-actions {
  display:     flex;
  gap:         var(--space-3);
  padding-top: var(--space-4);
  border-top:  1px solid var(--color-border);
}
/* Give primary CTA more visual weight than cancel */
#expense-sheet .sh-actions .btn          { width: auto; flex: 1; }
#expense-sheet .sh-actions .btn--primary { flex: 2; box-shadow: var(--shadow-sm); }

/* Selected option-card: tint the title text to reinforce selection */
#expense-sheet .option-card.is-selected .option-card__title { color: var(--color-accent-dark); }

/* --- Expense Pill ------------------------------------------ */
.expense-pill {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor:        pointer;
}
.expense-pill + .expense-pill { margin-top: var(--space-1); }
.expense-pill:hover { border-color: var(--color-accent-light); box-shadow: var(--shadow-sm); }
.expense-pill.is-expanded {
  border-color: var(--color-accent);
  box-shadow:   0 2px 8px rgba(27,94,59,0.10);
}

.expense-pill__header {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) var(--space-4);
}

.expense-pill__name        { flex: 1; font-weight: var(--font-weight-semi); font-size: var(--font-size-sm); }
.expense-pill__amount-wrap { flex-shrink: 0; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.expense-pill__amount      { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
.expense-pill__cadence     { display: inline-block; font-size: 10px; font-weight: var(--font-weight-medium); color: var(--color-accent-dark); background: var(--color-accent-light); border: 1px solid rgba(27,94,59,0.20); border-radius: 999px; padding: 1px 7px; white-space: nowrap; line-height: 1.5; }
.expense-pill__chevron {
  color:       var(--color-text-secondary);
  font-size:   11px;
  transition:  transform var(--transition-fast);
  flex-shrink: 0;
  opacity:     0.6;
}
.expense-pill.is-expanded .expense-pill__chevron { transform: rotate(180deg); opacity: 1; color: var(--color-accent); }

.expense-pill__details {
  display:    none;
  padding:    var(--space-3) var(--space-4) var(--space-4);
  border-top: 2px solid var(--color-accent-light);
  background: var(--color-surface-alt);
}
.expense-pill.is-expanded .expense-pill__details { display: block; }

.expense-pill__meta {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-2);
  margin-bottom:         var(--space-3);
}
.expense-pill__meta-item {
  background:    var(--color-surface);
  border:        1px solid rgba(15,23,42,0.06);
  border-radius: var(--radius-sm);
  padding:       6px 8px;
}
.expense-pill__meta-label {
  font-size:      10px;
  color:          var(--color-text-secondary);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.expense-pill__meta-value {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  margin-top:  2px;
  color:       var(--color-text-primary);
}

.expense-pill__actions {
  display:     flex;
  gap:         var(--space-2);
  padding-top: var(--space-3);
  border-top:  1px solid rgba(15,23,42,0.08);
}

.exp-bank-tag {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   11px;
  font-weight: var(--font-weight-normal);
  color:       var(--color-text-secondary);
  margin-top:  2px;
}
.exp-bank-dot {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  flex-shrink:  0;
}

.exp-sort-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-2) var(--space-3);
  margin-bottom:   var(--space-2);
  background:      var(--color-surface-alt);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-sm);
}
.exp-sort-bar .text-muted {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}
.exp-sort-select {
  font-size:    var(--font-size-xs);
  font-weight:  var(--font-weight-medium);
  color:        var(--color-text-secondary);
  background:   var(--color-surface);
  border:       1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding:      4px 26px 4px 10px;
  cursor:       pointer;
  outline:      none;
  appearance:   none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6B80' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.exp-sort-select:hover  { border-color: var(--color-accent); }
.exp-sort-select:focus  {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 2px var(--color-accent-light);
  outline: none;
}

/* Desktop sort bar — elevated toolbar feel */
@media (min-width: 1200px) {
  .exp-sort-bar {
    padding:      var(--space-2) var(--space-4);
    border-color: var(--color-border);
    background:   var(--color-surface-alt);
  }
  .exp-sort-ctrl {
    display:     flex;
    align-items: center;
    gap:         6px;
  }
  .exp-sort-ctrl::before {
    content:     'Sort by';
    font-size:   var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color:       var(--color-text-secondary);
    white-space: nowrap;
  }
  .exp-sort-select {
    font-size:   var(--font-size-xs);
    padding:     5px 28px 5px 10px;
    box-shadow:  0 1px 3px rgba(15,23,42,0.06);
  }
}

/* --- Wallet Cards ------------------------------------------ */
.wallet-row {
  display:    flex;
  gap:        var(--space-4);
  overflow-x: auto;
  padding:    var(--space-3) var(--space-1) var(--space-4);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.wallet-row::-webkit-scrollbar { display: none; }

.wallet-card {
  flex-shrink:   0;
  width:         300px;
  height:        176px;
  border-radius: var(--radius-xl);
  padding:       var(--space-5);
  color:         #fff;
  cursor:        pointer;
  scroll-snap-align: start;
  display:       flex;
  flex-direction: column;
  justify-content: space-between;
  transition:    transform var(--transition-fast), box-shadow var(--transition-fast);
  position:      relative;
  overflow:      hidden;
  user-select:   none;
}
.wallet-card::after {
  content:       '';
  position:      absolute;
  top:           -40px;
  right:         -40px;
  width:         160px;
  height:        160px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.06);
  pointer-events: none;
}
.wallet-card:hover  { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wallet-card:active { transform: scale(0.97); }
.wallet-card.is-selected {
  transform:  translateY(-4px);
  box-shadow: 0 0 0 2px var(--color-accent), 0 8px 24px rgba(0,0,0,0.18);
}

.wallet-card__type {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity:        0.75;
}

.wallet-card__number {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-semi);
  letter-spacing: 0.2em;
  margin-top:     auto;
}

.wallet-card__name {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity:     0.9;
  margin-top:  var(--space-1);
}

.wallet-empty {
  width:         300px;
  height:        176px;
  border-radius: var(--radius-xl);
  border:        2px dashed var(--color-border);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  justify-content: center;
  gap:           var(--space-2);
  color:         var(--color-text-secondary);
  cursor:        pointer;
  flex-shrink:   0;
  transition:    border-color var(--transition-fast), background var(--transition-fast);
}
.wallet-empty:hover {
  border-color: var(--color-accent);
  background:   var(--color-accent-light);
}
.wallet-empty__icon  { font-size: 28px; }
.wallet-empty__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

/* --- Mobile Wallet Stack (Apple Wallet style) -------------- */
.wallet-mobile-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  padding:        var(--space-2) 0 var(--space-6);
}

.wallet-mobile-card {
  width:           100%;
  aspect-ratio:    1.586 / 1;
  border-radius:   var(--radius-xl);
  padding:         var(--space-5);
  color:           #fff;
  cursor:          pointer;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  position:        relative;
  overflow:        hidden;
  box-shadow:      var(--shadow-md);
  transition:      transform var(--transition-fast), box-shadow var(--transition-fast);
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
}
.wallet-mobile-card::after {
  content:        '';
  position:       absolute;
  top:            -40px;
  right:          -40px;
  width:          160px;
  height:         160px;
  border-radius:  50%;
  background:     rgba(255,255,255,0.06);
  pointer-events: none;
}
.wallet-mobile-card:active { transform: scale(0.98); box-shadow: var(--shadow-sm); }

.wallet-mobile-card__bank {
  font-size:      10px;
  font-weight:    var(--font-weight-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity:        0.55;
  margin-bottom:  2px;
}

.wallet-mobile-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  height:          76px;
  border-radius:   var(--radius-xl);
  border:          2px dashed var(--color-border);
  cursor:          pointer;
  color:           var(--color-text-secondary);
  transition:      border-color var(--transition-fast), color var(--transition-fast);
}
.wallet-mobile-empty:hover,
.wallet-mobile-empty:active { border-color: var(--color-accent); color: var(--color-accent); }
.wallet-mobile-empty__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

/* Wallet: always show vertical stack, never the old carousel/detail */
.wallet-row, .card-detail, #card-detail-area { display: none !important; }

/* --- Savings Account Pill ---------------------------------- */
.wallet-savings-pill {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-xs);
  cursor:        pointer;
  transition:    background var(--transition-fast), box-shadow var(--transition-fast);
  user-select:   none;
  -webkit-tap-highlight-color: transparent;
}
.wallet-savings-pill:hover  { background: var(--color-surface-alt); box-shadow: var(--shadow-sm); }
.wallet-savings-pill:active { background: var(--color-surface-alt); box-shadow: none; }

.wallet-savings-pill__name {
  flex:        1;
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  min-width:   0;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.wallet-savings-pill__badge {
  font-size:      10px;
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--color-accent);
  background:     var(--color-accent-light);
  padding:        2px 7px;
  border-radius:  var(--radius-pill);
  flex-shrink:    0;
}
.wallet-savings-pill__sub {
  font-size:  var(--font-size-xs);
  color:      var(--color-text-secondary);
  flex-shrink: 0;
}

/* --- Wallet Section Label ---------------------------------- */
.wallet-section-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--color-text-secondary);
  padding:        var(--space-3) 0 var(--space-1);
}

/* --- Wallet: 2-column card grid ---------------------------- */
.wallet-cards-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-3);
}
.wallet-cards-grid .wallet-card__number {
  font-size:      14px;
  letter-spacing: 0.12em;
}
.wallet-cards-grid .wallet-card__name {
  font-size: 11px;
}
.wallet-cards-grid .wallet-card__type {
  font-size: 9px;
}
.wallet-cards-grid.is-reorder .wallet-mobile-card {
  cursor: grab;
}
.wallet-cards-grid.is-reorder .wallet-mobile-card:active {
  cursor: grabbing;
}
.sortable-ghost  { opacity: 0.35; }
.sortable-chosen { box-shadow: var(--shadow-lg); }

/* Expense drag-to-reorder */
.expense-pill__drag-handle {
  color:        var(--color-text-secondary);
  font-size:    13px;
  letter-spacing: 2px;
  padding:      0 10px 0 0;
  flex-shrink:  0;
  cursor:       grab;
  user-select:  none;
  touch-action: none;
}
.expense-pill__drag-handle:active { cursor: grabbing; }
.stack--3.is-reorder .expense-pill { cursor: default; }
.stack--3.is-reorder .expense-pill__header { cursor: default; }

.exp-reorder-btn {
  font-size:     12px;
  font-weight:   500;
  color:         var(--color-text-secondary);
  padding:       4px 10px;
  border:        1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background:    none;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.15s, color 0.15s, border-color 0.15s;
}
.exp-reorder-btn:hover {
  color:         var(--color-accent-dark);
  border-color:  var(--color-accent);
  background:    var(--color-accent-light);
}

/* --- Wallet: savings list + compact cards list containers -- */
#wallet-savings-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}
#wallet-cards-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

/* --- Wallet: compact card row ------------------------------ */
.wallet-card-compact {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         var(--space-3) var(--space-4);
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-md);
  box-shadow:      var(--shadow-xs);
  cursor:          pointer;
  transition:      background var(--transition-fast);
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
}
.wallet-card-compact:hover  { background: var(--color-surface-alt); }
.wallet-card-compact:active { background: var(--color-surface-alt); }
.wallet-card-compact__swatch {
  width:         28px;
  height:        18px;
  border-radius: 4px;
  flex-shrink:   0;
}
.wallet-card-compact__name {
  flex:          1;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semi);
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.wallet-card-compact__lastfour {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-secondary);
  flex-shrink: 0;
}
.wallet-card-compact__type {
  font-size:      10px;
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--color-text-secondary);
  background:     var(--color-surface-alt);
  padding:        2px 7px;
  border-radius:  var(--radius-pill);
  flex-shrink:    0;
}
.wallet-card-compact__total {
  font-size:   var(--font-size-xs);
  color:       var(--color-accent);
  font-weight: var(--font-weight-semi);
  flex-shrink: 0;
  white-space: nowrap;
}
.wallet-card-compact.is-reorder { cursor: grab; }
.wallet-card-compact.is-reorder:active { cursor: grabbing; }
.wallet-savings-pill.is-reorder { cursor: grab; }
.wallet-savings-pill.is-reorder:active { cursor: grabbing; }

/* --- Wallet: inline accordion expand ----------------------- */
.wallet-savings-pill.is-expanded,
.wallet-card-compact.is-expanded {
  border-bottom-left-radius:  0;
  border-bottom-right-radius: 0;
  border-bottom-color:        transparent;
}
.wallet-item-expand {
  background:    var(--color-surface-alt);
  border:        1px solid var(--color-border);
  border-top:    none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding:       var(--space-3) var(--space-4) var(--space-4);
  margin-top:    -1px;
}
.wallet-expand__expense {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    background var(--transition-fast);
}
.wallet-expand__expense + .wallet-expand__expense {
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}
.wallet-expand__expense:hover { background: var(--color-surface); }

/* --- Wallet: compact toggle icon button -------------------- */
.wallet-icon-btn {
  padding:         5px 8px !important;
  display:         inline-flex !important;
  align-items:     center;
  justify-content: center;
}

/* --- Wallet: overview bank rows clickable ------------------ */
.wallet-overview__bank--clickable {
  cursor:     pointer;
  transition: background var(--transition-fast);
}
.wallet-overview__bank--clickable:hover { background: var(--color-surface-alt); }

/* --- Wallet: section header with controls ------------------ */
.wallet-section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-3) 0 0;
}
.wallet-section-controls {
  display:     flex;
  gap:         var(--space-2);
  align-items: center;
}

/* --- Wallet: All Banks overview ---------------------------- */
.wallet-overview {
  padding: var(--space-1) 0 var(--space-2);
}
.wallet-overview__stats {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   var(--space-2);
  margin-bottom:         var(--space-3);
}
.wallet-overview__stat {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-3);
  text-align:    center;
}
.wallet-overview__stat-value {
  font-size:     var(--font-size-md);
  font-weight:   700;
  letter-spacing: -0.02em;
  line-height:   1;
  margin-bottom: 4px;
}
.wallet-overview__stat-label {
  font-size:      9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--color-text-secondary);
  line-height:    1.3;
}
.wallet-overview__banks {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
}
.wallet-overview__bank {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  padding:      var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.wallet-overview__bank:last-child { border-bottom: none; }
.wallet-overview__bank-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}
.wallet-overview__bank-name {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
}
.wallet-overview__bank-sub {
  font-size:  var(--font-size-xs);
  color:      var(--color-text-secondary);
  margin-top: 2px;
}
.wallet-overview__bank-spend {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color:       var(--color-accent);
  margin-left: auto;
  white-space: nowrap;
}

.card-detail {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  border:        1px solid var(--color-border);
  overflow:      hidden;
  margin-top:    var(--space-4);
}
.card-detail__header {
  padding:       var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display:       flex;
  justify-content: space-between;
  align-items:   center;
}
.card-detail__actions {
  display: flex;
  gap:     var(--space-2);
}


/* --- Home Mode Switch -------------------------------------- */
.home-mode-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.home-mode-switch__btn {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.home-mode-switch__btn.is-active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}
.home-mode-switch__btn:not(.is-active):hover {
  color: var(--color-text-primary);
}

.home-supporting-copy {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.45;
}

/* --- Financial Health card — collapsible dropdown treatment --- */
.card.health-card          { border-color: rgba(27,94,59,0.35); }
.health-card__toggle       { display: flex; align-items: center; justify-content: space-between;
                             cursor: pointer; user-select: none; }
.health-card__chevron      { font-size: 11px; color: var(--color-text-secondary); }

/* Collapsible card bodies — margin-top provides spacing when visible; display:none collapses gap */
#structure-card-body,
#health-card-body,
#bills-card-body           { margin-top: var(--space-2); }
#structure-card-body.is-hidden,
#health-card-body.is-hidden,
#bills-card-body.is-hidden { display: none; }

/* Recurring Bills toggle (mobile collapse) */
.bills-toggle {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  cursor:      pointer;
  user-select: none;
}
/* Override card-header inside bills-toggle: more readable, less caps */
.bills-toggle .card-header {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semi);
  color:          var(--color-text-primary);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom:  0;
}
.bills-chevron { font-size: 11px; color: var(--color-text-secondary); }

/* Internal section title inside the bills card body */
.bills-internal-title {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top:     var(--space-3);
  margin-bottom:  var(--space-1);
}

.health-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.health-horizon-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-health-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.structure-total-row,
.monthly-bills-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--color-border);
}
.structure-total-row__label,
.monthly-bills-total__label {
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  font-weight:var(--font-weight-medium);
}
.structure-total-row__value {
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-xl);
  letter-spacing:-0.02em;
}
.monthly-bills-total__value {
  font-weight: var(--font-weight-bold);
  font-size:   var(--font-size-md);
  color:       var(--color-text-primary);
}

.period-shortcut-card .metric-grid {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.period-shortcut__top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-4);
}
.period-shortcut__range {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-primary);
}
.period-shortcut__caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.period-shortcut__remaining {
  text-align:right;
}
.period-shortcut__remaining-label {
  font-size:10px;
  color:var(--color-text-secondary);
  margin-bottom:2px;
}
.period-shortcut__remaining-value {
  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-bold);
  letter-spacing:-0.02em;
}
.period-shortcut__action {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-semi);
}

/* --- Home: desktop-only elements hidden on mobile ----------- */
.period-detail { display: none; }
.home-welcome { display: none; }

/* --- Bill mini-cards (global base) -------------------------- */
.period-bill-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: 6px;
}
.period-bill-card:last-child { margin-bottom: 0; }
.period-bill-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-primary);
}
.period-bill-card__amount {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.period-bill-card__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/* --- Pay Period remaining tile ------------------------------ */
.pd-remaining-tile {
  background:    var(--color-surface-alt);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-4);
  margin-bottom: var(--space-4);
  text-align:    center;
  box-shadow:    var(--shadow-xs);
}
.pd-remaining-tile--danger {
  background:   var(--color-danger-light);
  border-color: rgba(220,38,38,0.15);
}

/* --- Rail title (hidden on mobile, shown on desktop) -------- */
.rail-title { display: none; }

/* --- Home page shell (mobile-first) ------------------------
   Wrapper divs transparent on mobile (display:contents).
   Children become direct flex children of .home-page and
   stack in order via flex + order properties.                */
.home-desktop-grid,
.home-col-left,
.home-col-center,
.home-col-right { display: contents; }

/* Goals hidden on mobile */
.home-section-goals { display: none; }

/* home-page flex on mobile — enables order properties */
.home-page { display: flex; flex-direction: column; }

/* Mobile stacking order (preserves original 021a1f0 visual order) */
.home-welcome                       { order: 0; }
.home-page .home-mode-switch        { order: 1; }
.home-page .home-section-period     { order: 2; }
.home-page .notes-card              { order: 3; }
.home-page .home-section-structure  { order: 4; }
.home-page .home-section-bills      { order: 5; }
.home-page .home-section-health     { order: 6; }

/* --- Home Dashboard (desktop 3-column) -------------------- */
@media (min-width: 1200px) {

  /* ---- Desktop shell: block + 3-column wrapper grid ------- */
  .home-page {
    display: block;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-8) 0;
  }

  /* Hide mobile mode switch */
  .home-page .home-mode-switch {
    display: none;
  }

  /* ---- Welcome header (full width, above the grid) -------- */
  .home-welcome {
    display: block;
    padding: var(--space-2) 0 var(--space-3);
    order: unset;
  }
  .home-welcome__heading {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.2;
  }
  .home-welcome__sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 2px;
  }

  /* ---- 3-column grid wrapper ------------------------------ */
  .home-desktop-grid {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    column-gap: 28px;
    align-items: start;
  }
  /* Independent flex columns — no shared row heights */
  .home-col-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-top: 90px; /* align Notes with period card content (30px original + ~60px period nav height) */
  }
  .home-col-center {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .home-col-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding-top: 60px; /* align Recurring Bills with period card content */
  }
  /* Reset mobile order values */
  .home-col-left .notes-card,
  .home-col-left .home-section-health,
  .home-col-left .home-section-structure { order: 0; }
  .home-col-center .home-section-period  { order: 0; }
  .home-col-right .home-section-bills,
  .home-col-right .home-section-goals    { order: 0; }
  /* Goals visible on desktop */
  .home-section-goals { display: block; }

  /* ========================================================= */
  /* CENTER — dominant workspace                               */
  /* ========================================================= */

  /* Period card — THE hero. Eye lands here first. */
  .period-shortcut-card {
    padding: 28px 32px !important;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06);
    border: 1px solid rgba(27,94,59,0.22);
    background: linear-gradient(145deg, var(--color-surface) 0%, var(--color-accent-light) 55%, rgba(27,94,59,0.12) 100%);
  }
  .period-shortcut-card .card-header {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
  }
  /* Tier 1 — primary decision number */
  .period-shortcut-card .period-remaining {
    font-size: var(--font-size-2xl) !important;
    line-height: 1.1;
  }
  .period-shortcut-card .period-shortcut__action {
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    margin-top: var(--space-3) !important;
  }

  /* Period detail — desktop-only expanded snapshot */
  .period-detail {
    display: block;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(27,94,59,0.12);
  }
  .period-detail__metrics {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-3);
  }
  .period-detail__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .period-detail__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-medium);
  }
  .period-detail__value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semi);
    color: var(--color-text-primary);
  }
  .period-detail__bar-track {
    height: 6px;
    background: rgba(27,94,59,0.10);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
  }
  .period-detail__bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 3px;
    transition: width var(--transition-mid);
  }
  .period-detail__bar-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }

  /* Bills-in-period preview */
  .period-bills-preview {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(27,94,59,0.10);
  }
  .period-bills-preview__header {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
  }
  .period-bills-preview__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
  }
  .period-bills-preview__name {
    font-weight: var(--font-weight-normal);
  }
  .period-bills-preview__amt {
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
  }
  .period-bills-preview__more {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 2px;
  }

  /* Structure card — compact utility in left column */
  .home-card--center {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 4px rgba(15,23,42,0.07);
    border-color: var(--color-border);
  }
  .home-section-structure .home-card--center {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
  .home-card--center .card-header {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semi);
    letter-spacing: 0;
    margin-bottom: var(--space-1);
  }
  .home-card--center .home-supporting-copy {
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-3);
  }

  /* Metric tiles — single column for narrow left column */
  .home-metric-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .home-metric-grid .metric-tile {
    padding: 8px 10px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15,23,42,0.05);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .home-metric-grid .metric-tile__label {
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }
  .home-metric-grid .metric-tile__value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semi);
    letter-spacing: -0.01em;
  }

  /* ========================================================= */
  /* SIDE RAILS — quiet, supporting, utilitarian               */
  /* ========================================================= */

  .home-card--side {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
  }
  .rail-title {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 11px;
    font-weight: var(--font-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
  }
  .home-card--side .card-header {
    display: none;
  }
  /* Keep toggle title visible even in side cards */
  .health-card__toggle .card-header {
    display: block;
  }
  .home-card--side .home-supporting-copy {
    font-size: var(--font-size-xs);
    line-height: 1.4;
  }

  /* ---- Left rail: bills always expanded on desktop -------- */
  .home-section-bills .home-card--side {
    padding: 12px 14px 14px;
  }
  /* Hide bills toggle on desktop (rail-title serves as section label) */
  .bills-toggle { display: none; }
  #bills-card-body { display: block !important; }
  #bills-hidden {
    display: block !important;
  }
  .home-section-bills #bills-expand {
    display: none;
  }
  /* Recurring Bills — soft structured rows, premium utility panel */
  .home-section-bills .overview-row {
    background: rgba(15,23,42,0.02);
    border: 1px solid rgba(15,23,42,0.05);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 6px;
    font-size: var(--font-size-sm);
    align-items: flex-start;
  }
  .home-section-bills .overview-row + .overview-row {
    border-top: none;
  }
  .home-section-bills .overview-row:last-of-type {
    margin-bottom: 0;
  }
  .home-section-bills .overview-row__name {
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
  }
  .home-section-bills .overview-row__amount {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semi);
  }
  .home-section-bills .home-supporting-copy {
    display: none;
  }
  .home-section-bills .monthly-bills-total {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    font-size: var(--font-size-sm);
    border-top: 1px solid rgba(15,23,42,0.08);
  }
  .home-section-bills .monthly-bills-total__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
  }
  .home-section-bills .monthly-bills-total__value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
  }
  .home-section-bills .bills-rows-scroll {
    max-height: 295px;
    overflow-y: auto;
    padding-right: 2px;
  }
  .home-section-bills .period-bill-card__note,
  .home-section-bills .overview-row .text-xs,
  .home-section-bills .overview-row .text-muted {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 2px;
  }

  /* ---- Notes: interactive, clickable on desktop ----------- */
  .home-page .notes-card {
    padding: 10px 14px !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .home-page .notes-card .notes-header {
    cursor: pointer;
  }
  .home-page .notes-card .notes-header:hover {
    color: var(--color-accent);
  }
  .home-page .notes-card .notes-header:hover .card-header {
    color: var(--color-accent);
  }
  .home-page .notes-card .card-header {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
  }
  .home-page .notes-card .notes-header__chevron {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
  }
  .home-page .notes-card .notes-header:hover .notes-header__chevron {
    color: var(--color-accent);
  }

  /* ---- Right rail: Tier 3 numbers, informational ---------- */
  .home-section-health .home-proj-grid {
    grid-template-columns: 1fr;
  }
  .home-section-health .proj-tile {
    padding: var(--space-1) var(--space-2);
  }
  .home-section-health .proj-grid {
    gap: 6px;
  }
  .home-section-health .health-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
  }
  .home-section-health .health-horizon-label {
    font-size: var(--font-size-xs);
  }
  .home-section-health .horizon-btn {
    font-size: var(--font-size-xs);
    padding: 3px 8px;
  }
  .home-section-health .proj-tile__value {
    font-size: var(--font-size-md);
  }
  .home-section-health .proj-tile__label {
    font-size: var(--font-size-xs);
  }

  /* ---- Bill mini-cards (desktop overrides) ------------------ */
  .period-bill-card {
    cursor: pointer;
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
  }
  .period-bill-card:hover {
    box-shadow: 0 2px 8px rgba(15,23,42,0.08);
    background: rgba(15,23,42,0.03);
  }
  .period-bill-card__amount {
    font-size: var(--font-size-md);
  }

  /* ---- Period detail typography bumps (desktop) ------------ */
  .period-detail__value {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-bold) !important;
  }
  .period-bills-preview__header {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semi);
  }

  /* ---- Period metric stat-boxes (desktop) ------------------ */
  .period-detail__metric {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
  }
  .period-detail__label {
    font-size: 11px !important;
    letter-spacing: 0.05em;
  }
  .period-detail__bar-track {
    height: 8px !important;
  }
  .period-detail__bar-fill {
    border-radius: 4px;
  }

  /* ---- Darken desktop typography (slate-600) --------------- */
  .home-page .home-supporting-copy,
  .home-page .text-muted,
  .period-detail__label,
  .period-detail__bar-label,
  .period-bills-preview__header,
  .period-bill-card__note,
  .home-card--side .card-header {
    color: var(--color-text-secondary);
  }

  /* ---- Financial Health card — cleaner, still secondary ---- */
  .home-section-health .home-card--side {
    padding: 14px 16px;
  }
  .home-section-health .horizon-btn {
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: all var(--transition-fast);
  }
  .home-section-health .horizon-btn.is-active {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-color: var(--color-accent-light);
    font-weight: var(--font-weight-semi);
  }
  .home-section-health .proj-tile {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
  }
  .home-section-health .proj-tile__value {
    font-weight: var(--font-weight-semi);
  }
  .home-section-health .proj-tile__label {
    color: var(--color-text-secondary);
  }
  .home-section-health .health-horizon-label {
    color: var(--color-text-secondary);
  }

  /* ---- Notes clickable on desktop ------------------------- */
  .home-page .notes-item {
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
  }
  .home-page .notes-item:hover {
    background: rgba(27,94,59,0.06);
    box-shadow: 0 1px 4px rgba(15,23,42,0.06);
  }

  /* ---- Pay period: breakdown expanded by default ----------- */
  #period-breakdown {
    display: block !important;
  }
  #breakdown-toggle {
    display: none;
  }

  /* ---- Goals compact card --------------------------------- */
  .home-goals-card {
    padding: 12px 14px;
  }
  .home-goal-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
  }
  .home-goal-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .home-goal-item__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: 5px;
  }
  .home-goal-item__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .home-goal-item__pct {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .home-goal-item__bar-track {
    height: 4px;
    background: rgba(27,94,59,0.12);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
  }
  .home-goal-item__bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 2px;
  }
  .home-goal-item__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .home-goals-empty {
    padding: 6px 0 2px;
    text-align: center;
  }
  .home-goals-empty__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: 4px;
  }
  .home-goals-empty__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }
}

/* --- Bill Detail Modal ------------------------------------- */
.bill-detail__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.bill-detail__rows {
  display: flex;
  flex-direction: column;
}
.bill-detail__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.bill-detail__row:last-child {
  border-bottom: none;
}
.bill-detail__label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.bill-detail__value {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.bill-detail__placeholder {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: var(--font-size-sm);
}
.bill-detail__separator {
  height: 0;
  margin: var(--space-2) 0;
  border-top: 1px dashed var(--color-border);
}
.bill-detail__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.bill-detail__delete-btn {
  color: var(--color-danger) !important;
}

/* --- Note Detail Modal ------------------------------------ */
.note-detail-sheet { max-width: 480px; margin: 0 auto; }

.note-detail__header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   var(--space-4);
  padding-bottom:  var(--space-3);
  border-bottom:   1px solid var(--color-border);
}
.note-detail__title {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.note-detail__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 0;
}
.note-detail__text {
  font-size:     var(--font-size-md);
  line-height:   1.65;
  color:         var(--color-text-primary);
  word-break:    break-word;
  white-space:   pre-wrap;
  min-height:    60px;
  background:    var(--color-bg);
  border-radius: var(--radius-md);
  padding:       var(--space-4);
  margin-bottom: var(--space-2);
}
.note-detail__textarea {
  width:         100%;
  min-height:    100px;
  font-family:   var(--font-family);
  font-size:     var(--font-size-md);
  line-height:   1.6;
  padding:       var(--space-3) var(--space-4);
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background:    var(--color-bg);
  resize:        vertical;
  outline:       none;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.note-detail__textarea:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px var(--color-accent-light);
}
.note-detail__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-top:  var(--space-4);
  padding-top: var(--space-3);
  border-top:  1px solid var(--color-border);
}
.note-detail__delete-btn {
  color:       var(--color-danger) !important;
  margin-left: auto;
}

/* --- Goals page ------------------------------------------- */
.goals-empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.goals-empty-state__icon {
  font-size: 32px;
  color: var(--color-accent-light);
  line-height: 1;
  margin-bottom: var(--space-1);
}
.goals-empty-state__text {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-primary);
}
.goals-empty-state__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
/* Goal cards */
.goal-card {
  padding:     var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent-light);
  transition:  border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.goal-card:hover {
  border-left-color: var(--color-accent);
}
.goal-card--complete {
  border-left-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-accent-light) 100%);
}

.goal-card__header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             var(--space-2);
  margin-bottom:   var(--space-2);
}
.goal-card__name-area { flex: 1; }
.goal-card__name      { margin-bottom: 2px; }
.goal-card__date      { line-height: 1.4; }

.goal-card__amount-area {
  text-align:  right;
  flex-shrink: 0;
}
.goal-card__saved {
  font-weight:     var(--font-weight-extra);
  font-size:       var(--font-size-lg);
  letter-spacing:  -0.03em;
  color:           var(--color-text-primary);
  line-height:     1.2;
}
.goal-card--complete .goal-card__saved {
  color: var(--color-accent);
}

/* Progress bar */
.goal-bar {
  height:        8px;
  background:    var(--color-surface-alt);
  border:        1px solid var(--color-border);
  border-radius: 6px;
  overflow:      hidden;
  margin-bottom: var(--space-1);
}
.goal-bar__fill {
  height:        100%;
  min-width:     6px;
  background:    linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-vivid) 100%);
  border-radius: 6px;
  transition:    width 0.4s ease;
}
.goal-bar__fill--complete {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-vivid) 100%);
}

.goal-card__stats {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   0;
}

/* Action row */
.goal-card__actions {
  display:        flex;
  gap:            8px;
  margin-top:     var(--space-3);
  padding-top:    var(--space-3);
  border-top:     1px solid var(--color-border);
}
.goal-card__btn-contribute {
  font-size: 13px;
  padding:   8px 16px;
  flex:      1;
}
.goal-card__btn-secondary {
  font-size: 13px;
  padding:   8px 14px;
}

/* Contribution history sheet */
.history-list {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  max-height:     340px;
  overflow-y:     auto;
}
.history-entry {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-2) var(--space-2);
  background:     var(--color-surface-alt);
  border-radius:  var(--radius-sm);
  border:         1px solid var(--color-border);
}
.history-entry--editing {
  align-items: stretch;
  flex-direction: column;
}
.history-entry__body {
  flex:    1;
  min-width: 0;
}
.history-entry__row1 {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-2);
  flex-wrap:   wrap;
}
.history-entry__amount {
  font-weight: var(--font-weight-semi);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-primary);
}
.history-entry__date  { white-space: nowrap; }
.history-entry__note  { font-style: italic; margin-top: 1px; }
.history-entry__actions {
  display:     flex;
  gap:         4px;
  flex-shrink: 0;
}
.history-entry__edit-form { width: 100%; }
.history-entry__edit-row {
  display: flex;
  gap:     var(--space-2);
  margin-bottom: var(--space-1);
}

/* Goal sheet sections */
.gs-section {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-3);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
}
.gs-section__label {
  font-size:   11px;
  font-weight: var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:       var(--color-text-secondary);
}
.gs-section__label-sub {
  font-weight: var(--font-weight-normal);
  text-transform: none;
  letter-spacing: 0;
}
.gs-hint {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-secondary);
  margin-top: 4px;
}

/* Contribution toast */
.goal-toast {
  position:      fixed;
  bottom:        80px;
  left:          50%;
  transform:     translateX(-50%) translateY(8px);
  background:    var(--color-accent);
  color:         #fff;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semi);
  padding:       10px 20px;
  border-radius: 20px;
  white-space:   nowrap;
  box-shadow:    0 4px 16px rgba(0,0,0,0.18);
  opacity:       0;
  transition:    opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index:       9999;
}
.goal-toast.is-visible {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* --- Settings page ---------------------------------------- */

/* Profile card */
.settings-profile-card {
  background:    linear-gradient(135deg, var(--color-surface) 0%, var(--color-accent-light) 100%);
  border-color:  rgba(27,94,59,0.22);
  padding:       var(--space-4) var(--space-4) var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow:    0 2px 8px rgba(27,94,59,0.08);
}
.settings-profile-card__inner {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         var(--space-3);
}
.settings-profile-card__name {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--color-text-primary);
  line-height:    1.2;
}
.settings-profile-card__summary {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
  margin-top:  4px;
  line-height: 1.4;
}

/* Setup card */
.settings-setup-card {
  padding: var(--space-4) var(--space-4) 0;
}
.settings-setup-card__title {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--color-text-secondary);
  margin-bottom:  var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom:  1px solid var(--color-border);
}
.settings-setup-card .form-group {
  gap:           var(--space-2);
  margin-bottom: var(--space-4) !important;
}
.settings-setup-card .form-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color:       var(--color-text-primary);
}
.settings-setup-card .form-input {
  padding:     var(--space-2) var(--space-3);
  font-size:   var(--font-size-sm);
  border-color: rgba(15,23,42,0.15);
  background:  var(--color-surface);
  transition:  border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.settings-setup-card .form-input:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px rgba(27,94,59,0.12);
}
.settings-setup-card .ob-input-money .form-input {
  padding-left: var(--space-6, 24px);
}
.settings-setup-card .option-card {
  padding: var(--space-2) var(--space-3);
}
.settings-setup-card .option-card__title {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
}
.settings-setup-card .option-card__sub {
  font-size: var(--font-size-xs);
  color:     var(--color-text-secondary);
}
.settings-setup-card .option-card.is-selected {
  background:   var(--color-accent-light);
  border-color: var(--color-accent);
  box-shadow:   0 0 0 1px var(--color-accent);
}
.settings-setup-card .option-card.is-selected .option-card__title {
  color: var(--color-accent-dark);
}

/* Save area */
.settings-save-area {
  padding:       var(--space-4) 0 var(--space-4);
  border-top:    1px solid var(--color-border);
  margin-top:    var(--space-2);
}
.settings-save-area .btn--primary {
  box-shadow:  0 2px 8px rgba(27,94,59,0.25);
  font-weight: var(--font-weight-semi);
  font-size:   var(--font-size-md);
}
.settings-save-area__hint {
  margin-top:  var(--space-2);
  line-height: 1.5;
  color:       var(--color-text-secondary);
}

/* Legacy fallback: keep any remaining settings-page rules working */
.settings-page .card-header {
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.01em;
}

/* --- Notes ------------------------------------------------ */
.notes-card         { margin: var(--space-4) 0; }
.notes-header       { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; }
.notes-header__chevron { color: var(--text-muted); font-size: var(--font-size-sm); margin-left: auto; }
.notes-count        { color: var(--color-text-secondary); font-size: var(--font-size-xs); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0px 6px; line-height: 1.6; }
.notes-body.is-hidden { display: none; }
.notes-body         { margin-top: var(--space-3); }
.notes-list         { display: flex; flex-direction: column; gap: var(--space-2); }
.notes-item         { display: flex; align-items: center; gap: var(--space-2); padding: 9px var(--space-3); font-size: var(--font-size-sm);
                      background: var(--color-surface-alt);
                      border: 1px solid var(--color-border); border-left: 2px solid var(--color-accent);
                      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
                      box-shadow: var(--shadow-xs);
                      transition: background var(--transition-fast), box-shadow var(--transition-fast); }
.notes-item:hover   { background: rgba(27,94,59,0.05); box-shadow: var(--shadow-sm); }
.notes-item__text   { flex: 1; min-width: 0; line-height: 1.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-item__input  { flex: 1; min-width: 0; font-size: var(--font-size-sm); padding: 2px var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: inherit; }
.notes-item__edit   { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 13px; flex-shrink: 0; transition: background var(--transition-fast), color var(--transition-fast); }
.notes-item__edit:hover { background: var(--color-surface-alt); color: var(--color-accent); }
.notes-item__del    { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 13px; flex-shrink: 0; transition: background var(--transition-fast), color var(--transition-fast); }
.notes-item__del:hover { background: var(--color-danger-light); color: var(--color-danger); }
.notes-add          { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.notes-add > .btn   { width: 100%; }

/* --- Notes Page ------------------------------------------- */
.notes-page-list    { display: flex; flex-direction: column; gap: var(--space-2); }
.notes-page-item    { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
                      background: var(--color-surface);
                      border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
                      border-radius: 0 var(--radius-md) var(--radius-md) 0;
                      box-shadow: var(--shadow-xs);
                      transition: background var(--transition-fast), border-left-color var(--transition-fast), box-shadow var(--transition-fast); cursor: pointer; }
.notes-page-item:hover { background: rgba(27,94,59,0.03); border-left-color: var(--color-accent-vivid); box-shadow: var(--shadow-sm); }
.notes-page-item.is-pinned { border-left-width: 4px; }
.notes-page-item__text { flex: 1; min-width: 0; font-size: var(--font-size-sm); line-height: 1.5; word-break: break-word;
                         white-space: pre-line; overflow: hidden; display: -webkit-box;
                         -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notes-page-item__actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.notes-pin-badge    { font-size: 10px; color: var(--color-text-secondary); opacity: 0.75; white-space: nowrap; }
.note-modal__textarea  { resize: vertical; line-height: 1.65; }
.note-modal__content   { margin-bottom: var(--space-4); }
.note-modal__pin       { width: 100%; margin-bottom: var(--space-4); }
.note-modal__actions   { display: flex; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

/* ---- One-Time Purchases (notes page) --------------------- */
.purchases-list         { display: flex; flex-direction: column; gap: var(--space-2); }
.purchase-row           { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.purchase-row:hover     { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.purchase-row__collapsed { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 12px var(--space-3); cursor: pointer; user-select: none; }
.purchase-row__collapsed:hover { background: rgba(27,94,59,0.04); }
.purchase-row__left     { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.purchase-row__name     { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 1.3; }
.purchase-row__date     { line-height: 1.3; }
.purchase-row__right    { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.purchase-row__price    { font-size: var(--font-size-sm); font-weight: var(--font-weight-semi); color: var(--color-text); }
.purchase-row__chevron  { color: var(--color-text-secondary); font-size: 12px; }
.purchase-row__expanded { padding: 0 var(--space-3) var(--space-3); border-top: 1px solid var(--color-border); }
.purchase-row__note     { color: var(--color-text-secondary); line-height: 1.5; margin: var(--space-2) 0 var(--space-1); }
.purchase-row__link     { display: inline-block; color: var(--color-accent); text-decoration: none; margin-bottom: var(--space-2); }
.purchase-row__link:hover { text-decoration: underline; }
.purchase-row__actions  { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }

/* --- Mobile density overrides ----------------------------- */
@media (max-width: 767px) {
  .sheet .option-card {
    padding: var(--space-3) var(--space-3);
  }
  .sheet .option-card__title {
    font-size: var(--font-size-sm);
  }
  .sheet .option-card__sub {
    font-size: var(--font-size-xs);
  }
}

@media (min-width: 768px) {
  /* Brand visible, centered with title */
  .top-bar__brand {
    display: block;
    margin-right: var(--space-2);
  }

  /* More breathing room in the page */
  .top-bar { padding: 0 var(--space-6); border-bottom-color: var(--color-border); }

  /* FAB: 2 diameters left, 1 diameter up from mobile position */
  .fab {
    right:  calc(var(--space-5) + var(--fab-size) * 2);
    bottom: calc(var(--bottom-nav-clearance) + var(--space-4));
  }

  /* Sheet becomes a centered modal on desktop */
  .sheet {
    left:          50%;
    right:         auto;
    bottom:        auto;
    top:           50%;
    width:         460px;
    max-width:     90vw;
    border-radius: var(--radius-xl);
    padding:       var(--space-5) var(--space-6) var(--space-6);
    transform:     translate(-50%, -48%);
    opacity:       0;
    transition:    transform 220ms ease, opacity 220ms ease;
    max-height:    85vh;
  }
  .sheet.is-open {
    transform: translate(-50%, -50%);
    opacity:   1;
  }
}

@media (max-width: 640px) {
  .metric-grid,
  .proj-grid {
    grid-template-columns: 1fr;
  }

  .health-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-mode-switch {
    width: 100%;
  }

  .home-mode-switch__btn {
    flex: 1;
    text-align: center;
  }
}

/* --- Cards: Bank Tabs ------------------------------------- */
.bank-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.bank-tabs__chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bank-tabs__chips::-webkit-scrollbar { display: none; }

/* --- Compare Page ----------------------------------------- */
.cmp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cmp-chip {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.cmp-chip:hover { background: var(--color-surface-alt); }
.cmp-chip.is-selected {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

.cmp-table {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp-row {
  display: grid;
  grid-template-columns: 110px repeat(var(--cmp-cols), minmax(140px, 1fr));
  min-height: 44px;
  align-items: start;
}
.cmp-row--header {
  align-items: center;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.cmp-row:not(.cmp-row--header):hover {
  background: var(--color-surface-alt);
}
.cmp-row--alt { background: rgba(15,23,42,0.025); }
.cmp-row--alt:hover { background: var(--color-surface-alt); }
.cmp-label {
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
}
.cmp-cell {
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  border-left: 1px solid var(--color-border);
}
.cmp-cell--header {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.cmp-cell--bold {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}
.cmp-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--color-border);
}
.cmp-header-badges { display: inline; }
@media (max-width: 767px) {
  .cmp-header-badges { display: none; }
  .cmp-row {
    grid-template-columns: 80px repeat(var(--cmp-cols), minmax(120px, 1fr));
  }
  .cmp-label {
    font-size: var(--font-size-xs);
    padding: 6px 10px;
  }
  .cmp-cell {
    font-size: var(--font-size-xs);
    padding: 6px 10px;
  }
  .cmp-cell--header {
    font-size: var(--font-size-sm);
  }
}
.cmp-mobile-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
  .cmp-mobile-hint { display: none; }
}
.cmp-top-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: var(--font-weight-semi);
  margin-bottom: var(--space-2);
}
.cmp-top-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  padding: 3px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.cmp-top-item:last-child { border-bottom: none; }
.cmp-top-item__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cmp-top-item__value {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.cmp-expense-extra.is-hidden { display: none; }
.cmp-expand-btn {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-2) 0 0;
  font-weight: var(--font-weight-semi);
}
.cmp-expand-btn:hover { text-decoration: underline; }

/* --- Scenario Cards --------------------------------------- */
.sc-card {
  padding: var(--space-3) var(--space-4);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.sc-card--active {
  border: 2px solid var(--color-accent);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-accent-light) 100%);
}
.sc-card__body {
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.sc-card__body:hover {
  background: rgba(27,94,59,0.04);
}
.sc-card__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}
.sc-card__badge {
  padding:       2px 10px;
  border-radius: var(--radius-pill);
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-semi);
  background:    var(--color-accent);
  color:         var(--color-text-inverse);
  white-space:   nowrap;
  box-shadow:    0 1px 3px rgba(27,94,59,0.20);
}
.sc-card__badge--primary {
  background: var(--color-accent-light);
  color:      var(--color-accent-dark);
  border:     1px solid rgba(27,94,59,0.25);
  box-shadow: none;
}
.sc-card__actions {
  display:    flex;
  gap:        var(--space-2);
  flex-wrap:  wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.sc-delete-btn { margin-left: auto; }
.sc-card + .sc-card { margin-top: var(--space-3); }
.sc-snapshot {
  padding:       var(--space-3);
  background:    var(--color-surface-alt);
  border-radius: var(--radius-sm);
  border:        1px solid rgba(15,23,42,0.06);
  margin-top:    var(--space-2);
}
.sc-snapshot__row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         6px var(--space-2);
  border-radius:   var(--radius-sm);
}
.sc-snapshot__row:nth-child(odd) {
  background: rgba(15,23,42,0.025);
}

/* --- Scenario Selector ------------------------------------ */
.scenario-selector {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  height: 40px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  z-index: 98;
  overflow-x: auto;
}
.scenario-selector.is-hidden { display: none; }
.scenario-pill {
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.scenario-pill:hover { background: var(--color-surface-alt); }
.scenario-pill.is-active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

/* Shift content when scenario selector is visible */
.scenario-selector:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 40px);
}
/* When both scenario selector AND time travel strip are visible */
.scenario-selector:not(.is-hidden) ~ .time-travel-strip {
  top: calc(var(--top-bar-height) + 40px);
}
.scenario-selector:not(.is-hidden) ~ .time-travel-strip:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 40px + 36px);
}

/* --- Time Travel Strip ------------------------------------ */
.time-travel-strip {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  height: 36px;
  background: #FEF3C7;
  border-bottom: 1px solid #F59E0B;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  z-index: 99;
  font-size: var(--font-size-sm);
  color: #92400E;
}
.time-travel-strip.is-hidden { display: none; }
.time-travel-strip__label { font-weight: var(--font-weight-medium); }
.time-travel-strip__actions { display: flex; gap: var(--space-2); }
.time-travel-strip__btn {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color: #92400E;
  border: 1px solid #F59E0B;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
}
.time-travel-strip__btn:hover { background: rgba(255,255,255,0.9); }

/* Shift main content down when strip is visible */
.time-travel-strip:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 36px);
}

/* Top bar time travel button (mobile) */
.top-bar__tt-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 18px;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast);
}
.top-bar__tt-btn:hover { background: var(--color-surface-alt); }

/* Mobile time travel panel — slides down below top bar */
.tt-mobile-panel {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  z-index: 99;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tt-mobile-panel.is-hidden { display: none; }
.tt-mobile-panel__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.tt-mobile-panel__input {
  flex: 1;
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  min-width: 0;
}
.tt-mobile-panel__cancel {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  padding: 8px 12px;
  white-space: nowrap;
}

/* Hide mobile panel on desktop */
@media (min-width: 768px) {
  .tt-mobile-panel { display: none !important; }
}

/* Inline time travel control (desktop) — hidden on mobile by default */
.top-bar__tt-inline {
  display: none;
  position: relative;
}
.top-bar__tt-inline-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}
.top-bar__tt-inline-btn:hover {
  background: var(--color-border);
  border-color: rgba(15,23,42,0.14);
  color: var(--color-text-primary);
}

/* Desktop: show inline, hide top-bar action button */
@media (min-width: 768px) {
  .top-bar__tt-inline { display: flex; }
  .top-bar__action    { display: none; }
}

/* ============================================================
   Demo Mode — Onboarding, Coach, Suggestion, Nav Hiding
   ============================================================ */

/* --- Demo Nav Hiding --------------------------------------- */
[data-demo-hidden] { display: none !important; }

/* --- Demo Onboarding Card ---------------------------------- */
.demo-onboarding {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  padding:         var(--space-5);
}
.demo-onboarding__card {
  width:      100%;
  max-width:  440px;
  padding:    var(--space-8) var(--space-6);
}
.demo-onboarding__logo {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-extra);
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-6);
}
.demo-onboarding__logo span { color: var(--color-accent); }
.demo-onboarding__title {
  font-size:      var(--font-size-xl);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height:    1.2;
  margin-bottom:  var(--space-2);
}
.demo-onboarding__sub {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
  line-height: 1.5;
}

/* --- Demo Coach Overlay ------------------------------------ */
.demo-coach-spotlight {
  position:      fixed;
  z-index:       1000;
  border-radius: var(--radius-lg);
  box-shadow:    0 0 0 9999px rgba(15, 23, 42, 0.5);
  pointer-events: none;
  opacity:       0;
  transition:    opacity 300ms ease,
                 top 200ms ease, left 200ms ease,
                 width 200ms ease, height 200ms ease;
}
.demo-coach-spotlight.is-visible { opacity: 1; }

.demo-coach-card {
  position:      fixed;
  z-index:       1001;
  background:    var(--color-surface);
  border-radius: var(--radius-xl);
  padding:       var(--space-5);
  box-shadow:    var(--shadow-lg);
  max-width:     calc(100vw - 32px);
  word-wrap:     break-word;
  opacity:       0;
  transform:     translateY(8px);
  transition:    opacity 300ms ease, transform 300ms ease,
                 top 200ms ease, bottom 200ms ease, left 200ms ease;
}
.demo-coach-card.is-visible {
  opacity:   1;
  transform: translateY(0);
}
.demo-coach-card--above.is-visible { transform: translateY(0); }
.demo-coach-card--above { transform: translateY(-8px); }
.demo-coach-card--centered {
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%) scale(0.96);
  width:     min(320px, calc(100vw - 32px));
}
.demo-coach-card--centered.is-visible {
  transform: translate(-50%, -50%) scale(1);
}

.demo-coach-card__step {
  font-size:     var(--font-size-xs);
  color:         var(--color-text-tertiary, #999);
  margin-bottom: var(--space-1);
  font-weight:   var(--font-weight-medium);
}
.demo-coach-card__title {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  margin-bottom:  var(--space-2);
}
.demo-coach-card__text {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
  line-height: 1.5;
}

.demo-coach-arrow {
  position:  fixed;
  z-index:   1001;
  width:     0;
  height:    0;
  opacity:   0;
  transition: opacity 300ms ease,
              top 200ms ease, bottom 200ms ease, left 200ms ease;
}
.demo-coach-arrow.is-visible { opacity: 1; }
.demo-coach-arrow--up {
  border-left:   8px solid transparent;
  border-right:  8px solid transparent;
  border-bottom: 10px solid var(--color-surface);
}
.demo-coach-arrow--down {
  border-left:   8px solid transparent;
  border-right:  8px solid transparent;
  border-top:    10px solid var(--color-surface);
}

@media (max-width: 480px) {
  .demo-coach-card { padding: var(--space-4); }
}

/* --- Demo Completion Card ---------------------------------- */
.demo-completion {
  padding:       var(--space-8) var(--space-5);
  margin-bottom: var(--space-5);
}

/* --- Demo Banner ------------------------------------------- */
.demo-banner {
  background:    var(--color-accent-light);
  color:         var(--color-accent-dark);
  text-align:    center;
  padding:       6px var(--space-4);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  letter-spacing: -0.01em;
  z-index:       90;
}

/* Shift content for demo banner — using body class */
body.has-demo-banner .main-content {
  padding-top: calc(var(--top-bar-height) + 32px);
}
body.has-demo-banner .scenario-selector:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 32px + 40px);
}
body.has-demo-banner .time-travel-strip:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 32px + 36px);
}
body.has-demo-banner .scenario-selector:not(.is-hidden) ~ .time-travel-strip:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 32px + 40px + 36px);
}

/* --- Demo Suggestion Strip --------------------------------- */
.demo-suggestion {
  position:      fixed;
  bottom:        calc(var(--bottom-nav-clearance) + var(--space-2));
  left:          50%;
  transform:     translateX(-50%);
  max-width:     calc(100% - 32px);
  width:         440px;
  background:    var(--color-surface);
  border:        1px solid var(--color-accent-light);
  border-radius: var(--radius-lg);
  padding:       var(--space-3) var(--space-4);
  box-shadow:    var(--shadow-md);
  z-index:       140;
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  font-size:     var(--font-size-sm);
  animation:     demo-suggestion-in 400ms ease both;
}
@keyframes demo-suggestion-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.demo-suggestion span { flex: 1; color: var(--color-text-secondary); }
.demo-suggestion__btn {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semi);
  color:         var(--color-accent);
  white-space:   nowrap;
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  transition:    background var(--transition-fast);
}
.demo-suggestion__btn:hover { background: var(--color-accent-light); }
.demo-suggestion__close {
  font-size:     18px;
  color:         var(--color-text-secondary);
  padding:       2px 4px;
  line-height:   1;
  transition:    color var(--transition-fast);
}
.demo-suggestion__close:hover { color: var(--color-text-primary); }

/* ============================================================
   Auth Screen
   ============================================================ */

.auth-screen {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  min-height:      100dvh;
  padding:         var(--space-6);
  background:      var(--color-bg);
}

.auth-card {
  width:           100%;
  max-width:       400px;
  background:      var(--color-surface);
  border-radius:   var(--radius-lg);
  box-shadow:      var(--shadow-lg);
  padding:         var(--space-10) var(--space-8);
  text-align:      center;
}

/* Logo */
.auth-card__logo {
  font-size:       28px;
  font-weight:     var(--font-weight-extra);
  letter-spacing:  -0.04em;
  color:           var(--color-text-primary);
  margin-bottom:   var(--space-2);
}

.auth-card__logo span {
  color: var(--color-accent);
}

/* Tagline */
.auth-card__tagline {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-secondary);
  line-height:   1.6;
  margin:        0 0 var(--space-8);
}

/* Divider — "or use email" */
.auth-divider {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  margin:       var(--space-5) 0;
  color:        var(--color-text-secondary);
  font-size:    var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}

/* Shared button base */
.auth-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  width:           100%;
  padding:         13px var(--space-4);
  border:          none;
  border-radius:   var(--radius-md);
  font-family:     inherit;
  font-size:       var(--font-size-md);
  font-weight:     var(--font-weight-semi);
  cursor:          pointer;
  transition:      background var(--transition-fast),
                   border-color var(--transition-fast),
                   box-shadow var(--transition-fast),
                   opacity var(--transition-fast);
}

.auth-btn:disabled {
  opacity: 0.55;
  cursor:  not-allowed;
}

/* Google button */
.auth-btn--google {
  background:    var(--color-surface);
  color:         var(--color-text-primary);
  border:        1.5px solid var(--color-border);
  font-weight:   var(--font-weight-medium);
}

.auth-btn--google:hover:not(:disabled) {
  background:   var(--color-surface-alt);
  border-color: #C4CCD6;
  box-shadow:   var(--shadow-sm);
}

.auth-btn__icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.auth-btn__icon svg {
  width:  20px;
  height: 20px;
}

/* Magic link button */
.auth-btn--magic {
  background:  var(--color-accent);
  color:       var(--color-text-inverse);
}

.auth-btn--magic:hover:not(:disabled) {
  background: var(--color-accent-dark);
  box-shadow: var(--shadow-sm);
}

/* Email input */
.auth-input {
  width:         100%;
  padding:       13px var(--space-4);
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family:   inherit;
  font-size:     var(--font-size-md);
  color:         var(--color-text-primary);
  background:    var(--color-surface);
  outline:       none;
  text-align:    center;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-input:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px var(--color-accent-light);
}

.auth-input::placeholder {
  color:   var(--color-text-secondary);
  opacity: 0.5;
}

.auth-input:disabled {
  opacity:    0.55;
  background: var(--color-surface-alt);
}

/* Email group */
.auth-email-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

/* Status messages */
.auth-message {
  margin-top:    var(--space-5);
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  line-height:   1.5;
}

.auth-message--success {
  background: var(--color-accent-light);
  color:      var(--color-accent-dark);
}

.auth-message--error {
  background: var(--color-danger-light);
  color:      var(--color-danger);
}

/* Demo link */
.auth-demo-link {
  margin-top:  var(--space-6);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
  line-height: 1.4;
}

.auth-demo-link a {
  color:           var(--color-accent);
  text-decoration: none;
  font-weight:     var(--font-weight-semi);
}

.auth-demo-link a:hover {
  text-decoration: underline;
}

/* Loading spinner for auth boot */
.auth-loading {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  min-height:      100dvh;
  gap:             var(--space-4);
  color:           var(--color-text-secondary);
  font-size:       var(--font-size-sm);
}

.auth-loading__spinner {
  width:            32px;
  height:           32px;
  border:           3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius:    50%;
  animation:        auth-spin 0.8s linear infinite;
}

.auth-loading__text {
  margin-top: var(--space-1);
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .auth-screen { padding: var(--space-4); }
  .auth-card   { padding: var(--space-8) var(--space-5); }
}

/* ============================================================
   Side Nav & Bottom Nav — Pro/Upgrade UX
   ============================================================ */

/* --- Side Nav: secondary section --- */
.side-nav__secondary {
  padding:    var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.side-nav__secondary .side-nav__link {
  padding:   10px var(--space-6);
  font-size: 13px;
}
.side-nav__section-label {
  padding:        var(--space-2) var(--space-6) var(--space-1);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:          var(--color-text-secondary);
}
.side-nav__link--pro {
  color:       var(--color-accent) !important;
  font-weight: var(--font-weight-semi);
}

/* --- Bottom Nav: mobile active-pill alignment fix --- */
@media (max-width: 480px) {
  .bottom-nav {
    padding: 5px;
    gap:     2px;
  }
  .bottom-nav__item {
    padding:   8px 10px;
    flex-shrink: 0;
    min-width: 0;
  }
}

/* --- Bottom Nav: Pro tab --- */
.bottom-nav__item--pro {
  color:       var(--color-accent);
  font-weight: var(--font-weight-bold);
}
.bottom-nav__item--pro.is-active {
  background: var(--color-accent);
  color:      var(--color-text-inverse);
}

/* --- Plan Badge (home welcome) --- */
.plan-badge {
  display:        inline-block;
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding:        2px 8px;
  border-radius:  999px;
  vertical-align: middle;
  margin-left:    8px;
  position:       relative;
  top:            -1px;
}
.plan-badge--basic {
  background: var(--color-border);
  color:      var(--color-text-secondary);
}
.plan-badge--pro {
  background: var(--color-accent);
  color:      #fff;
}

/* ============================================================
   Scrollbar — custom styling
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.25); }

/* ============================================================
   Dark Mode — Component Overrides
   (CSS variables handle colors globally; these fix components
   that use hardcoded light-mode gradients or rgba values)
   ============================================================ */

/* Top bars + overlays — warm charcoal, no blue */
[data-theme="dark"] .top-bar {
  background: rgba(24,24,26,0.92);
  border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .bottom-nav {
  background: rgba(24,24,26,0.94);
  border-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .nav-overlay { background: rgba(0,0,0,0.70); }
[data-theme="dark"] .sheet-overlay { background: rgba(0,0,0,0.70); }

/* Cards with hardcoded light gradients — muted green tints */
[data-theme="dark"] .period-item.is-current {
  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(78,158,106,0.07) 100%);
  border-color: rgba(78,158,106,0.28);
}
[data-theme="dark"] .period-item.is-current .period-item__badge {
  border-color: rgba(78,158,106,0.28);
  box-shadow: 0 1px 4px rgba(78,158,106,0.12);
}
[data-theme="dark"] .period-shortcut-card {
  background: linear-gradient(145deg, var(--color-surface) 0%, rgba(78,158,106,0.07) 60%, rgba(78,158,106,0.10) 100%) !important;
  border-color: rgba(78,158,106,0.20) !important;
}
[data-theme="dark"] .settings-profile-card {
  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(78,158,106,0.08) 100%);
  border-color: rgba(78,158,106,0.20);
  box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}
[data-theme="dark"] .goal-card--complete {
  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(78,158,106,0.08) 100%);
}
[data-theme="dark"] .sc-card--active {
  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(78,158,106,0.07) 100%);
}
[data-theme="dark"] .goal-bar {
  background: rgba(78,158,106,0.12);
  border-color: rgba(78,158,106,0.18);
}
[data-theme="dark"] .period-detail__bar-track { background: rgba(78,158,106,0.12); }
[data-theme="dark"] .home-goal-item__bar-track { background: rgba(78,158,106,0.12); }

/* Form elements */
[data-theme="dark"] .form-input,
[data-theme="dark"] .note-detail__textarea,
[data-theme="dark"] .tt-mobile-panel__input {
  background:   var(--color-surface-alt);
  color:        var(--color-text-primary);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .note-detail__textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(78,158,106,0.20);
}
[data-theme="dark"] .form-input[type="date"]:hover::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-input[type="date"]:focus::-webkit-calendar-picker-indicator {
  background: rgba(78,158,106,0.15);
}
[data-theme="dark"] .settings-setup-card .form-input:focus {
  box-shadow: 0 0 0 3px rgba(78,158,106,0.20);
}
[data-theme="dark"] #expense-sheet .sh-section { background: var(--color-surface-alt); }
[data-theme="dark"] .note-detail__text { background: var(--color-surface-alt); }

/* Auth screen */
[data-theme="dark"] .auth-btn--google {
  background:   var(--color-surface-alt);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .auth-btn--google:hover:not(:disabled) {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .auth-input {
  background:   var(--color-surface-alt);
  border-color: var(--color-border-strong);
}

/* Sort select — muted in dark mode */
[data-theme="dark"] .exp-sort-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8A86' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  border-color: var(--color-border-strong);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-alt);
}

/* Desktop sort bar */
[data-theme="dark"] .exp-sort-bar {
  background: var(--color-surface-alt) !important;
  border-color: var(--color-border);
}

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* Proj-tiles — no heavy shadow ring in dark mode */
[data-theme="dark"] .proj-tile {
  box-shadow:   none;
  border-color: var(--color-border-strong);
}

/* Primary button shadow — warmer in dark mode */
[data-theme="dark"] .btn--primary {
  box-shadow: 0 2px 8px rgba(78,158,106,0.20), 0 1px 2px rgba(78,158,106,0.15);
}
[data-theme="dark"] .btn--primary:hover {
  box-shadow: 0 4px 16px rgba(78,158,106,0.25), 0 2px 4px rgba(78,158,106,0.15);
}

/* Bills section row tint — desktop only (mobile rows are plain dividers) */
@media (min-width: 1200px) {
  [data-theme="dark"] .home-section-bills .overview-row {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
  }
  [data-theme="dark"] .home-section-bills .overview-row:hover {
    background: rgba(78,158,106,0.06);
  }
}

/* Scenario snapshot — dark mode safe */
[data-theme="dark"] .sc-snapshot {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}
[data-theme="dark"] .sc-snapshot__row:nth-child(odd) {
  background: rgba(255,255,255,0.03);
}

/* Compare table alt rows — dark mode safe */
[data-theme="dark"] .cmp-row--alt {
  background: rgba(255,255,255,0.03);
}
[data-theme="dark"] .cmp-row--alt:hover,
[data-theme="dark"] .cmp-row:not(.cmp-row--header):hover {
  background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .cmp-top-item {
  border-bottom-color: rgba(255,255,255,0.04);
}

/* Period bills preview — dark mode */
[data-theme="dark"] .period-detail__bar-fill,
[data-theme="dark"] .home-goal-item__bar-fill {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-vivid) 100%);
}

/* Expense pills — stronger border in dark mode so pills read as separate cards */
[data-theme="dark"] .expense-pill {
  border-color: var(--color-border-strong);
}
/* Expense pill expanded border — dark mode */
[data-theme="dark"] .expense-pill.is-expanded {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(78,158,106,0.12);
}


/* ---- Expense search + header row ---------------------------- */
.exp-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.exp-search-wrap {
  position:    relative;
  display:     inline-flex;
  align-items: center;
  margin-left: auto;
}
.exp-search-icon {
  position: absolute;
  left: 8px;
  width: 13px;
  height: 13px;
  stroke: var(--color-text-secondary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  flex-shrink: 0;
}
.exp-search-input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  padding: 6px 10px 6px 28px;
  width: 140px;
  outline: none;
  transition: border-color 0.15s;
}
.exp-search-input:focus { border-color: var(--color-accent); }
.exp-search-input::placeholder { color: var(--color-text-muted, var(--color-text-secondary)); }

/* ---- Wallet search ----------------------------------------- */
.wallet-search-row {
  margin-bottom: var(--space-3);
}
.wallet-search-row .exp-search-wrap { width: 100%; }
.wallet-search-row .exp-search-input { width: 100%; box-sizing: border-box; }

/* ---- Expired expense pills ---------------------------------- */
.expense-pill--expired { opacity: 0.5; }
.expense-pill__cadence--expired {
  background: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

/* ============================================================
   Profile Panel
   ============================================================ */

.profile-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.45);
  z-index:    700;
  opacity:    0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.profile-overlay.is-open {
  opacity:        1;
  pointer-events: auto;
}

.profile-panel {
  position:        fixed;
  top:             0;
  right:           0;
  bottom:          0;
  width:           min(380px, 100vw);
  background:      var(--color-surface);
  z-index:         701;
  transform:       translateX(100%);
  transition:      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display:         flex;
  flex-direction:  column;
  box-shadow:      -4px 0 24px rgba(0,0,0,0.15);
}
.profile-panel.is-open {
  transform: translateX(0);
}

.profile-panel__inner {
  flex:       1;
  overflow-y: auto;
  padding:    var(--space-4) var(--space-4) var(--space-6);
}

.profile-panel__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-4);
}
.profile-panel__title {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
}
.profile-panel__close {
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-sm);
  color:           var(--color-text-secondary);
  flex-shrink:     0;
  transition:      background var(--transition-fast);
}
.profile-panel__close:hover { background: var(--color-surface-alt); }

/* Avatar section */
.profile-avatar-section {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-3) 0 var(--space-4);
  border-bottom:  1px solid var(--color-border);
  margin-bottom:  var(--space-4);
}

.profile-avatar-lg {
  width:           80px;
  height:          80px;
  border-radius:   50%;
  background:      var(--color-accent);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  flex-shrink:     0;
}
.profile-avatar-lg__initials {
  font-size:      28px;
  font-weight:    var(--font-weight-semi);
  line-height:    1;
  letter-spacing: 0.02em;
}

.profile-avatar-upload-btn {
  font-size:   var(--font-size-sm);
  color:       var(--color-accent);
  font-weight: var(--font-weight-semi);
  cursor:      pointer;
}
.profile-avatar-upload-btn:hover { text-decoration: underline; }

.profile-photo-status {
  font-size: var(--font-size-xs);
  color:     var(--color-text-secondary);
  min-height: 16px;
}

/* Fields */
.profile-fields {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.profile-field {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.profile-field__label {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color:       var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.profile-field__input {
  width:         100%;
  box-sizing:    border-box;
  padding:       8px 10px;
  border-radius: var(--radius-sm);
  border:        1px solid var(--color-border);
  background:    var(--color-surface-alt);
  color:         var(--color-text-primary);
  font-size:     var(--font-size-sm);
  font-family:   inherit;
  transition:    border-color var(--transition-fast);
}
.profile-field__input:focus {
  outline:       none;
  border-color:  var(--color-accent);
}
.profile-field__textarea {
  resize:      vertical;
  min-height:  56px;
  line-height: 1.5;
}

.profile-save-status {
  font-size:  var(--font-size-sm);
  min-height: 20px;
  text-align: center;
}

/* Account summary */
.profile-summary {
  margin-top:    var(--space-5);
  padding-top:   var(--space-4);
  border-top:    1px solid var(--color-border);
}
.profile-summary__title {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom:  var(--space-3);
}
.profile-summary__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-2) var(--space-3);
}
.profile-summary__item {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.profile-summary__label {
  font-size: var(--font-size-xs);
  color:     var(--color-text-secondary);
}
.profile-summary__val {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color:       var(--color-text-primary);
}

/* ============================================================
   Onboarding Wizard
   ============================================================ */

.ob-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index:        800;
  opacity:        0;
  transition:     opacity 0.3s ease;
  pointer-events: none;
}
.ob-overlay.is-open {
  opacity:        1;
  pointer-events: auto;
}

.ob-wizard {
  position:       fixed;
  inset:          0;
  z-index:        801;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        var(--space-4);
  opacity:        0;
  transform:      translateY(20px);
  transition:     opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.ob-wizard.is-open {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

.ob-wizard__inner {
  background:    var(--color-surface);
  border-radius: var(--radius-lg, 20px);
  padding:       var(--space-6) var(--space-5);
  width:         100%;
  max-width:     440px;
  box-shadow:    0 24px 64px rgba(0,0,0,0.25);
}

/* Progress dots */
.ob-progress {
  display:         flex;
  justify-content: center;
  gap:             8px;
  margin-bottom:   var(--space-5);
}
.ob-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--color-border);
  transition:    background 0.2s, transform 0.2s;
}
.ob-dot--active {
  background:  var(--color-accent);
  transform:   scale(1.3);
}
.ob-dot--done {
  background:  var(--color-accent);
  opacity:     0.45;
}

/* Step content */
.ob-icon {
  font-size:     2.5rem;
  text-align:    center;
  margin-bottom: var(--space-3);
  line-height:   1;
}
.ob-title {
  font-size:      var(--font-size-xl, 1.25rem);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  text-align:     center;
  margin-bottom:  var(--space-2);
}
.ob-sub {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-secondary);
  text-align:    center;
  line-height:   1.6;
  margin-bottom: var(--space-4);
}
.ob-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color:       var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Inputs */
.ob-input {
  width:         100%;
  box-sizing:    border-box;
  padding:       12px 14px;
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background:    var(--color-surface-alt);
  color:         var(--color-text-primary);
  font-size:     var(--font-size-md);
  font-family:   inherit;
  transition:    border-color 0.15s;
  outline:       none;
}
.ob-input:focus { border-color: var(--color-accent); }

.ob-input-prefix-wrap {
  position: relative;
}
.ob-input-prefix {
  position:     absolute;
  left:         14px;
  top:          50%;
  transform:    translateY(-50%);
  font-size:    var(--font-size-md);
  font-weight:  var(--font-weight-semi);
  color:        var(--color-text-secondary);
  pointer-events: none;
}
.ob-input--prefixed {
  padding-left: 28px;
}
.ob-input--date {
  color-scheme: var(--color-scheme, light);
}

/* Cadence selector */
.ob-cadence-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--space-2);
  margin-bottom: var(--space-4);
}
.ob-cadence-btn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        var(--space-3) var(--space-2);
  border:         1.5px solid var(--color-border);
  border-radius:  var(--radius-md);
  background:     var(--color-surface-alt);
  cursor:         pointer;
  transition:     border-color 0.15s, background 0.15s;
  gap:            2px;
}
.ob-cadence-btn:hover { border-color: var(--color-accent); }
.ob-cadence-btn.is-active {
  border-color: var(--color-accent);
  background:   var(--color-accent-light, rgba(74,124,89,0.12));
}
.ob-cadence-title {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color:       var(--color-text-primary);
}
.ob-cadence-sub {
  font-size: var(--font-size-xs);
  color:     var(--color-text-secondary);
}

/* Summary on step 4 */
.ob-summary {
  background:    var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.ob-summary__row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         8px 0;
  border-bottom:   1px solid var(--color-border);
}
.ob-summary__row:last-child { border-bottom: none; }
.ob-summary__label {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
}
.ob-summary__val {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color:       var(--color-text-primary);
}

/* Actions row */
.ob-actions {
  display:   flex;
  gap:       var(--space-2);
  margin-top: var(--space-4);
}
.ob-btn-back  { flex: 0 0 auto; min-width: 90px; }
.ob-btn-next,
.ob-btn-submit { flex: 1; }

/* Error */
.ob-error {
  margin-top: var(--space-2);
  font-size:  var(--font-size-sm);
  color:      var(--color-error, #ef4444);
  text-align: center;
}

/* Shake animation */
@keyframes ob-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.ob-shake { animation: ob-shake 0.4s ease; border-color: var(--color-error, #ef4444) !important; }