/* ── Nervoxin Smart Planning — Shared Styles ──────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg: #f5f4f0;
  --bg2: #fff;
  --bg3: #fafaf8;
  --border: #e0ddd5;
  --border2: #eeece6;
  --text: #1a1a18;
  --text2: #5f5e5a;
  --text3: #888780;
  --text4: #b4b2a9;
  --green: #1D9E75;
  --green-bg: #EAF3DE;
  --green-text: #3B6D11;
  --red: #E24B4A;
  --red-bg: #FCEBEB;
  --red-text: #A32D2D;
  --blue: #378ADD;
  --blue-bg: #E6F1FB;
  --blue-text: #185FA5;
  --amber: #BA7517;
  --amber-bg: #FAEEDA;
  --amber-text: #854F0B;
  --purple: #7F77DD;
  --purple-bg: #EEEDFE;
  --purple-text: #534AB7;
  --pink: #C76EB4;
  --orange: #F0803C;
  --card-shadow: 0 1px 3px rgba(0,0,0,.04);
  --hover-shadow: 0 2px 12px rgba(0,0,0,.07);
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Sidebar (Refined) — pill background + 2.5px left bar uses these.
     Anchored to brand green so the menu blends with the rest of the UI. */
  --accent: var(--green);
  --accent-soft: rgba(29, 158, 117, 0.10);
  --accent-line: rgba(29, 158, 117, 0.35);
  --sidebar-bg: var(--bg2);
  --sidebar-muted: var(--text2);
  --sidebar-dim: var(--text4);
  --sidebar-hover: rgba(0, 0, 0, 0.035);
}
[data-theme="dark"] {
  --bg: #0e0e0d;
  --bg2: #1a1a18;
  --bg3: #222220;
  --border: #333330;
  --border2: #2c2c2a;
  --text: #eae8e2;
  --text2: #c4c2ba;
  --text3: #9a9890;
  --text4: #6a6862;
  --green: #2BC48E;
  --green-bg: #152a1e;
  --green-text: #5FD9A6;
  --red: #F06B6A;
  --red-bg: #2e1a1a;
  --red-text: #F5A0A0;
  --blue: #5DA3E8;
  --blue-bg: #162030;
  --blue-text: #8EC4F5;
  --amber: #D4982B;
  --amber-bg: #2a2015;
  --amber-text: #F0C05A;
  --purple: #9B94E8;
  --purple-bg: #201e35;
  --purple-text: #C5C0FF;
  --card-shadow: 0 1px 4px rgba(0,0,0,.3);
  --hover-shadow: 0 2px 12px rgba(0,0,0,.4);
  --accent: var(--green);
  --accent-soft: rgba(43, 196, 142, 0.12);
  --accent-line: rgba(43, 196, 142, 0.35);
  --sidebar-hover: rgba(255, 255, 255, 0.04);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;transition:background .25s,color .25s;}
input,select,textarea,button{font-family:var(--font);}

/* ── SPLASH ────────────────────────────────────────────────────── */
.splash{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .25s ease-out;}
.splash.hide{opacity:0;pointer-events:none;}
.splash-card{display:flex;flex-direction:column;align-items:center;gap:18px;}
.splash-logo{font-size:18px;font-weight:700;color:var(--text);letter-spacing:.2px;}
.splash-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--text);border-radius:50%;animation:splash-spin .8s linear infinite;}
@keyframes splash-spin{to{transform:rotate(360deg);}}

/* ── AUTH ──────────────────────────────────────────────────────── */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.auth-card{background:var(--bg2);border-radius:16px;border:1px solid var(--border);padding:36px 40px;width:100%;max-width:420px;box-shadow:var(--card-shadow);}
.auth-logo{font-size:20px;font-weight:700;margin-bottom:2px;}
.auth-tagline{font-size:12px;color:var(--text4);margin-bottom:24px;}
.auth-sub{font-size:13px;color:var(--text3);margin-bottom:20px;}
.auth-err{font-size:12px;color:var(--red-text);background:var(--red-bg);padding:8px 12px;border-radius:6px;margin-bottom:12px;display:none;}
.auth-err.show{display:block;}
.auth-ok{font-size:12px;color:var(--green-text);background:var(--green-bg);padding:8px 12px;border-radius:6px;margin-bottom:12px;display:none;}
.auth-ok.show{display:block;}
.auth-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.auth-field label{font-size:12px;color:var(--text3);font-weight:500;}
.auth-field input{font-size:14px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;width:100%;background:var(--bg2);color:var(--text);}
.auth-field input:focus{outline:none;border-color:var(--text3);}
.pw-wrap{position:relative;display:flex;align-items:center;}
.pw-wrap input{padding-right:38px;width:100%;}
.eye-btn{position:absolute;right:10px;background:none;border:none;cursor:pointer;color:var(--text3);padding:2px;display:flex;font-size:14px;}
.auth-btn{width:100%;font-size:14px;padding:10px;border-radius:8px;border:none;background:var(--text);color:var(--bg);cursor:pointer;font-weight:600;margin-top:4px;}
.auth-btn:hover{opacity:.9;}
.auth-btn:disabled{opacity:.4;cursor:not-allowed;}
.auth-link-row{font-size:12px;color:var(--text3);text-align:center;margin-top:12px;}
.auth-link-row a{color:var(--text);cursor:pointer;font-weight:500;}

/* ── HEADER ───────────────────────────────────────────────────── */
.header{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}
.header-left{display:flex;align-items:center;gap:10px;}
.header-logo{font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:10px;}

