/* =============================================
   Oribi One — style.css
   Light Mode Default, Full Dashboard Design
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
/* ===== CSS VARIABLES — LIGHT MODE (DEFAULT) ===== */
:root {
  /* ===== World-class household finance palette =====
     Same variable names as before (so every rule that already
     consumes them anywhere in this 5000+ line file, plus the JS
     modules' .emerald/.rose/.sky/.amber/.violet class hooks, keep
     working unchanged) -- refined to richer, more deliberate hues:
     a deep confident indigo as the single brand accent, a true
     "money-green" for positive amounts, a serious (not pastel) red
     for negative/danger, a warm gold for caution, and a deep teal
     standing in for the old generic sky-blue for informational
     accents. Chosen to read as premium and trustworthy rather than
     a default SaaS template. */
  --bg-body:        #f6f7fb;
  --bg-sidebar:     #0b2b2b;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f8faff;
  --bg-input:       #f8faff;
  --bg-input-focus: #eef2ff;
  --bg-topbar:      #ffffff;
  --border:         #e2e8f0;
  --border-hover:   #c9cdf2;
  --border-focus:   #0f6e56;
  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #64748b;
  --text-sidebar:   rgba(255,255,255,0.75);
  --text-sidebar-active: #ffffff;
  --accent-violet:        #0f6e56;
  --accent-violet-light:  #2f9273;
  --accent-violet-dim:    rgba(15,110,86,0.1);
  --accent-emerald:       #0d9467;
  --accent-emerald-light: #34d399;
  --accent-emerald-dim:   rgba(13,148,103,0.1);
  --accent-rose:          #e0264f;
  --accent-rose-light:    #f0577d;
  --accent-rose-dim:      rgba(224,38,79,0.1);
  --accent-amber:         #d97706;
  --accent-amber-light:   #f5a524;
  --accent-amber-dim:     rgba(217,119,6,0.1);
  --accent-sky:           #0c8599;
  --accent-sky-light:     #22b8cf;
  --accent-sky-dim:       rgba(12,133,153,0.1);
  /* Used only for the "Fair" DTI risk tier (see .dti-fair below) --
     distinct from --accent-amber, which is used for "High". */
  --accent-yellow:        #ca9a05;
  --accent-yellow-dim:    rgba(202,154,5,0.1);
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 60px rgba(0,0,0,0.15);
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;
  --transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: all 0.35s cubic-bezier(0.4,0,0.2,1);
  --sidebar-width: 240px;
}
/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --bg-body:        #0d0d1a;
  --bg-sidebar:     #061616;
  --bg-card:        rgba(255,255,255,0.04);
  --bg-card-hover:  rgba(255,255,255,0.07);
  --bg-input:       rgba(255,255,255,0.05);
  --bg-input-focus: rgba(15,110,86,0.1);
  --bg-topbar:      rgba(13,13,26,0.95);
  --border:         rgba(255,255,255,0.08);
  --border-hover:   rgba(255,255,255,0.18);
  --border-focus:   #2f9273;
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-sidebar:   rgba(255,255,255,0.6);
  --text-sidebar-active: #ffffff;
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.7);
  --shadow-xl:  0 16px 60px rgba(0,0,0,0.8);
}
/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  font-size: 15px;
}
/* ===== APP SHELL ===== */
.app-shell {
  display: flex;
  min-height: 100vh;
}
/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: var(--transition-slow);
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-logo {
  font-size: 1.8rem;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.sidebar-app-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  display: block;
  background: linear-gradient(135deg, #2f9273, #22b8cf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar-tagline {
  font-size: 0.7rem;
  color: var(--text-sidebar);
  display: block;
}
.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sidebar-bottom {
  padding: 10px 10px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-sidebar);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Inter', sans-serif;
  text-align: left;
  width: 100%;
  position: relative;
}
.nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-sidebar-active);
}
.nav-item.active {
  background: rgba(15,110,86,0.25);
  color: var(--text-sidebar-active);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: linear-gradient(to bottom, #2f9273, #22b8cf);
  border-radius: 0 3px 3px 0;
}
.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon { opacity: 1; }
/* ===== Collapsible sidebar groups (Money / Bills / Wealth) ===== */
.nav-group { display: flex; flex-direction: column; }
.nav-group-header { justify-content: flex-start; }
.nav-group-chevron {
  margin-left: auto;
  width: 14px;
  height: 14px;
  display: flex;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.nav-group-chevron svg { width: 14px; height: 14px; }
.nav-group-chevron.open { transform: rotate(90deg); }
.nav-group-children {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px 14px;
}
.nav-group-children.open { display: flex; }
.nav-subitem {
  padding: 9px 14px;
  font-size: 0.82rem;
}
.nav-subitem .nav-icon { width: 15px; height: 15px; }
.nav-badge {
  margin-left: auto;
  background: var(--accent-rose);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
/* ===== MAIN CONTENT ===== */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* ===== TOPBAR ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-topbar);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 64px;
  box-shadow: var(--shadow-xs);
}
.sidebar-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  display: none;
  transition: var(--transition);
}
.sidebar-toggle svg { width: 20px; height: 20px; }
.sidebar-toggle:hover { background: var(--border); color: var(--text-primary); }
.topbar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.current-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-violet-dim);
  border: 1px solid rgba(15,110,86,0.2);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-violet);
  white-space: nowrap;
}
.notif-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.notif-btn svg { width: 18px; height: 18px; }
.notif-btn:hover { background: var(--bg-card-hover); color: var(--accent-violet); border-color: var(--accent-violet); }
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--accent-rose);
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg-topbar);
}
/* ===== PAGE SYSTEM ===== */
.page { display: none; }
.page.active { display: block; }
.page-content {
  padding: 28px 28px 120px;
  max-width: 1400px;
}
/* ===== WIDGET CARDS ===== */
.widgets-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.widgets-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.widgets-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.widgets-grid-2-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.widget-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.widget-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}
.widget-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.widget-icon-wrap svg { width: 22px; height: 22px; }
.emerald-bg { background: var(--accent-emerald-dim); color: var(--accent-emerald); }
.rose-bg    { background: var(--accent-rose-dim);    color: var(--accent-rose); }
.sky-bg     { background: var(--accent-sky-dim);     color: var(--accent-sky); }
.amber-bg   { background: var(--accent-amber-dim);   color: var(--accent-amber); }
.violet-bg  { background: var(--accent-violet-dim);  color: var(--accent-violet); }
.widget-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.widget-value {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.widget-value.emerald { color: var(--accent-emerald); }
.widget-value.rose    { color: var(--accent-rose); }
.widget-value.sky     { color: var(--accent-sky); }
.widget-value.amber   { color: var(--accent-amber); }
.widget-value.violet  { color: var(--accent-violet); }
/* ===== DASHBOARD CARDS ===== */
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.dash-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}
.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-month-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-violet);
  background: var(--accent-violet-dim);
  border: 1px solid rgba(15,110,86,0.2);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.dash-view-all {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-violet);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: var(--transition);
}
.dash-view-all:hover { background: var(--accent-violet-dim); }
.dash-clear-all {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: var(--transition);
}
.dash-clear-all:hover { color: var(--accent-rose); }
/* Dashboard List Items */
.dash-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.dash-list::-webkit-scrollbar { width: 3px; }
.dash-list::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
.dash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  transition: var(--transition);
  cursor: default;
}
.dash-item:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.dash-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.dash-item-info { flex: 1; min-width: 0; }
.dash-item-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-item-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.dash-item-amount {
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}
/* ===== DASHBOARD GREETING HEADER ===== */
.dash-greeting-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dash-greeting-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.dash-greeting-sub {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 0;
}
/* Stat card % trend line under each widget-value */
.dash-trend {
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 4px;
}
.dash-trend-up   { color: var(--accent-emerald); }
.dash-trend-down { color: var(--accent-rose); }
/* Dashboard section rows */
.dash-row-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  align-items: stretch;
}
.dash-row-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  align-items: stretch;
}
/* .card's base rule (below) gives every card a 20px margin-bottom, EXCEPT
   :last-child -- fine for cards stacked in normal document flow, but inside
   these two-column grid rows the right-hand card (grid's last DOM child)
   loses that margin while the left one keeps it, so their visible boxes
   ended up different heights even though align-items:stretch already makes
   both grid cells the same height -- the left card's own margin was eating
   into its box, leaving its bottom edge above the right card's. Zeroing it
   here (the grid's `gap` already spaces rows apart) makes every pair of
   widgets -- Budget Overview/Expenses by Category, Debt Summary/Debt-to-
   Income, Recent Transactions/Today's Focus, Cash Flow/Upcoming Bills --
   genuinely equal height with flush bottom edges. */
.dash-row-1-1 .card, .dash-row-2-1 .card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
/* Cash Flow chart legend */
.dash-chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.dash-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
/* Budget donut */
.dash-donut-layout {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dash-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.dash-donut-pct {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.dash-donut-sub {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.dash-donut-legend {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-donut-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-secondary);
  /* Transparent by default so toggling a real color on hover (see
     dashboard.js's highlightDonutLegendRow()) never shifts layout. */
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  padding: 3px 8px;
  margin: 0 -8px;
  transition: opacity 0.15s ease;
}
.dash-donut-legend-row span:first-child { display: flex; align-items: center; }
.dash-donut-legend-row span:last-child { font-weight: 700; color: var(--text-primary); }
/* Hovering a slice on the donut (see onHover in dashboard.js) highlights
   its matching row here instead of showing a native Chart.js tooltip --
   the canvas is too small (110px) for a tooltip box to avoid covering the
   center label, so this is how hovering the ring surfaces the amount.
   border-left-color and background are set inline per-row in JS (each
   slice's own color), so only the structural/typographic parts live here. */
.dash-donut-legend-row.is-active { font-weight: 700; }
.dash-donut-legend-row.is-active span:first-child,
.dash-donut-legend-row.is-active span:last-child { color: var(--text-primary); }
.dash-donut-legend-row.is-dimmed { opacity: 0.45; }
.dash-donut-legend-divider { height: 1px; background: var(--border); margin: 2px 0; }
.dash-donut-legend-sub { font-size: 0.76rem; color: var(--text-muted); }
.dash-donut-legend-sub span:last-child { font-weight: 600; }
.dash-donut-legend-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 8px 0 2px;
}
.dash-donut-legend-group-label:first-child { margin-top: 0; }
/* Subscriptions module's own Cost Breakdown donut hover (modules/
   subscriptions.js) -- same "highlight the matching legend row, dim the
   rest" idea as the Dashboard's .dash-donut-legend-row above, but with a
   punchier 4px border + 18% tint + recolored amount text. Kept as its own
   class rather than reusing .dash-donut-legend-row, since with as few as
   2 subscriptions the first couple of PIE_COLORS entries can be close
   enough in hue that the Dashboard's subtler 3px/12% treatment didn't
   read as clearly tied to a specific item -- this only strengthens the
   Subscriptions page's own chart, not the Dashboard's. */
.subs-donut-legend-row {
  display: flex;
  align-items: center;
  gap: 9px;
  border-left: 4px solid transparent;
  border-radius: 0 6px 6px 0;
  padding: 6px 8px;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.subs-donut-legend-row.is-dimmed { opacity: 0.4; }
.subs-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.subs-legend-name { flex: 1; font-size: 0.8rem; display: flex; align-items: center; gap: 9px; min-width: 0; }
.subs-legend-amount { font-size: 0.8rem; font-weight: 700; transition: color 0.15s ease; }
.subs-legend-pct { font-size: 0.68rem; color: var(--text-muted); width: 38px; text-align: right; flex-shrink: 0; }
/* .dash-budget-card gets overflow:hidden (scoped to just this card, not
   every .card sitewide) so the over-budget strip's negative margins can
   bleed flush to the card's own rounded corners below without spilling
   past them. */
.dash-budget-card { overflow: hidden; }
.dash-budget-over-line {
  display: none;
  text-align: center;
  margin: 14px -22px -22px;
  padding: 12px 22px;
  background: var(--accent-rose-dim);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--accent-rose);
}
.dash-budget-over-line.is-visible { display: block; }
/* DTI gauge */
.dash-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 0 2px;
}
.dash-gauge-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
}
#dtiNeedle { transition: all 0.4s ease; }
.dash-gauge-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-top: -6px;
}
.dash-gauge-label {
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 2px;
}
.dash-gauge-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 4px;
}
@media (max-width: 900px) {
  .dash-row-2-1, .dash-row-1-1 { grid-template-columns: 1fr; }
}
/* Debt Summary card */
.dash-debt-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
.dash-debt-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.dash-debt-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}
.dash-debt-ratio-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-debt-ratio-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  overflow: hidden;
}
.dash-debt-ratio-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent-amber), var(--accent-rose));
  width: 0%;
  transition: width 0.5s ease;
}
.dash-debt-ratio-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
}
.dash-debt-ratio-fill-positive { background: linear-gradient(90deg, var(--accent-emerald-light, #5dcaa5), var(--accent-emerald)); }
/* Combined cards (Debt Summary+Debt-to-Income Ratio, Savings Overview) --
   a stat/ratio section on top, then a second, visually-parallel section
   below a divider (DTI gauge / Savings Breakdown donut). .dash-combo-fill
   marks that second section so it grows to fill any extra height the grid
   row's stretch alignment gives this card and centers within it, instead
   of leaving dead space below a short chart when its sibling card (the
   other combo card) is taller. */
.dash-combo-divider { height: 1px; background: var(--border); margin: 4px 0 16px; }
.dash-combo-subtitle {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.dash-combo-fill { flex: 1; justify-content: center; }
@media (max-width: 560px) {
  .dash-debt-summary { flex-direction: column; align-items: stretch; gap: 14px; }
  .dash-debt-divider { display: none; height: 1px; width: 100%; }
}
/* Projection Widget */
.projection-display { display: flex; flex-direction: column; gap: 10px; }
.projection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
}
.proj-label { color: var(--text-secondary); font-weight: 500; }
.proj-value {
  font-weight: 700;
  font-size: 0.92rem;
}
.projection-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.projection-total .proj-label {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem;
}
.projection-total .proj-value {
  font-size: 1.1rem;
  font-weight: 800;
}
/* Savings Widget */
.savings-display { text-align: center; padding: 12px 0; }
.savings-amount {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--accent-emerald);
  letter-spacing: -0.03em;
  line-height: 1;
}
.savings-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.savings-streak {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}
/* Today's Focus Widget */
.focus-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.focus-list { display: flex; flex-direction: column; gap: 8px; }
.focus-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 500;
  transition: var(--transition);
}
.focus-item:hover { background: var(--bg-card-hover); }
.focus-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.focus-critical { border-left: 3px solid var(--accent-rose); background: rgba(224,38,79,0.04); }
.focus-high     { border-left: 3px solid var(--accent-amber); background: rgba(217,119,6,0.04); }
.focus-medium   { border-left: 3px solid var(--accent-sky); background: rgba(12,133,153,0.04); }
.focus-low      { border-left: 3px solid var(--accent-emerald); background: rgba(13,148,103,0.04); }
/* ===== BUDGET BAR ===== */
.budget-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 4px 0 14px;
}
.budget-bar-wrap { margin-top: 16px; }
.budget-bar-track {
  height: 8px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 10px 0 6px;
}
.budget-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent-emerald), var(--accent-sky));
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.budget-bar-fill.warning {
  background: linear-gradient(90deg, var(--accent-amber), var(--accent-rose));
}
.budget-meta-row, .budget-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}
/* ===== CARD BASE ===== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.card:last-child { margin-bottom: 0; }
.card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.settings-subhead {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 22px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.settings-subhead:first-of-type { margin-top: 4px; padding-top: 0; border-top: none; }
.audit-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-right: auto;
}
.audit-filter-chip button {
  font-size: 0.78rem;
  color: var(--accent-rose, #e11d48);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
/* ===== TWO-COLUMN GRID ===== */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.col-primary, .col-secondary {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* ===== FORM ELEMENTS ===== */
.form-group { margin-bottom: 14px; }
label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.label-optional {
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
}
input, select, textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-violet);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 3px rgba(15,110,86,0.12);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
select option { background: var(--bg-card); color: var(--text-primary); }
textarea { resize: vertical; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Toggle Switch */
.toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  margin-bottom: 14px;
}
.toggle-group label:first-child {
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 500;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input { display: none; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-full);
  transition: var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-violet);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