/* ── Brand mark (the gradient "N" tile) ─────────────────────── */
.brand-mark{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#5eb588 0%,oklch(0.62 0.14 30) 100%);box-shadow:0 0 0 1px rgba(255,255,255,0.06),0 6px 18px -8px rgba(94,181,136,0.5);}
.brand-mark-sm{width:28px;height:28px;border-radius:8px;}
.brand-mark-lg{width:56px;height:56px;border-radius:14px;}
.brand-mark svg{display:block;}

/* ── Trajectory chart card ──────────────────────────────────── */
.traj-card{
  padding:12px 16px;
  border-radius:16px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(60% 80% at 100% 0%, rgba(94,181,136,0.07), transparent 70%), var(--bg2);
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 14px 32px -18px rgba(0,0,0,.10);
}
[data-theme="dark"] .traj-card{
  background:radial-gradient(60% 80% at 100% 0%, rgba(94,181,136,0.11), transparent 70%), var(--bg2);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -18px rgba(0,0,0,.6);
}
/* Compact single-line head keeps eyebrow + amount + pill inline so the
   chart's SVG gets the bulk of the 6x3 (~294px) cell's vertical space. */
.traj-head{display:flex;align-items:center;justify-content:flex-start;margin-bottom:6px;gap:10px;padding-right:32px;}
.traj-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);margin-bottom:0;white-space:nowrap;}
.traj-amount{font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--text);font-feature-settings:"tnum";}
.traj-pill{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(94,181,136,.13);color:#3d8d65;border:1px solid rgba(94,181,136,.27);font-weight:500;white-space:nowrap;margin-left:auto;}
[data-theme="dark"] .traj-pill{color:#85d4a8;}
.traj-pill.warn{background:var(--red-bg);color:var(--red-text);border-color:var(--red-text);}
.traj-svg{width:100%;height:auto;display:block;}
.traj-grid{stroke:var(--border2);stroke-dasharray:2 4;stroke-width:1;fill:none;}
.traj-goal-area{fill:url(#traj-goal-grad);opacity:0;animation:traj-fade 1.6s ease-out forwards;}
.traj-goal-line{fill:none;stroke:#5eb588;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:800;stroke-dashoffset:800;animation:traj-draw 1.6s ease-out forwards;}
.traj-debt-line{fill:none;stroke:var(--text3);stroke-width:1.6;stroke-dasharray:3 4;stroke-linecap:round;opacity:0;animation:traj-fade 1.6s ease-out forwards;animation-delay:.15s;}
.traj-end-dot,.traj-end-glow{opacity:0;animation:traj-fade .5s ease-out forwards;animation-delay:1.4s;}
.traj-mlabel{font-size:9px;fill:var(--text3);}
.traj-legend{display:flex;gap:14px;margin-top:4px;font-size:10px;color:var(--text3);}
.traj-legend-item{display:flex;align-items:center;gap:6px;}
.traj-legend-bar{width:10px;height:2px;border-radius:2px;background:#5eb588;}
.traj-legend-dash{width:10px;border-top:1.5px dashed var(--text3);}
@keyframes traj-draw{to{stroke-dashoffset:0;}}
@keyframes traj-fade{to{opacity:var(--traj-fade-target,1);}}
.traj-svg-wrap{position:relative;}
.traj-hover-guide{stroke:var(--text3);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s ease;pointer-events:none;}
.traj-hover-dot,.traj-hover-debt-dot{opacity:0;transition:opacity .15s ease;pointer-events:none;}
.traj-tooltip{
  position:absolute;top:8px;transform:translateX(-50%);
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  padding:8px 12px;font-size:12px;pointer-events:none;opacity:0;
  transition:opacity .15s ease;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.08);z-index:2;font-feature-settings:"tnum";
}
.traj-tt-label{font-size:10px;color:var(--text3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em;}
.traj-tt-row{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--text);}
.traj-tt-row+.traj-tt-row{margin-top:3px;}
.traj-tt-bar{display:inline-block;width:10px;height:2px;background:#5eb588;border-radius:2px;}
.traj-tt-dash{display:inline-block;width:10px;border-top:1.5px dashed var(--text3);}
.header-badge{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--purple-bg);color:var(--purple-text);font-weight:600;}
.header-right{display:flex;align-items:center;gap:10px;}

/* ── HEADER SEARCH ────────────────────────────────────────────────
   The search bar lives in the middle slot of the header. The dropdown is
   absolutely positioned off the same parent so it tracks correctly on
   both desktop and mobile (where .header-mid becomes fixed). The mobile
   toggle button is hidden on desktop and revealed at <=900px in the
   responsive block at the bottom of this section. */
.header-mid{flex:1 1 auto;min-width:0;max-width:520px;margin:0 18px;position:relative;}
.hdr-search{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;background:var(--bg);border:1px solid var(--border);border-radius:9px;transition:border-color .15s ease,box-shadow .15s ease;}
.hdr-search:focus-within{border-color:var(--purple,#7F77DD);box-shadow:0 0 0 3px color-mix(in oklab, var(--purple,#7F77DD) 22%, transparent);}
.hdr-search-icon{display:inline-flex;color:var(--text3);flex-shrink:0;}
.hdr-search input{flex:1;min-width:0;border:0;background:transparent;font-size:13px;color:var(--text);outline:none;padding:0;}
.hdr-search input::placeholder{color:var(--text3);}
.hdr-search-clear{display:none;border:0;background:transparent;color:var(--text3);cursor:pointer;padding:4px;border-radius:5px;align-items:center;justify-content:center;line-height:0;}
.hdr-search-clear:hover{background:var(--bg3);color:var(--text);}
.hdr-search.has-text .hdr-search-clear{display:inline-flex;}

.hdr-search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.04);max-height:62vh;overflow-y:auto;display:none;z-index:200;}
[data-theme="dark"] .hdr-search-results{box-shadow:0 18px 40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);}
.hdr-search-results.open{display:block;}
.hdr-search-row{display:flex;align-items:center;gap:12px;padding:9px 12px;text-decoration:none;color:inherit;cursor:pointer;border-bottom:1px solid var(--border2);}
.hdr-search-row:last-child{border-bottom:0;}
.hdr-search-row:hover,.hdr-search-row.active{background:var(--bg3);}
.hdr-search-row-icon{font-size:20px;line-height:1;width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:var(--bg);border:1px solid var(--border2);flex-shrink:0;}
.hdr-search-row-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.hdr-search-row-title{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hdr-search-row-crumb{font-size:11px;color:var(--text3);display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.hdr-search-row-crumb .crumb-sep{color:var(--text3);opacity:.5;margin:0 1px;}
.hdr-search-empty{padding:18px 14px;text-align:center;color:var(--text3);font-size:13px;}
.hdr-search-empty strong{color:var(--text);font-weight:600;}
.hdr-search-section-label{padding:10px 14px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-weight:600;border-top:1px solid var(--border2);background:var(--bg);}
.hdr-search-section-label:first-child{border-top:0;}

.hdr-search-toggle{display:none;background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 8px;cursor:pointer;color:var(--text2);align-items:center;justify-content:center;line-height:0;}
.hdr-search-toggle:hover{background:var(--bg);color:var(--text);}

.sync-dot{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px 3px 8px;border-radius:11px;
  background:var(--green-bg);color:var(--green-text);
  font-size:11px;font-weight:600;line-height:1;
  white-space:nowrap;flex-shrink:0;
  transition:background .18s ease,color .18s ease;
  cursor:default;
}
.sync-dot::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--green);flex-shrink:0;
}
.sync-dot.loading{background:var(--amber-bg);color:var(--amber-text);}
.sync-dot.loading::before{background:var(--amber);animation:pulse 1s infinite;}
.sync-dot.retry{background:var(--amber-bg);color:var(--amber-text);}
.sync-dot.retry::before{background:var(--amber);animation:pulse 1.6s infinite;}
.sync-dot.err{background:var(--red-bg);color:var(--red-text);}
.sync-dot.err::before{background:var(--red);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.user-pill{font-size:12px;color:var(--text2);background:var(--bg);padding:4px 10px;border-radius:20px;}
.hdr-btn{font-size:12px;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;color:var(--text2);}
.hdr-btn:hover{background:var(--bg);}
.theme-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;border:2px solid #888780;background:#e8e6e0;cursor:pointer;font-size:13px;color:#1a1a18;font-weight:600;transition:all .2s;}
.theme-btn:hover{border-color:#5f5e5a;background:#d3d1c7;}
[data-theme="dark"] .theme-btn{background:var(--bg3);border-color:var(--purple);color:var(--purple-text);}
[data-theme="dark"] .theme-btn:hover{border-color:var(--purple-text);}

/* ── ADMIN BAR ────────────────────────────────────────────────── */
.admin-bar{background:#1a1a18;padding:7px 24px;display:flex;align-items:center;gap:12px;font-size:12px;color:#b4b2a9;}
.admin-select{font-size:12px;padding:3px 8px;border-radius:5px;border:1px solid #444;background:#2c2c2a;color:#fff;cursor:pointer;}

/* ── SUBSCRIPTION BANNER ──────────────────────────────────────── */
.sub-banner{padding:10px 24px;font-size:13px;font-weight:500;text-align:center;z-index:100;}
.sub-banner.warn{background:#fef3cd;color:#856404;border-bottom:1px solid #e2c66d;}
.sub-banner.err{background:#f8d7da;color:#842029;border-bottom:1px solid #d4a0a6;}
[data-theme="dark"] .sub-banner.warn{background:#3d3200;color:#ffc107;border-color:#5c4d00;}
[data-theme="dark"] .sub-banner.err{background:#3d0f15;color:#f77;border-color:#5c1a22;}

/* ── LAYOUT ───────────────────────────────────────────────────── */
.app-body{display:flex;min-height:calc(100vh - 52px);}

/* Sidebar (Refined) — flex column: brand fixed, nav scrolls, footer pinned.
   The fixed positioning anchors it below the 52px header (or 86px when the
   admin bar is showing). 248px width matches the design spec. */
.sidebar{
  width:248px;flex-shrink:0;
  background:var(--sidebar-bg, var(--bg2));
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;left:0;top:52px;bottom:0;
  overflow:hidden;z-index:50;
}
.has-admin-bar .sidebar{top:86px;}

/* Scrollable middle nav region. Brand lives in the top header again, so the
   nav owns its own top padding (the brand block no longer provides it). */
.sb-nav{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  padding:14px 12px 12px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.sb-nav::-webkit-scrollbar{width:6px;}
.sb-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* Group container — header (button) + items wrapper. Items wrapper collapses
   when .sb-section.collapsed is set; default state is open. */
.sb-section{display:flex;flex-direction:column;}
.sb-section-items{display:flex;flex-direction:column;}
.sb-section.collapsed .sb-section-items{display:none;}

/* Group label is now a clickable header with a chevron that rotates when
   collapsed. Stays visually quiet (same uppercase 10px treatment as before). */
.sidebar-section{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text4);
  padding:10px 8px 4px;
  background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:left;
  transition:color 120ms;
}
.sidebar-section:hover{color:var(--text2);}
.sec-chev{
  flex:none;color:var(--text4);
  transform:rotate(0);
  transition:transform 160ms ease, color 120ms;
}
.sidebar-section:hover .sec-chev{color:var(--text2);}
.sb-section.collapsed .sec-chev{transform:rotate(-90deg);}
.sidebar-divider{height:1px;background:var(--border2);margin:4px 8px;}

/* Menu item — 32px, 8px radius, accent pill + 2.5px left bar when active */
.nav-item{
  position:relative;
  display:flex;align-items:center;gap:11px;
  height:32px;padding:0 10px;
  border-radius:8px;
  font-size:13px;font-weight:500;letter-spacing:-0.005em;
  color:var(--sidebar-muted, var(--text2));
  text-decoration:none;
  transition:background 100ms ease, color 100ms ease;
}
.nav-item:hover{background:var(--sidebar-hover);color:var(--text);}
.nav-bar{
  position:absolute;
  left:-12px;top:8px;bottom:8px;width:2.5px;
  border-radius:0 2px 2px 0;
  background:transparent;
  transition:background 140ms;
}
.nav-item.active{background:var(--accent-soft);color:var(--accent);}
.nav-item.active .nav-label{color:var(--accent);font-weight:600;}
.nav-item.active .nav-bar{background:var(--accent);}
.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}

/* Emoji — desaturated by default, restored on interaction */
.nav-icon{
  width:20px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;
  filter:saturate(0.85);
  transition:filter 120ms;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon{filter:none;}

/* Footer pinned bottom — user button + theme toggle */
.sb-foot{
  display:flex;align-items:center;gap:4px;
  padding:10px 12px 12px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.foot-user{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:6px 8px;border-radius:9px;
  background:none;border:0;cursor:pointer;
  color:inherit;font:inherit;text-align:left;
  transition:background 120ms;
}
.foot-user:hover{background:var(--sidebar-hover);}
.foot-avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(140deg,#5b6b94,#3b4660);
  color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:600;flex:none;
}
.foot-user-text{flex:1;min-width:0;line-height:1.25;}
.foot-name{
  font-size:12.5px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.foot-meta{
  font-size:11px;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.foot-chev{color:var(--text4);flex:none;opacity:.6;}

/* Sidebar-footer quick sign-out — neutral by default, destructive on hover. */
.foot-signout{
  width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;
  background:none;border:0;cursor:pointer;
  color:var(--text3);
  transition:background 140ms ease, color 140ms ease, transform 80ms ease;
}
.foot-signout svg{display:block;}
.foot-signout:hover{background:var(--red-bg);color:var(--red);}
.foot-signout:active{transform:translateY(1px);}

.main{flex:1;padding:24px;overflow-x:hidden;margin-left:248px;}

/* ── SECTIONS / CARDS ─────────────────────────────────────────── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.section-title{font-size:17px;font-weight:700;}
.section-sub{font-size:13px;color:var(--text3);margin-top:2px;}
.card{background:var(--bg2);border-radius:12px;border:1px solid var(--border);padding:18px 20px;box-shadow:var(--card-shadow);}
.card+.card{margin-top:12px;}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.grid2>.card,.grid3>.card,.grid4>.card{margin-top:0;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.stat-card{background:var(--bg2);border-radius:8px;border:1px solid var(--border);padding:12px 14px;box-shadow:var(--card-shadow);}
.stat-label{font-size:12px;color:var(--text3);margin-bottom:4px;}
.stat-val{font-size:18px;font-weight:600;}
.stat-sub{font-size:11px;color:var(--text4);margin-top:2px;}

/* ── BUTTONS / FORMS ──────────────────────────────────────────── */
.btn{font-size:13px;padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;color:var(--text);display:inline-flex;align-items:center;gap:5px;font-weight:500;}
.btn:hover{background:var(--bg);}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);}
.btn.primary:hover{opacity:.9;}
.btn.danger{color:var(--red-text);border-color:var(--red);}
.btn.danger:hover{background:var(--red-bg);}
.btn.sm{font-size:12px;padding:4px 10px;}
.btn.icon-btn{padding:5px 7px;font-size:14px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:12px;color:var(--text3);font-weight:500;}
.field input,.field select,.field textarea{font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text);width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--text3);}
.field textarea{resize:vertical;min-height:60px;}
input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;}

/* ── GOAL CARDS ───────────────────────────────────────────────── */
.goals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;}
.goal-card{background:var(--bg2);border-radius:12px;border:1px solid var(--border);overflow:hidden;box-shadow:var(--card-shadow);}
.goal-card:hover{box-shadow:var(--hover-shadow);}
.goal-card.inactive{opacity:.5;}
.goal-header{padding:14px 16px 10px;display:flex;align-items:flex-start;gap:10px;}
.goal-icon-wrap{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.goal-title-area{flex:1;min-width:0;}
.goal-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.goal-type-badge{font-size:10px;padding:1px 6px;border-radius:4px;font-weight:500;display:inline-block;margin-top:3px;}
.goal-actions{display:flex;gap:4px;flex-shrink:0;}
.goal-body{padding:0 16px 14px;}
.goal-prog-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;}
.gs-item{font-size:11px;color:var(--text3);}
.gs-item span{color:var(--text);font-weight:500;}
.goal-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.goal-notes{font-size:11px;color:var(--text3);margin-top:8px;padding-top:8px;border-top:1px solid var(--border2);font-style:italic;}
.goal-next-hint{font-size:11px;color:var(--text3);margin-top:8px;padding:6px 8px;background:var(--bg3);border-radius:6px;border:1px dashed var(--border);}
.goal-drag-handle{cursor:grab;color:var(--text4);font-size:14px;padding:4px 2px;user-select:none;line-height:1;letter-spacing:-2px;align-self:center;}
.goal-drag-handle:hover{color:var(--text2);}
.goal-card[draggable="true"]:hover .goal-drag-handle{color:var(--text3);}
.goal-card.dragging{opacity:.4;}
.goal-card.drop-target{outline:2px dashed var(--blue);outline-offset:-2px;}

/* ── DASHBOARD REORDERABLE FLOW ─────────────────────────────────
   Strict tile grid: 12 columns wide, base row = 90px tall, 12px gap.
   The unit is "1 stat tile wide" = 2 cols, so 6 stat tiles fit per row.
   Sizes (user-spec W x H in stat-tile units):
     sm    = 1x1 → 2 cols × 1 row  (stat / paycheck / event)
     lg    = 2x1 → 4 cols × 1 row  (monthly income / surplus allocation)
     md    = 2x2 → 4 cols × 2 rows (goal card)
     chart = 3x3 → 6 cols × 3 rows
     full  = 12 cols × auto rows (progress bars, free vertical size)
   `grid-auto-rows: minmax(90px, auto)` lets full-width rows grow to fit
   their content (so progress bars don't leave giant gaps below them)
   while keeping 90px as the base unit for fixed tiles.
   Layout strategy: explicit per-card positioning. Each card gets inline
   `grid-column` / `grid-row` styles from `applyDashPositions()` based on
   the saved `dashboard_card_positions` setting, so cards stay exactly
   where the user dropped them — dragging one card never reflows others.
   `dense` auto-flow only matters for cards that haven't been positioned
   yet (e.g. a freshly added paycheck); they backfill the first available
   gap, then `autoPinCards()` immediately captures that slot as their
   pinned position so future drags don't shift them either. */
#dash-flow{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(90px,auto);grid-auto-flow:row dense;gap:12px;}
.dash-item{position:relative;grid-column:span 12;min-width:0;}
.dash-item[data-size="sm"]{grid-column:span 2;grid-row:span 1;}
.dash-item[data-size="lg"]{grid-column:span 4;grid-row:span 1;}
.dash-item[data-size="md"]{grid-column:span 4;grid-row:span 2;}
.dash-item[data-size="chart"]{grid-column:span 6;grid-row:span 3;}
.dash-item[data-size="full"]{grid-column:span 12;}
.dash-item>.card,.dash-item>.stat-card,.dash-item>.goal-card{margin-top:0;box-sizing:border-box;}
/* Fixed-size tiles fill their cell exactly; overflow:hidden clips any
   content the cell can't accommodate so a verbose card never breaks the
   grid rhythm. Full-width auto-row tiles keep natural sizing. */
.dash-item:not([data-size="full"])>:not(.dash-handle):not(.dash-hide){height:100%;overflow:hidden;}
/* Handle sits inside the card's upper-right corner so it stays anchored
   to the widget regardless of how wide the card spans. High z-index keeps
   it above content; cards with top-right content get padding-right below. */
.dash-handle{
  position:absolute;top:8px;right:8px;z-index:10;
  width:24px;height:24px;border-radius:50%;box-sizing:border-box;
  background:var(--bg2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--text3);font-weight:700;
  cursor:grab;user-select:none;line-height:1;letter-spacing:-3px;
  /* The -3px letter-spacing tightens "⋮⋮" into one glyph cluster, but it
     also trims 3px off the right side of the content box only — so the
     flex-centered glyphs end up sitting ~1.5px right of the true center.
     Mirroring it with padding-right re-balances the box. */
  padding-right:3px;
  box-shadow:var(--card-shadow);
  opacity:.45;transition:opacity .15s,color .15s,box-shadow .15s;
  touch-action:none;
}
/* Reserve space in the upper-right of cards whose content lives there
   so the handle doesn't sit on top of titles, pills, or row buttons. */
.dash-item .traj-head{padding-right:32px;}
.dash-item .goal-header{padding-right:32px;}
.dash-item .alloc-head{padding-right:32px;}
.dash-item:hover .dash-handle{opacity:1;color:var(--text2);box-shadow:var(--hover-shadow);}
.dash-handle:active{cursor:grabbing;}
.dash-item.dragging{opacity:.85;}
/* Live drop-target outline shown while dragging — moves to the snap cell
   the dragged card will land in. Inline grid-column/grid-row are set by
   the drag handler each time the snap target changes. */
.dash-drop-preview{
  background:var(--bg3);
  border:2px dashed var(--blue);
  border-radius:12px;
  box-sizing:border-box;
  min-width:0;
  pointer-events:none;
  opacity:.7;
}
/* Same-size swap candidate: the card the dragged item is hovering over
   when a swap is possible. Solid blue ring + dim so the user can tell it
   apart from the dashed drop preview that overlays it. */
.dash-swap-target>.card,
.dash-swap-target>.stat-card,
.dash-swap-target>.goal-card{
  outline:2px solid var(--blue);
  outline-offset:-1px;
  opacity:.55;
  transition:opacity .1s;
}
@media(max-width:900px){
  /* Tablet: small tiles 2-up, bigger ones at half-width, chart full. */
  .dash-item[data-size="sm"],.dash-placeholder[data-size="sm"]{grid-column:span 6;}
  .dash-item[data-size="md"],.dash-item[data-size="lg"],
  .dash-placeholder[data-size="md"],.dash-placeholder[data-size="lg"]{grid-column:span 6;}
  .dash-item[data-size="chart"],.dash-placeholder[data-size="chart"]{grid-column:span 12;}
}
@media(max-width:600px){
  .dash-item[data-size="sm"],.dash-placeholder[data-size="sm"]{grid-column:span 6;}
  .dash-item[data-size="md"],.dash-item[data-size="lg"],.dash-item[data-size="chart"],.dash-item[data-size="full"],
  .dash-placeholder[data-size="md"],.dash-placeholder[data-size="lg"],.dash-placeholder[data-size="chart"],.dash-placeholder[data-size="full"]{grid-column:span 12;}
  .dash-item[data-size="sm"] .stat-card{padding:9px 11px;}
  .dash-item[data-size="sm"] .stat-label{font-size:11px;}
  .dash-item[data-size="sm"] .stat-val{font-size:16px;}
  .dash-item[data-size="sm"] .stat-sub{font-size:10px;}
}
@media (hover:none){
  .dash-handle{opacity:1;}
}

/* ── DASHBOARD EDIT MODE ─────────────────────────────────────────
   Toggled by the "Edit" button in the dashboard section header. The
   .dash-hide button is hidden until edit mode flips on so it never
   clutters normal use. Hidden cards are listed below the grid in a
   "manage" card so users can re-add them with a single click.       */
.dash-hide{
  position:absolute;top:8px;right:34px;z-index:11;
  width:22px;height:22px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--border);
  display:none;align-items:center;justify-content:center;
  font-size:10px;color:var(--text3);font-weight:700;
  cursor:pointer;line-height:1;padding:0;
  box-shadow:var(--card-shadow);
  transition:color .15s,border-color .15s,box-shadow .15s;
}
#dash-flow.edit-mode .dash-hide{display:flex;}
.dash-hide:hover{color:var(--red-text);border-color:var(--red);box-shadow:var(--hover-shadow);}
#dash-flow.edit-mode .dash-handle{opacity:1;}
#dash-flow.edit-mode .dash-item{outline:1px dashed var(--border);outline-offset:-2px;border-radius:12px;}
/* Make sure cards with right-aligned content reserve room for both buttons. */
#dash-flow.edit-mode .dash-item .traj-head,
#dash-flow.edit-mode .dash-item .goal-header,
#dash-flow.edit-mode .dash-item .alloc-head{padding-right:62px;}
#dash-manage-panel{margin-top:14px;}
#dash-manage-panel:empty{display:none;}
.manage-card{border-style:dashed;}
.manage-head{font-size:13px;font-weight:600;margin-bottom:10px;}
.manage-head .text-muted{font-weight:400;margin-left:6px;}
.manage-pills{display:flex;flex-wrap:wrap;gap:8px;}
.hidden-pill{
  font-size:12px;padding:5px 11px;border-radius:14px;
  border:1px dashed var(--border);background:var(--bg);
  cursor:pointer;color:var(--text2);transition:all .15s;
}
.hidden-pill:hover{border-style:solid;border-color:var(--text3);color:var(--text);background:var(--bg2);}

/* ── PROGRESS BARS ────────────────────────────────────────────── */
.prog-bg{height:7px;background:var(--border2);border-radius:99px;overflow:hidden;margin-bottom:8px;}
.prog-fill{height:100%;border-radius:99px;transition:width .4s;}
.prog-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.prog-bar-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0;}
.prog-bar-info{flex:1;min-width:0;}
.prog-bar-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;}
.prog-bar-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prog-bar-vals{color:var(--text3);font-size:12px;white-space:nowrap;flex-shrink:0;}
.prog-bar-pct{font-size:12px;color:var(--text2);width:40px;text-align:right;flex-shrink:0;font-weight:600;}
.alloc-bar-bg{height:8px;background:var(--border2);border-radius:99px;overflow:hidden;display:flex;margin:4px 0;}
.alloc-segment{height:100%;transition:width .3s;}
.alloc-legend{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:4px;}
.alloc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.alloc-leg-item{display:flex;align-items:flex-start;gap:5px;font-size:11px;color:var(--text2);}
.alloc-warn-inline{font-size:11px;color:var(--amber-text);background:var(--amber-bg);padding:1px 6px;border-radius:4px;margin-left:8px;font-weight:500;}
.alloc-orient{margin-top:0;font-size:12px;color:var(--text2);background:var(--bg2);border:1px dashed var(--border2);border-radius:8px;padding:9px 12px;line-height:1.45;}
.alloc-orient-tag{display:inline-block;font-weight:600;color:var(--text);margin-right:4px;}
.warn-text{font-size:12px;color:var(--amber-text);background:var(--amber-bg);padding:7px 12px;border-radius:6px;font-weight:500;}

/* ── INCOME ───────────────────────────────────────────────────── */
.income-item{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:8px;padding:10px 14px;margin-bottom:8px;border:1px solid var(--border2);}
.income-name{font-size:13px;font-weight:500;}
.income-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.income-amount{font-size:14px;font-weight:600;color:var(--green-text);white-space:nowrap;}

/* ── LOG ──────────────────────────────────────────────────────── */
.log-item{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:8px;padding:9px 13px;margin-bottom:6px;border:1px solid var(--border2);}
.log-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.log-month{font-size:11px;color:var(--text3);}
.log-goal{font-size:12px;font-weight:500;}
.log-note{font-size:11px;color:var(--text2);}
.log-amount{font-size:13px;font-weight:600;color:var(--green-text);white-space:nowrap;}
.del-btn{font-size:11px;color:var(--text3);cursor:pointer;padding:3px 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);flex-shrink:0;}
.del-btn:hover{background:var(--red-bg);color:var(--red-text);border-color:var(--red);}

/* ── PROJECTION TABLE ─────────────────────────────────────────── */
.proj-wrap{border-radius:10px;border:1px solid var(--border);overflow:hidden;background:var(--bg2);}
.proj-scroll{overflow-x:auto;overflow-y:auto;}
.proj-tbl{display:table;width:100%;border-collapse:collapse;min-width:700px;}
.proj-th-row{display:table-row;background:var(--bg);position:sticky;top:0;z-index:2;}
.proj-th-cell{display:table-cell;font-size:11px;color:var(--text3);padding:10px 8px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--border);vertical-align:middle;}
.proj-tr{display:table-row;border-bottom:1px solid var(--border2);}
.proj-tr:hover .proj-td{background:var(--bg3);transition:background .1s;}
.proj-td{display:table-cell;font-size:13px;color:var(--text);padding:8px 8px;vertical-align:middle;border-bottom:1px solid var(--border2);}
.proj-tr.actual{outline:none;}
.proj-tr.actual .proj-td:first-child{font-weight:700;color:var(--green-text);}
.proj-tr.milestone .proj-td{background:var(--amber-bg);}
.proj-tr.allmet .proj-td{background:var(--green-bg);}
.proj-tr.current-mo .proj-td{background:var(--blue-bg);}
.proj-tr.current-mo .proj-td:first-child{font-weight:700;color:var(--green-text);border-left:4px solid var(--green);}
.proj-toolbar{display:flex;align-items:center;gap:12px;padding:10px 14px;flex-wrap:wrap;border-bottom:1px solid var(--border2);}
.proj-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);cursor:pointer;user-select:none;}
.proj-toggle input{margin:0;cursor:pointer;}
.avp-chart{width:100%;height:260px;}
.avp-chart .avp-grid{stroke:var(--border2);stroke-width:1;}
.avp-chart .avp-axis{fill:var(--text3);font-size:10px;}
.avp-chart .avp-bar-actual{fill:var(--green);}
.avp-chart .avp-bar-proj{fill:var(--blue);}
.avp-chart .avp-bar-actual:hover,.avp-chart .avp-bar-proj:hover{opacity:.85;}
.avp-legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);margin-top:10px;}
.avp-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;}
.avp-empty{font-size:13px;color:var(--text3);text-align:center;padding:30px 0;}
.col-mo{white-space:nowrap;font-weight:500;width:85px;}
.col-status{width:1%;white-space:nowrap;}
.col-debt{white-space:nowrap;width:85px;}
.col-apy{white-space:nowrap;width:70px;}
.col-surplus{white-space:nowrap;width:80px;}
.col-mini{width:170px;min-width:170px;}
.col-savings{white-space:nowrap;width:90px;}
.status-pill{font-size:10px;padding:2px 6px;border-radius:5px;font-weight:600;display:block;white-space:nowrap;margin:1px 0;}
.mini-bar{display:flex;align-items:center;gap:4px;margin-bottom:4px;}
.mini-bar:last-child{margin-bottom:0;}
.mini-lbl{font-size:11px;color:var(--text2);min-width:18px;flex-shrink:0;font-weight:500;}
.mini-bg{flex:1;height:6px;background:var(--border2);border-radius:99px;overflow:hidden;min-width:40px;}
.mini-fill{height:100%;border-radius:99px;}
.mini-pct{font-size:11px;color:var(--text2);width:32px;text-align:right;flex-shrink:0;font-weight:600;}

/* ── PAGINATION ───────────────────────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:10px;}
.page-btns{display:flex;gap:4px;}
.page-btn{font-size:12px;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;color:var(--text2);}
.page-btn:hover{background:var(--bg);}
.page-btn.active{background:var(--text);color:var(--bg);border-color:var(--text);}
.page-btn:disabled{opacity:.3;cursor:not-allowed;}
.page-info{font-size:12px;color:var(--text3);}
.page-size-select{font-size:12px;padding:4px 8px;border-radius:5px;border:1px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer;}

/* ── BILLS ────────────────────────────────────────────────────── */
.bills-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.month-sel{font-size:14px;font-weight:600;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer;min-width:160px;}
.month-sel:focus{outline:none;border-color:var(--text3);}
/* Bill-row redesign (see "BILLS PAGE REDESIGN" near end of file) — old flex
   row removed in favor of CSS grid + grouped sections. The amount-input /
   amount-prefix classes stay because other pages reuse them. */
.bill-amount-wrap{display:flex;align-items:center;gap:2px;}
.bill-amount-prefix{font-size:13px;color:var(--text3);font-weight:500;}
.bill-amount-input{font-size:13px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg2);color:var(--text);width:90px;text-align:right;font-weight:600;}
.bill-amount-input:focus{outline:none;border-color:var(--text3);}
@media(max-width:600px){
  /* Single-row mobile header. The previous 2-row grid put a long brand string
     next to the sync pill on row 1 and a wide "☀️ Light" theme button next to
     the user pill on row 2, which scrunched horribly on phones. Instead we
     stay 1-row at 52px, lead with the hamburger (thumb reach), truncate the
     brand text before it pushes controls off-screen, and collapse the sync +
     theme controls to icon-only so 320–400px widths have real breathing room. */
  .header{
    height:52px;
    padding:0 12px;
    gap:8px;
  }
  .header-left{gap:8px;flex:1;min-width:0;}
  .header-right{gap:6px;flex-shrink:0;}
  .hamburger{order:-1;font-size:24px;padding:4px 6px;}
  .header-logo{
    font-size:14px;
    gap:8px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* Sync collapses to a colored dot — text label would steal too much width. */
  .sync-dot{
    width:12px;height:12px;padding:0;border-radius:50%;
    font-size:0;color:transparent;background:var(--green);
  }
  .sync-dot::before{display:none;}
  .sync-dot.loading,.sync-dot.retry{background:var(--amber);}
  .sync-dot.err{background:var(--red);}
  /* Theme button keeps just the icon. */
  .theme-btn{padding:5px 9px;border-width:1px;font-size:14px;}
  .theme-btn #theme-text{display:none;}
  .user-pill{font-size:11px;padding:3px 9px;}

  /* Bills page: tighter, predictable mobile layout.
     Toolbar rows already wrap; we just kill the spacer (no tail elements
     need to be pushed right at this width) and let the label/input/helper
     groups flow naturally on their own lines.                         */
  .bills-toolbar{gap:6px 8px;}
  .bills-toolbar>.spacer{display:none;}
  .bills-toolbar .month-sel{flex:1;min-width:0;}
  .bills-toolbar .text-muted{flex:1 1 100%;}

  /* Stat cards stay 2-up but trimmed so 4 cards don't overwhelm the screen. */
  .grid4{gap:6px;}
  .grid4 .stat-card{padding:9px 11px;}
  .grid4 .stat-label{font-size:11px;}
  .grid4 .stat-val{font-size:16px;}
  .grid4 .stat-sub{font-size:10px;}

  .bill-amount-input{width:90px;}
}

/* ── MONTH CLOSURE / LOCKED STATE ─────────────────────────────── */
.month-locked-banner{display:flex;align-items:center;gap:10px;background:var(--amber-bg);border:1px solid var(--amber);border-radius:10px;padding:10px 14px;margin-bottom:12px;flex-wrap:wrap;}
.month-locked-banner .lock-icon{font-size:18px;}
.month-locked-banner .lock-info{flex:1;min-width:200px;}
.month-locked-banner .lock-title{font-size:13px;font-weight:600;color:var(--amber-text);}
.month-locked-banner .lock-sub{font-size:11px;color:var(--amber-text);opacity:.85;margin-top:2px;}
.bill-bank-locked{font-size:14px;font-weight:600;color:var(--text);padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;}

/* ── MONTH-TO-MONTH PROGRESS ──────────────────────────────────── */
.mtm-card{margin-top:16px;}
.mtm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.mtm-title{font-size:15px;font-weight:600;}
.mtm-sub{font-size:12px;color:var(--text3);margin-top:2px;}
.mtm-range-row{display:flex;gap:4px;flex-wrap:wrap;}
.mtm-range-btn{font-size:12px;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;color:var(--text2);font-weight:500;}
.mtm-range-btn:hover{background:var(--bg);}
.mtm-range-btn.active{background:var(--text);color:var(--bg);border-color:var(--text);}
.mtm-chart-wrap{background:var(--bg);border:1px solid var(--border2);border-radius:10px;padding:14px;margin-bottom:14px;}
.mtm-chart-empty{text-align:center;padding:40px 16px;color:var(--text3);font-size:13px;}
.mtm-chart-svg{width:100%;height:auto;max-height:320px;display:block;}
.mtm-chart-svg .grid-line{stroke:var(--border2);stroke-width:1;}
.mtm-chart-svg .axis-label{font-size:11px;fill:var(--text3);}
.mtm-chart-svg .data-line{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.mtm-chart-svg .data-area{fill:var(--blue);opacity:.1;}
.mtm-chart-svg .data-pt{fill:var(--blue);stroke:var(--bg2);stroke-width:2;}
.mtm-chart-svg .data-pt:hover{fill:var(--blue-text);r:5;cursor:pointer;}
.mtm-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.mtm-tbl th{font-size:11px;text-transform:uppercase;color:var(--text3);font-weight:600;text-align:left;padding:8px;border-bottom:1px solid var(--border);background:var(--bg);letter-spacing:.03em;}
.mtm-tbl td{padding:9px 8px;border-bottom:1px solid var(--border2);vertical-align:middle;}
.mtm-tbl tr:hover td{background:var(--bg3);}
.mtm-tbl .mtm-month{font-weight:600;white-space:nowrap;}
.mtm-tbl .mtm-amount{font-weight:600;text-align:right;white-space:nowrap;}
.mtm-tbl .mtm-delta{text-align:right;font-weight:500;white-space:nowrap;}
.mtm-tbl .mtm-delta.up{color:var(--green-text);}
.mtm-tbl .mtm-delta.down{color:var(--red-text);}
.mtm-tbl .mtm-notes{color:var(--text2);font-size:12px;}
.mtm-tbl .mtm-actions{text-align:right;width:1%;white-space:nowrap;}

/* ── LIFE EVENTS ──────────────────────────────────────────────── */
.event-item{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:8px 12px;margin-bottom:6px;}
.event-icon{font-size:16px;}
.event-name{font-size:13px;font-weight:500;flex:1;}
.event-month{font-size:11px;color:var(--text3);}

/* ── MODAL ────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal{background:var(--bg2);border-radius:16px;padding:28px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.2);border:1px solid var(--border);}
.modal-title{font-size:16px;font-weight:600;margin-bottom:18px;}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border2);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-grid .span2{grid-column:span 2;}
.divider{border:none;border-top:1px solid var(--border2);margin:14px 0;}
.hint{font-size:11px;color:var(--text4);margin-top:3px;}
.color-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.color-swatch{width:26px;height:26px;border-radius:6px;cursor:pointer;border:2px solid transparent;}
.color-swatch.selected{border-color:var(--text);}
.icon-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.icon-opt{font-size:18px;padding:4px 6px;border-radius:6px;cursor:pointer;border:2px solid transparent;background:var(--bg);}
.icon-opt.selected,.icon-opt:hover{border-color:var(--text);background:var(--bg2);}

/* ── TAGS / UTILITIES ─────────────────────────────────────────── */
.tag{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:500;display:inline-block;}
.badge-savings{background:var(--green-bg);color:var(--green-text);}
.badge-debt{background:var(--red-bg);color:var(--red-text);}
.badge-custom{background:var(--purple-bg);color:var(--purple-text);}
.cat-pill{font-size:11px;padding:1px 7px;border-radius:10px;border:1px solid transparent;font-weight:500;display:inline-flex;align-items:center;gap:3px;vertical-align:middle;}

/* ── REPORTS / CATEGORY ROLLUP ────────────────────────────────── */
.rollup-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border2);}
.rollup-row:last-child{border-bottom:none;}
.rollup-icon{font-size:18px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--bg);flex-shrink:0;}
.rollup-name{font-size:13px;font-weight:600;color:var(--text);}
.rollup-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.rollup-bar-wrap{flex:1;background:var(--bg);border-radius:4px;height:6px;overflow:hidden;min-width:60px;max-width:200px;}
.rollup-bar{height:100%;border-radius:4px;transition:width .25s ease;}
.rollup-amount{font-size:14px;font-weight:600;text-align:right;min-width:90px;}
.rollup-pct{font-size:11px;color:var(--text3);text-align:right;min-width:42px;}
.cat-list-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg);border:1px solid var(--border2);border-radius:8px;margin-bottom:6px;}
.cat-list-item .cat-list-name{flex:1;font-size:13px;font-weight:500;}
.cat-kind-tag{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--bg2);color:var(--text3);text-transform:uppercase;letter-spacing:.04em;}
.empty{text-align:center;padding:48px 24px;color:var(--text3);}
.empty-icon{font-size:40px;margin-bottom:12px;}
.empty-title{font-size:15px;font-weight:500;color:var(--text);margin-bottom:6px;}
.empty-sub{font-size:13px;margin-bottom:18px;}
.mt8{margin-top:8px;}.mt16{margin-top:16px;}
.flex-row{display:flex;align-items:center;gap:8px;}
.spacer{flex:1;}
.text-muted{font-size:12px;color:var(--text3);}
.text-green{color:var(--green-text);font-weight:500;}
.text-red{color:var(--red-text);font-weight:500;}