/* ===== TRACK-AS SEGMENTED CONTROL (Savings / Investments / Allowance) =====
   Three mutually-exclusive options — Fixed Expense, Regular Expense, or
   Do Not Include — as a hidden-radio segmented control, so exactly one
   (or, until a first choice is made, none) is ever active. The "active"
   class is toggled by JS (updateTrackAsSegmentedActive in app.js) rather
   than a pure :checked selector so a segment can also be disabled
   (one-time cadence can't be a Fixed Expense) independent of selection. */
.trackas-segmented {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.trackas-segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
}
.trackas-segment input { display: none; }
.trackas-segment.active {
  border-color: var(--accent-violet);
  background: var(--accent-violet-dim);
  color: var(--text-primary);
}
.trackas-segment.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  /* Flat solid violet instead of the previous gradient, plus a subtle text
     shadow -- a gradient crosses from a lighter to a darker shade under the
     same white text, so contrast (and legibility) dipped across the
     lighter end. A flat color keeps contrast constant edge to edge, and
     the text-shadow adds a touch more edge definition on top of that. Also
     bumped to font-weight 800 (the base .btn rule below sets 600 for every
     button) so the primary action reads as visually heavier than
     .btn-secondary/.btn-danger-solid, on purpose.
     NOTE: no width:100% here on purpose -- .btn-primary is shared by the
     marketing header/hero CTAs and modal-footer Save buttons, which sit
     inline next to other buttons in a flex row (a width:100% here stretches
     "Get Started" to fill that row and squashes/misplaces "Sign In" next to
     it). The app's actual full-width auth-form submit buttons use their own
     separate .auth-btn-primary class (see auth.js/signup.js), so this was
     never needed for those either. */
  background: #0f6e56;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(15,110,86,0.3);
}
.btn-primary:hover {
  background: #0c5c48;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15,110,86,0.4);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 10px 16px;
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.btn-sm {
  padding: 6px 14px;
  font-size: 0.8rem;
}
.btn-danger-outline {
  background: transparent;
  color: var(--accent-rose);
  border: 1px solid rgba(224,38,79,0.3);
  padding: 10px 16px;
}
.btn-danger-outline:hover {
  background: var(--accent-rose-dim);
  border-color: var(--accent-rose);
}
.btn-danger-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, var(--accent-rose), #a31c3f);
  color: white;
  box-shadow: 0 4px 14px rgba(224,38,79,0.3);
  transition: var(--transition);
}
.btn-danger-solid:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(224,38,79,0.4); }
.btn-add-new {
  width: auto;
  margin-top: 0;
  padding: 10px 20px;
}
.btn-group-stack { display: flex; flex-direction: column; gap: 8px; }
.btn-row { display: flex; gap: 8px; }
.flex-1 { flex: 1; }
/* ===== PAGE TOOLBAR ===== */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}
.toolbar-search { flex: 1; min-width: 200px; max-width: 320px; }
/* ===== SEARCH BAR ===== */
.search-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  margin-bottom: 12px;
  transition: var(--transition);
}
.search-bar-wrap.toolbar-search { margin-bottom: 0; }
.search-bar-wrap:focus-within {
  border-color: var(--accent-violet);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 3px rgba(15,110,86,0.1);
}
.search-icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.search-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.search-input:focus { border: none; box-shadow: none; background: transparent; }
.search-clear {
  background: rgba(100,116,139,0.1);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}
.search-clear:hover { background: var(--accent-rose-dim); border-color: var(--accent-rose); color: var(--accent-rose); }
/* ===== FILTERS ===== */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-select {
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  padding: 9px 12px;
  margin-bottom: 0;
}
/* ===== VIEW TABS ===== */
.view-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 20px;
  width: fit-content;
  flex-wrap: wrap;
}
.view-tab {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}
.view-tab:hover { color: var(--text-primary); }
.view-tab.active {
  background: var(--bg-card);
  color: var(--accent-violet);
  box-shadow: var(--shadow-xs);
}
/* ===== EXPENSE LIST ===== */
.expense-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 2px;
}
.expense-list::-webkit-scrollbar { width: 3px; }
.expense-list::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
.expense-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: var(--transition);
  animation: slideIn 0.25s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.expense-item:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.expense-category-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.expense-details { flex: 1; min-width: 0; }
.expense-desc {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expense-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.expense-amount {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-rose);
  white-space: nowrap;
  margin-right: 8px;
}
/* ===== BILLS LIST ===== */
.bills-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bill-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition);
  animation: slideIn 0.25s ease;
  box-shadow: var(--shadow-xs);
  /* Unlike .debt-item, this row previously had no flex-wrap, and
     .bill-amount/.bill-actions never shrink (flex-shrink:0 on actions,
     white-space:nowrap on amount) -- so on narrow phone widths the row
     simply overflowed sideways, pushing the pay/edit/delete buttons off
     the visible screen instead of reflowing to a second line. */
  flex-wrap: wrap;
}
.bill-item:hover { box-shadow: var(--shadow-sm); border-color: var(--border-hover); }
.bill-status-bar {
  width: 4px;
  height: 48px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.bill-paid .bill-status-bar    { background: var(--accent-emerald); }
.bill-overdue .bill-status-bar { background: #7f1d1d; }
.bill-today .bill-status-bar   { background: var(--accent-rose); }
.bill-soon-3 .bill-status-bar  { background: #ea580c; }
.bill-soon-7 .bill-status-bar  { background: var(--accent-amber); }
.bill-upcoming .bill-status-bar{ background: var(--text-muted); }
.bill-cat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.bill-info { flex: 1; min-width: 0; }
.bill-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bill-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bill-due-days {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.bill-paid    .bill-due-days { background: rgba(13,148,103,0.12); color: var(--accent-emerald); }
.bill-overdue .bill-due-days { background: rgba(127,29,29,0.15); color: #fca5a5; }
.bill-today   .bill-due-days { background: var(--accent-rose-dim); color: var(--accent-rose); }
.bill-soon-3  .bill-due-days { background: rgba(234,88,12,0.12); color: #f97316; }
.bill-soon-7  .bill-due-days { background: var(--accent-amber-dim); color: var(--accent-amber); }
.bill-upcoming .bill-due-days { background: var(--bg-input); color: var(--text-muted); }
.bill-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.bill-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.bill-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tag-autopay {
  background: rgba(15,110,86,0.1);
  color: var(--accent-violet);
  border: 1px solid rgba(15,110,86,0.2);
}
.tag-recurring {
  background: rgba(12,133,153,0.1);
  color: var(--accent-sky);
  border: 1px solid rgba(12,133,153,0.2);
}
.tag-debt {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent-rose-dim);
  color: var(--accent-rose);
  border: 1px solid rgba(224,38,79,0.2);
}
/* ===== DEBTS LIST ===== */
.debts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.debt-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition);
  animation: slideIn 0.25s ease;
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}
.debt-item:hover { box-shadow: var(--shadow-sm); border-color: var(--border-hover); }
.debt-item.expanded { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none; }
.debt-cat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  background: var(--accent-rose-dim);
  color: var(--accent-rose);
}
.debt-info { flex: 1; min-width: 180px; }
.debt-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.debt-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.debt-amounts { text-align: right; }
.debt-balance {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.debt-min-payment {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-top: 2px;
}
.debt-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.debt-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.debt-item-wrap { display: flex; flex-direction: column; }
.debt-expand-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 2px;
  flex-shrink: 0;
  transition: var(--transition);
}
.debt-expand-btn:hover { color: var(--accent-violet); }
.debt-detail-panel {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-top: -8px;
  padding: 16px 18px 16px 54px;
}
.debt-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}
.debt-detail-stat { display: flex; flex-direction: column; gap: 2px; }
.debt-detail-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.debt-detail-value { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.debt-detail-value.emerald { color: var(--accent-emerald); }
.debt-detail-section { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.debt-detail-section-title { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.debt-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.debt-history-row:last-child { border-bottom: none; }
.debt-history-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.debt-history-date { font-weight: 600; color: var(--text-primary); }
.debt-history-note { font-size: 0.75rem; color: var(--text-muted); overflow-wrap: anywhere; }
.debt-history-amount { font-weight: 700; color: var(--accent-emerald); white-space: nowrap; }
.debt-history-actions { display: flex; gap: 4px; flex-shrink: 0; }
.badge-scheduled {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-amber, #f59e0b);
  background: rgba(245, 158, 11, 0.14);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
}
.debt-history-empty { font-size: 0.8rem; color: var(--text-muted); padding: 6px 0; }

/* ===== REMINDERS LIST ===== */
.reminders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reminder-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: var(--transition);
  animation: slideIn 0.25s ease;
  box-shadow: var(--shadow-xs);
}
.reminder-item:hover { box-shadow: var(--shadow-sm); border-color: var(--border-hover); }
.reminder-item.completed { opacity: 0.6; }
.reminder-item.completed .reminder-title { text-decoration: line-through; }
.reminder-check-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: var(--transition);
  font-size: 0.7rem;
  color: transparent;
}
.reminder-check-btn:hover {
  border-color: var(--accent-emerald);
  background: var(--accent-emerald-dim);
}
.reminder-item.completed .reminder-check-btn {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: white;
}
.reminder-info { flex: 1; min-width: 0; }
.reminder-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.reminder-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.priority-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.priority-low      { background: var(--accent-emerald-dim); color: var(--accent-emerald); }
.priority-medium   { background: var(--accent-sky-dim); color: var(--accent-sky); }
.priority-high     { background: var(--accent-amber-dim); color: var(--accent-amber); }
.priority-critical { background: var(--accent-rose-dim); color: var(--accent-rose); animation: pulse-critical 1.5s ease infinite; }
@keyframes pulse-critical {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.status-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.status-overdue   { background: var(--accent-rose-dim); color: var(--accent-rose); }
.status-pending   { background: var(--accent-amber-dim); color: var(--accent-amber); }
.status-snoozed   { background: rgba(100,116,139,0.12); color: var(--text-muted); }
.status-completed { background: var(--accent-emerald-dim); color: var(--accent-emerald); }
.reminder-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
/* ===== ICON BUTTONS ===== */
.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: var(--transition);
}
.icon-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-hover); }
.icon-btn.danger:hover { background: var(--accent-rose-dim); border-color: var(--accent-rose); color: var(--accent-rose); }
.icon-btn.success:hover { background: var(--accent-emerald-dim); border-color: var(--accent-emerald); color: var(--accent-emerald); }

/* ===== FAMILY ACCOUNTS — permission gating ===== */
/* Applied to any [data-perm-section] container the logged-in family
   member can view but can't add/edit in (or can't delete from).
   The real security boundary is enforced server-side in data.php —
   this is just the UX layer that keeps read-only members from
   seeing controls that would no-op or get silently reverted. */
.perm-readonly form { display: none !important; }
.perm-readonly .header-actions .btn { display: none !important; }
.perm-readonly .icon-btn:not(.danger) { display: none !important; }
.perm-readonly .debt-payment-btn { display: none !important; }
.perm-no-delete .icon-btn.danger { display: none !important; }
.perm-readonly-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  margin-top: 8px;
  display: inline-block;
}
.added-by-tag {
  font-size: 0.68rem;
  color: var(--text-muted);
  background: var(--bg-input);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  margin-left: 6px;
  white-space: nowrap;
}

/* ===== FAMILY ACCOUNTS — Settings card + modals ===== */
.family-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.family-member-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.family-member-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}
.family-member-card.inactive { opacity: 0.55; }
.family-member-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.family-member-name { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }
.family-member-email { font-size: 0.78rem; color: var(--text-muted); }
.family-member-meta { font-size: 0.72rem; color: var(--text-muted); }
.family-member-actions { display: flex; gap: 6px; flex-shrink: 0; }
.family-slot-row { margin-bottom: 4px; }
.btn-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-input);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.95rem;
  transition: var(--transition);
}
.btn-icon:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.form-hint { font-size: 0.75rem; color: var(--text-muted); margin: -8px 0 12px; }
/* Help icon + popover -- small "i" button next to a label that reveals a
   short explanation on click, instead of a form-hint paragraph sitting
   visible on the page at all times. The containing element (usually a
   .form-group) needs position:relative for the popover to anchor under
   the icon. Open/close is delegated at the document level (see
   dialogs.js) using the .open class, matching the same class-toggle
   convention as .modal-overlay.open and .debt-item.expanded elsewhere in
   this file -- no per-page JS wiring required. */
.form-help-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--text-muted);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: var(--transition);
}
.form-help-icon:hover { border-color: var(--accent-violet); color: var(--accent-violet); }
.form-help-popover {
  display: none;
  position: absolute;
  top: 26px;
  left: 0;
  z-index: 20;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 10px 30px 10px 14px;
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.5;
}
.form-help-popover.open { display: block; }
.form-help-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 6px;
  width: 11px;
  height: 11px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.form-help-popover-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.form-help-popover-close:hover { color: var(--text-primary); }
/* Pill variant of the help icon -- used where the always-visible text was a
   full explanatory paragraph/card (not a one-line label hint), e.g. "How
   Savings totals are calculated." Same .form-help-popover it opens, same
   delegated click handling in dialogs.js (which also matches this class),
   just a bigger tap target with a short label so it reads as "click for an
   explanation" rather than a bare, easy-to-miss icon. */
.form-help-icon-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--transition);
}
.form-help-icon-pill:hover { border-color: var(--accent-violet); color: var(--accent-violet); }
.form-help-icon-pill .pill-i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.62rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* `.error` is used app-wide (~40 spots across every module -- form
   validation messages, modal errors, failed-to-load states) but had no
   actual style rule anywhere in this file, so every one of those messages
   was silently rendering in the default text color instead of standing
   out as an error. One rule here fixes all of them at once. */
.error { color: var(--accent-rose); font-size: 0.85rem; margin-top: 8px; }
.family-perm-grid { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.family-perm-grid-header, .family-perm-grid-row {
  display: grid;
  grid-template-columns: 1.1fr repeat(5, 0.55fr);
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
}
.family-perm-grid-header { background: var(--bg-card-hover); font-weight: 700; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.family-perm-grid-row { border-top: 1px solid var(--border); }
.family-perm-grid-row.disabled { opacity: 0.4; }
.family-perm-grid-row label:first-child { text-transform: capitalize; }
.family-perm-grid-row input[type="checkbox"] { justify-self: center; width: 16px; height: 16px; cursor: pointer; }
.family-perm-grid-row.disabled input[type="checkbox"] { cursor: not-allowed; }
/* The app-wide `input,select,textarea { appearance:none }` reset (above)
   strips native checkbox rendering with nothing to replace it for plain
   checkboxes outside .toggle-switch, which made these permission boxes
   look (and feel) unresponsive even though clicks were toggling them —
   build a small custom checked/unchecked visual so it's obvious. */
.family-perm-grid-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  position: relative;
  flex-shrink: 0;
}
.family-perm-grid-row input[type="checkbox"]:hover { border-color: var(--border-hover); }
.family-perm-grid-row input[type="checkbox"]:checked {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
}
.family-perm-grid-row input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.family-perm-grid-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  background: var(--bg-card-hover);
}
/* Hide is the odd one out — checking it takes access away, the
   opposite of the other three — so give it a distinct warm color
   instead of the same green "granted" look as Read/Add-Edit/Delete. */
.family-perm-grid-row input[type="checkbox"].perm-hidden:checked {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
}
.family-perm-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.family-perm-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 0.82rem;
  background: var(--bg-input);
}
.family-perm-list-row .tags { display: flex; gap: 4px; }
.family-perm-list-row .tag-yes { color: var(--accent-emerald); font-size: 0.72rem; }
.family-perm-list-row .tag-no { color: var(--text-muted); font-size: 0.72rem; }
/* ===== CALENDAR SUB-TABS (Bills / Reminders / Calendar / Sync merged) ===== */
.cal-subtabs, .sav-subtabs {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 20px;
  width: fit-content;
  flex-wrap: wrap;
}
.cal-subtab, .sav-subtab {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.cal-subtab:hover, .sav-subtab:hover { color: var(--text-primary); }
.cal-subtab.active, .sav-subtab.active {
  background: var(--bg-card);
  color: var(--accent-violet);
  box-shadow: var(--shadow-xs);
}
.cal-subpanel, .sav-subpanel { display: none; }
.cal-subpanel.active, .sav-subpanel.active { display: block; }

/* ===== CALENDAR SYNC ===== */
.cal-sync-card { max-width: 640px; }
.cal-sync-intro {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 4px 0 20px;
}
.cal-sync-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.cal-sync-provider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
}
.cal-sync-provider-info { display: flex; align-items: center; gap: 12px; }
.cal-sync-provider-icon { font-size: 1.4rem; }
.cal-sync-provider-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.cal-sync-provider-status { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.cal-sync-provider-status.connected { color: var(--accent-emerald); }
.cal-sync-provider-last-synced { font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; }
.cal-sync-provider-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cal-sync-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.toast.info { border-color: rgba(15,110,86,0.4); }
.cal-sync-provider-block { display: flex; flex-direction: column; }
.cal-sync-apple-form {
  padding: 14px 16px;
  margin-top: -1px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--bg-card);
}
.cal-sync-apple-form .form-group { margin-bottom: 12px; }
.cal-sync-apple-hint { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.cal-sync-apple-error { font-size: 0.8rem; color: var(--accent-rose); margin-bottom: 10px; }
.cal-sync-apple-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ===== CALENDAR ===== */
.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
.calendar-main {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.calendar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cal-month-title {
  flex: 1;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
}
.cal-nav-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.cal-nav-btn:hover { background: var(--accent-violet-dim); border-color: var(--accent-violet); color: var(--accent-violet); }
.calendar-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  flex-wrap: wrap;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.bill-dot     { background: var(--accent-amber); }
.reminder-dot { background: var(--accent-violet); }
.expense-dot  { background: var(--accent-rose); }
.income-dot   { background: var(--accent-emerald); }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day-label {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 0;
}
.cal-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-secondary);
  gap: 2px;
  padding: 4px;
  min-height: 52px;
}
.cal-day:hover { background: var(--accent-violet-dim); color: var(--accent-violet); }
.cal-day.other-month { opacity: 0.35; cursor: default; }
.cal-day.other-month:hover { background: transparent; color: var(--text-muted); }
.cal-day.today {
  background: var(--accent-violet);
  color: white;
  font-weight: 700;
}
.cal-day.today:hover { background: var(--accent-violet-light); }
.cal-day.selected {
  background: var(--accent-violet-dim);
  border: 2px solid var(--accent-violet);
  color: var(--accent-violet);
}
.cal-day-num { font-size: 0.82rem; font-weight: 600; line-height: 1; }
.cal-dots {
  display: flex;
  gap: 2px;
  justify-content: center;
  flex-wrap: wrap;
}
.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-day-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent-rose, #ef4444);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.cal-day.today .cal-day-badge {
  background: white;
  color: var(--accent-violet);
}
.calendar-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 84px;
}
.cal-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal-detail-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.cal-detail-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: var(--transition);
}
.cal-detail-close:hover { color: var(--accent-rose); }
.cal-detail-header-actions { display: flex; align-items: center; gap: 8px; }
.cal-create-wrap { position: relative; }
.cal-create-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  overflow: hidden;
}
.cal-create-menu button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}
.cal-create-menu button:hover { background: var(--bg-card-hover); }
.cal-create-menu button + button { border-top: 1px solid var(--border); }
.cal-detail-content { display: flex; flex-direction: column; gap: 8px; }
.cal-event-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-size: 0.82rem;
}
.cal-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* ===== MAINTENANCE TEMPLATES ===== */
.maintenance-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.template-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  cursor: pointer;
  transition: var(--transition);
}
.template-card:hover {
  background: var(--accent-violet-dim);
  border-color: var(--accent-violet);
}
.template-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.template-info { flex: 1; min-width: 0; }
.template-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.template-freq {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.template-add-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-violet-dim);
  border: 1px solid rgba(15,110,86,0.2);
  color: var(--accent-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}
/* ===== SECTION-COLLAPSE CARD (Debt Payoff Strategy, New Loan Simulator) =====
   Same "toggle a class, let CSS do the rest" pattern as the Admin Portal's
   .admin-nav-group/.admin-nav-chevron, just for a customer-facing card
   instead of the sidebar. JS only ever toggles "expanded" on the header --
   the chevron rotation and body visibility are pure CSS via the adjacent
   sibling selector, so there's no separate "hide the body" call to forget.
   Deliberately named "section-collapse-*" rather than "collapsible-*" --
   savings.js/reports.js already use .collapsible-card/.collapsible-header/
   .chevron-icon for a DIFFERENT per-row toggle mechanism (a class on the
   outer card plus a descendant selector), and reusing those names here
   would have silently redeclared them with different property values. */
.section-collapse-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-collapse-chevron { transition: transform 0.15s ease; display: inline-block; color: var(--text-muted); }
.section-collapse-header.expanded .section-collapse-chevron { transform: rotate(180deg); }
.section-collapse-body { display: none; }
.section-collapse-header.expanded + .section-collapse-body { display: block; }
/* ===== SECTION HEADER ===== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.section-header .card-title { margin-bottom: 0; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ===== COLLAPSIBLE CARDS ===== */
.collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.chevron-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-violet);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.collapsible-card.collapsed .chevron-icon { transform: rotate(-90deg); }
.collapsible-card.collapsed .compact-list { display: none; }

/* ===== REPORTS PAGE — Export menu, Favorites bar, per-card header actions ===== */
.reports-export-wrap { position: relative; }
.reports-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reports-export-menu button {
  text-align: left;
  background: transparent;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition);
}
.reports-export-menu button:hover { background: var(--accent-violet-dim); color: var(--accent-violet); }

.report-fav-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.report-fav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: var(--transition);
}
.report-fav-pill:hover { background: var(--accent-violet-dim); border-color: var(--accent-violet); color: var(--accent-violet); }

.report-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.report-icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 0.55;
  transition: var(--transition);
}
.report-icon-btn:hover { opacity: 1; background: var(--bg-input); border-color: var(--border); }
.report-icon-btn.active { opacity: 1; background: var(--accent-violet-dim); border-color: var(--accent-violet); }

/* ===== INSIGHTS — shared by Reports' own Insights card and the
   Dashboard's copy of it (see buildFinancialInsights/renderInsightsCard in
   both modules). Severity color/background comes inline per-row from JS
   (it's per-insight, not fixed), everything else lives here. ===== */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.insight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  padding: 9px 12px;
}
.insight-icon { font-size: 0.95rem; flex-shrink: 0; }
.insight-body { flex: 1; min-width: 0; }
.insight-body[data-insight-link] { cursor: pointer; }
.insight-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}
.insight-subtext {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.insight-dismiss {
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 4px;
  transition: var(--transition);
}
.insight-dismiss:hover { color: var(--text-primary); }
.insight-row-dismissed {
  border-left-style: dashed;
  opacity: 0.7;
}
.insight-row-dismissed .insight-text { color: var(--text-secondary); }
.insight-restore {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-violet);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.insight-restore:hover { text-decoration: underline; }
.insight-toggle-dismissed {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.insight-toggle-dismissed:hover { color: var(--text-primary); border-color: var(--border-hover); }
.insight-dismissed-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 4px 0 -2px;
}

/* ===== DASHBOARD — Pinned Reports (see reports.js's 📌 pin toggle) ===== */
.dash-pinned-reports {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dash-pinned-report-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  cursor: pointer;
  transition: var(--transition);
}
.dash-pinned-report-chip:hover { background: var(--bg-card-hover); border-color: var(--accent-violet); }
.dash-pinned-report-icon { font-size: 1rem; }
.dash-pinned-report-label { color: var(--text-primary); }
.dash-pinned-report-value { color: var(--text-muted); font-weight: 500; }
/* ===== COMPACT LISTS ===== */
.compact-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.compact-item {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.compact-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--accent-violet), var(--accent-sky));
}
.compact-item:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.fixed-payment-history {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 6px 14px;
  margin-top: -6px;
  margin-bottom: 8px;
  font-size: 0.8rem;
}
.fixed-payment-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--text-secondary);
}
.fixed-payment-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.compact-icon-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  /* Without min-width:0 this flex:1 span defaults to a minimum width
     equal to its own content -- a long fixed-expense/savings/subscription
     name (often with extra tag badges appended, e.g. "Fixed"/"Auto-Pay")
     then forces the whole .compact-item row wider than the screen on
     phone, pushing compact-edit-btn/compact-delete-btn off-screen.
     min-width:0 lets it shrink, and flex-wrap:wrap lets the name/badges
     wrap onto a second line within their own span (rather than an
     ellipsis, since this span's content is itself several nested
     <span> badges, not a single plain-text run an ellipsis would work
     on) -- so the row grows taller instead of wider, and the action
     buttons stay reachable at the fixed row height's right edge. */
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 2px;
}
.compact-amount {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-violet);
  margin-left: auto;
  margin-right: 10px;
}
.compact-delete-btn {
  background: var(--accent-rose-dim);
  border: 1px solid rgba(224,38,79,0.2);
  color: var(--accent-rose);
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.compact-delete-btn:hover { background: rgba(224,38,79,0.25); border-color: var(--accent-rose); }
.compact-edit-btn {
  background: var(--accent-violet-dim, rgba(15,110,86,0.12));
  border: 1px solid rgba(15,110,86,0.25);
  color: var(--accent-violet);
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  margin-right: 6px;
}
.compact-edit-btn:hover { background: rgba(15,110,86,0.25); border-color: var(--accent-violet); }
.expense-form-edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(15,110,86,0.08);
  border: 1px solid rgba(15,110,86,0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--accent-violet);
  font-weight: 600;
}
.expense-form-edit-banner button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
}
.expense-form-edit-banner button:hover { color: var(--text-primary); }
/* ===== EMPTY STATES ===== */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}
.empty-icon { font-size: 2.8rem; margin-bottom: 12px; display: block; }
.empty-state p { font-size: 0.88rem; }
.empty-state-sm {
  text-align: center;
  padding: 20px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.fixed-empty {
  text-align: center;
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: 0.82rem;
  background: var(--bg-input);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
/* ===== BADGE ===== */
.badge {
  background: var(--accent-violet-dim);
  color: var(--accent-violet);
  border: 1px solid rgba(15,110,86,0.2);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
}
/* ===== UNSAVED BADGE ===== */
.unsaved-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-amber);
  background: var(--accent-amber-dim);
  border: 1px solid rgba(217,119,6,0.25);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  animation: pulse-badge 2s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:0.5} }