/* Future-self letter pulse — soft "you have mail" glow on the dashboard card.
   Subtle box-shadow ring matches the surfacer's inline ring color. Stops on
   delivery (the inline style drops the animation rule). */
@keyframes fsl-pulse {
  0%,100% { box-shadow:0 0 0 2px var(--green-text), 0 0 0 0 color-mix(in oklab, var(--green-text) 35%, transparent); }
  50%     { box-shadow:0 0 0 2px var(--green-text), 0 0 0 10px color-mix(in oklab, var(--green-text) 0%, transparent); }
}

/* ── MOBILE ───────────────────────────────────────────────────── */
.hamburger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--text);padding:4px 8px;line-height:1;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:49;}
@media(max-width:900px){
  .sidebar{display:none;transform:translateX(-100%);transition:transform .2s;}
  .sidebar.open{display:flex;transform:translateX(0);}
  .main{margin-left:0;}
  .grid4,.grid3{grid-template-columns:repeat(2,1fr);}
  .hamburger{display:block;}
  .sidebar-overlay.open{display:block;}

  /* Header search collapses behind a magnifying-glass button. Tapping
     it slides the .header-mid panel down under the header (fixed-pos so
     it overlays page content cleanly). */
  .header-mid{position:fixed;top:52px;left:0;right:0;margin:0;padding:8px 12px;max-width:none;background:var(--bg2);border-bottom:1px solid var(--border);z-index:99;display:none;}
  .header-mid.mobile-open{display:block;}
  .hdr-search-results{top:calc(100% + 4px);left:12px;right:12px;border-radius:10px;max-height:calc(100vh - 130px);}
  .hdr-search-toggle{display:inline-flex;}
}
@media(max-width:600px){
  .grid2,.form-grid{grid-template-columns:1fr;}
  .form-grid .span2{grid-column:span 1;}
  .goals-grid{grid-template-columns:1fr;}
  .auth-card{padding:24px 18px;}
}