/* ===== INCOME ITEMS ===== */
.income-preview {
  background: rgba(13,148,103,0.08);
  border: 1px solid rgba(13,148,103,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: var(--accent-emerald);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.income-freq-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
}
.income-freq-tag.weekly   { background: var(--accent-amber-dim); color: var(--accent-amber); border: 1px solid rgba(217,119,6,0.2); }
.income-freq-tag.biweekly { background: var(--accent-sky-dim); color: var(--accent-sky); border: 1px solid rgba(12,133,153,0.2); }
.income-freq-tag.semimonthly { background: var(--accent-rose-dim, rgba(224,38,79,0.1)); color: var(--accent-rose); border: 1px solid rgba(224,38,79,0.2); }
.income-freq-tag.monthly  { background: var(--accent-violet-dim); color: var(--accent-violet); border: 1px solid rgba(15,110,86,0.2); }
.income-freq-tag.onetime  { background: var(--accent-emerald-dim); color: var(--accent-emerald); border: 1px solid rgba(13,148,103,0.2); }
/* ===== YEARLY SUMMARY (used by Investment Tracker's yearly breakdown) ===== */
.yearly-summary-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.yearly-summary-table th {
  text-align: left;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
}
.yearly-summary-table td { padding: 8px 6px; border-bottom: 1px solid rgba(0,0,0,0.04); color: var(--text-secondary); }
[data-theme="dark"] .yearly-summary-table td { border-bottom-color: rgba(255,255,255,0.04); }
.yearly-summary-table tr:hover td { background: rgba(15,110,86,0.04); }
.yearly-summary-table .month-label { font-weight: 600; color: var(--text-primary); }
.yearly-summary-table .amt-spent    { color: var(--accent-rose); font-weight: 600; }
.yearly-summary-table .amt-income   { color: var(--accent-emerald); font-weight: 600; }
.yearly-summary-table .amt-positive { color: var(--accent-emerald); font-weight: 700; }
.yearly-summary-table .amt-negative { color: var(--accent-rose); font-weight: 700; }
.yearly-totals-row td { border-top: 2px solid var(--border); border-bottom: none !important; font-weight: 700; color: var(--text-primary) !important; padding-top: 10px !important; }
.yearly-invest-row { margin-top: 10px; padding: 10px 14px; background: var(--accent-emerald-dim); border: 1px solid rgba(13,148,103,0.18); border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; }
.yearly-invest-label { font-weight: 600; color: var(--accent-emerald); }
.yearly-invest-amount { font-weight: 800; font-size: 0.95rem; color: var(--accent-emerald); }
/* ===== INVESTMENT TRACKER ===== */
.inv-alltime-banner { display: flex; justify-content: space-between; align-items: center; background: var(--accent-emerald-dim); border: 1px solid rgba(13,148,103,0.22); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 14px; }
.inv-alltime-amount { font-size: 1.5rem; font-weight: 800; color: var(--accent-emerald); letter-spacing: -0.02em; }
.inv-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; min-width: 60px; }
.inv-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-emerald), var(--accent-emerald-light)); border-radius: 3px; transition: width 0.4s ease; }
.amt-invest { font-weight: 700; color: var(--accent-emerald); font-size: 0.85rem; white-space: nowrap; }
.inv-change-tag { font-size: 0.65rem; font-weight: 600; background: var(--accent-amber-dim); color: var(--accent-amber); border: 1px solid rgba(217,119,6,0.25); border-radius: 20px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.inv-log-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.inv-log-pill { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; }
.inv-freq-tag { font-size: 0.65rem; font-weight: 600; background: var(--accent-violet-dim); color: var(--accent-violet); border: 1px solid rgba(15,110,86,0.2); border-radius: 20px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
/* ===== CATEGORY BREAKDOWN ===== */
.category-bar-item { margin-bottom: 14px; }
.category-bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.category-bar-name { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.category-bar-amount { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.category-bar-track { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; }
.category-bar-fill { height: 100%; border-radius: 10px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }

/* ===== CATEGORY BUDGETS (Expenses page) ===== */
.category-budget-item {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.category-budget-item .category-bar-header { margin-bottom: 6px; }
.category-budget-item .category-bar-name { flex: 1; }
.category-budget-item .cb-edit-btn { margin-left: 8px; }
.category-budget-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }
.category-budget-item.cb-status-warning {
  background: var(--accent-amber-dim, rgba(217,119,6,0.1));
  border-color: var(--accent-amber, #f59e0b);
}
.category-budget-item.cb-status-warning .category-budget-meta { color: var(--accent-amber, #f59e0b); font-weight: 600; }
.category-budget-item.cb-status-over {
  background: var(--accent-rose-dim, rgba(224,38,79,0.08));
  border-color: var(--accent-rose, #f43f5e);
}
.category-budget-item.cb-status-over .category-budget-meta { color: var(--accent-rose, #f43f5e); font-weight: 700; }

/* Bulk "Set Category Budgets" pop-up (#categoryBudgetsBulkModal) -- one
   compact row per category instead of the page's fuller progress-bar rows,
   since this is purely a quick data-entry form. */
.category-budgets-bulk-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.budget-bulk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.budget-bulk-row label { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin: 0; }
.budget-bulk-row input { width: 120px; flex: none; }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
/* confirmDelete() is triggered from buttons INSIDE other modals (e.g.
   removing a family member from the Edit Member modal) — since all
   .modal-overlay elements share the same z-index, whichever one comes
   later in the HTML paints on top regardless of which opened last.
   Force this one above every other modal so the confirmation is
   always visible instead of appearing behind the modal that spawned it. */
#confirmDeleteModal { z-index: 8600; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 0;
  width: 100%;
  max-width: 460px;
  /* Long forms (Bill, Investment Account, Retirement Calculator, etc.) can
     easily be taller than a phone's viewport -- without a height cap the
     modal just ran off the bottom of the screen with no way to reach the
     Save button. Capping height and making only the body scroll (header/
     footer stay put) keeps every modal reachable on any screen size. */
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  transform: scale(0.94) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal.modal-lg { max-width: 580px; }
.modal.modal-sm { max-width: 360px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  flex-shrink: 0;
}
.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-close {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: var(--transition);
}
.modal-close:hover { background: var(--accent-rose-dim); border-color: var(--accent-rose); color: var(--accent-rose); }
.modal-body { padding: 20px 24px; overflow-y: auto; min-height: 0; }
.modal-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* Edit Member's footer (Remove Account on the left, Cancel/Save Changes on
   the right) is the one modal-footer in the app with 3 buttons in it. It
   used to reach that space-between layout with an inline style and a
   second inline-styled flex div, which meant a phone-width screen had no
   way to override it into a stacked layout -- the row just ran out of
   space and "Save Changes" got clipped by the edge of the viewport. These
   two classes replace the inline styles so the mobile media query below
   can actually take over. */
.modal-footer-split { justify-content: space-between; }
.modal-footer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .modal-footer-split {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .modal-footer-split > .btn {
    width: 100%;
  }
  .modal-footer-actions {
    flex-direction: column;
    width: 100%;
  }
  .modal-footer-actions .btn {
    width: 100%;
  }
}
/* ===== SNOOZE MODAL ===== */
.snooze-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.snooze-btn {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.snooze-btn:hover { background: var(--accent-violet-dim); border-color: var(--accent-violet); color: var(--accent-violet); }
/* ===== CONFIRM DELETE ===== */
.confirm-delete-msg {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 4px;
}
/* ===== TOAST ===== */
.toast {
  /* Top-middle instead of bottom-right, per explicit request -- centered
     horizontally via left:50% + the translateX(-50%) baked into both
     transform states below, so it stays centered through the slide-in/out
     animation instead of just snapping to center. */
  position: fixed;
  top: 24px;
  left: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  z-index: 9500;
  transform: translate(-50%, -20px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.success { border-color: rgba(13,148,103,0.4); }
.toast.error   { border-color: rgba(224,38,79,0.4); }
.toast.warning { border-color: rgba(217,119,6,0.5); }
/* ===== NOTIFICATION PANEL ===== */
.notif-panel {
  position: fixed;
  top: 72px;
  right: 24px;
  width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 300;
  transform: translateY(-10px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.notif-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}
.notif-panel-header button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  transition: var(--transition);
}
.notif-panel-header button:hover { color: var(--accent-rose); }
.notif-panel-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  transition: var(--transition);
  font-size: 0.82rem;
}
.notif-item:hover { background: var(--bg-card-hover); }
.notif-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.notif-text { flex: 1; color: var(--text-primary); line-height: 1.4; }
.notif-time { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
/* ===== FAB ===== */
.fab-container {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.fab-main {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-violet), #0c5c48);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(15,110,86,0.4);
  transition: var(--transition);
  color: white;
  position: relative;
  z-index: 2;
}
.fab-main:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(15,110,86,0.5); }
.fab-main:active { transform: scale(0.96); }
.fab-plus, .fab-close { position: absolute; transition: var(--transition); }
.fab-close { opacity: 0; transform: rotate(-90deg); }
.fab-container.open .fab-plus { opacity: 0; transform: rotate(90deg); }
.fab-container.open .fab-close { opacity: 1; transform: rotate(0deg); }
.fab-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.fab-container.open .fab-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.fab-action {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
}
.fab-action:hover { transform: translateX(-4px); }
.fab-action-label {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.fab-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
/* ===== SETTINGS PAGE ===== */
/* Settings > tab shell -- left tab list + right pane. Each pane is one of
   the existing .card sections tagged with [data-settings-tab]; visibility
   is toggled entirely in JS (see wireSettingsTabs() in settings.js), so
   this is purely presentational. */
.settings-shell { display: flex; align-items: flex-start; gap: 20px; }
.settings-tab-nav {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  position: sticky;
  top: 20px;
}
.settings-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}
.settings-tab-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.settings-tab-btn.active { background: var(--accent-violet-dim); color: var(--accent-violet); font-weight: 700; }
.settings-tab-content { flex: 1; min-width: 0; }
@media (max-width: 860px) {
  .settings-shell { flex-direction: column; }
  .settings-tab-nav { width: 100%; flex-direction: row; flex-wrap: wrap; position: static; }
}
.settings-layout { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.setting-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.setting-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.danger-label { color: var(--accent-rose); }
.danger-zone { border-color: rgba(224,38,79,0.15); }
.theme-toggle-wrap {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  flex-shrink: 0;
}
.theme-btn {
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Inter', sans-serif;
}
.theme-btn.active {
  background: var(--bg-card);
  color: var(--accent-violet);
  box-shadow: var(--shadow-xs);
}
.about-block { text-align: center; padding: 20px 0 8px; }
.about-logo { font-size: 2.5rem; margin-bottom: 10px; }
.about-name { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); }
.about-tagline { font-size: 0.82rem; color: var(--accent-violet); font-weight: 600; margin: 4px 0; }
.about-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin-top: 10px; }
/* ===== BOTTOM NAV (MOBILE) ===== */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-topbar);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 200;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: var(--transition);
  flex: 1;
}
.bottom-nav-item svg { width: 20px; height: 20px; }
.bottom-nav-item.active { color: var(--accent-violet); }
.bottom-nav-item:hover { color: var(--accent-violet); }
/* ===== SIDEBAR MOBILE OVERLAY ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
}
.sidebar-overlay.active { display: block; }
/* ===== BILL STATUS BACKGROUNDS ===== */
.bill-overdue { background: rgba(127,29,29,0.04); }
.bill-today   { background: rgba(224,38,79,0.04); }
.bill-soon-3  { background: rgba(234,88,12,0.04); }
.bill-soon-7  { background: rgba(217,119,6,0.04); }
.bill-paid    { background: rgba(13,148,103,0.04); }
/* ===== SYSTEM MAINTENANCE BANNER (index.html's #maintenanceBanner, populated
   by modules/maintenance-banner.js) -- sits above the marketing site, the
   auth overlay, and the app shell alike, so one set of rules here covers
   all three surfaces the spec calls for (public homepage, login page,
   inside the app). Three color variants matching the Admin Portal's
   Banner Color choice; empty/collapsed (0 height) whenever the div has no
   content, so it never leaves a visible gap when maintenance isn't
   active/scheduled. ===== */
.maint-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  font-size: 0.86rem;
  position: relative;
  z-index: 500;
}
.maint-banner-warning  { background: #fef3c7; color: #78350f; border-bottom: 1px solid #fde68a; }
.maint-banner-info     { background: #dbeafe; color: #1e3a5f; border-bottom: 1px solid #bfdbfe; }
.maint-banner-critical { background: #fee2e2; color: #7f1d1d; border-bottom: 1px solid #fecaca; }
[data-theme="dark"] .maint-banner-warning  { background: #451a03; color: #fde68a; border-bottom-color: #78350f; }
[data-theme="dark"] .maint-banner-info     { background: #172554; color: #bfdbfe; border-bottom-color: #1e3a5f; }
[data-theme="dark"] .maint-banner-critical { background: #450a0a; color: #fecaca; border-bottom-color: #7f1d1d; }
.maint-banner-icon {
  font-size: 1.2rem;
  line-height: 1.3;
  flex-shrink: 0;
}
.maint-banner-body { flex: 1; min-width: 0; }
.maint-banner-title {
  font-weight: 800;
  margin-bottom: 2px;
}
.maint-banner-msg {
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.92;
}
.maint-banner-dismiss {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: inherit;
  opacity: 0.6;
  padding: 2px 6px;
  flex-shrink: 0;
}
.maint-banner-dismiss:hover { opacity: 1; }
@media (max-width: 640px) {
  .maint-banner { padding: 10px 14px; font-size: 0.8rem; }
  .maint-banner-msg { font-size: 0.76rem; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .widgets-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .widgets-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .widgets-grid-2-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .widgets-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .calendar-layout { grid-template-columns: 1fr; }
  .calendar-detail { position: static; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  /* .sidebar and .bottom-nav both sit at z-index:200 and both stay in the
     DOM at the same time on mobile -- with equal z-index, the one later in
     the DOM (bottom-nav) paints on top, which was covering the open
     drawer's bottom-pinned Settings button entirely. Raise the drawer
     above the bar only while it's actually open (desktop's always-visible
     sidebar never needs this, and bottom-nav still stacks correctly above
     the closed/off-screen drawer). The extra bottom padding on
     .sidebar-bottom below gives Settings room to clear the bar's own
     height too, not just win the stacking fight. */
  .sidebar.mobile-open { transform: translateX(0); z-index: 250; }
  .main-content { margin-left: 0; }
  .sidebar-toggle { display: flex; }
  .bottom-nav { display: flex; }
  /* Room for the bottom-nav bar's own height (icon+label content, its
     padding, plus the iOS home-indicator safe area) so Settings sits
     comfortably above it instead of flush against its top edge -- on top
     of the z-index fix above, which is what actually stops the bar from
     covering it in the first place. ~64px approximates the bar's rendered
     height (padding + icon + label). */
  .sidebar-bottom { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .fab-container { bottom: 90px; }
  .two-col-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .page-content { padding: 20px 16px 100px; }
  .widgets-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .widgets-grid-3 { grid-template-columns: 1fr 1fr; }
  .widgets-grid-2-3 { grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; }
  .current-date-badge { display: none; }
  .notif-panel { right: 8px; left: 8px; width: auto; }
  /* Was bottom:90px (parked above the mobile bottom-nav bar) from when the
     toast lived bottom-right -- now matches the top-middle desktop
     position instead of contradicting it. left/right:16px with no
     transform-based centering (overriding the desktop rule's translate
     X) makes it a full-width banner just under the topbar on narrow
     screens, same as before just flipped to the top. */
  .toast { top: 72px; left: 16px; right: 16px; max-width: none; transform: translateY(-20px); }
  .toast.show { transform: translateY(0); }

  /* Touch-target sizing: these small icon-only buttons (edit/delete on
     compact list rows, modal close, the notification bell's per-item
     "Add Fixed Expense"-style icon actions) are sized fine for a mouse
     pointer but sit well under the ~40-44px minimum that's comfortable to
     tap reliably with a finger. Bump them up only on touch-width screens
     so desktop's denser layout is untouched. */
  .icon-btn { width: 40px; height: 40px; }
  .compact-edit-btn, .compact-delete-btn { width: 36px; height: 36px; font-size: 0.8rem; }
  .modal-close { width: 40px; height: 40px; font-size: 0.9rem; }
  .notif-dismiss-btn { padding: 8px; }

  /* Bill/Debt list rows: on phone widths there isn't enough room for
     icon + name + amount + pay/edit/delete buttons on one line. Both
     rows already wrap (see .bill-item/.debt-item), but left to wrap
     naturally the amount, toggle switch, and action buttons end up
     jumbled across two uneven lines together, making the edit/delete
     buttons hard to find and easy to mis-tap. Forcing .bill-info/
     .debt-info onto their own full-width line puts everything else
     (amount, auto-pay toggle, action buttons) together cleanly on a
     single second line, with the actions pinned to the right. */
  .bill-info, .debt-info { flex-basis: 100%; min-width: 0; }
  .bill-actions, .debt-actions { margin-left: auto; }
}
@media (max-width: 480px) {
  .widgets-grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .widgets-grid-3 { grid-template-columns: 1fr 1fr; }
  .widgets-grid-2-3 { grid-template-columns: 1fr; }
  .widget-value { font-size: 1.2rem; }
  .calendar-grid { gap: 2px; }
  .cal-day { min-height: 42px; font-size: 0.72rem; }
  .maintenance-templates { grid-template-columns: 1fr; }
  .page-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-search { max-width: none; }
  .btn-add-new { width: 100%; }
}
/* Data tables with several fixed columns (Month-to-Month Comparison,
   Compare Periods, the per-user permission grid, admin/audit tables) hit a
   floor below which their columns are too narrow to stay readable if
   forced to shrink to fit the screen. Rather than let text wrap into a
   cramped, hard-to-scan mess, give each table a sensible min-width and let
   its wrapper (.admin-table-wrap, already overflow-x:auto -- see
   style.css's admin table rules) scroll horizontally instead. */
@media (max-width: 640px) {
  .month-compare-table { min-width: 480px; }
  .compare-table { min-width: 420px; }
  .perm-grid-table { min-width: 460px; }
  .admin-user-table, .admin-users-table-modern { min-width: 560px; }
}
/* The Family Accounts Hide/View/Add/Edit/Delete grid is a 5-column
   checkbox matrix -- unlike the tables above, splitting it into a
   horizontal scroll loses the column headers while scrolling through
   rows, which is worse than just shrinking it in place. */
@media (max-width: 480px) {
  .family-perm-grid-header, .family-perm-grid-row {
    grid-template-columns: 0.9fr repeat(5, 0.55fr);
    gap: 2px;
    padding: 8px 6px;
    font-size: 0.7rem;
  }
  .family-perm-grid-header { font-size: 0.6rem; }
}
/* .admin-stat / .savings-summary-bar power every "3-4 numbers in a row"
   summary strip in the app -- Dashboard's Budget Summary and Debt Summary
   cards, the Savings/Investments/Retirement pages, and the Admin Portal's
   own stats bar. They used a fixed 1.75rem number size with only a
   min-width floor (no max-width, no wrap handling), so a genuinely large
   dollar figure (a five/six-figure debt total, for instance) had nowhere to
   go on a phone-width screen except overflow past its own box and get
   clipped by the viewport edge -- reported on the Debt Summary widget's
   Total Debt figure. Shrinking the number and letting it wrap fixes every
   card built on these two shared classes at once. */
@media (max-width: 640px) {
  .admin-stats-bar, .savings-summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
  }
  .admin-stat {
    min-width: 0;
    padding: 10px 8px;
  }
  .admin-stat-num {
    font-size: 1.15rem;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .admin-stat-label {
    font-size: 0.68rem;
  }
}
/* =============================================
   AUTH OVERLAY — Multi-User Login/Signup/2FA
   ============================================= */
#auth-overlay, #paywall-overlay {
  position: fixed;
  /* top/right/bottom/left spelled out explicitly (not the inset:0
     shorthand) -- on any browser/webview that doesn't understand `inset`,
     a fixed-position element with no offsets falls back to shrink-to-fit
     sizing at its static position instead of covering the full viewport,
     which is exactly the "auth card pinned near the top-left with a huge
     empty area to the right, scrollbar behaving oddly" symptom reported.
     This is 100% equivalent to inset:0 everywhere inset IS supported, so
     it's a pure compatibility hardening with no behavior change. */
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #0b2b2b 40%, #0b4a52 100%);
  /* Signup in particular (Household/Name/Email/Password/Confirm + submit)
     can be taller than a phone's viewport once the on-screen keyboard is
     up -- overflow:hidden here previously clipped the bottom of the form
     with no way to reach the submit button. Vertical scroll fixes that;
     horizontal stays hidden so the decorative background blobs never
     cause sideways scroll. */
  overflow-y: auto;
  overflow-x: hidden;
  /* Root-cause fix for the scrollbar that kept appearing/disappearing on
     a loop: #auth-overlay::before below is sized to exactly fill this
     element and pulses via transform:scale() on an 8s infinite animation.
     While scaled ABOVE 1, its painted bounds extend past this element's
     own edges -- and because this element is overflow-y:auto, browsers
     count that scaled-up visual overflow as scrollable content, so the
     scrollbar appeared during the scale-up half of every cycle and
     vanished during the scale-down half, forever. contain:paint clips
     everything inside to this box's own bounds for good, regardless of
     any transform a descendant applies -- doesn't affect the deliberate
     overflow-y:auto scrolling for genuinely tall content (Signup's form),
     only stops a transform's ink overflow from ever being visible/counted
     past this element's edges.
  */
  contain: paint;
}
#auth-overlay.hidden, #paywall-overlay.hidden { display: none; }
#auth-overlay::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(15,110,86,0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(13,148,103,0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 10%, rgba(12,133,153,0.15) 0%, transparent 40%);
  animation: authBgPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Belt-and-suspenders alongside contain:paint above: never scales PAST
   100% anymore (0.97 -> 1 instead of 1 -> 1.05), so this pseudo-element's
   painted bounds never exceed #auth-overlay's own box in the first place,
   regardless of contain: support in the browser being used. */
@keyframes authBgPulse {
  0%   { opacity: 0.7; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: 20px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset;
  animation: authCardIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes authCardIn {
  from { opacity: 0; transform: scale(0.85) translateY(30px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.auth-screen {
  display: none;
  padding: 40px 36px;
  animation: authScreenFade 0.3s ease both;
}
.auth-screen.active { display: block; }
@keyframes authScreenFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.auth-logo-wrap {
  /* Was display:block with no width limit, which (per CSS's normal block-
     level sizing) stretched this link's clickable hit area across the ENTIRE
     width of the auth card -- not just the visibly centered icon/name/tagline.
     Any click anywhere along that top band (nowhere near the actual logo)
     silently navigated away to the marketing homepage, a completely
     different page/header/nav -- reported as "the screen goes away with a
     little mouse click" during password reset, and likely also the "sidebar
     flashing" report (the marketing site's own nav suddenly appearing).
     inline-flex + width:fit-content shrinks the link to just its visible
     content while margin:auto keeps it centered, same as before. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 28px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.auth-logo-wrap:hover { opacity: 0.88; }
.auth-logo-wrap:hover .auth-logo-name { color: #34d399; }
.auth-logo-icon {
  font-size: 3rem; display: block; margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(13,148,103,0.5));
  animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.auth-logo-name { color: #ffffff; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.5px; transition: color 0.15s; }
.auth-logo-tagline { color: rgba(255,255,255,0.5); font-size: 0.8rem; margin-top: 2px; }
.auth-title { color: #ffffff; font-size: 1.35rem; font-weight: 700; margin: 0 0 6px; text-align: center; }
.auth-subtitle { color: rgba(255,255,255,0.55); font-size: 0.875rem; text-align: center; margin: 0 0 28px; line-height: 1.5; }
.auth-subtitle strong { color: rgba(255,255,255,0.85); }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; color: rgba(255,255,255,0.7); font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.3px; }
.auth-field input {
  width: 100%; padding: 13px 16px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; color: #ffffff; font-size: 0.95rem; font-family: inherit;
  transition: var(--transition); box-sizing: border-box;
}
.auth-field input::placeholder { color: rgba(255,255,255,0.3); }
.auth-field input:focus {
  outline: none; border-color: rgba(15,110,86,0.8);
  background: rgba(255,255,255,0.12); box-shadow: 0 0 0 3px rgba(15,110,86,0.2);
}
.auth-field input:-webkit-autofill, .auth-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px rgba(30,27,75,0.9) inset;
  -webkit-text-fill-color: #ffffff;
}
.auth-btn {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: var(--transition);
  font-family: inherit; margin-top: 8px; position: relative; overflow: hidden;
}
.auth-btn-primary {
  background: linear-gradient(135deg, #0f6e56, #2f9273); color: #ffffff;
  box-shadow: 0 4px 20px rgba(15,110,86,0.4);
}
.auth-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(15,110,86,0.5); }
.auth-btn-primary:active { transform: translateY(0); }
.auth-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.auth-btn-secondary {
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.12); margin-top: 10px;
}
.auth-btn-secondary:hover { background: rgba(255,255,255,0.13); color: #ffffff; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 0.875rem; color: rgba(255,255,255,0.5); }
.auth-switch a, .auth-switch button {
  /* Was a leftover violet (#a5b4fc) from before the teal rebrand -- too
     muddy/low-contrast against this screen's dark navy-to-teal background.
     #34d399 matches --accent-emerald-light, already used elsewhere in the
     app as the "bright accent on a dark surface" tone. */
  color: #34d399; font-weight: 600; cursor: pointer; background: none; border: none;
  padding: 0; font-size: inherit; font-family: inherit;
  text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s;
}
.auth-switch a:hover, .auth-switch button:hover { color: #ffffff; }
.auth-error {
  display: none; padding: 10px 14px;
  background: rgba(224,38,79,0.15); border: 1px solid rgba(224,38,79,0.3);
  border-radius: 10px; color: #fca5a5; font-size: 0.85rem; margin-bottom: 14px; line-height: 1.5;
}
.auth-error.visible { display: block; animation: authErrorShake 0.4s ease; }
@keyframes authErrorShake {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }    60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.auth-success {
  display: none; padding: 10px 14px;
  background: rgba(13,148,103,0.15); border: 1px solid rgba(13,148,103,0.3);
  border-radius: 10px; color: #6ee7b7; font-size: 0.85rem; margin-bottom: 14px;
}
.auth-success.visible { display: block; }
.otp-boxes { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
.otp-box {
  width: 52px; height: 64px; text-align: center;
  font-size: 1.75rem; font-weight: 700; font-family: 'Courier New', monospace;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.2);
  border-radius: 12px; color: #ffffff; transition: var(--transition);
  caret-color: #a5b4fc; -moz-appearance: textfield;
}
.otp-box::-webkit-outer-spin-button, .otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp-box:focus {
  outline: none; border-color: #0f6e56; background: rgba(15,110,86,0.15);
  box-shadow: 0 0 0 3px rgba(15,110,86,0.25); transform: scale(1.05);
}
.otp-box.filled { border-color: #0d9467; background: rgba(13,148,103,0.12); color: #6ee7b7; }
.otp-timer { text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.45); margin-top: -4px; margin-bottom: 12px; }
.otp-timer.urgent { color: #fca5a5; }
.otp-resend-wrap { text-align: center; margin-top: 12px; }
.otp-resend-btn {
  background: none; border: none; color: #a5b4fc; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; padding: 4px 8px; border-radius: 6px; font-family: inherit; transition: var(--transition);
}
.otp-resend-btn:hover:not(:disabled) { color: #c7d2fe; background: rgba(165,180,252,0.1); }
.otp-resend-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.auth-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: #ffffff;
  border-radius: 50%; animation: spin 0.7s linear infinite;
  vertical-align: middle; margin-right: 8px;
}
.password-strength { margin-top: 6px; height: 3px; border-radius: 99px; background: rgba(255,255,255,0.1); overflow: hidden; transition: var(--transition); }
.password-strength-fill { height: 100%; border-radius: 99px; transition: var(--transition); width: 0%; }
.strength-weak   { background: #f43f5e; width: 33%; }
.strength-medium { background: #f59e0b; width: 66%; }
.strength-strong { background: #0d9467; width: 100%; }
.password-hint { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin-top: 4px; }
.auth-migration-banner { display: none; margin: 12px 0; padding: 12px 14px; background: rgba(217,119,6,0.12); border: 1px solid rgba(217,119,6,0.3); border-radius: 10px; color: #fcd34d; font-size: 0.83rem; line-height: 1.5; }
.auth-migration-banner.visible { display: block; }
/* ── User Avatar Menu ─────────────────────────── */
.user-menu-wrap { position: relative; }
.user-avatar-btn {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 99px;
  cursor: pointer; transition: var(--transition); color: var(--text-primary);
  font-size: 0.85rem; font-weight: 600; font-family: inherit;
}
.user-avatar-btn:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.user-avatar-circle {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #0f6e56, #2f9273);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.user-avatar-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-avatar-chevron { width: 12px; height: 12px; opacity: 0.5; transition: transform 0.2s; }
.user-menu-wrap.open .user-avatar-chevron { transform: rotate(180deg); }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-xl); min-width: 200px; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97);
  transition: var(--transition); z-index: 500;
}
.user-menu-wrap.open .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.user-dropdown-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.user-dropdown-name { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.user-dropdown-email { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.user-dropdown-role { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; background: var(--accent-violet-dim); color: var(--accent-violet); }
.user-dropdown-role.admin { background: rgba(217,119,6,0.1); color: #d97706; }
.user-dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  font-size: 0.875rem; color: var(--text-secondary); cursor: pointer;
  transition: background 0.15s; font-family: inherit; background: none; border: none; width: 100%; text-align: left;
}
.user-dropdown-item:hover { background: var(--bg-input); color: var(--text-primary); }
.user-dropdown-item.danger { color: var(--accent-rose); }
.user-dropdown-item.danger:hover { background: var(--accent-rose-dim); }
.user-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
/* ── Notification Bell (extends the pre-existing .notif-panel/.notif-btn/
   .notif-badge/.notif-item system above -- see "NOTIFICATION PANEL") ── */
.notif-panel-empty { padding: 24px 16px; text-align: center; font-size: 0.83rem; color: var(--text-muted); }
.notif-item-title { font-weight: 600; }
.notif-time.overdue { color: var(--accent-rose); font-weight: 700; }
.notif-time.today { color: #d97706; font-weight: 700; }
/* ── Admin Panel ─────────────────────────────── */
#admin-modal .modal { max-width: 800px; }
.admin-stats-bar { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-stat { flex: 1; min-width: 120px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; text-align: center; }
.admin-stat-num { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.admin-stat-num.rose    { color: var(--accent-rose); }
.admin-stat-num.emerald { color: var(--accent-emerald); }
.admin-stat-num.amber   { color: var(--accent-amber); }
.admin-stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.admin-table-wrap { overflow-x: auto; }
.admin-user-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-user-table th { text-align: left; padding: 10px 12px; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3px; border-bottom: 2px solid var(--border); text-transform: uppercase; }
.admin-user-table td { padding: 12px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
.admin-user-table tr:last-child td { border-bottom: none; }
.admin-user-table tr:hover td { background: var(--bg-input); }
.admin-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 0.72rem; font-weight: 700; }
.admin-badge-admin { background: rgba(217,119,6,0.1); color: #d97706; }
.admin-badge-moderator { background: var(--accent-sky-dim); color: var(--accent-sky); }
.admin-badge-user { background: var(--accent-violet-dim); color: var(--accent-violet); }
.admin-badge-active { background: var(--accent-emerald-dim); color: var(--accent-emerald); }
.admin-badge-inactive { background: var(--accent-rose-dim); color: var(--accent-rose); }
.admin-action-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); font-size: 0.75rem; cursor: pointer; font-family: inherit; transition: var(--transition); margin-right: 4px; }
.admin-action-btn:hover { background: var(--bg-card-hover); }
.admin-action-btn.danger { color: var(--accent-rose); border-color: rgba(224,38,79,0.3); }
.admin-action-btn.danger:hover { background: var(--accent-rose-dim); }

/* ── Admin Portal redesign: dashboard cards, toolbar, modern table, row menu ── */
.admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.admin-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}
.admin-card-icon { font-size: 1.5rem; line-height: 1; }
.admin-card-num { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.admin-card-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.admin-card-good { border-color: rgba(13,148,103,0.3); }
.admin-card-good .admin-card-num { color: var(--accent-emerald); }
.admin-card-warn { border-color: rgba(217,119,6,0.3); }
.admin-card-warn .admin-card-num { color: #d97706; }

.admin-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.admin-search-input {
  flex: 1 1 260px;
  padding: 9px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
}
.admin-filter-select {
  padding: 9px 12px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
}
.admin-results-count { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 10px; }

.admin-users-table-modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.admin-users-table-modern th {
  text-align: left;
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
}
.admin-users-table-modern td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
}
.admin-users-table-modern tr:last-child td { border-bottom: none; }
.admin-users-table-modern tr:hover td { background: var(--bg-input); }

.admin-badge-rel-primary { background: rgba(217,119,6,0.1); color: #d97706; }
.admin-badge-rel-adult { background: var(--accent-sky-dim); color: var(--accent-sky); }
.admin-badge-rel-child { background: var(--accent-violet-dim); color: var(--accent-violet); }
.admin-linked-chip { font-size: 0.72rem; color: var(--text-secondary); margin-top: 4px; }

.admin-kebab-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.admin-kebab-btn:hover { background: var(--bg-card-hover); }

.admin-row-menu {
  position: absolute;
  z-index: 9000;
  min-width: 210px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.18));
  flex-direction: column;
  padding: 6px;
  gap: 2px;
}
.admin-row-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
}
.admin-row-menu button:hover { background: var(--bg-input); }
.admin-row-menu button.danger { color: var(--accent-rose); }
.admin-row-menu button.danger:hover { background: var(--accent-rose-dim); }

/* ── Generic list/form base (record-list + inline-form are used all over
   the app -- Admin/Audit Log/Backup&Data/etc -- but never had any rules of
   their own, so they rendered as bare browser-default bullet lists and
   unstyled buttons. This is a safe, purely additive base: nothing currently
   relies on the old unstyled look, so this can only make things look less
   plain, never break a layout. ── */
.record-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding: 0; }
.record-list:last-child { margin-bottom: 0; }
.record-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: var(--transition);
}
.record-list li:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.record-list li > span:first-child { color: var(--text-primary); font-weight: 500; }
.record-list li > span:last-child { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.inline-form input, .inline-form select { width: auto; flex: 1 1 160px; min-width: 0; }
.inline-form button { flex: 0 0 auto; }
/* admin.js's collapsible per-user permission grid row isn't a name+actions
   row like every other record-list item -- it holds a whole panel (table +
   form), so it shouldn't get the flex row treatment above. */
.record-list li.permGridRow { display: block; padding: 0; border: none; background: none; }
.record-list li.permGridRow:hover { background: none; }

/* ── Support ticket threads: accordion-style cards with a proper collapse
   affordance (clicking the header, or the in-thread Close button, or the
   same "View Thread" toggle again, all collapse it) -- replaces the old
   "View Thread" behavior that only ever appended content with no way back.
   Shared by staff.js's Staff Console Tickets tab and support.js's
   logged-in "Your tickets" card. ── */
.ticket-board { display: flex; flex-direction: column; gap: 10px; margin: 0 0 4px; }
.ticket-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
  transition: var(--transition);
}
.ticket-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  flex-wrap: wrap;
}
.ticket-card-header:hover { background: var(--bg-card-hover); }
.ticket-card-icon { font-size: 1.05rem; flex-shrink: 0; }
.ticket-card-main { flex: 1; min-width: 160px; }
.ticket-card-subject { font-weight: 600; color: var(--text-primary); font-size: 0.88rem; }
.ticket-card-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.ticket-chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s; color: var(--text-muted); }
.ticket-card.open .ticket-chevron { transform: rotate(180deg); }
.ticket-card-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); }
.ticket-card.open .ticket-card-body { display: block; padding-top: 12px; }
.ticket-loading { padding: 8px 0; color: var(--text-muted); font-size: 0.85rem; }
.ticket-thread-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  max-height: 340px;
  overflow-y: auto;
  padding: 2px;
}
.ticket-msg { max-width: 82%; display: flex; flex-direction: column; }
.ticket-msg-staff { align-self: flex-start; align-items: flex-start; }
.ticket-msg-customer { align-self: flex-end; align-items: flex-end; }
.ticket-msg-sender {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ticket-msg-bubble { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.85rem; line-height: 1.45; word-break: break-word; }
.ticket-msg-staff .ticket-msg-bubble { background: var(--accent-violet-dim); color: var(--text-primary); border-bottom-left-radius: 3px; }
.ticket-msg-customer .ticket-msg-bubble { background: var(--bg-input); color: var(--text-primary); border-bottom-right-radius: 3px; }
.ticket-msg-time { font-size: 0.63rem; color: var(--text-muted); margin-top: 3px; }

/* ── Admin Portal (Staff Console) header + role badges ── */
.staff-portal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.staff-portal-header .card-desc { margin-bottom: 0; max-width: 640px; }
.admin-badge-master {
  background: linear-gradient(135deg, #d97706, #a35a05);
  color: #fff;
  border: none;
}

@media (max-width: 480px) {
  .auth-screen { padding: 32px 24px; }
  .otp-boxes { gap: 7px; }
  .otp-box { width: 44px; height: 56px; font-size: 1.5rem; }
  .user-avatar-name { display: none; }
  .user-avatar-btn { padding: 5px; }
}

/* ===== STAFF CONSOLE (admin/moderator only) ===== */
#staff-console {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--bg-body);
  overflow-y: auto;
}
#staff-console.hidden { display: none; }
.staff-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.staff-console-brand { display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
.staff-console-user { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--text-secondary); }
.staff-console-body { padding: 24px 28px 48px; max-width: 1440px; margin: 0 auto; }

/* ===== STAFF CONSOLE: TABS ===== */
.staff-console-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.staff-console-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.staff-console-tab.active {
  color: var(--accent-emerald);
  border-bottom-color: var(--accent-emerald);
}
.staff-tab-badge {
  background: var(--accent-rose);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}
.staff-tab-panel { display: none; }
.staff-tab-panel.active { display: block; }

/* ===== STAFF CONSOLE: SUPPORT TICKET FILTERS ===== */
.staff-ticket-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.staff-ticket-filter-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
}
.staff-ticket-filter-btn.active {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #fff;
}
.my-ticket-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.my-ticket-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.my-ticket-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.my-ticket-status-open { background: var(--accent-amber-dim, rgba(217,119,6,0.15)); color: var(--accent-amber, #f59e0b); }
.my-ticket-status-in_progress { background: var(--accent-sky-dim, rgba(12,133,153,0.15)); color: var(--accent-sky, #0ea5e9); }
.my-ticket-status-resolved { background: var(--accent-emerald-dim, rgba(13,148,103,0.15)); color: var(--accent-emerald, #0d9467); }
.my-ticket-reply {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: var(--bg-input);
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  white-space: pre-wrap;
}

/* ===== TICKET CONVERSATION THREAD ===== */
.ticket-thread-messages {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
}
.ticket-thread-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.ticket-thread-msg-user {
  align-self: flex-start;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.ticket-thread-msg-staff {
  align-self: flex-end;
  background: var(--accent-emerald);
  color: #fff;
}
.ticket-thread-msg-meta {
  font-size: 0.68rem;
  opacity: 0.75;
  margin-bottom: 3px;
  font-weight: 600;
}

/* ===== SETTINGS: MANAGE CATEGORIES ===== */
.category-manager-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.category-manager-tab {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
}
.category-manager-tab.active {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #fff;
}
.category-manager-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 20px;
}
.category-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 8px 5px 10px;
  font-size: 0.82rem;
}
.category-chip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.category-chip-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 2px;
  line-height: 1;
}
.category-chip-delete:hover { color: var(--accent-rose); }
.category-manager-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.category-manager-add-row input[type="text"] {
  flex: 1;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.85rem;
}
.category-manager-add-row input[id="categoryManagerNewIcon"] {
  width: 56px;
  flex: none;
  text-align: center;
}
.category-manager-add-row input[type="color"] {
  width: 36px;
  height: 34px;
  padding: 2px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  cursor: pointer;
}

/* ===== SAVINGS PAGE ===== */
.savings-summary-bar { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.savings-log-item-deposit .compact-amount { color: var(--accent-emerald); }
.savings-log-item-withdrawal .compact-amount { color: var(--accent-rose); }

.k401-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.k401-result-item {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.k401-result-label { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.k401-result-value { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); }
.k401-result-value.k401-monthly { font-size: 1rem; margin-top: 6px; }
.k401-result-value.k401-total { color: var(--accent-emerald); }
.k401-result-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 1px; }

/* ===== TICKET UNSEEN ACTIVITY INDICATOR ===== */
.ticket-unseen-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-emerald);
  margin-right: 6px;
  vertical-align: middle;
}

/* ===== EMOJI PICKER (category icons) ===== */
.emoji-picker-wrap { position: relative; flex: none; }
.emoji-picker-trigger {
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-picker-trigger:hover { border-color: var(--accent-emerald); }
.emoji-picker-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 232px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.emoji-picker-option {
  background: none;
  border: none;
  font-size: 1.1rem;
  padding: 5px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}
.emoji-picker-option:hover { background: var(--bg-input); }

/* ===== CLICKABLE TICKET NOTIFICATIONS ===== */
.notif-item-clickable { cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.notif-item-clickable:hover { background: var(--bg-card); border-color: var(--accent-emerald); }
.notif-dismiss-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
  align-self: flex-start;
}
.notif-dismiss-btn:hover { color: var(--accent-rose); }

/* ===== GUEST (NO-ACCOUNT) TICKET INDICATORS ===== */
.guest-ticket-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--accent-amber-dim, rgba(217,119,6,0.15));
  color: var(--accent-amber, #f59e0b);
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
}
.ticket-guest-banner {
  background: var(--accent-amber-dim, rgba(217,119,6,0.12));
  border: 1px solid var(--accent-amber, #f59e0b);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.ticket-resolved-banner {
  background: var(--accent-emerald-dim, rgba(13,148,103,0.12));
  border: 1px solid var(--accent-emerald, #0d9467);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* ===== 401(K) LOCKED STATE ===== */
#k401Salary:disabled, #k401ContributionPct:disabled, #k401MatchPct:disabled {
  background: var(--bg-body);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.85;
}

/* ===== MONTH-TO-MONTH COMPARISON ===== */
.month-compare-grid { overflow-x: auto; }
.month-compare-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.88rem; }
.month-compare-table th {
  text-align: right;
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border);
}
.month-compare-table th:first-child { text-align: left; }
.month-compare-table th:first-child, .month-compare-table td:first-child { width: 22%; }
.month-compare-table th:not(:first-child), .month-compare-table td:not(:first-child) { width: 26%; }
.month-compare-table td { padding: 10px; text-align: right; border-bottom: 1px solid var(--border); }
.month-compare-table td:first-child { text-align: left; }
.month-compare-table tr:last-child td { border-bottom: none; }
.month-compare-label { font-weight: 600; color: var(--text-primary); }
.month-compare-val { font-weight: 700; color: var(--text-primary); }
.month-compare-delta { font-weight: 700; white-space: nowrap; }
.month-compare-current-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  background: var(--accent-emerald-dim, rgba(13,148,103,0.15));
  color: var(--accent-emerald, #0d9467);
  padding: 1px 6px;
  border-radius: 20px;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: normal;
}

/* ===== SPENDING ALERTS (overspending highlights) ===== */
.spending-alerts-wrap {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.spending-alerts-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.spending-alert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-rose-dim, rgba(224,38,79,0.08));
  border: 1px solid var(--accent-rose, #f43f5e);
  margin-bottom: 6px;
}
.spending-alert-icon { font-size: 1.1rem; flex-shrink: 0; }
.spending-alert-cat { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.spending-alert-detail { font-size: 0.72rem; color: var(--text-muted); }
.spending-alert-amount { font-size: 0.9rem; font-weight: 800; color: var(--accent-rose, #f43f5e); white-space: nowrap; }

/* ===== COMPARE PERIODS (custom range / YoY / MoM) ===== */
.compare-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.compare-preset-btn.active {
  background: var(--accent-violet);
  color: #fff;
  border-color: var(--accent-violet);
}
.compare-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.compare-range-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.compare-range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.compare-range-inputs input[type="date"] {
  padding: 7px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.82rem;
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.compare-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border);
}
.compare-table td { padding: 10px; border-bottom: 1px solid var(--border); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-label { font-weight: 600; color: var(--text-primary); }
.compare-val { font-weight: 700; color: var(--text-primary); }
.compare-range-caption {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.compare-no-data-tag {
  font-size: 0.68rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text-muted);
}
.compare-no-data-caption {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 10px;
}

/* Family Accounts: per-user, per-module permission grid (Admin screen) */
.perm-grid-panel {
  background: var(--bg-secondary, rgba(0,0,0,0.02));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 4px 0 12px;
}
.perm-grid-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 10px 0; }
.perm-grid-table th {
  text-align: center;
  padding: 6px 8px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border);
}
.perm-grid-table th:first-child { text-align: left; }
.perm-grid-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); }
.perm-grid-table td:first-child { text-align: left; font-weight: 600; }
.perm-grid-table tr:last-child td { border-bottom: none; }

/* Every plain (non-toggle-switch) checkbox app-wide -- the permission grid's
   Hide/View/Add/Edit/Delete boxes, "Kid account", "Autopay", "Add kids
   sub-accounts add-on", the debt include-in-expenses boxes, etc. Without
   this, the global `input, select, textarea { appearance: none; width:
   100%; }` reset above strips native checkbox rendering and stretches it
   to fill its container with nothing to replace it -- so clicking one
   *was* actually toggling its checked state under the hood the whole
   time, it just looked (and felt) completely unresponsive with no visual
   feedback at all. This gives every checkbox its own real size and a
   custom checked/unchecked look, the same fix already applied once to the
   old .family-perm-grid-row variant but never generalized. `input[type=
   "checkbox"]` outranks the plain `input` reset on specificity, so this
   applies cleanly without touching the base rule. */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  position: relative;
  vertical-align: middle;
}
input[type="checkbox"]:hover { border-color: var(--border-hover); }
input[type="checkbox"]:focus { box-shadow: 0 0 0 3px rgba(15,110,86,0.12); }
input[type="checkbox"]:checked {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
}
input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.45; background: var(--bg-card-hover); }
/* Hide is the odd one out in the permission grid -- checking it takes
   access away, the opposite of View/Add/Edit/Delete -- so give it a
   distinct warm color instead of the same green "granted" look. */
input[type="checkbox"].perm-hidden:checked {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
}

/* Audit log: compact "field: old → new" chips shown under an entry's
   action, so "updated users #5" becomes readable as who/what actually
   changed instead of a bare id. */
.audit-change-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.audit-change-chip {
  font-size: 0.7rem;
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== Shared Debt-to-Income (DTI) ratio risk-tier colors -- see
   modules/dti.js. Applied via JS wherever a DTI% is shown (Dashboard's
   Debt Summary widget, Debt Management, Reports, etc.) so the color for a
   given DTI% is always the same across the whole app. Placed at the very
   end of this stylesheet on purpose: these classes are combined at runtime
   with a base class (.admin-stat-num, .widget-value, etc.) that also sets
   `color`, and CSS resolves same-specificity ties by source order, so this
   block needs to come after every other single-class color rule to win. */
.dti-excellent { color: var(--accent-emerald); }
.dti-good      { color: var(--accent-emerald-light); }
.dti-fair      { color: var(--accent-yellow); }
.dti-high      { color: var(--accent-amber); }
.dti-critical  { color: var(--accent-rose); }

/* Generic spin animation -- shared by the Receipt Scanner's progress
   spinner below and (previously unused/undefined) .auth-spinner. */
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== RECEIPT SCANNER (Income & Expenses > Add Expense > Scan Receipt) =====
   The modal itself is injected at runtime by modules/receipt-scanner.js
   (not present in index.html), reusing the app's existing .modal-overlay/
   .modal/.modal-header/.modal-body/.modal-footer chrome -- only the
   scan-specific inner pieces below are new. */
.receipt-scan-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.receipt-scan-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 12px;
  min-height: 100px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.receipt-scan-option:hover, .receipt-scan-option:focus-visible {
  border-color: var(--accent-violet);
  background: var(--accent-violet-dim);
  outline: none;
}
.receipt-scan-option-icon { font-size: 1.9rem; line-height: 1; }

.receipt-scan-preview { display: flex; justify-content: center; margin-bottom: 14px; }
.receipt-scan-preview img {
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  object-fit: contain;
}
.receipt-scan-pdf-badge {
  padding: 16px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.receipt-scan-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.receipt-scan-progress-track {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full, 999px);
  background: var(--bg-input);
  border: 1px solid var(--border);
  overflow: hidden;
}
.receipt-scan-progress-fill {
  height: 100%;
  border-radius: var(--radius-full, 999px);
  background: var(--accent-violet);
  transition: width 0.25s ease;
}

.spinner-ring {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-violet);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .receipt-scan-options { grid-template-columns: 1fr; }
  .receipt-scan-option { min-height: 84px; padding: 18px 12px; }
}

/* ============================================================
   MARKETING SITE (Landing / Pricing / Contact) — Phase 1 of the
   Landing Page & Authentication Redesign. Lives in its own
   full-width #app-marketing container (see index.html/app.js),
   NOT inside .auth-card. Class names below are matched exactly
   against modules/marketing-layout.js, modules/landing.js,
   modules/pricing.js and modules/contact.js's real markup (there
   is no separate ".mkt-container" wrapper element anywhere in
   that markup, so every top-level block below carries its own
   max-width/centering instead of relying on a shared ancestor).
   Reuses the app's existing theme variables so it respects the
   light/dark toggle automatically.
   ============================================================ */

#app-marketing { width: 100%; min-height: 100vh; background: var(--bg-body); color: var(--text-primary); overflow-x: hidden; }
#app-marketing a { text-decoration: none; color: inherit; }
/* #app-marketing's ID selector above (color: inherit) outranks .btn-primary/
   .btn-secondary's plain class selector no matter what order the rules are
   in -- an ID always beats a class in CSS specificity -- so every button
   link in the marketing site was silently inheriting #app-marketing's own
   near-black text color instead of using its own white/secondary color.
   This is what made "Get Started"/"Get Started Free" render with black
   text on a dark violet background. Re-declared here with the ID prefixed
   on, so these two win the specificity fight without needing !important. */
#app-marketing a.btn-primary { color: white; }
#app-marketing a.btn-secondary { color: var(--text-secondary); }
#app-marketing img, #app-marketing svg { max-width: 100%; display: block; }
.mkt-page { display: block; }

/* ---------- Header / Nav (marketing-layout.js) ---------- */
.mkt-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mkt-header.scrolled {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.mkt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
}
.mkt-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-primary);
}
.mkt-logo-icon { font-size: 1.35rem; line-height: 1; }
.mkt-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.mkt-nav-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}
.mkt-nav-link:hover, .mkt-nav-link.active { color: var(--accent-violet); }
.mkt-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkt-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0;
}
.mkt-menu-toggle svg { width: 20px; height: 20px; }
.mkt-mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.mkt-mobile-menu.open { display: flex; }
.mkt-mobile-menu > a {
  padding: 12px 4px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.mkt-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
}
.mkt-mobile-actions .btn { width: 100%; text-align: center; }
.mkt-employee-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 0;
}
.mkt-employee-link:hover { color: var(--accent-violet); }

/* ---------- Hero (landing.js) ---------- */
.mkt-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
}
.mkt-hero-bg {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--accent-violet) 16%, transparent), transparent 60%),
              radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent-sky) 12%, transparent), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
}
.mkt-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.mkt-hero-copy { display: flex; flex-direction: column; }
.mkt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent-violet) 12%, transparent);
  color: var(--accent-violet);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.mkt-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--text-primary);
}
.mkt-hero-subtitle {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 0 28px;
}
.mkt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
/* .btn-primary's base rule (style.css ~L814) sets width:100% for the
   app's stacked auth-form buttons elsewhere -- that leaks into every
   marketing button row that reuses .btn/.btn-primary (hero + every CTA
   section), stretching the primary button to the full row width and
   forcing the secondary button onto its own line instead of sitting
   side-by-side. Reset both here so marketing buttons always size to
   their own content. */
.mkt-hero-actions .btn,
.mkt-cta-inner .btn {
  width: auto;
  margin-top: 0;
}
.mkt-hero-sub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.mkt-hero-trust {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.mkt-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mktHeroFloat 6s ease-in-out infinite;
}
@keyframes mktHeroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.mkt-hero-svg { width: 100%; height: auto; filter: drop-shadow(var(--shadow-lg)); }
.mkt-hero-float-badge {
  position: absolute;
  left: -14px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 18px 12px 14px;
  box-shadow: var(--shadow-lg);
}
.mkt-hero-float-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-sky));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.mkt-hero-float-text strong { display: block; font-size: 0.92rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.mkt-hero-float-text span { display: block; font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 1040px) {
  .mkt-hero-float-badge { left: 4px; padding: 10px 14px 10px 10px; }
}
@media (max-width: 640px) {
  .mkt-hero-float-badge { display: none; }
}

/* Hero CTAs get a slightly more premium pill treatment than the app's
   default form buttons -- scoped to .mkt-hero-actions/.mkt-cta-inner only,
   the base .btn-primary/.btn-secondary radius used everywhere else in the
   app (auth forms, settings, modals) is untouched. */
.mkt-hero-actions .btn-primary,
.mkt-cta-inner .btn-primary {
  border-radius: var(--radius-full);
  box-shadow: 0 10px 26px rgba(15,110,86,0.35);
}
.mkt-hero-actions .btn-primary:hover,
.mkt-cta-inner .btn-primary:hover {
  box-shadow: 0 12px 30px rgba(15,110,86,0.45);
}
.mkt-hero-actions .btn-secondary,
.mkt-cta-inner .btn-secondary {
  border-radius: var(--radius-full);
}

/* ---------- Buttons (marketing-specific sizing on top of existing .btn) ---------- */
.mkt-btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--radius-md); }
.mkt-btn-sm { padding: 8px 16px; font-size: 0.85rem; border-radius: var(--radius-sm); }

/* ---------- Generic section scaffolding ---------- */
.mkt-section { padding: 72px 0; }
.mkt-section-alt { background: var(--bg-card); }
.mkt-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
  padding: 0 24px;
}
.mkt-section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 10px 0 14px;
  color: var(--text-primary);
}
.mkt-section-head p {
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Feature grid ---------- */
.mkt-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.mkt-feature-card {
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mkt-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mkt-feature-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--accent-violet) 14%, transparent);
}
.mkt-feature-card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.mkt-feature-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ---------- Benefit grid (2-col, larger icon + text pairing) ---------- */
.mkt-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.mkt-benefit-card {
  display: flex;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.mkt-benefit-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: color-mix(in srgb, var(--accent-emerald) 15%, transparent);
}
.mkt-benefit-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); }
.mkt-benefit-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* ---------- Stats ---------- */
.mkt-stats-section {
  padding: 56px 0;
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-violet-light));
}
.mkt-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.mkt-stat-value {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}
.mkt-stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}