/* ── BILLS PAGE REDESIGN ──────────────────────────────────────────
   New layout: page head with inline month switcher, 3-col cash strip,
   deposits chip strip, summary grid, advice banner, grouped bills,
   then month-to-month history. All components reuse the shared design
   tokens above — no new colors or fonts. */

/* Page head */
.bp-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap;}
.bp-title{font-size:30px;font-weight:700;letter-spacing:-0.02em;line-height:1.05;color:var(--text);margin:0 0 6px;}
.bp-title em{font-style:normal;color:var(--green-text);font-weight:700;}
[data-theme="dark"] .bp-title em{color:var(--green);}
.bp-sub{font-size:13px;color:var(--text3);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.bp-sub .sep{color:var(--text4);}
.bp-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* Hover tooltip used by the Settings button to surface surplus + auto-deduct
   values without putting them inline in the page-head. */
.bp-tip-wrap{position:relative;display:inline-block;}
.bp-tip{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:8px 10px 6px;min-width:200px;box-shadow:var(--hover-shadow);
  font-size:12px;color:var(--text2);font-feature-settings:"tnum";
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s;
  pointer-events:none;
}
.bp-tip::before{
  content:"";position:absolute;top:-5px;right:14px;width:8px;height:8px;
  background:var(--bg2);border:1px solid var(--border);border-right:0;border-bottom:0;
  transform:rotate(45deg);
}
.bp-tip-wrap:hover .bp-tip,.bp-tip-wrap:focus-within .bp-tip{
  opacity:1;visibility:visible;transform:translateY(0);
}
.bp-tip-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:4px 2px;}
.bp-tip-row span{color:var(--text3);font-weight:500;}
.bp-tip-row b{font-weight:600;color:var(--text);}
.bp-tip-row b.on{color:var(--green-text);}
.bp-tip-row b.off{color:var(--text3);font-weight:500;}
.bp-tip-foot{margin-top:4px;padding-top:6px;border-top:1px solid var(--border2);font-size:11px;color:var(--text3);text-align:right;}