/* ---------- Mock browser preview window ---------- */
.mkt-preview-window {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 920px;
  margin: 0 24px;
  margin: 0 auto;
}
.mkt-preview-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
}
.mkt-preview-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mkt-preview-url {
  margin-left: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: monospace;
}
.mkt-preview-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  min-height: 240px;
}
.mkt-preview-sidebar {
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mkt-preview-side-item {
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--border);
  opacity: 0.5;
}
.mkt-preview-side-item.active { background: var(--accent-violet); opacity: 0.8; }
.mkt-preview-main { display: flex; flex-direction: column; gap: 16px; }
.mkt-preview-widgets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mkt-preview-widget { height: 60px; border-radius: var(--radius-sm); }
.mkt-preview-chart {
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  padding: 10px 14px;
}
.mkt-preview-chart svg { width: 100%; height: 70px; }
.mkt-preview-rows { display: flex; flex-direction: column; gap: 8px; }
.mkt-preview-row { height: 14px; border-radius: var(--radius-full); background: var(--bg-input); }
.mkt-preview-row:nth-child(2) { width: 85%; }
.mkt-preview-row:nth-child(3) { width: 65%; }

/* ---------- Testimonials ---------- */
.mkt-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.mkt-testimonial-card {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mkt-stars { color: var(--accent-amber); font-size: 0.95rem; letter-spacing: 2px; }
.mkt-testimonial-quote {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}
.mkt-testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkt-testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-violet) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.mkt-testimonial-name { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
.mkt-testimonial-role { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- FAQ accordion (landing.js + pricing.js) ---------- */
.mkt-faq-list {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkt-faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
}
.mkt-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: inherit;
}
.mkt-faq-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
  color: var(--text-muted);
}
.mkt-faq-item.open .mkt-faq-chevron { transform: rotate(180deg); color: var(--accent-violet); }
.mkt-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 20px;
}
.mkt-faq-item.open .mkt-faq-answer {
  max-height: 400px;
  padding: 0 20px 18px;
}
.mkt-faq-answer p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- CTA section ---------- */
.mkt-cta-section { padding: 64px 24px; }
.mkt-cta-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 40px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-sky));
  color: #fff;
}
.mkt-cta-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  margin: 0 0 14px;
  color: #fff;
}
.mkt-cta-inner p {
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  margin: 0 0 28px;
}
/* !important here is deliberate and narrowly scoped to this one selector:
   this button's text was rendering invisibly (emoji visible, label text
   not) despite this rule's specificity already outranking .btn-primary's
   base color:white -- forcing it removes any ambiguity about which color
   wins, whatever the exact cause. */