/* Month switcher pill */
.bp-month-switch{display:inline-flex;align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:2px;gap:1px;}
.bp-month-switch .ms-btn{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--text3);background:none;border:0;cursor:pointer;font-size:13px;line-height:1;}
.bp-month-switch .ms-btn:hover{background:var(--bg);color:var(--text);}
.bp-month-switch select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--text);font-weight:600;font-size:13px;min-width:120px;text-align:center;padding:0 4px;cursor:pointer;font-family:inherit;}
.bp-month-switch select:focus{outline:none;}

/* Cash strip — Bank balance | Bills progress | Paychecks */
.bp-cash-strip{display:grid;grid-template-columns:1.1fr 1fr 1.5fr;gap:12px;margin-bottom:14px;}
.bp-kpi{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;box-shadow:var(--card-shadow);min-width:0;}
.bp-kpi-label{font-size:13px;color:var(--text3);display:flex;align-items:center;gap:7px;font-weight:500;}
.bp-kpi-value{font-size:32px;font-weight:700;letter-spacing:-0.02em;color:var(--text);font-feature-settings:"tnum";line-height:1.1;margin-top:10px;}
.bp-kpi-value.green{color:var(--green-text);}
.bp-kpi-value.muted{color:var(--text3);}
.bp-kpi-value .total{color:var(--text4);font-weight:600;}
.bp-kpi-foot{font-size:12px;color:var(--text3);margin-top:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.bp-kpi-foot .dot{color:var(--text4);}
.bp-kpi-input{font-size:32px;font-weight:700;letter-spacing:-0.02em;font-feature-settings:"tnum";color:var(--text);background:transparent;border:0;outline:none;width:100%;padding:0;font-family:inherit;line-height:1.1;}
.bp-bal-row{display:flex;align-items:baseline;gap:2px;margin-top:10px;}
.bp-bal-row .dollar{color:var(--text);font-size:32px;font-weight:700;letter-spacing:-0.02em;line-height:1.1;}
/* Bank balance click-to-edit display (the input swaps in on click) */
.bp-bal-display{align-self:flex-start;display:inline-flex;align-items:baseline;gap:0;font-size:32px;font-weight:700;letter-spacing:-0.02em;color:var(--text);font-feature-settings:"tnum";line-height:1.1;cursor:text;border-radius:6px;padding:0 4px;margin:10px 0 0 -4px;transition:background .12s;}
.bp-bal-display:hover{background:var(--bg);}
.bp-bal-display .dollar{color:var(--text3);font-size:28px;font-weight:500;margin-right:1px;}
.bp-bal-display .cents{color:var(--text3);font-size:20px;font-weight:600;}
.bp-bal-display.locked{cursor:default;}
.bp-bal-display.locked:hover{background:transparent;}

/* Bills progress bar inside the middle KPI */
.bp-prog{margin-top:12px;height:6px;background:var(--border2);border-radius:99px;overflow:hidden;}
.bp-prog>div{height:100%;background:var(--green);border-radius:99px;transition:width .4s ease;}

/* Paychecks column (right side of cash strip) */
.bp-paychecks-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text3);margin-bottom:4px;}
.bp-paychecks-head .ttl{font-weight:500;color:var(--text2);display:inline-flex;align-items:center;gap:6px;}
.bp-paychecks-head a{font-size:11px;color:var(--text3);text-decoration:none;}
.bp-paychecks-head a:hover{color:var(--text);}
.bp-paychecks-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;}
.bp-paycheck{border:1px solid var(--border);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;background:var(--bg);cursor:pointer;user-select:none;text-align:left;font-family:inherit;color:inherit;transition:background .12s,border-color .12s;}
.bp-paycheck:hover{background:var(--bg3);border-color:var(--text4);}
.bp-paycheck.received{background:var(--green-bg);border-color:var(--green);}
.bp-paycheck .pc-when{font-size:11px;color:var(--text3);display:inline-flex;align-items:center;gap:5px;}
.bp-paycheck .pc-when .mk{width:8px;height:8px;border-radius:50%;border:1px solid currentColor;display:inline-block;}
.bp-paycheck.received .pc-when{color:var(--green-text);}
.bp-paycheck.received .pc-when .mk{background:var(--green);border-color:var(--green);}
.bp-paycheck .pc-amt{font-size:14px;font-weight:600;font-feature-settings:"tnum";letter-spacing:-0.01em;color:var(--text);}
.bp-paycheck[disabled]{opacity:.65;cursor:default;}
.bp-paychecks-empty{font-size:12px;color:var(--text3);padding:6px 2px;}
.bp-3rd-row{margin-top:8px;padding-top:8px;border-top:1px solid var(--border2);display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text3);flex-wrap:wrap;}
.bp-3rd-row label{font-weight:500;}