.mkt-cta-inner .btn-primary { background: #fff !important; color: var(--accent-violet) !important; border-color: #fff; }
.mkt-cta-inner .btn-primary:hover { opacity: 0.92; }
.mkt-cta-inner .btn-secondary { background: transparent; color: #fff !important; border-color: rgba(255,255,255,0.5); }
.mkt-cta-inner .btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* ---------- Footer (marketing-layout.js) ---------- */
.mkt-footer {
  padding: 56px 0 28px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.mkt-footer-inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
}
.mkt-footer-tagline {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 14px 0 18px;
  max-width: 280px;
}
.mkt-social-row { display: flex; gap: 10px; }
.mkt-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mkt-social-btn:hover { background: var(--accent-violet); border-color: var(--accent-violet); }
.mkt-footer-col h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.mkt-footer-col a {
  display: block;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 7px 0;
}
.mkt-footer-col a:hover { color: var(--accent-violet); }
.mkt-footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mkt-footer-employee-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.mkt-footer-employee-link:hover { color: var(--accent-violet); }
@media (max-width: 480px) {
  .mkt-footer-bottom { justify-content: center; text-align: center; }
}

/* ---------- Page hero (Pricing / Contact secondary pages) ---------- */
.mkt-page-hero {
  padding: 56px 24px 20px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.mkt-page-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  margin: 10px 0 14px;
  color: var(--text-primary);
}
.mkt-page-hero p {
  font-size: 1.02rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- Pricing (pricing.js) ---------- */
.mkt-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}
.mkt-pricing-card {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.mkt-pricing-card.highlight { border-color: var(--accent-violet); box-shadow: var(--shadow-md); }
.mkt-pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-violet);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mkt-pricing-icon { font-size: 1.8rem; margin-bottom: 10px; }
.mkt-pricing-card h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; color: var(--text-primary); }
.mkt-pricing-desc { font-size: 0.87rem; color: var(--text-secondary); margin: 0 0 20px; }
.mkt-pricing-amount { display: flex; align-items: baseline; gap: 4px; }
.mkt-pricing-price { font-size: 2.4rem; font-weight: 800; color: var(--text-primary); }
.mkt-pricing-period { font-size: 0.9rem; color: var(--text-muted); }
.mkt-pricing-alt { font-size: 0.82rem; color: var(--text-muted); margin: 4px 0 20px; }
.mkt-pricing-features {
  list-style: none;
  margin: 20px 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.mkt-pricing-features li { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.mkt-pricing-cta { width: 100%; text-align: center; }
.mkt-addon-card {
  max-width: 820px;
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent-sky) 8%, var(--bg-card));
  border: 1px dashed var(--accent-sky);
}
.mkt-addon-icon { font-size: 1.8rem; flex-shrink: 0; }
.mkt-addon-copy { flex: 1; min-width: 200px; }
.mkt-addon-copy h3 { font-size: 0.98rem; font-weight: 700; margin: 0 0 4px; color: var(--text-primary); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mkt-addon-copy p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.mkt-addon-price { font-size: 1.05rem; font-weight: 800; color: var(--accent-sky); white-space: nowrap; }

/* ---------- Contact (contact.js) ---------- */
.mkt-contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.mkt-contact-info { display: flex; flex-direction: column; gap: 4px; }
.mkt-contact-info-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.mkt-contact-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-violet) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.mkt-contact-info-item h4 { font-size: 0.92rem; font-weight: 700; margin: 0 0 4px; color: var(--text-primary); }
.mkt-contact-info-item p, .mkt-contact-info-item a { font-size: 0.87rem; color: var(--text-secondary); margin: 0; }
.mkt-contact-form {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.mkt-contact-success {
  text-align: center;
  padding: 24px 20px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-emerald) 12%, transparent);
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---------- Auth: portal switch link (User <-> Employee login, auth.js) ---------- */
.auth-portal-switch {
  text-align: center;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.auth-portal-switch a { color: var(--accent-violet); font-weight: 600; }

/* ============================================================
   Marketing responsive breakpoints
   ============================================================ */
@media (max-width: 960px) {
  .mkt-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .mkt-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .mkt-testimonial-grid { grid-template-columns: 1fr; }
  .mkt-hero-inner { grid-template-columns: 1fr; }
  .mkt-hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
  .mkt-contact-grid { grid-template-columns: 1fr; }
  .mkt-footer-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .mkt-nav { display: none; }
  .mkt-header-actions { display: none; }
  .mkt-menu-toggle { display: flex; }
  .mkt-benefit-grid { grid-template-columns: 1fr; }
  .mkt-pricing-grid { grid-template-columns: 1fr; }
  .mkt-preview-body { grid-template-columns: 1fr; }
  .mkt-preview-sidebar { display: none; }
  .mkt-preview-widgets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .mkt-feature-grid { grid-template-columns: 1fr; }
  .mkt-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .mkt-section { padding: 52px 0; }
  .mkt-hero { padding: 48px 0 40px; }
  .mkt-footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .mkt-pricing-card { padding: 26px 20px; }
  .mkt-addon-card { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ============================================================
   Staff Console > Homepage CMS editor (modules/cms/cms-editor.js)
   ============================================================ */
.cms-section-card { margin-bottom: 20px; }
.cms-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.cms-section-head h3 { margin: 0 0 4px; font-size: 1.05rem; }
.cms-updated-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 16px;
  font-style: italic;
}
.cms-subhead {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 20px 0 10px;
}
.cms-repeater {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.cms-repeater-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
}
.cms-repeater-row-fields {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.cms-repeater-row .form-group { margin-bottom: 0; }
.cms-repeater-remove { flex-shrink: 0; margin-top: 4px; }
.cms-image-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cms-image-row input[type="text"] { flex: 1; min-width: 200px; }
.cms-image-preview { margin-top: 10px; }
.cms-image-preview img {
  max-width: 220px;
  max-height: 140px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  object-fit: contain;
}
.cms-footer-column {
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.cms-footer-column [data-col-links] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

@media (max-width: 700px) {
  .cms-repeater-row { flex-direction: column; }
  .cms-repeater-row-fields { grid-template-columns: 1fr; }
}

/* ============================================================
   Enterprise Admin Portal shell -- grouped left-nav sidebar
   replacing the old flat horizontal tab bar. Master/Admin only;
   Moderators keep the old single-screen console (no sidebar).

   This is now the ONLY sidebar for platform staff -- the app-wide
   outer sidebar (and mobile bottom-nav/hamburger) are hidden
   entirely via the .staff-shell rules below (see nav.js), so
   .admin-shell owns the full page edge-to-edge beneath the 64px
   topbar instead of sitting nested inside a second, redundant
   outer sidebar.
   ============================================================ */
.staff-shell .page-content { padding: 0; max-width: none; }
.staff-shell .main-content { margin-left: 0; }
.staff-shell .sidebar,
.staff-shell #bottomNav,
.staff-shell .sidebar-toggle,
.staff-shell #fabContainer { display: none; }

.admin-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 64px);
}
.admin-sidebar {
  flex: 0 0 250px;
  width: 250px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 64px;
  align-self: flex-start;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 18px 12px 24px;
}
.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin-sidebar-brand-icon { font-size: 1.4rem; }
.admin-sidebar-brand-name { font-size: 0.94rem; font-weight: 800; color: #fff; display: block; }
.admin-sidebar-brand-tag { font-size: 0.66rem; color: var(--text-sidebar); display: block; }

.admin-main {
  flex: 1;
  min-width: 0;
  padding: 26px 32px 80px;
}

.admin-nav-standalone {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-sidebar-active);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  margin-bottom: 10px;
}
.admin-nav-standalone:hover { background: rgba(255,255,255,0.08); }
.admin-nav-standalone.active { background: var(--accent-violet); color: #fff; }

.admin-nav-group { margin-bottom: 4px; }
.admin-nav-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.4);
}
.admin-nav-group-header:hover { color: rgba(255,255,255,0.7); }
.admin-nav-chevron { transition: transform 0.15s ease; font-size: 0.7rem; }
.admin-nav-group.expanded .admin-nav-chevron { transform: rotate(180deg); }
.admin-nav-group-items {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding-left: 4px;
}
.admin-nav-group.expanded .admin-nav-group-items { display: flex; }

.admin-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-sidebar);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-nav-item.active { background: var(--accent-violet); color: #fff; }
.admin-nav-item.coming-soon { color: rgba(255,255,255,0.3); }
.admin-soon-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}
.admin-nav-item.active .admin-soon-badge { background: rgba(255,255,255,0.25); color: #fff; }

.admin-coming-soon { text-align: center; padding: 48px 24px; }
.admin-coming-soon-icon { font-size: 2.6rem; margin-bottom: 12px; }
.admin-coming-soon h3 { margin: 0 0 8px; }
.admin-coming-soon .card-desc { max-width: 460px; margin: 0 auto; }

.admin-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.admin-dashboard-stat-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-align: center;
}
.admin-dashboard-stat-icon { font-size: 1.6rem; margin-bottom: 8px; }
.admin-dashboard-stat-value { font-size: 1.7rem; font-weight: 800; color: var(--text-primary); }
.admin-dashboard-stat-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; min-height: 0; }
  .admin-sidebar {
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    gap: 6px;
    padding: 12px;
  }
  .admin-sidebar-brand { display: none; }
  .admin-nav-standalone { width: auto; margin-bottom: 0; white-space: nowrap; }
  .admin-nav-group { width: auto; }
  .admin-nav-group-items { flex-direction: row; }
  .admin-main { padding: 20px 16px 80px; }
  .admin-dashboard-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Homepage CMS workspace toolbar + live preview (Phase 1)
   ============================================================ */
.cms-workspace-note { margin-bottom: 16px; }
.cms-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 15;
  margin-bottom: 6px;
}
.cms-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
}
.cms-mode-btn {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
}
.cms-mode-btn.active { background: var(--bg-card); color: var(--accent-violet); box-shadow: var(--shadow-xs); }

/* Income & Expenses page: the "Set Budget" button opens #budgetTypeModal
   first, asking Flat vs Category -- these two big option buttons are its
   body. Picking one immediately switches budgetMode (see expenses.js's
   setBudgetMode()); picking "flat" then opens the existing #budgetModal
   number-entry popup right after. */
.budget-type-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.budget-type-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.budget-type-option:hover { border-color: var(--accent-violet); background: var(--bg-card); }
.budget-type-icon { font-size: 1.3rem; }
.budget-type-label { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.budget-type-desc { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; }
.cms-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cms-toolbar-hint { font-size: 0.8rem; color: var(--text-muted); }

.cms-status-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.cms-status-live { background: color-mix(in srgb, var(--accent-emerald) 15%, transparent); color: var(--accent-emerald); }
.cms-status-draft { background: color-mix(in srgb, var(--accent-amber) 18%, transparent); color: var(--accent-amber); }

.cms-preview-frame-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-body);
}
#cmsPreviewFrame {
  width: 100%;
  height: calc(100vh - 220px);
  min-height: 500px;
  border: none;
  display: block;
  background: #fff;
}

@media (max-width: 700px) {
  .cms-toolbar { flex-direction: column; align-items: stretch; }
  .cms-toolbar-actions { justify-content: space-between; }
}