/* Deposits chip strip (the headline interaction) */
.bp-deposits{background:linear-gradient(180deg,var(--green-bg),var(--bg2) 95%);border:1px solid var(--green);border-radius:12px;padding:14px 16px 12px;margin-bottom:14px;}
[data-theme="dark"] .bp-deposits{background:linear-gradient(180deg,var(--green-bg),var(--bg2) 95%);}
.bp-deposits-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.bp-deposits-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.bp-deposits-title h3{margin:0;font-size:14px;font-weight:700;color:var(--text);display:inline-flex;align-items:center;gap:7px;letter-spacing:-0.01em;}
.bp-deposits-summary{font-size:12px;color:var(--text3);font-feature-settings:"tnum";}
.bp-deposits-summary b{font-weight:600;color:var(--text2);}
.bp-deposits-summary .good,.bp-deposits-summary b.good{color:var(--green-text);font-weight:600;}
.bp-deposits-summary .bad,.bp-deposits-summary b.bad{color:var(--red-text);font-weight:600;}
.bp-chip-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--text4) transparent;}
.bp-chip-strip::-webkit-scrollbar{height:6px;}
.bp-chip-strip::-webkit-scrollbar-thumb{background:var(--text4);border-radius:4px;}
.bp-dep-chip{flex:0 0 auto;scroll-snap-align:start;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:9px 11px 8px;min-width:200px;max-width:260px;display:flex;flex-direction:column;gap:6px;position:relative;transition:border-color .12s,box-shadow .12s;}
.bp-dep-chip:hover{border-color:var(--text4);box-shadow:var(--card-shadow);}
.bp-dep-chip.received{background:var(--green-bg);border-color:var(--green);}
.bp-dep-chip.spent{background:var(--red-bg);border-color:var(--red);}
.bp-dep-chip .dep-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;}
.bp-dep-chip .dep-arrow{font-size:13px;font-weight:700;line-height:1;flex-shrink:0;}
.bp-dep-chip.in .dep-arrow{color:var(--green);}
.bp-dep-chip.out .dep-arrow{color:var(--red);}
.bp-dep-chip .dep-meta{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-2px;}
.bp-dep-chip .dep-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.bp-dep-chip .dep-amt{font-size:16px;font-weight:700;font-feature-settings:"tnum";letter-spacing:-0.01em;color:var(--text);}
.bp-dep-chip.in .dep-amt{color:var(--green-text);}
.bp-dep-chip.out .dep-amt{color:var(--red-text);}
.bp-dep-chip .dep-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 8px;border-radius:99px;cursor:pointer;border:1px solid transparent;background:var(--bg3);color:var(--text3);font-weight:500;transition:background .12s,color .12s;white-space:nowrap;}
.bp-dep-chip .dep-status:hover{border-color:var(--border);}
.bp-dep-chip .dep-status.received{background:var(--green);color:#fff;}
.bp-dep-chip .dep-status.spent{background:var(--red);color:#fff;}
.bp-dep-chip .dep-status.received:hover,.bp-dep-chip .dep-status.spent:hover{filter:brightness(0.95);}
.bp-dep-chip .dep-acts{position:absolute;top:5px;right:5px;display:flex;gap:2px;opacity:0;transition:opacity .15s;}
.bp-dep-chip:hover .dep-acts{opacity:1;}
.bp-dep-chip .dep-acts button{width:20px;height:20px;border-radius:5px;border:0;background:transparent;color:var(--text4);cursor:pointer;display:grid;place-items:center;font-size:11px;line-height:1;padding:0;}
.bp-dep-chip .dep-acts button:hover{background:var(--bg);color:var(--text);}
.bp-dep-chip .dep-acts button.del:hover{background:var(--red-bg);color:var(--red-text);}
/* Neutral Add chip — extras can be in or out, so it shouldn't be tinted green. */
.bp-dep-add{flex:0 0 auto;scroll-snap-align:start;background:transparent;border:1.5px dashed var(--text4);border-radius:10px;padding:10px 14px;min-width:170px;display:flex;align-items:center;gap:10px;color:var(--text2);font-weight:600;font-size:13px;cursor:pointer;transition:background .12s,border-color .12s;font-family:inherit;}
.bp-dep-add:hover{background:var(--bg3);border-color:var(--text3);}
.bp-dep-add[disabled]{opacity:.5;cursor:not-allowed;}
.bp-dep-add .plus{width:24px;height:24px;border-radius:7px;background:var(--text);color:var(--bg);display:grid;place-items:center;font-size:16px;line-height:1;font-weight:600;}
/* Empty state — the lone Add chip gets a larger footprint so the dashed
   outline doesn't sit pinned against the card edges. */
.bp-chip-strip.empty{padding:10px 4px 12px;}
.bp-dep-add.empty-state{flex:1;min-width:0;padding:18px 20px;font-size:14px;justify-content:center;}
.bp-dep-add.empty-state .plus{width:28px;height:28px;font-size:18px;border-radius:8px;}

/* Summary grid (4 cards) */
.bp-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.bp-sum{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--card-shadow);min-width:0;display:flex;flex-direction:column;}
.bp-sum.alt{background:var(--bg3);border-color:transparent;}
.bp-sum-label{font-size:13px;color:var(--text3);display:flex;align-items:center;gap:7px;font-weight:500;}
.bp-sum-label .badge{font-size:10px;background:var(--green-bg);color:var(--green-text);padding:1px 6px;border-radius:8px;margin-left:4px;}
.bp-sum-val{font-size:32px;font-weight:700;letter-spacing:-0.02em;font-feature-settings:"tnum";margin-top:10px;line-height:1.1;color:var(--text);}
.bp-sum-val.green{color:var(--green-text);}
.bp-sum-val.red{color:var(--red-text);}
.bp-sum-val.muted{color:var(--text3);}
.bp-sum-foot{font-size:12px;color:var(--text3);margin-top:12px;line-height:1.4;}
.bp-sum-foot .split{display:inline-flex;gap:8px;}

/* Advice / orientation banner */
.bp-advice{display:flex;align-items:center;gap:12px;background:var(--amber-bg);border:1px solid var(--amber);border-radius:12px;padding:11px 14px;font-size:13px;color:var(--amber-text);margin-bottom:14px;}
.bp-advice .icn{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(186,117,23,.18);font-size:14px;}
[data-theme="dark"] .bp-advice .icn{background:rgba(212,152,43,.22);}
.bp-advice b{font-weight:700;}
.bp-advice .alloc-orient{background:transparent;border:0;padding:0;color:inherit;}
.bp-advice .alloc-orient-tag{color:inherit;font-weight:700;}

/* Bills section */
.bp-bills{margin-bottom:16px;}
.bp-bills-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;flex-wrap:wrap;}
.bp-bills-title{font-size:17px;font-weight:700;margin:0;display:inline-flex;align-items:center;gap:8px;letter-spacing:-0.01em;}
.bp-bills-title .count{font-size:11px;font-weight:600;color:var(--text3);padding:2px 7px;background:var(--bg3);border-radius:99px;}
.bp-bills-totals{font-size:12px;color:var(--text3);margin-top:3px;font-feature-settings:"tnum";}
.bp-bills-totals b{font-weight:600;color:var(--text2);}
.bp-bills-totals .sep{color:var(--text4);margin:0 6px;}
.bp-bills-tabs{display:inline-flex;background:var(--bg3);border-radius:9px;padding:3px;gap:1px;}
.bp-tab{padding:5px 11px;font-size:12px;font-weight:600;border-radius:7px;color:var(--text3);background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;}
.bp-tab:hover{color:var(--text2);}
.bp-tab.active{background:var(--bg2);color:var(--text);box-shadow:var(--card-shadow);}
.bp-tab .num{font-size:11px;color:var(--text4);font-weight:600;font-feature-settings:"tnum";}
.bp-tab.active .num{color:var(--text3);}

/* Bills group (Overdue / Soon / Upcoming / Paid) */
.bp-bill-group{margin-bottom:14px;}
.bp-bill-group-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px;}
.bp-bill-group-head .lbl{font-size:10.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text3);display:inline-flex;align-items:center;gap:8px;}
.bp-bill-group-head .lbl .dot{width:7px;height:7px;border-radius:50%;background:var(--text4);}
.bp-bill-group-head .lbl.overdue .dot{background:var(--red);}
.bp-bill-group-head .lbl.soon .dot{background:var(--amber);}
.bp-bill-group-head .lbl.upcoming .dot{background:var(--blue);}
.bp-bill-group-head .lbl.paid .dot{background:var(--green);}
.bp-bill-group-head .meta{font-size:12px;color:var(--text3);font-feature-settings:"tnum";}
.bp-bill-list{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--card-shadow);}

/* Bill row — grid layout: check | name+cat+meta | when-pill | amount | actions */
.bill-row{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border2);background:var(--bg2);transition:background .12s;}
.bill-row:last-child{border-bottom:0;}
.bill-row:hover{background:var(--bg3);}
.bill-row.paid .bill-name{color:var(--text2);}
.bill-row.paid .bill-amount-input{color:var(--text3);text-decoration:line-through;text-decoration-color:var(--text4);}
.bill-row.locked{opacity:.78;}
.bill-row.locked .bill-amount-input,
.bill-row.locked .bill-paid-chk input,
.bill-row.locked .bill-check{pointer-events:none;}
.bill-row.locked .bill-actions button{opacity:.4;pointer-events:none;}
.bill-check{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border);background:var(--bg2);display:grid;place-items:center;color:transparent;cursor:pointer;transition:background .12s,border-color .12s,color .12s;flex-shrink:0;font-size:0;line-height:0;padding:0;}
.bill-check:hover{border-color:var(--text3);}
.bill-check.on{background:var(--green);border-color:var(--green);color:#fff;font-size:13px;line-height:1;font-weight:700;}
.bill-check.on::before{content:"✓";}
.bill-info{min-width:0;display:flex;flex-direction:column;gap:2px;}
.bill-main-row{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;}
.bill-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.bill-meta{font-size:11px;color:var(--text3);}
.bill-when{font-size:11px;font-feature-settings:"tnum";padding:3px 9px;border-radius:99px;background:var(--bg3);color:var(--text3);white-space:nowrap;border:1px solid transparent;}
.bill-when.overdue{background:var(--red-bg);color:var(--red-text);}
.bill-when.soon,.bill-when.today{background:var(--amber-bg);color:var(--amber-text);}
.bill-when.upcoming,.bill-when.future{background:var(--blue-bg);color:var(--blue-text);}
.bill-when.paid{background:var(--green-bg);color:var(--green-text);}
.bill-paid-chk{display:none;}
.bill-actions{display:flex;align-items:center;gap:2px;opacity:.5;transition:opacity .15s;}
.bill-row:hover .bill-actions{opacity:1;}
.bill-actions .btn{padding:5px 7px;font-size:13px;line-height:1;}
.bill-actions .icon-btn{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:transparent;border:0;color:var(--text3);cursor:pointer;font-size:13px;}
.bill-actions .icon-btn:hover{background:var(--bg);color:var(--text);}
.bill-actions .icon-btn.del:hover{background:var(--red-bg);color:var(--red-text);}
.bill-actions .icon-btn:disabled{opacity:.4;cursor:not-allowed;}
.bill-row .bill-amount-wrap .bill-amount-input{width:90px;font-size:13.5px;}

/* Empty state inside grouped list (when no group has rows) */
.bp-bills-empty{background:var(--bg2);border:1px dashed var(--border);border-radius:12px;text-align:center;padding:36px 24px;color:var(--text3);}
.bp-bills-empty .ic{font-size:34px;margin-bottom:10px;}
.bp-bills-empty .ttl{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;}
.bp-bills-empty .sub{font-size:12.5px;margin-bottom:14px;}

/* History header refresh */
.mtm-card.bp-mtm{margin-top:0;}
.bp-mtm .mtm-title{font-size:17px;font-weight:700;letter-spacing:-0.01em;}

/* Responsive */
@media(max-width:1080px){
  .bp-summary-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  .bp-cash-strip{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .bp-page-head{align-items:flex-start;}
  .bp-title{font-size:24px;}
  .bp-summary-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .bp-sum{padding:10px 12px;}
  .bp-sum-val{font-size:18px;}
  .bp-bills-head{align-items:flex-start;}
  .bill-row{grid-template-columns:auto 1fr auto;grid-template-areas:"chk info acts" ". when when" ". amt amt";gap:6px 10px;row-gap:6px;padding:10px 12px;}
  .bill-check{grid-area:chk;}
  .bill-info{grid-area:info;}
  .bill-when{grid-area:when;justify-self:start;}
  .bill-row .bill-amount-wrap{grid-area:amt;justify-self:start;}
  .bill-actions{grid-area:acts;}
  .bp-dep-chip{min-width:160px;}
}

/* Extras modal — In/Out type segmented control. */
.dm-type-row{display:inline-flex;background:var(--bg3);border-radius:9px;padding:3px;gap:1px;width:100%;}
.dm-type-btn{flex:1;padding:8px 12px;font-size:13px;font-weight:600;border-radius:7px;color:var(--text3);background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;transition:background .12s,color .12s,box-shadow .12s;}
.dm-type-btn:hover{color:var(--text2);}
.dm-type-btn.in.active{background:var(--green-bg);color:var(--green-text);box-shadow:var(--card-shadow);}
.dm-type-btn.out.active{background:var(--red-bg);color:var(--red-text);box-shadow:var(--card-shadow);}

/* ── iOS PWA safe-area-insets ────────────────────────────────────
   `viewport-fit=cover` (set in shell.js) lets the app paint into the
   notch / home-indicator regions on iPhone PWAs. Without these rules,
   the sticky header would sit behind the status-bar notch and bottom
   content would clip into the home-indicator pill. env() returns 0
   on browsers / platforms with no inset, so this is a no-op outside
   standalone iOS. Behind @supports so older browsers ignore it.    */
@supports (padding: max(0px)) {
  .header {
    padding-top: env(safe-area-inset-top);
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    height: calc(52px + env(safe-area-inset-top));
  }
  .admin-bar {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .sidebar {
    top: calc(52px + env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Children (not .sidebar) own horizontal padding in the Refined layout, so
     the safe-area inset has to land on each row that touches the left edge. */
  .sb-nav   { padding-left: max(12px, env(safe-area-inset-left)); }
  .sb-foot  { padding-left: max(12px, env(safe-area-inset-left)); }
  .has-admin-bar .sidebar { top: calc(86px + env(safe-area-inset-top)); }
  .app-body { min-height: calc(100vh - 52px - env(safe-area-inset-top)); }
  .main {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  /* On phones the sidebar collapses to a drawer, so `.main` loses its
     248px left margin — bring the left inset in directly there. */
  @media (max-width: 900px) {
    .main { padding-left: max(24px, env(safe-area-inset-left)); }
  }
}

/* ── HELP PANEL ──────────────────────────────────────────────────
   Header (?) button, slide-in panel from the right, and the inline
   (?) help icons used next to specific fields/sections on each page.
*/
.help-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:transparent;border:1px solid var(--border);
  color:var(--text2);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.help-btn:hover{background:var(--bg3);color:var(--purple-text);border-color:var(--purple,#7F77DD);}
.help-btn:focus-visible{outline:2px solid color-mix(in oklab, var(--purple,#7F77DD) 50%, transparent);outline-offset:2px;}

.help-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text3);font-size:10px;font-weight:700;line-height:1;
  cursor:pointer;padding:0;vertical-align:middle;margin-left:6px;
  transition:background .12s ease,color .12s ease,border-color .12s ease,transform .12s ease;
}
.help-icon::before{content:"?";}
.help-icon:hover{background:var(--purple-bg);color:var(--purple-text);border-color:var(--purple,#7F77DD);transform:scale(1.08);}
.help-icon:focus-visible{outline:2px solid color-mix(in oklab, var(--purple,#7F77DD) 50%, transparent);outline-offset:2px;}

.help-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.32);
  opacity:0;pointer-events:none;z-index:250;
  transition:opacity .22s ease;
}
.help-backdrop.open{opacity:1;pointer-events:auto;}

.help-panel{
  position:fixed;top:0;right:0;bottom:0;
  width:min(440px, 92vw);
  background:var(--bg2);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 30px rgba(0,0,0,.12);
  z-index:260;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.help-panel.open{transform:translateX(0);}

.help-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px 12px 22px;
  border-bottom:1px solid var(--border2);
}
.help-head-title{font-size:17px;font-weight:600;color:var(--text);line-height:1.2;}
.help-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--text3);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.help-close:hover{background:var(--bg3);color:var(--text);border-color:var(--border);}

.help-topic-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 22px;
  border-bottom:1px solid var(--border2);
  background:var(--bg3);
}
.help-topic-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;}
.help-topic-sel{
  flex:1;font-size:13px;padding:6px 10px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--bg2);color:var(--text);
  cursor:pointer;
}
.help-topic-sel:focus{outline:none;border-color:var(--purple,#7F77DD);box-shadow:0 0 0 3px color-mix(in oklab, var(--purple,#7F77DD) 22%, transparent);}

.help-body{
  flex:1;overflow-y:auto;
  padding:18px 22px 24px 22px;
  scroll-behavior:smooth;
}
.help-intro{
  font-size:13.5px;line-height:1.6;color:var(--text2);
  background:var(--purple-bg);border:1px solid color-mix(in oklab, var(--purple,#7F77DD) 28%, transparent);
  padding:12px 14px;border-radius:10px;
  margin-bottom:18px;
}
.help-section{
  padding:14px 0;
  border-bottom:1px solid var(--border2);
  scroll-margin-top:8px;
}
.help-section:last-of-type{border-bottom:none;}
.help-section-title{
  font-size:14px;font-weight:600;color:var(--text);
  margin-bottom:6px;line-height:1.35;
}
.help-section-body{font-size:13px;line-height:1.6;color:var(--text2);}
.help-section-body a{color:var(--blue-text);text-decoration:underline;text-underline-offset:2px;}
.help-section-body a:hover{color:var(--purple-text);}
.help-section-body code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;background:var(--bg3);border:1px solid var(--border2);
  padding:1px 5px;border-radius:4px;color:var(--text);
}
.help-section-body strong{color:var(--text);font-weight:600;}
.help-section-flash{
  animation:helpFlash 1.4s ease;
}
@keyframes helpFlash{
  0%{background:color-mix(in oklab, var(--purple,#7F77DD) 14%, transparent);}
  100%{background:transparent;}
}
.help-tips{
  margin-top:18px;
  background:var(--amber-bg);
  border:1px solid color-mix(in oklab, var(--amber,#BA7517) 25%, transparent);
  border-radius:10px;padding:12px 14px 12px 14px;
}
.help-tips-title{
  font-size:12px;font-weight:600;color:var(--amber-text);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;
}
.help-tips ul{margin:0;padding-left:18px;}
.help-tips li{
  font-size:12.5px;line-height:1.55;color:var(--text2);
  margin-bottom:5px;
}
.help-tips li:last-child{margin-bottom:0;}
.help-tips code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size:11.5px;background:var(--bg2);border:1px solid var(--border2);padding:1px 5px;border-radius:4px;}

.help-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 22px;
  border-top:1px solid var(--border2);
  background:var(--bg3);
  font-size:11.5px;color:var(--text3);
}
.help-foot kbd{
  font-family:inherit;font-size:10.5px;
  background:var(--bg2);border:1px solid var(--border);
  padding:1px 5px;border-radius:4px;color:var(--text2);
}
.help-foot-link{color:var(--purple-text);text-decoration:none;font-weight:500;}
.help-foot-link:hover{text-decoration:underline;}

@media (max-width:900px){
  .help-panel{width:100vw;border-left:none;}
}
@media (max-width:480px){
  .help-head{padding:14px 16px 10px 16px;}
  .help-topic-row{padding:10px 16px;}
  .help-body{padding:16px 16px 22px 16px;}
  .help-foot{padding:10px 16px;}
}

body.help-open{overflow:hidden;}