/* ═══════════════════════════════════════════════════════════
   ZONINGA DESIGN SYSTEM
   CSS Custom Properties for Light/Dark Mode
   Brand (2026 rebrand): green lens + citron trend line.
   Fonts are SELF-HOSTED under static/fonts/ — no Google Fonts
   origins in the CSP (rule 25). Space Grotesk + Public Sans are
   variable fonts; IBM Plex Mono ships as static 400/500.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-var.87c506d88b9f.woff2") format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/public-sans-var.e4c9b081863a.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format('woff2');
}

/* ─── BRAND CONSTANTS (theme-independent) ───
   The --z-* tokens are the raw brand palette. Theme blocks below map
   them onto the app's semantic tokens; components should keep using
   the semantic tokens (--accent, --text, …) so the gamification
   themes keep working. */
:root {
  --z-green: #10312A;        /* brand, headings, dark surfaces */
  --z-citron: #8DB13A;       /* primary action, approved, live */
  --z-citron-hover: #9BC144;
  --z-citron-dark: #4C7A2F;  /* citron for TEXT on light (AA) */
  --z-moss: #3A5A4E;         /* secondary fills, Manfred */
  --z-clay: #C2502F;         /* needs you, debt, overdue */
  --z-clay-text: #A8431F;    /* clay for TEXT on light (AA) */
  --z-clay-on-dark: #E8906A;
  --z-chalk: #F4F6F3;
  --z-mist: #E6EBE5;
  --z-white: #FFFFFF;
  --z-border: #D8DFD9;
  --z-border-soft: #E9EEEA;
  --z-border-mid: #C3CFC8;   /* secondary-button borders */
  --z-text: #10312A;
  --z-text-body: #3E524C;
  /* Revision 01 #07: muted text is #5D6E68 on LIGHT surfaces (4.9:1 on
     white); #8A9A94 is only legible on the --z-dark-* surfaces. The theme
     blocks below already map --text-muted accordingly. */
  --z-text-muted: #5D6E68;
  --z-text-muted-on-dark: #8A9A94;
  --z-text-invert: #F4F6F3;
  --z-dark-0: #0C2620;
  --z-dark-1: #10312A;
  --z-dark-2: #1B4438;
  --z-dark-3: #24463C;
  --z-dark-border: #24463C;
  --z-text-on-dark: #B9C7C0;
  /* status tints (Badge component + approval surfaces) */
  --z-ontrack-bg: #EAF2D9;
  --z-ontrack-fg: #4C7A2F;
  --z-needsyou-bg: #FBEDE8;
  --z-needsyou-fg: #C2502F;
  --z-needsyou-border: #E7C4B8;
  --z-neutral-fg: #546A63;
  --z-disabled-bg: #EDF1EE;
  --z-disabled-fg: #A9B7B1;
  /* Revision 03 item 02: the ONLY two sanctioned gradients in the system.
     Surfaces and decoration only — never on text, buttons, badges, cards,
     chart fills, or anything carrying a number. No third gradient without
     a design decision. (Gamification themes are exempt — item 03.) */
  --z-grad-shell: linear-gradient(180deg, #10312A 0%, #1B4438 100%);
  --z-grad-orb: radial-gradient(circle at 30% 30%, rgba(141, 177, 58, 0.18) 0%, rgba(141, 177, 58, 0) 70%);
  --z-font-display: 'Space Grotesk', 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --z-font-body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --z-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --z-r-sm: 8px;
  --z-r-md: 10px;
  --z-r-lg: 16px;
  --z-r-xl: 20px;
  --z-r-pill: 999px;
  --z-shadow-1: 0 2px 8px -2px rgba(16, 49, 42, 0.12);
  --z-shadow-2: 0 12px 28px -12px rgba(16, 49, 42, 0.28);
}

/* ─── LIGHT THEME (default) ─── */
:root, [data-theme="light"] {
  --bg: #F4F6F3;
  --surface: #ffffff;
  --surface-alt: #E6EBE5;
  --border: rgba(16, 49, 42, 0.14);
  --border-strong: rgba(16, 49, 42, 0.24);
  --text: #10312A;
  --text-secondary: #3E524C;
  --text-muted: #5D6E68;
  --bg-muted: #E6EBE5;
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --accent: #8DB13A;
  --accent-glow: rgba(141, 177, 58, 0.25);
  --accent-pill-bg: #EAF2D9;
  --accent-bg: rgba(141, 177, 58, 0.12);
  --accent-border: rgba(141, 177, 58, 0.35);
  --btn-primary-bg: #8DB13A;
  --btn-primary-text: #10312A;
  --btn-primary-hover: #9BC144;
  --gradient: #10312A;
  --hero-bg: #ffffff;
  /* Revision 03: per-theme disabled pair — the theme-independent
     --z-disabled-* constants punch a light grey hole in the dark shell. */
  --disabled-bg: #EDF1EE;
  --disabled-text: #A9B7B1;
  --green: #4C7A2F;
  --green-bg: rgba(141, 177, 58, 0.13);
  --green-border: rgba(141, 177, 58, 0.35);
  --red: #C2502F;
  --red-bg: rgba(194, 80, 47, 0.07);
  --red-border: rgba(194, 80, 47, 0.18);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.06);
  --cyan: #3A5A4E;
  --cyan-bg: rgba(58, 90, 78, 0.08);
  --pink: #db2777;
  --progress-track: rgba(16, 49, 42, 0.08);
  --tip-bg: rgba(141, 177, 58, 0.07);
  --tip-border: rgba(141, 177, 58, 0.25);
  --tip-text: #4C7A2F;
  --card-shadow: 0 1px 3px rgba(16, 49, 42, 0.05), 0 1px 2px rgba(16, 49, 42, 0.03);
  --toggle-bg: #EAF2D9;
  --toggle-border: rgba(141, 177, 58, 0.35);
  --subtle-bg: rgba(255, 255, 255, 0.8);
  --subtle-border: rgba(16, 49, 42, 0.10);
  --inset-bg: rgba(16, 49, 42, 0.03);
  --inset-border: rgba(16, 49, 42, 0.05);
  --table-header: rgba(16, 49, 42, 0.04);
  --table-row-alt: rgba(16, 49, 42, 0.02);
  --grid-line: rgba(16, 49, 42, 0.07);
  --win-bg: rgba(141, 177, 58, 0.08);
  --win-border: rgba(141, 177, 58, 0.30);
  --hero-text: #10312A;
  --focus-ring: rgba(141, 177, 58, 0.5);
  --overlay-bg: rgba(12, 38, 32, 0.55);
  --modal-bg: #ffffff;
  --accent-text: #4C7A2F;
  --green-text: #4C7A2F;
  --amber-text: #B45309;
  --red-text: #A8431F;
}

/* ─── DARK THEME ─── */
[data-theme="dark"] {
  --bg: #0C2620;
  --surface: #10312A;
  --surface-alt: #1B4438;
  --border: rgba(185, 199, 192, 0.14);
  --border-strong: rgba(185, 199, 192, 0.24);
  --text: #F4F6F3;
  --text-secondary: #B9C7C0;
  --text-muted: #8A9A94;
  --bg-muted: #1B4438;
  --topbar-bg: rgba(12, 38, 32, 0.92);
  --accent: #8DB13A;
  --accent-glow: rgba(141, 177, 58, 0.3);
  --accent-pill-bg: #1B4438;
  --accent-bg: rgba(141, 177, 58, 0.16);
  --accent-border: rgba(141, 177, 58, 0.4);
  --btn-primary-bg: #8DB13A;
  --btn-primary-text: #10312A;
  --btn-primary-hover: #9BC144;
  --gradient: #1B4438;
  --hero-bg: #10312A;
  --disabled-bg: #1B4438;
  --disabled-text: #7C8C86;
  --green: #8DB13A;
  --green-bg: rgba(141, 177, 58, 0.12);
  --green-border: rgba(141, 177, 58, 0.3);
  --red: #E8906A;
  --red-bg: rgba(232, 144, 106, 0.12);
  --red-border: rgba(232, 144, 106, 0.28);
  --amber: #f59e0b;
  --amber-bg: rgba(245, 158, 11, 0.1);
  --cyan: #7FA79A;
  --cyan-bg: rgba(127, 167, 154, 0.1);
  --pink: #ec4899;
  --progress-track: rgba(244, 246, 243, 0.08);
  --tip-bg: rgba(141, 177, 58, 0.1);
  --tip-border: rgba(141, 177, 58, 0.3);
  --tip-text: #B4D06E;
  --card-shadow: none;
  --toggle-bg: rgba(141, 177, 58, 0.12);
  --toggle-border: rgba(141, 177, 58, 0.3);
  --subtle-bg: rgba(244, 246, 243, 0.04);
  --subtle-border: rgba(244, 246, 243, 0.07);
  --inset-bg: rgba(244, 246, 243, 0.03);
  --inset-border: rgba(244, 246, 243, 0.05);
  --table-header: rgba(185, 199, 192, 0.07);
  --table-row-alt: rgba(244, 246, 243, 0.02);
  --grid-line: rgba(244, 246, 243, 0.05);
  --win-bg: rgba(141, 177, 58, 0.1);
  --win-border: rgba(141, 177, 58, 0.3);
  --hero-text: #F4F6F3;
  --focus-ring: rgba(141, 177, 58, 0.5);
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --modal-bg: #10312A;
  --accent-text: #A6C55F;
  --green-text: #A6C55F;
  --amber-text: #FBBF24;
  --red-text: #E8906A;
  color-scheme: dark;
}

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

body {
  font-family: var(--z-font-body, 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif);
  background: var(--bg);
  color: var(--text);
  transition: background 0.4s, color 0.4s;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Brand rule: numerals render tabular everywhere (Public Sans + IBM
     Plex Mono both support it), so money columns always line up. */
  font-variant-numeric: tabular-nums;
}

/* Display type: Space Grotesk for page-level headings only. Component
   titles (cards, modals) stay on Public Sans for legibility at
   small sizes. */
h1, h2 {
  font-family: var(--z-font-display, 'Space Grotesk', sans-serif);
  letter-spacing: -0.025em;
}

/* Numerals: currency figures, balances, APRs and dates read in mono. */
.z-num,
.hero__value,
.stat-box__value,
.summary-card-value,
.report-table .amount {
  font-family: var(--z-font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent-text, #4C7A2F); text-decoration: none; }
a:hover { opacity: 0.85; }

.text-link {
  color: var(--accent-text, #4C7A2F);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.text-link:hover { opacity: 0.85; }

/* ═══════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ─── SIDEBAR ─── */
.sidebar {
  width: 220px;
  /* Revision 03: --z-grad-shell is the ONE shell gradient, both themes —
     "vertical only, these two stops only" (the old dark-theme #0C2620
     variant was an unsanctioned third gradient and converged here). */
  background: var(--z-grad-shell, linear-gradient(180deg, #10312A 0%, #1B4438 100%));
  border-right: 1px solid rgba(12, 38, 32, 0.2);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-brand {
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  /* inline SVG mark: lens + handle draw in currentColor (chalk on the
     dark-green sidebar); the trend line is hardcoded citron */
  color: #F4F6F3;
}

.sidebar-title { font-family: var(--z-font-display, 'Space Grotesk', sans-serif); font-size: 17px; font-weight: 600; color: #F4F6F3; letter-spacing: 0.02em; }
.sidebar-subtitle { font-family: var(--z-font-mono, monospace); font-size: 9px; color: rgba(244,246,243,0.65); letter-spacing: 2px; margin-top: 1px; text-transform: uppercase; }

/* Nav */
.sidebar-nav { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); opacity: 1; }
.nav-item.active { background: rgba(255, 255, 255, 0.12); color: #C7DE8F; font-weight: 600; }
.nav-icon { font-size: 15px; width: 20px; text-align: center; }

/* Nav group with dropdown submenu */
.nav-group { position: relative; }
.nav-group > .nav-item { justify-content: flex-start; }
.nav-caret {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
  transition: transform 0.2s;
}
.nav-group:hover .nav-caret { transform: rotate(-180deg); opacity: 0.8; }
.nav-submenu {
  display: none;
  padding-left: 12px;
}
.nav-group:hover .nav-submenu { display: block; }
.nav-submenu .nav-item {
  font-size: 12px;
  padding: 7px 14px;
  gap: 10px;
}
.nav-submenu .nav-icon { font-size: 13px; width: 18px; }

/* Sidebar user */
.sidebar-user {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.user-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--gradient, #10312A);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.user-avatar--img {
  width: 32px; height: 32px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0;
}

/* Topbar avatar (replaces SVG icon when profile pic exists) */
.topbar-avatar-btn { padding: 3px; }
.topbar-avatar-img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover;
}
.topbar-avatar-initials {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gradient, #10312A);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}

/* Profile page — large avatar */
.profile-header-row {
  display: flex; gap: 20px; align-items: flex-start;
}
.profile-avatar-large-wrap { flex-shrink: 0; }
.profile-avatar-large {
  width: 80px; height: 80px; border-radius: 12px;
  object-fit: cover;
}
.profile-avatar-large--initials {
  background: var(--gradient, #10312A);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #fff;
}

/* Profile picture upload area */
.profile-picture-upload {
  display: flex; align-items: center; gap: 16px;
}
.profile-picture-preview { flex-shrink: 0; }
.profile-picture-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}

/* Profile badges row */
.profile-badges-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.profile-badge-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  background: var(--card-alt, #f1f5f9);
  color: var(--text);
}

/* Grid-3 (for gamification stats) */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }

/* Visually hidden (accessible file inputs) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip-link (a11y): hidden until focused by Tab from the top of the page.
   Jumps past the nav/sidebar to <main id="main-content"> for keyboard and
   screen-reader users. */
.skip-link {
  position: absolute; top: -40px; left: 8px;
  z-index: 10000;
  padding: 8px 14px; border-radius: 6px;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus, .skip-link:focus-visible {
  top: 8px; outline: 2px solid var(--accent-text); outline-offset: 2px;
}

/* Danger outline button variant (Revision 03: soft --red-border outline,
   --red-bg tint on hover — never the selected fill; a destructive action is
   not a state you sit in). */
.btn-outline--danger {
  color: var(--red-text, #A8431F);
  border-color: var(--red-border, rgba(194, 80, 47, 0.18));
}
.btn-outline--danger:hover {
  background: var(--red-bg, rgba(194, 80, 47, 0.07));
}

.user-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); }
.user-plan { font-size: 10px; color: rgba(255,255,255,0.3); }
.trial-badge {
  display: inline-block;
  background: #4f46e5;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.sidebar-user-link {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.sidebar-user-link:hover {
  background: rgba(255,255,255,0.06);
}
.sidebar-user-link:hover .user-plan {
  color: rgba(255,255,255,0.5);
}

/* Sidebar widget (e.g., debt freedom tracker) */
.sidebar-widget {
  margin: 0 10px 12px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
.sidebar-widget__label {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.sidebar-widget__value {
  font-size: 22px;
  font-weight: 700;
  color: #22c55e;
}
.sidebar-widget__sub {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}

/* ─── MAIN CONTENT ─── */
.main-content {
  flex: 1;
  overflow-y: auto;
  min-height: 100vh;
}

/* ─── TOPBAR ─── */
.topbar {
  padding: 12px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: all 0.4s;
  gap: 12px;
}
/* The frosted blur rides a pseudo-element, NEVER .topbar itself: an element
   with backdrop-filter becomes the containing block for its position:fixed
   descendants, and the Reports dropdown's click-away scrim
   (.topbar-menu[open] > summary::before, inset: 0) is one. With the blur on
   the bar the scrim covered the 44px bar instead of the viewport, so the menu
   did not close on an outside click on any theme (found 2026-08-02 alongside
   the assistant shell's collapsed sidebar — same root cause). A pseudo-element
   is not an ancestor, so the scrim positions against the viewport again.
   z-index: -1 keeps it under the bar's own text and over the scrolling page,
   which is the backdrop it blurs. Guarded by
   agent_authorization/tests/test_web.py::TestSidebarPanelFixedPositioning. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
}

.topbar-title { font-size: 16px; font-weight: 700; white-space: nowrap; margin: 0; line-height: inherit; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Topbar icon buttons (bell, user) */
.topbar-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.2s, color 0.2s;
}
.topbar-icon-btn:hover {
  background: var(--border);
  color: var(--text);
}

/* Buttons.
   Brand recipe (light/dark): citron fill with brand-green text — the
   --btn-primary-* tokens are defined only in those theme blocks, so the
   gamification themes fall back to the older accent-text/white recipe,
   which stays WCAG-AA in each of them. */
.btn-primary {
  background: var(--btn-primary-bg, var(--accent-text, #4C7A2F));
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  color: var(--btn-primary-text, #fff);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-family: inherit;
  transition: all 0.2s;
}

.btn-primary:hover { background: var(--btn-primary-hover, var(--accent-text, #4C7A2F)); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); }

/* The app's secondary button (Revision 03, kit components/core/OutlineButton —
   "the product's .btn-outline wins", made token-driven so both themes resolve
   with no hardcoded hex). The kit's neutral marketing secondary is
   marketing-only; never import it into the app. */
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: var(--z-r-md, 10px);
  padding: 7px 18px;
  color: var(--accent-text, #4C7A2F);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.btn-outline:hover { background: var(--accent-bg, rgba(141, 177, 58, 0.1)); }

/* Selected/active filter tab. Revision 03: selected is a FILL (--accent +
   --btn-primary-text ink — the AA-passing btn-primary pairing in both default
   themes), never a heavier border (border-weight shifts layout a pixel and
   reads as a focus ring). One selected per group. Gamification themes fall
   back to white ink until their own rebrand drop (item 03). */
.btn-outline--active {
  background: var(--accent);
  color: var(--btn-primary-text, #fff);
  border-color: var(--accent);
}
.btn-outline--active:hover { background: var(--accent); opacity: 0.92; }

/* Disabled (Revision 03): the per-theme --disabled-* pair, never the
   theme-independent --z-disabled-* constants. */
.btn-outline:disabled,
.btn-outline[disabled],
.btn-primary:disabled,
.btn-primary[disabled] {
  background: var(--disabled-bg, #EDF1EE);
  color: var(--disabled-text, #A9B7B1);
  border-color: transparent;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: var(--subtle-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 18px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.btn-secondary:hover { background: var(--inset-bg); border-color: var(--border-strong); }

.btn-danger {
  background: var(--red);
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s;
}

.btn-danger:hover { opacity: 0.9; }

.btn { font-family: inherit; cursor: pointer; transition: all 0.2s; }
.btn-sm { padding: 5px 14px; font-size: 11px; }

/* Page content area */
.page-content { padding: 24px; }

/* ═══════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════ */

/* ─── CARD ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--card-shadow);
  transition: all 0.4s;
}

.card-flush { padding: 0; overflow: hidden; }

/* What-if scenario builder rows (Phase 161): nested change-cards sit on the
   alt surface so they read as items inside the form card. */
.scn-row { background: var(--surface-alt); padding: 16px; }

/* ─── SECTION LABEL ─── */
.section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.section-label__text {
  font-size: 11px;
  color: var(--accent-text, #4C7A2F);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

.section-label__action {
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}

.section-label__action:hover { color: var(--accent-text, #4C7A2F); }

/* ─── STAT BOX ─── */
.stat-box {
  background: var(--subtle-bg);
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid var(--subtle-border);
  transition: all 0.4s;
}

.stat-box__label { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }
.stat-box__value { font-size: 20px; font-weight: 700; margin-top: 4px; }
.stat-box__sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* ─── HERO (compact horizontal bar) ─── */
.hero {
  background: var(--hero-bg);
  border-radius: 16px;
  padding: 16px 28px;
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  /* Revision 03: default themes use the sanctioned --z-grad-orb token;
     gamification themes keep their own tint via --hero-orb-grad (item 03 —
     themes may restyle decorative accents and are exempt from the
     two-gradient rule). */
  background: var(--hero-orb-grad, var(--z-grad-orb, radial-gradient(circle at 30% 30%, rgba(141, 177, 58, 0.18) 0%, rgba(141, 177, 58, 0) 70%)));
}

.hero__orb--top-right { top: -80px; right: -40px; width: 180px; height: 180px; }
.hero__orb--bottom-left { bottom: -60px; left: 60px; width: 140px; height: 140px; }
.hero__content { position: relative; display: flex; align-items: center; justify-content: space-between; }
.hero__center { text-align: center; flex: 1; }
.hero__label { font-size: 10px; color: var(--accent-text, #4C7A2F); letter-spacing: 1.5px; margin-bottom: 2px; font-weight: 700; text-transform: uppercase; }
.hero__value { font-size: 28px; font-weight: 800; color: var(--hero-text); letter-spacing: -0.5px; line-height: 1.2; }
.hero__sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.hero__side { text-align: center; min-width: 140px; }
.hero__side-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 2px; }
.hero__side-value { font-size: 18px; font-weight: 700; }
.hero__side-sub { font-size: 11px; color: var(--text-muted); }
.hero__divider { width: 1px; height: 40px; background: var(--border-strong); margin: 0 16px; opacity: 0.4; }

/* Hero detail row (sparkline, monthly change — sits below hero bar) */
.hero-detail-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 0 4px;
}

/* Legacy compat — stat-box--flex still works inside hero if needed */
.hero__stats-row { display: flex; width: 100%; margin-top: 12px; }
.stat-box--flex { flex: 1; text-align: center; background: transparent; border: none; padding: 10px 0; }
.hero__stats-row .stat-box__label { font-size: 14px; }
.hero__stats-row .stat-box__value { font-size: 22px; }
.hero__stats-row .stat-box__sub { font-size: 14px; }
.hero__value--lg { font-size: 40px; }
.hero__value-suffix { font-size: 16px; color: var(--text-secondary); margin-left: 12px; }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge--green { background: var(--green-bg); color: var(--green-text, #4C7A2F); }
.badge--red { background: var(--red-bg); color: var(--red-text, #A8431F); }
.badge--accent { background: var(--toggle-bg); color: var(--accent-text, #4C7A2F); }
/* --text-secondary (not --text-muted): #6b7280 on the #f3f4f6 muted bg is only
   ~4.36:1, below WCAG 2 AA 4.5:1 (userbot color-contrast HIGH on the dashboard
   "so far this month" badge). --text-secondary (#475569 light) clears it and is
   themed for every palette. Mirrors the CLAUDE.md color-contrast rule (muted
   text on tinted bg → promote to --text-secondary). */
.badge--muted { background: var(--bg-muted, #f3f4f6); color: var(--text-secondary, #475569); }

/* ─── GRID LAYOUTS ─── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }

/* ─── ACCOUNT CARD ─── */
.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  cursor: grab;
  box-shadow: var(--card-shadow);
  transition: all 0.3s;
}

.account-card:active { cursor: grabbing; }

/* Restore pointer cursor for interactive children (links, buttons) */
.account-card a,
.account-card button { cursor: pointer; }

/* Card body holds the original row layout (icon + name | balance + actions) */
.account-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Type label inside each card — hidden by default, shown via JS on first of each type */
.account-card__type-label {
  display: none;
  margin-bottom: 6px;
}

.account-card__type-label.visible { display: block; }

.account-card:hover { border-color: var(--border-strong); }
.account-card--asset { border-left: 3px solid var(--green); }
.account-card--debt, .account-card.debt { border-left: 3px solid var(--red); }

.account-card__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

.account-card__icon--asset { background: var(--green-bg); }
.account-card__icon--debt { background: var(--red-bg); }
.account-card__name { font-size: 13px; font-weight: 600; }
.account-card__meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.account-card__balance { font-size: 16px; font-weight: 700; }
.account-card__balance--green { color: var(--green-text, #4C7A2F); }
.account-card__balance--red { color: var(--red-text, #A8431F); }

/* Account card stale/discrepancy warning banner */
.account-card__stale-warning {
  font-size: 12px; line-height: 1.4; padding: 8px 12px; margin: 8px 0 4px;
  border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.account-card__stale-warning--stale {
  background: var(--amber-bg, #fffbeb); color: var(--amber-text, #b45309);
  border: 1.5px solid var(--amber-border, #fde68a);
}
.account-card__stale-warning--discrepancy {
  background: var(--red-bg, #fef2f2); color: var(--red-text, #A8431F);
  border: 1.5px solid var(--red-border, #fecaca);
}
.account-card__stale-warning a {
  color: inherit; text-decoration: underline; font-weight: 700;
}
.account-card__stale-icon {
  flex-shrink: 0; width: 18px; height: 18px;
}
.account-card__payment-info {
  font-size: 10px; color: var(--text-muted); margin-top: 2px;
}
.badge--overdue {
  background: var(--red-bg, #fef2f2); color: var(--red-text, #A8431F);
  font-weight: 600; border: 1px solid var(--red-border, #fecaca);
}
.badge--due-soon {
  background: var(--amber-bg, #fffbeb); color: var(--amber-text, #b45309);
}
.color-amber { color: var(--amber-text, #b45309); }
[data-theme="dark"] .account-card__stale-warning--stale {
  background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4);
}
[data-theme="dark"] .account-card__stale-warning--discrepancy {
  background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4);
}
.shared-account-warning,
.debt-goal-unlinked-warning {
  background: var(--amber-bg, #fffbeb); color: var(--amber-text, #b45309);
  border: 1.5px solid var(--amber-border, #fde68a);
  border-radius: 8px; padding: 8px 12px; line-height: 1.4;
  display: flex; flex-direction: column; gap: 2px;
}
[data-theme="dark"] .shared-account-warning,
[data-theme="dark"] .debt-goal-unlinked-warning {
  background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35);
}

/* Account card legacy layout */
.account-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.account-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-card-link {
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s;
}
.account-card-link:hover { color: var(--accent-text, #4C7A2F); text-decoration: underline; opacity: 1; }

.account-card-actions {
  display: flex;
  gap: 4px;
}

.account-card-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: all 0.2s;
}

.account-card-actions button:hover {
  background: var(--inset-bg);
  color: var(--text);
}

.account-card-actions button.delete:hover {
  background: var(--red-bg);
  color: var(--red-text, #A8431F);
}

.account-card-actions svg {
  width: 18px;
  height: 18px;
}

.account-card-balance {
  font-size: 1.3em;
  font-weight: 700;
  color: var(--green-text, #4C7A2F);
  margin-bottom: 8px;
}

.account-card.debt .account-card-balance {
  color: var(--red-text, #A8431F);
}

.converted-balance {
  font-size: 0.7em;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 2px;
}

.account-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.account-tag {
  background: var(--inset-bg);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.account-tag.type {
  background: rgba(141, 177, 58, 0.06);
  color: var(--accent-text, #4C7A2F);
  border-color: rgba(141, 177, 58, 0.15);
}

.account-tag.rate {
  background: var(--amber-bg);
  color: var(--amber-text, #B45309);
  border-color: rgba(217, 119, 6, 0.15);
}

/* Drag handle */
.drag-handle {
  color: var(--text-muted);
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

.account-card.sortable-ghost { opacity: 0.4; }
.account-card.sortable-chosen { box-shadow: 0 8px 16px rgba(0,0,0,0.15); transform: scale(1.02); }

/* ─── TRANSACTION ROW ─── */
.txn-row {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s;
}

.txn-row:hover { background: var(--inset-bg); }
.txn-row + .txn-row { border-top: 1px solid var(--border); }

/* Future-dated transaction styling */
.txn-row--future {
  opacity: 0.7;
  border-left: 3px solid var(--amber);
}
.txn-row--future .txn-desc {
  font-style: italic;
}

.txn-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

.txn-icon--income { background: var(--green-bg); }
.txn-icon--expense { background: var(--red-bg); }
.txn-icon--transfer { background: var(--cyan-bg); }
.txn-desc { font-size: 13px; font-weight: 500; }
.txn-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.txn-amount { font-size: 14px; font-weight: 600; }
.txn-amount--income { color: var(--green-text, #4C7A2F); }
.txn-amount--expense { color: var(--red-text, #A8431F); }
.txn-amount--transfer { color: var(--accent-text, #4C7A2F); }

/* Pending transaction styling */
.txn-row--pending { opacity: 0.7; border-left: 3px solid var(--amber); }
.txn-row--pending .txn-desc { font-style: italic; }

/* Merchant logo (replaces txn-icon when available) */
.txn-merchant-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }

/* Payment channel badge */
.badge--channel { background: var(--surface-alt); color: var(--text-secondary); font-size: 9px; padding: 1px 6px; border-radius: 4px; }

/* Transaction list legacy */
.transaction-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--card-shadow);
  margin-bottom: 8px;
}

.transaction-info { flex: 1; }
.transaction-description { font-weight: 500; color: var(--text); margin-bottom: 4px; }
.transaction-date { font-size: 12px; color: var(--text-muted); }

.transaction-tags { display: flex; gap: 6px; margin-top: 6px; }

.transaction-tag {
  background: var(--green-bg);
  color: var(--green-text, #4C7A2F);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}

.transaction-tag.withdrawal {
  background: var(--red-bg);
  color: var(--red-text, #A8431F);
}

.transaction-tag.category {
  background: rgba(141, 177, 58, 0.06);
  color: var(--accent-text, #4C7A2F);
}

.transaction-tag-user {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.transaction-amount {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.transaction-amount.positive { color: var(--green-text, #4C7A2F); }
.transaction-amount.negative { color: var(--red-text, #A8431F); }

.transaction-actions { display: flex; gap: 4px; }

.transaction-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  color: var(--text-muted);
  transition: all 0.2s;
}

.transaction-actions button:hover { background: var(--inset-bg); color: var(--text); }
.transaction-actions button.delete:hover { background: var(--red-bg); color: var(--red-text, #A8431F); }
.transaction-actions svg { width: 16px; height: 16px; }

/* Recurring indicators */
.recurring-indicator {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  vertical-align: middle;
}

.recurring-indicator.template svg { color: var(--accent-text, #4C7A2F); }
.recurring-indicator.instance svg { color: var(--text-muted); }

/* ─── CATEGORY LABELS ─── */
.category-label { font-size: 10px; letter-spacing: 1px; margin-bottom: 8px; font-weight: 600; }
.category-label--asset { color: var(--green-text, #4C7A2F); }
.category-label--debt { color: var(--red-text, #A8431F); }

/* ─── PROGRESS BAR ─── */
.progress { height: 8px; background: var(--progress-track); border-radius: 4px; overflow: hidden; }
.progress--sm { height: 6px; }
.progress--lg { height: 10px; }
.progress__fill { height: 100%; border-radius: inherit; transition: width 0.5s ease; }
.progress__fill--gradient { background: var(--gradient); }
.progress__fill--green { background: var(--green); }
.progress__fill--red { background: var(--red); }
.progress__fill--amber { background: linear-gradient(90deg, #f59e0b, #eab308); }
.progress__fill--danger { background: linear-gradient(90deg, #ef4444, #f97316); }
.progress__fill--accent { background: var(--accent, #8DB13A); }

/* ─── DEBT PROGRESS BAR ─── */
.debt-progress-card {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: var(--card-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.debt-progress-card:hover {
  border-color: var(--accent-text, #4C7A2F);
  box-shadow: 0 0 0 1px var(--accent), var(--card-shadow);
  opacity: 1;
}
.debt-bar {
  height: 10px;
  background: var(--progress-track);
  border-radius: 5px;
  overflow: hidden;
}
.debt-bar__fill {
  height: 100%;
  border-radius: 5px;
  background: var(--gradient);
  transition: width 0.6s ease;
  min-width: 2px;
}

/* ─── FREE-PLAN TRANSACTION METER ─── */
.tx-meter {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: var(--card-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tx-meter:hover {
  border-color: var(--accent-text, #4C7A2F);
  box-shadow: 0 0 0 1px var(--accent), var(--card-shadow);
}
.tx-meter--warn {
  border-color: var(--amber, #F59E0B);
}
.tx-meter--danger {
  border-color: var(--red, #DC2626);
}
.tx-meter__bar {
  height: 6px;
  background: var(--progress-track);
  border-radius: 3px;
  overflow: hidden;
}
.tx-meter__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
  min-width: 2px;
}
.tx-meter__fill--ok { background: var(--accent, #8DB13A); }
.tx-meter__fill--warn { background: var(--amber, #F59E0B); }
.tx-meter__fill--danger { background: var(--red, #DC2626); }

/* ─── TIP BOX ─── */
.tip-box {
  padding: 10px 16px;
  background: var(--tip-bg);
  border: 1px solid var(--tip-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--tip-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── WIN BOX ─── */
.win-box {
  padding: 16px 18px;
  background: var(--win-bg);
  border: 1px solid var(--win-border);
  border-radius: 10px;
}

/* ─── TABLE ─── */
.zon-table { border-radius: 10px; border: 1px solid var(--border); overflow: hidden; }
.zon-table__header {
  display: grid; padding: 10px 16px;
  background: var(--table-header);
  font-size: 10px; font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.zon-table__row {
  display: grid;
  padding: 12px 16px;
  font-size: 12px;
  border-top: 1px solid var(--border);
  transition: background 0.2s;
  cursor: pointer;
}

.zon-table__row:nth-child(even) { background: var(--table-row-alt); }
.zon-table__row:hover { background: var(--inset-bg); }
.zon-table__row.active { background: rgba(141, 177, 58, 0.06); border-left: 3px solid var(--accent); }

/* Report-table row hover (Phase 110.5 — replaces inline onmouseover/onmouseout) */
.report-row-hover { transition: background 0.2s; }
.report-row-hover:hover { background: var(--inset-bg); }
.report-row-link { color: var(--text); text-decoration: none; font-weight: 400; font-size: 11px; }
.report-row-link:hover { color: var(--accent); }

/* Tag-filter dropdown row hover (Phase 110.8 — replaces inline onmouseenter/onmouseleave) */
.tag-dropdown-row { transition: background 0.1s; }
.tag-dropdown-row:hover { background: var(--surface-alt); }

/* ─── STRATEGY SELECTOR ─── */
.strategy-card {
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid var(--border);
  transition: all 0.2s;
}

.strategy-card:hover { border-color: var(--border-strong); }
.strategy-card.active { background: rgba(141, 177, 58, 0.08); border-color: var(--accent-text, #4C7A2F); }
.strategy-card__name { font-size: 12px; font-weight: 700; }
.strategy-card__desc { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* ─── BUDGET ITEM ─── */
.budget-item {
  padding: 16px 0;
}

.budget-item + .budget-item { border-top: 1px solid var(--border); }
.budget-item__over { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: var(--red-bg); color: var(--red-text, #A8431F); font-weight: 600; }

/* ─── RANGE SLIDER ─── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--progress-track);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 0 8px var(--accent-glow);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 0 8px var(--accent-glow);
  cursor: pointer;
}

/* ─── FILTER PILLS ─── */
.filter-pills { display: flex; gap: 6px; margin-bottom: 14px; }
.filter-pill {
  padding: 5px 14px;
  border-radius: 20px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.filter-pill:hover { border-color: var(--accent-text, #4C7A2F); color: var(--accent-text, #4C7A2F); }
.filter-pill.active {
  background: var(--accent-pill-bg, #E8F6FD);
  border-color: var(--accent-text, #4C7A2F);
  color: var(--accent-text, #4C7A2F);
  font-weight: 600;
}

/* ═══════════════════════════════════════
   MODALS
   ═══════════════════════════════════════ */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-bg);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--modal-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.modal-sm { max-width: 400px; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.modal-close:hover { color: var(--text); }
.modal-close svg { width: 24px; height: 24px; }

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--inset-bg);
  border-radius: 0 0 14px 14px;
}

/* Portfolio toggle (Account / Hard Asset tab switcher) */
.portfolio-toggle {
  display: flex;
  gap: 0;
  padding: 4px;
  margin: 0 24px 0;
  background: var(--inset-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.portfolio-toggle__btn {
  flex: 1;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.portfolio-toggle__btn:hover {
  color: var(--text);
}
.portfolio-toggle__btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ═══════════════════════════════════════
   FORMS
   ═══════════════════════════════════════ */

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-text, #4C7A2F);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row--3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.form-errors {
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
}

.form-error {
  color: var(--red-text, #A8431F);
  font-size: 13px;
  margin-bottom: 4px;
}

.form-error:last-child { margin-bottom: 0; }

/* Click-through CTA appended to a limit-hit modal error banner (Phase 170) */
.form-error-cta {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
}

/* Per-field inline validation */
.form-group--error .form-input,
.form-group--error .form-select,
.form-group--error textarea {
  border-color: var(--red-border);
}
.form-group--error .form-input:focus,
.form-group--error .form-select:focus,
.form-group--error textarea:focus {
  border-color: var(--red-text, #A8431F);
  box-shadow: 0 0 0 3px var(--red-bg);
}
.field-error {
  color: var(--red-text, #A8431F);
  font-size: 11px;
  margin-top: 4px;
  display: block;
}

.form-help {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 4px;
}

.form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-text, #4C7A2F);
}

.recurring-fields {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 8px;
}

.multi-select {
  min-height: 80px;
  padding: 8px;
}

/* ─────────────────────────────────────────
   Category Autocomplete Combobox
   ───────────────────────────────────────── */

.category-autocomplete {
  position: relative;
}

.category-autocomplete__input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s;
}

.category-autocomplete__input:focus {
  outline: none;
  border-color: var(--accent-text, #4C7A2F);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.category-autocomplete__input::placeholder {
  color: var(--text-muted);
}

.category-autocomplete__list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2100;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  list-style: none;
  padding: 4px 0;
}

.category-autocomplete__list--open {
  display: block;
}

.category-autocomplete__group-label {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  user-select: none;
}

.category-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: background 0.1s;
  flex-wrap: wrap;
}

.category-autocomplete__description {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.category-autocomplete__item:hover,
.category-autocomplete__item--focused {
  background: var(--inset-bg, rgba(0, 0, 0, 0.04));
}

.category-autocomplete__item--suggested {
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}

/* Phase 99 #28 — indent subcategories under their parent header. */
.category-autocomplete__item--child {
  padding-left: 28px;
  position: relative;
}

.category-autocomplete__item--child::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--text-muted);
  opacity: 0.5;
}

.category-autocomplete__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-autocomplete__type {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--inset-bg, rgba(0, 0, 0, 0.06));
  color: var(--text-muted);
  white-space: nowrap;
  text-transform: capitalize;
}

.category-autocomplete__badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-glow, rgba(141, 177, 58, 0.1));
  color: var(--accent-text, #4C7A2F);
  white-space: nowrap;
  font-weight: 500;
}

.category-autocomplete__empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-picker-row input[type="color"] {
  width: 48px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: none;
}

.color-hex {
  font-family: monospace;
  font-size: 13px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════
   NOTIFICATION BELL & DROPDOWN
   ═══════════════════════════════════════ */

.notification-bell-wrapper {
  position: relative;
}

.nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  color: var(--text-secondary);
}

.nav-btn:hover { background: var(--inset-bg); }
.nav-btn svg { width: 22px; height: 22px; }

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 50%;
  text-align: center;
  pointer-events: none;
}

.notification-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 1050;
  overflow: hidden;
}

.notification-dropdown.open { display: block; }

.notification-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}

.mark-all-read-btn {
  background: none;
  border: none;
  color: var(--accent-text, #4C7A2F);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  font-family: inherit;
}

.mark-all-read-btn:hover { text-decoration: underline; }

.notification-dropdown-list {
  max-height: 340px;
  overflow-y: auto;
}

.notification-dropdown-item {
  display: block;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}

.notification-dropdown-item:hover { background: var(--inset-bg); opacity: 1; }
.notification-dropdown-item.unread { background: rgba(141, 177, 58, 0.04); }

.notification-dropdown-item-title {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 2px;
}

.notification-dropdown-item-message {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-dropdown-item-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.notification-dropdown-item .severity-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.severity-dot.severity-info { background: var(--accent); }
.severity-dot.severity-warning { background: var(--amber); }
.severity-dot.severity-danger { background: var(--red); }

.notification-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 16px;
  font-size: 12px;
}

.notification-dropdown-footer {
  display: block;
  text-align: center;
  padding: 10px;
  border-top: 1px solid var(--border);
  color: var(--accent-text, #4C7A2F);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}

.notification-dropdown-footer:hover { background: var(--inset-bg); opacity: 1; }

/* Sidebar notification badge */
.sidebar-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  text-align: center;
  margin-left: auto;
  padding: 0 5px;
}

/* ═══════════════════════════════════════
   USER DROPDOWN (click-based, with notifications)
   ═══════════════════════════════════════ */

.user-dropdown {
  position: relative;
}

.user-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  min-width: 220px;
  z-index: 1060;
  overflow: hidden;
}

.user-dropdown.open .user-dropdown-content {
  display: block;
}

.user-dropdown-content a {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.15s;
}

.user-dropdown-content a:hover {
  background: var(--inset-bg);
  opacity: 1;
}

.user-dropdown-content a:last-child {
  border-top: 1px solid var(--border);
  color: var(--red-text, #A8431F);
}

.user-dropdown-notif {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-badge-inline {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  text-align: center;
  margin-left: auto;
  padding: 0 5px;
}

.notif-badge-inline:empty { display: none; }

/* Notification panel slides in over the user dropdown */
.user-dropdown .notification-dropdown {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1070;
}

.notif-back-btn {
  background: none;
  border: none;
  color: var(--accent-text, #4C7A2F);
  cursor: pointer;
  font-size: 16px;
  padding: 0 8px 0 0;
  font-family: inherit;
}

/* ═══════════════════════════════════════
   MESSAGES
   ═══════════════════════════════════════ */

.messages {
  list-style: none;
  margin-bottom: 20px;
}

.messages li {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

.messages .success {
  background: var(--green-bg);
  color: var(--green-text, #4C7A2F);
  border: 1px solid var(--green-border);
}

.messages .error {
  background: var(--red-bg);
  color: var(--red-text, #A8431F);
  border: 1px solid var(--red-border);
}

.messages .info {
  background: rgba(141, 177, 58, 0.06);
  color: var(--accent-text, #4C7A2F);
  border: 1px solid rgba(141, 177, 58, 0.15);
}

.messages .warning {
  background: var(--amber-bg);
  color: var(--amber-text, #B45309);
  border: 1px solid rgba(217, 119, 6, 0.15);
}

/* Sync toast -- lightweight feedback banner */
.sync-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
  max-width: 400px;
}
.sync-toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.sync-toast--success {
  background: var(--green-bg);
  color: var(--green-text, #4C7A2F);
  border: 1px solid var(--green-border);
}
.sync-toast--error {
  background: var(--red-bg);
  color: var(--red-text, #A8431F);
  border: 1px solid var(--red-border);
}
.sync-toast--warning {
  background: var(--amber-bg);
  color: var(--amber-text, #B45309);
  border: 1px solid rgba(217, 119, 6, 0.15);
}

/* ═══════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════ */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  padding: 16px 0;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s;
}

a.page-link:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-text, #4C7A2F);
  opacity: 1;
}

.page-link.current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-text, #4C7A2F);
  font-weight: 600;
}

.page-link.disabled {
  color: var(--text-muted);
  cursor: default;
  border-color: var(--border);
}

/* ═══════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════ */

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state p {
  margin-bottom: 16px;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--gradient);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s;
}

.empty-state-btn:hover { opacity: 0.9; }

.empty-state-sm {
  text-align: center;
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.empty-state-inline {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════
   REPORT PAGES
   ═══════════════════════════════════════ */

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.report-header-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-date {
  color: var(--text-muted);
  font-size: 13px;
}

.report-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.export-buttons {
  display: flex;
  gap: 8px;
}

.export-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.report-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--card-shadow);
}

.report-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.report-section-title svg { color: var(--accent-text, #4C7A2F); }

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.report-table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.report-table tbody tr:hover { background: var(--inset-bg); }

.report-table .amount { text-align: right; font-family: monospace; font-size: 13px; }
.report-table .amount.positive { color: var(--green-text, #4C7A2F); }
.report-table .amount.negative { color: var(--red-text, #A8431F); }

.report-table .group-header-row { background: var(--table-header); }
.report-table .group-header { font-weight: 600; color: var(--text); font-size: 13px; padding: 8px 12px; }
.report-table .subtotal-row { background: var(--table-header); font-style: italic; font-size: 13px; }
.report-table .total-row td { border-top: 2px solid var(--border-strong); border-bottom: none; padding-top: 16px; }
.report-table tfoot { background: transparent; }

.report-table .account-name { display: flex; flex-direction: column; gap: 2px; }
.report-table .account-name a { color: var(--text); text-decoration: none; font-weight: 500; }
.report-table .account-name a:hover { color: var(--accent-text, #4C7A2F); text-decoration: underline; opacity: 1; }
.report-table .account-institution { font-size: 11px; color: var(--text-muted); }
.report-table .account-rate {
  font-size: 10px;
  color: var(--red-text, #A8431F);
  background: var(--red-bg);
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 2px;
}

/* Net Worth Section */
.net-worth-section { margin-bottom: 20px; }

.net-worth-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 14px;
  text-align: center;
}

.net-worth-box.positive {
  background: var(--green-bg);
  border: 2px solid var(--green);
}

.net-worth-box.negative {
  background: var(--red-bg);
  border: 2px solid var(--red);
}

.net-worth-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.net-worth-value {
  font-size: 2.5em;
  font-weight: 800;
  margin-bottom: 8px;
}

.net-worth-box.positive .net-worth-value { color: var(--green-text, #4C7A2F); }
.net-worth-box.negative .net-worth-value { color: var(--red-text, #A8431F); }

.net-worth-formula {
  font-size: 12px;
  color: var(--text-muted);
}

/* Chart Container */
.chart-container {
  position: relative;
  width: 100%;
  min-height: 250px;
}

.chart-container canvas { width: 100% !important; }

/* Date Range Picker */
.date-range-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.date-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.date-range-presets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.date-range-presets .btn {
  font-size: 11px;
  padding: 4px 8px;
}

/* ═══════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════ */

.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--card-shadow);
}

.filter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-group--wide { grid-column: span 2; }

.filter-group__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* Legacy flex row (kept for backward compat) */
.filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-input,
.filter-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.filter-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--accent-text, #4C7A2F);
}

.filter-input { min-width: 0; }
.filter-select { min-width: 0; }
.filter-date { min-width: 0; }

.filter-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.filter-amount-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-amount-range .filter-input {
  flex: 1;
  min-width: 0;
}

.filter-amount-range__sep {
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .filter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .filter-group--wide { grid-column: span 2; }
  .filter-bar { padding: 12px; }
  .filter-actions { flex-wrap: wrap; }
  .filter-actions .btn-primary,
  .filter-actions .btn-outline { flex: 1; text-align: center; }
}

@media (max-width: 400px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }
  .filter-group--wide { grid-column: span 1; }
}

/* ═══════════════════════════════════════
   BULK ACTIONS
   ═══════════════════════════════════════ */

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  margin-bottom: 12px;
}

.bulk-actions form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.bulk-count {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.transaction-checkbox {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 12px;
}

.transaction-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-text, #4C7A2F);
  cursor: pointer;
}

.transaction-header-row {
  background: var(--table-header);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.transaction-header-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════
   CATEGORIES & TAGS PAGES
   ═══════════════════════════════════════ */

.categories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.category-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: background 0.15s;
}

.category-item:hover { background: var(--inset-bg); }
.category-item.system { background: var(--table-header); }

.category-info { display: flex; align-items: center; gap: 12px; }
.category-name { font-weight: 500; color: var(--text); }

.category-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.category-badge.system { background: var(--table-header); color: var(--text-muted); }
.category-badge.user { background: var(--green-bg); color: var(--green-text, #4C7A2F); }

.category-actions { display: flex; align-items: center; gap: 4px; }

.category-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.category-actions button:hover { color: var(--accent-text, #4C7A2F); background: var(--inset-bg); }
.category-actions button.delete:hover { color: var(--red-text, #A8431F); background: var(--red-bg); }
.category-actions button svg { width: 16px; height: 16px; }

/* Tags */
.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.tag-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  transition: box-shadow 0.15s;
}

.tag-card:hover { box-shadow: var(--card-shadow); }

.tag-info { display: flex; align-items: center; gap: 12px; }

.tag-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.tag-name { font-weight: 500; color: var(--text); }
.tag-color-label { font-size: 11px; color: var(--text-muted); font-family: monospace; }

.tag-actions { display: flex; align-items: center; gap: 4px; }

.tag-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.tag-actions button:hover { color: var(--accent-text, #4C7A2F); background: var(--inset-bg); }
.tag-actions button.delete:hover { color: var(--red-text, #A8431F); background: var(--red-bg); }
.tag-actions button svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════
   NOTIFICATIONS PAGE
   ═══════════════════════════════════════ */

.notifications-page { max-width: 800px; }

.notification-filter-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  text-decoration: none;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all 0.15s;
}

.filter-tab:hover { color: var(--text); border-color: var(--accent-text, #4C7A2F); opacity: 1; }
.filter-tab.active { background: var(--accent-text, #4C7A2F); color: #fff; border-color: var(--accent-text, #4C7A2F); }

.notification-list-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-left: 4px solid transparent;
  transition: background 0.15s;
}

.notification-card.notification-unread { background: rgba(141, 177, 58, 0.04); }
.notification-card.notification-severity-warning { border-left-color: var(--amber-text, #B45309); }
.notification-card.notification-severity-danger { border-left-color: var(--red-text, #A8431F); }
.notification-card.notification-severity-info { border-left-color: var(--accent-text, #4C7A2F); }

.notification-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

.notification-type-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.notification-type-budget_alert { background: var(--amber-bg); color: var(--amber-text, #B45309); }
.notification-type-bill_reminder { background: rgba(141, 177, 58, 0.06); color: var(--accent-text, #4C7A2F); }
.notification-type-large_transaction { background: var(--red-bg); color: var(--red-text, #A8431F); }
.notification-type-weekly_summary { background: var(--green-bg); color: var(--green-text, #4C7A2F); }

.notification-time { font-size: 11px; color: var(--text-muted); }

.notification-card-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.notification-card-title a { color: var(--text); text-decoration: none; }
.notification-card-title a:hover { color: var(--accent-text, #4C7A2F); }

.notification-card-message {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.notification-card-actions { flex-shrink: 0; margin-left: 12px; }

/* ═══════════════════════════════════════
   IMPORT/EXPORT PAGES
   ═══════════════════════════════════════ */

.import-upload-section { max-width: 600px; margin: 0 auto; }
.import-upload-form { margin-bottom: 20px; }

.import-upload-area {
  border: 2px dashed var(--border);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  background: var(--inset-bg);
  transition: border-color 0.2s;
}

.import-upload-area:hover { border-color: var(--accent-text, #4C7A2F); }
.import-upload-area svg { color: var(--text-muted); margin-bottom: 8px; }
.import-upload-area h3 { margin: 0 0 4px; color: var(--text); }

.import-upload-area .form-group {
  text-align: left;
  max-width: 400px;
  margin: 12px auto;
}

.import-upload-area .form-label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 13px;
}

.file-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}

.import-help {
  background: var(--inset-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.import-help h4 { margin: 0 0 8px; color: var(--text); font-size: 13px; }
.import-help ul { margin: 0; padding-left: 16px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }

.import-preview-section { max-width: 100%; }

.import-preview-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--inset-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.import-summary { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.import-file-name { color: var(--text-muted); font-size: 13px; }
.import-arrow { color: var(--text-muted); }
.import-account-name { color: var(--accent-text, #4C7A2F); }

.import-stats { display: flex; gap: 12px; flex-wrap: wrap; }

.import-stat {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--table-header);
}

.import-stat-count { font-weight: 600; }
.import-stat.valid { background: var(--green-bg); color: var(--green-text, #4C7A2F); }
.import-stat.duplicate { background: var(--amber-bg); color: var(--amber-text, #B45309); }
.import-stat.error { background: var(--red-bg); color: var(--red-text, #A8431F); }

.import-mapping-section {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--inset-bg);
}

.import-mapping-toggle {
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: var(--accent-text, #4C7A2F);
}

.import-mapping-form { padding: 0 16px 12px; }

.import-mapping-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.import-mapping-col { min-width: 120px; flex-shrink: 0; }

.import-mapping-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-mapping-select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  background: var(--surface);
  color: var(--text);
}

.import-preview-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.import-preview-table th {
  background: var(--table-header);
  padding: 8px 12px;
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.import-preview-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-col-status { width: 40px; text-align: center; }
.import-col-row { width: 40px; color: var(--text-muted); font-size: 12px; }

.import-status-icon { font-size: 14px; font-weight: bold; }
.import-status-icon.valid { color: var(--green-text, #4C7A2F); }
.import-status-icon.duplicate { color: var(--amber-text, #B45309); }
.import-status-icon.error { color: var(--red-text, #A8431F); }

.import-row-error td { background: var(--red-bg); }
.import-row-duplicate td { background: var(--amber-bg); }

.import-confirm-form {
  background: var(--inset-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.import-confirm-options { margin-bottom: 16px; }

.import-confirm-options .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}

.import-category-select { max-width: 400px; }

.import-category-select .form-label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text);
}

.import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ═══════════════════════════════════════
   PROFILE & SUBSCRIPTION PAGES
   ═══════════════════════════════════════ */

.profile-page { max-width: 700px; }

.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--card-shadow);
}

.profile-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.profile-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.profile-field:last-child { border-bottom: none; }

.profile-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 13px;
}

.profile-value { color: var(--text); }

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.profile-stat {
  text-align: center;
  padding: 16px;
  background: var(--inset-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.profile-stat-value {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-text, #4C7A2F);
}

.profile-stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.profile-actions {
  display: flex;
  gap: 12px;
}

/* ═══════════════════════════════════════
   SECTION HEADERS (Legacy)
   ═══════════════════════════════════════ */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.section-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: all 0.2s;
}

.section-btn:hover { background: var(--inset-bg); color: var(--text); }
.section-btn svg { width: 22px; height: 22px; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.section-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Legacy summary cards */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--card-shadow);
}

.summary-card-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.summary-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.summary-card-value.positive { color: var(--green-text, #4C7A2F); }
.summary-card-value.negative { color: var(--red-text, #A8431F); }

/* Legacy dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.accounts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* View All Link */
.view-all-link {
  display: block;
  text-align: center;
  padding: 12px 0;
  color: var(--accent-text, #4C7A2F);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.view-all-link:hover { opacity: 0.8; }

.inline-form { display: inline; }

/* Account History */
.account-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.account-header-info { display: flex; flex-direction: column; gap: 8px; }
.account-header-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.account-header-balance { font-size: 28px; font-weight: 800; }

.transaction-amount-with-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 120px;
}

.running-balance { font-size: 11px; font-weight: 500; }

.transaction-table-header {
  background: var(--table-header);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 16px;
  margin-bottom: 4px;
}

.transaction-amount-header {
  display: flex;
  gap: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 120px;
  justify-content: flex-end;
}

.running-balance-header { min-width: 80px; text-align: right; }

/* Goals page */
.goal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  margin-bottom: 12px;
}

.goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* Placeholder page */
.placeholder-page {
  text-align: center;
  padding: 60px 20px;
}

.placeholder-page svg {
  width: 64px;
  height: 64px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.placeholder-page h1 {
  font-size: 28px;
  color: var(--text);
  margin-bottom: 12px;
}

.placeholder-page p {
  color: var(--text-muted);
  font-size: 15px;
}

.placeholder-page .btn-back {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 24px;
  background: var(--gradient);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  transition: opacity 0.2s;
}

.placeholder-page .btn-back:hover { opacity: 0.9; }

/* ═══════════════════════════════════════
   DARK MODE FORM OVERRIDES
   ═══════════════════════════════════════ */

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--surface-alt);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--accent-text, #4C7A2F);
}

[data-theme="dark"] option {
  background-color: var(--surface);
  color: var(--text);
}

/* ═══════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════ */
.color-green { color: var(--green-text, #4C7A2F); }
.color-red { color: var(--red-text, #A8431F); }
.color-amber { color: var(--amber-text, #B45309); }
.color-accent { color: var(--accent-text, #4C7A2F); }
.color-muted { color: var(--text-muted); }
.color-secondary { color: var(--text-secondary); }

.bg-green { background: var(--green-bg); }
.bg-red { background: var(--red-bg); }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.fs-9 { font-size: 9px; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }
.fs-28 { font-size: 28px; }
.fs-36 { font-size: 36px; }
.fs-40 { font-size: 40px; }

.text-right { text-align: right; }
.text-center { text-align: center; }
.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

/* ═══════════════════════════════════════════════════════════════════════
   SPOTLIGHT TOUR
   ═══════════════════════════════════════════════════════════════════════ */

.spotlight-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: all;
    /* Invisible click-blocker; the visual darkness
       comes from the highlight's box-shadow */
}

.spotlight-highlight {
    position: fixed;
    border: 2px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    z-index: 9001;
    pointer-events: none;
    transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
}

.tour-popover {
    position: fixed;
    z-index: 9002;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
    max-width: 340px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    animation: tourFadeIn 0.25s ease;
}

@keyframes tourFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tour-popover__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.tour-popover__description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
}

.tour-popover__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tour-popover__steps {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    gap: 5px;
}

.tour-step-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.2s;
}

.tour-step-dot--active {
    background: var(--accent);
}

.tour-step-dot--done {
    background: var(--green);
}

.tour-popover__actions {
    display: flex;
    gap: 8px;
}

.tour-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.tour-btn--skip {
    background: transparent;
    color: var(--text-muted);
}

.tour-btn--skip:hover {
    color: var(--text);
}

.tour-btn--prev {
    background: var(--inset-bg);
    color: var(--text-secondary);
}

.tour-btn--prev:hover {
    background: var(--border);
}

.tour-btn--next {
    background: var(--accent);
    color: #fff;
}

.tour-btn--next:hover {
    opacity: 0.9;
}

/* Virtual tour steps (centered card, no DOM highlight) */
.tour-popover--virtual {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    max-width: 380px;
}

.tour-popover__icon {
    font-size: 36px;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   SETUP CHECKLIST WIDGET
   ═══════════════════════════════════════════════════════════════════════ */

.checklist-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 500;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: checklistSlideIn 0.35s ease;
}

@keyframes checklistSlideIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.checklist-header__title {
    font-size: 13px;
    font-weight: 700;
}

.checklist-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checklist-header__btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 16px;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s;
}

.checklist-header__btn:hover {
    color: #fff;
}

.checklist-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.checklist-progress__fill {
    height: 100%;
    background: #fff;
    transition: width 0.4s ease;
}

.checklist-body {
    max-height: 400px;
    overflow-y: auto;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: var(--text);
}

.checklist-item:last-child {
    border-bottom: none;
}

.checklist-item:hover {
    background: var(--inset-bg);
}

.checklist-item--done {
    opacity: 0.55;
    cursor: default;
}

.checklist-item--done:hover {
    background: transparent;
}

.checklist-item__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    transition: all 0.2s;
}

.checklist-item--done .checklist-item__check {
    background: var(--green);
    border-color: var(--green-text, #4C7A2F);
    color: #fff;
}

.checklist-item__label {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
}

.checklist-item--done .checklist-item__label {
    text-decoration: line-through;
    color: var(--text-muted);
}

.checklist-congrats {
    padding: 20px 18px;
    text-align: center;
}

.checklist-congrats__emoji {
    font-size: 28px;
    margin-bottom: 8px;
}

.checklist-congrats__text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.checklist-congrats__sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Checklist groups (progressive disclosure) */
.checklist-group {
    border-top: 1px solid var(--border);
}

.checklist-group:first-child {
    border-top: none;
}

.checklist-group-header {
    padding: 8px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checklist-group-header__lock {
    font-size: 11px;
    cursor: help;
}

.checklist-group--locked {
    opacity: 0.45;
}

.checklist-group--locked .checklist-group-header {
    cursor: default;
}

/* Info-only checklist items (non-actionable, awareness only) */
.checklist-item--info {
    opacity: 0.7;
    cursor: default;
    font-style: italic;
}

.checklist-item--info .checklist-item__check {
    color: var(--accent-text, #4C7A2F);
    font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   AUTH PAGES (login, signup, password reset, etc.)
   ═══════════════════════════════════════════════════════════════════════ */

.auth-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

.auth-page {
    width: 100%;
    max-width: 420px;
    padding: 24px 16px;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: var(--card-shadow);
}

.auth-card__header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-card__brand {
    font-size: 22px;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.auth-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}

.auth-card__subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.auth-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.auth-field input {
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--inset-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s;
}

.auth-field input:focus {
    border-color: var(--accent-text, #4C7A2F);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.auth-field input::placeholder {
    color: var(--text-muted);
}

/* ── Password show/hide toggle ─────────────────────────────────── */
.password-field {
    position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"] {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.password-toggle:hover {
    color: var(--accent-text, #4C7A2F);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--accent-text, #4C7A2F);
    outline-offset: 2px;
}

.password-toggle .icon-eye-off {
    display: none;
}

.password-toggle[data-state="visible"] .icon-eye {
    display: none;
}

.password-toggle[data-state="visible"] .icon-eye-off {
    display: inline-flex;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
}

.auth-checkbox input[type="checkbox"] {
    accent-color: var(--accent-text, #4C7A2F);
    width: 14px;
    height: 14px;
}

.auth-link--small {
    font-size: 12px;
    color: var(--accent-text, #4C7A2F);
    text-decoration: none;
}

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

.auth-btn {
    width: 100%;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--gradient);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 16px var(--accent-glow);
    transition: opacity 0.2s;
    margin-top: 4px;
}

.auth-btn:hover {
    opacity: 0.9;
}

.auth-btn--disabled,
.auth-btn--disabled:hover {
    background: var(--border-strong);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
}

.auth-error {
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--red-text, #A8431F);
    font-size: 12px;
    line-height: 1.5;
}

.auth-error p {
    margin: 2px 0;
}

.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.auth-google-btn:hover {
    background: var(--inset-bg);
    border-color: var(--accent-text, #4C7A2F);
    opacity: 1;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--text-muted);
    font-size: 12px;
}

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

.auth-footer {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin: 20px 0 0;
}

.auth-footer a {
    color: var(--accent-text, #4C7A2F);
    font-weight: 600;
    text-decoration: none;
}

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

.auth-messages {
    margin-bottom: 16px;
}

.auth-message {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 8px;
}

.auth-message--success {
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    color: var(--green-text, #4C7A2F);
}

.auth-message--error {
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    color: var(--red-text, #A8431F);
}

.auth-message--info {
    background: var(--cyan-bg);
    border: 1px solid rgba(8, 145, 178, 0.15);
    color: #0E7490; /* darker cyan for WCAG AA contrast on light cyan bg */
}

/* Alerts (UX-C4, Phase 140). The support templates emit
   `alert alert-{{ message.tags }}` (Django flash-message tags: error/success/
   info/warning/debug) plus a literal `alert alert-error` for form errors, but
   no CSS existed — messages rendered unstyled. Mirrors .auth-message and uses
   per-theme color tokens so it's WCAG-AA in every theme. */
.alert {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 8px;
    border: 1px solid transparent;
}
.alert-success {
    background: var(--green-bg);
    border-color: var(--green-border);
    color: var(--green-text, #4C7A2F);
}
.alert-error,
.alert-danger {
    background: var(--red-bg);
    border-color: var(--red-border);
    color: var(--red-text, #A8431F);
}
.alert-warning {
    background: var(--amber-bg);
    border-color: rgba(217, 119, 6, 0.2);
    color: var(--amber-text, #B45309);
}
.alert-info,
.alert-debug {
    background: var(--cyan-bg);
    border-color: rgba(8, 145, 178, 0.15);
    color: #0E7490;
}

/* ============================================
   Legal Pages (Privacy Policy, Terms of Service)
   ============================================ */
.legal-body .auth-page {
    max-width: 800px;
    padding: 2rem 1.5rem;
}

.legal-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--card-shadow);
}

.legal-card h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.legal-effective {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.legal-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.legal-card ul,
.legal-card ol {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-card li {
    margin-bottom: 0.35rem;
}

.legal-card a {
    color: var(--primary);
    text-decoration: underline;
}

.legal-card strong {
    color: var(--text-primary);
    font-weight: 600;
}

.legal-card table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.legal-card th,
.legal-card td {
    border: 1px solid var(--border-light);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.legal-card th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

/* TOS consent field on signup */
.auth-consent-field {
    margin-bottom: 1rem;
}

.auth-consent-field .auth-checkbox span {
    line-height: 1.4;
}

.auth-consent-field .auth-checkbox a {
    color: var(--accent-text);
    text-decoration: underline;
}

.auth-field-error {
    color: var(--red-text, #A8431F);
    font-size: 0.75rem;
    margin-top: 4px;
}

/* Home page footer */
.home-footer {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 2rem 0 1rem;
}

.home-footer a {
    color: var(--text-muted);
    text-decoration: underline;
}

/* Dashboard legal footer */
.dashboard-legal-footer {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 1.5rem 0 1rem;
    margin-top: auto;
}

.dashboard-legal-footer a {
    color: var(--text-muted);
    text-decoration: none;
}

.dashboard-legal-footer a:hover {
    text-decoration: underline;
}

.dashboard-legal-footer span {
    margin: 0 0.35rem;
    opacity: 0.5;
}

/* Legal links in auth footer */
.auth-legal-links {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.5rem;
}

.auth-legal-links a {
    color: var(--text-secondary);
    text-decoration: underline;
}

/* MFA nudge banner on dashboard */
.mfa-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--cyan-bg, rgba(6, 182, 212, 0.08));
    border: 1px solid rgba(8, 145, 178, 0.15);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mfa-nudge__content {
    flex: 1;
}

.mfa-nudge__link {
    color: var(--accent-text, #4C7A2F);
    font-weight: 600;
    text-decoration: underline;
}

.mfa-nudge--warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}

.mfa-nudge__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
}

/* ── Generic collapsible card (Phase 128) ──────────────────────────
   Wraps a `.card` around `<details>` so the section behaves like a
   standard card but its body collapses behind a clickable header with
   a chevron that rotates 90° on open. Used by the support page;
   reusable anywhere a section should default-collapse to keep the
   page scannable. Native <details> means no JS — works with our CSP
   (no inline handlers needed). */
.collapsible-card {
    padding: 0;
    overflow: hidden;
}
.collapsible-card__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.collapsible-card__summary::-webkit-details-marker { display: none; }
.collapsible-card[open] .collapsible-card__summary {
    border-bottom: 1px solid var(--border);
}
.collapsible-card__summary > .section-label__text {
    flex: 1;
}
.collapsible-card__chevron {
    /* Unicode chevron rendered as text. We avoid CSS-border triangles
       because Chromium computes `transform` as identity on a zero-sized
       border-only box, so the open-state rotation never visually fires
       (verified Phase 128). Inline-block + an explicit width gives the
       transform a real bounding box to rotate around. */
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 0.15s ease, color 0.15s ease;
}
.collapsible-card__chevron::before {
    content: "\25B8"; /* ▸ — points right when closed */
}
.collapsible-card[open] .collapsible-card__chevron {
    transform: rotate(90deg); /* rotates to ▾ when open */
}
.collapsible-card__summary:hover .collapsible-card__chevron,
.collapsible-card__summary:focus-visible .collapsible-card__chevron {
    color: var(--accent-text, #4C7A2F);
}
.collapsible-card__summary:focus-visible {
    outline: 2px solid var(--accent-text, #4C7A2F);
    outline-offset: -2px;
}
.collapsible-card__body {
    padding: 16px;
}

/* Consolidated "Secure your account" card (dashboard) */
.security-setup {
    border-radius: 10px;
    background: var(--cyan-bg, rgba(6, 182, 212, 0.08));
    border: 1px solid rgba(8, 145, 178, 0.18);
    overflow: hidden;
}
.security-setup__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.security-setup__summary::-webkit-details-marker { display: none; }
.security-setup[open] .security-setup__summary { border-bottom: 1px solid rgba(8, 145, 178, 0.15); }
.security-setup__icon { font-size: 18px; }
.security-setup__title { flex: 1; }
.security-setup__count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(8, 145, 178, 0.12);
    padding: 2px 8px;
    border-radius: 999px;
}
.security-setup__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.security-setup__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgba(8, 145, 178, 0.1);
}
.security-setup__item:first-child { border-top: none; }
.security-setup__item--warning {
    background: rgba(245, 158, 11, 0.08);
}
.security-setup__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.security-setup__action {
    color: var(--accent-text, #4C7A2F);
    font-weight: 600;
    text-decoration: underline;
    font-size: 0.85rem;
    white-space: nowrap;
}
.security-setup__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
}

/* Plaid pre-flight toast — brief heads-up before redirecting the user
   to MFA / email-verification when they click "Connect Bank". */
.plaid-preflight-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 3000;
    background: var(--text-primary, #0f172a);
    color: var(--surface, #ffffff);
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    max-width: 420px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
}
.plaid-preflight-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Financial-term tooltip — small ? icon that reveals a definition
   on hover / keyboard focus. Used in debt paydown and balance sheet
   where terms like PMI, P&I, YTD Interest need disambiguation. */
.finance-term {
    display: inline;
    position: relative;
    white-space: nowrap;
}
.finance-term__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface-muted, rgba(148, 163, 184, 0.2));
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: help;
    line-height: 1;
    vertical-align: baseline;
}
.finance-term__icon:focus-visible {
    outline: 2px solid var(--accent-text, #4C7A2F);
    outline-offset: 2px;
}
.finance-term__icon sup {
    font-size: 9px;
    line-height: 1;
    top: 0;
}
.finance-term__tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary, #0f172a);
    color: var(--surface, #ffffff);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    width: max-content;
    max-width: 260px;
    white-space: normal;
    text-align: left;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    z-index: 2500;
}
.finance-term__icon:hover .finance-term__tooltip,
.finance-term__icon:focus-visible .finance-term__tooltip,
.finance-term__icon:focus .finance-term__tooltip {
    opacity: 1;
}
/* Pointer arrow on the tooltip */
.finance-term__tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text-primary, #0f172a);
}

/* ============================================
   Family Sharing
   ============================================ */
.badge-family {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(141, 177, 58, 0.12);
    color: var(--accent-text, #4C7A2F);
}

.family-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.family-toggle a {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

.family-toggle a.active {
    background: var(--accent);
    color: #fff;
}

.family-toggle a:not(.active):hover {
    background: var(--surface-alt);
}

.shared-item {
    border-left: 3px solid var(--accent);
    padding-left: 10px;
}


/* =============================================================================
   Gamification: Badges & Streaks
   ============================================================================= */

/* ── Badge Grid ─────────────────────────────────────────────────────── */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.badge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.2s;
}

.badge-card:hover {
    border-color: var(--accent-text, #4C7A2F);
    box-shadow: 0 0 10px rgba(141, 177, 58, 0.12);
    transform: translateY(-2px);
}

.badge-card--locked {
    opacity: 0.8;
    filter: grayscale(80%);
}

.badge-card--locked:hover {
    border-color: var(--border);
    box-shadow: none;
    transform: none;
}

.badge-card__icon {
    font-size: 28px;
    line-height: 1;
}

.badge-card__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.badge-card__desc {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.badge-card__date {
    font-size: 10px;
    color: var(--accent-text, #4C7A2F);
    font-weight: 500;
}

/* ── Badge Progress Bar ─────────────────────────────────────────────── */
.badge-progress-bar {
    height: 8px;
    background: var(--surface-alt);
    border-radius: 4px;
    overflow: hidden;
}

.badge-progress-bar__fill {
    height: 100%;
    background: var(--accent, #8DB13A);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 2px;
}

/* ── Dashboard Widget ───────────────────────────────────────────────── */
.gamification-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
}

.gamification-widget__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.gamification-widget__link:hover {
    opacity: 0.9;
}

/* ── Streak & Badge Pills ───────────────────────────────────────────── */
.streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    background: var(--amber-bg, rgba(217, 119, 6, 0.1));
    color: var(--amber-text, var(--amber, #d97706));
    font-size: 13px;
    font-weight: 600;
}

.badge-pill {
    /* Pill supports both a single-emoji round badge AND a short text badge
       (e.g. "Debt Free", "Weekly Reviewer"). Pre-Phase-92 it was a fixed
       28x28 circle, so text-bearing badges overflowed and visually
       overlapped their neighbours. Auto-width + pill border-radius + a
       small horizontal padding keeps both forms looking right. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 2px 10px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 14px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* ── Challenge Cards ────────────────────────────────────────────────── */
.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.challenge-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    transition: all 0.2s;
}

.challenge-card:hover {
    border-color: var(--accent-text, #4C7A2F);
    box-shadow: 0 0 12px rgba(141, 177, 58, 0.1);
}

.challenge-card--active {
    border-left: 3px solid var(--accent);
}

.challenge-card--completed {
    border-left: 3px solid var(--green, #22c55e);
}

.challenge-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.challenge-card__icon {
    font-size: 24px;
}

.challenge-card__name {
    font-size: 13px;
    font-weight: 600;
}

.challenge-card__type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-text, #4C7A2F);
    background: rgba(141, 177, 58, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
}

.challenge-card__desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.challenge-card__progress-wrap {
    margin-top: auto;
}

.challenge-card__progress {
    height: 6px;
    background: var(--surface-alt);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.challenge-card__progress-fill {
    height: 100%;
    background: var(--accent, #8DB13A);
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.challenge-card__stats {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.challenge-card__meta {
    margin-top: 2px;
}

.challenge-card__join {
    width: 100%;
    margin-top: 4px;
}

.challenge-card__date {
    font-size: 10px;
    color: var(--green, #22c55e);
    font-weight: 500;
}

/* ── Challenge Dashboard Pill ──────────────────────────────────────── */
.challenge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    background: rgba(141, 177, 58, 0.08);
    color: var(--accent-text, #4C7A2F);
    font-size: 12px;
    font-weight: 600;
}

/* ── Level Badge ────────────────────────────────────────────────────── */
.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(141, 177, 58, 0.12), rgba(6, 182, 212, 0.12));
    color: var(--accent-text, #4C7A2F);
    font-size: 12px;
    font-weight: 700;
}
.level-badge--large {
    padding: 8px 16px;
    font-size: 20px;
    border-radius: 20px;
}

/* ── Level Progress Bar ────────────────────────────────────────────── */
.level-progress-bar {
    height: 8px;
    background: var(--card-border);
    border-radius: 4px;
    overflow: hidden;
}
.level-progress-bar__fill {
    height: 100%;
    background: var(--accent, #8DB13A);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ── Level List ────────────────────────────────────────────────────── */
.level-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.level-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.level-item--reached {
    color: var(--text);
}
.level-item--current {
    background: rgba(141, 177, 58, 0.06);
    color: var(--accent-text, #4C7A2F);
    font-weight: 600;
}
.level-item__icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
}
.level-item__name {
    flex: 1;
}
.level-item__points {
    font-size: 11px;
}
.level-item__badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--accent-text, #4C7A2F);
    color: #fff;
}
.level-item__check {
    color: var(--green, #22c55e);
    font-weight: 700;
}

/* ── Points History ────────────────────────────────────────────────── */
.points-history {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.points-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--card-border);
}
.points-entry:last-child {
    border-bottom: none;
}
.points-entry__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.points-entry__reason {
    font-size: 13px;
    font-weight: 500;
}
.points-entry__date {
    font-size: 11px;
}
.points-entry__amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--green-text, var(--green, #22c55e));
    white-space: nowrap;
}

/* ── Level Pill (Dashboard Widget) ─────────────────────────────────── */
.level-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(141, 177, 58, 0.08), rgba(6, 182, 212, 0.08));
    color: var(--accent-text, #4C7A2F);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

/* ── Leaderboard ───────────────────────────────────────────────────── */
.leaderboard-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.leaderboard-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--card-border);
}
.leaderboard-row {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--card-border);
    font-size: 13px;
}
.leaderboard-row:last-child {
    border-bottom: none;
}
.leaderboard-row--me {
    background: rgba(141, 177, 58, 0.06);
    font-weight: 600;
}
.leaderboard-col--rank { width: 50px; text-align: center; }
.leaderboard-col--name { flex: 1; min-width: 0; }
.leaderboard-col--level { width: 60px; text-align: center; }
.leaderboard-col--points { width: 80px; text-align: right; }
.leaderboard-col--badges { width: 60px; text-align: center; }
.leaderboard-col--streak { width: 60px; text-align: center; }
.leaderboard-col--challenges { width: 80px; text-align: center; }

/* Family dashboard leaderboard widget */
.leaderboard-widget__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.leaderboard-widget__row:last-child { border-bottom: none; }
.leaderboard-widget__row--me { font-weight: 600; }
.leaderboard-widget__rank { width: 24px; text-align: center; font-size: 16px; }
.leaderboard-widget__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Season card styles */
.season-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
/* Phase 119: state is conveyed via explicit "Upcoming" badge and section
   header text, NOT opacity — opacity stacked on `color-muted` children
   tipped 15 elements below WCAG 2 AA contrast (UserBot run #97). The
   subtle border/surface differences below give the same "secondary"
   feeling without dimming text. */
.season-card--upcoming {
    background: var(--surface-alt);
    border-style: dashed;
}
.season-card--past {
    background: var(--surface-alt);
}
.season-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.season-card__icon { font-size: 28px; }
.season-card__challenges {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.season-challenge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
/* Phase 119: same rationale as season-card variants above — done rows
   already carry "✓ Done" in green, locked rows live inside an
   "Upcoming" card that's already labelled as such. No opacity needed. */
.season-challenge-row--done .season-challenge-row__info { color: var(--text-muted); }
.season-challenge-row__icon { font-size: 18px; width: 24px; text-align: center; }
.season-challenge-row__info { flex: 1; min-width: 0; }
.season-challenge-row__progress { flex-shrink: 0; }
/* Phase 129: muted text inside upcoming/past season cards sits on
   --surface-alt (#F1F5F9 / #334155). #64748B on #F1F5F9 = 4.41:1 (light)
   and #94A3B8 on #334155 = 4.10:1 (dark) both fail WCAG 2 AA 4.5:1 — see
   UserBot Live Site Scan run #103 (2026-05-04). Promote to --text-secondary,
   which clears AA on both surface-alt variants. */
.season-card--upcoming .color-muted,
.season-card--past .color-muted {
    color: var(--text-secondary);
}

/* ── Health Score ───────────────────────────────────────────────────── */
.health-gauge {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
}
.health-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.health-gauge__track {
    fill: none;
    stroke: var(--border);
    stroke-width: 12;
}
.health-gauge__ring {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease, stroke 0.3s;
}
.health-gauge--excellent .health-gauge__ring { stroke: var(--green); }
.health-gauge--good .health-gauge__ring { stroke: var(--accent); }
.health-gauge--fair .health-gauge__ring { stroke: var(--amber); }
.health-gauge--poor .health-gauge__ring { stroke: var(--red); }
.health-gauge__value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.health-gauge__score {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
}
.health-gauge__label {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}
.health-gauge--excellent .health-gauge__score { color: var(--green-text, #4C7A2F); }
.health-gauge--good .health-gauge__score { color: var(--accent-text, #4C7A2F); }
.health-gauge--fair .health-gauge__score { color: var(--amber-text, #B45309); }
.health-gauge--poor .health-gauge__score { color: var(--red-text, #A8431F); }

.health-components {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.health-component {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.health-component__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.health-component__icon {
    font-size: 20px;
}
.health-component__label {
    font-size: 14px;
    font-weight: 600;
}
.health-component__score {
    margin-left: auto;
    font-size: 16px;
    font-weight: 700;
}
.health-component__bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.health-component__bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.health-component__bar-fill--excellent { background: var(--green); }
.health-component__bar-fill--good { background: var(--accent); }
.health-component__bar-fill--fair { background: var(--amber); }
.health-component__bar-fill--poor { background: var(--red); }
.health-component__desc {
    font-size: 12px;
    color: var(--text-muted);
}

.health-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--amber);
    border-radius: var(--radius);
    padding: 12px 16px;
}
.health-tip__icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.health-tip__text {
    font-size: 13px;
    line-height: 1.5;
}
.health-tip__label {
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.health-widget-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.health-widget-pill:hover { opacity: 0.8; }
.health-widget-pill--excellent { background: rgba(34,197,94,0.15); color: var(--green-text, #4C7A2F); }
.health-widget-pill--good { background: rgba(141,177,58,0.15); color: var(--accent-text, #4C7A2F); }
.health-widget-pill--fair { background: rgba(245,158,11,0.15); color: var(--amber-text, #B45309); }
.health-widget-pill--poor { background: rgba(239,68,68,0.15); color: var(--red-text, #A8431F); }

/* ── Budget Streaks ────────────────────────────────────────────────── */
.budget-streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    background: var(--border);
    color: var(--text-muted);
}
.budget-streak-pill--active {
    background: rgba(245,158,11,0.15);
    color: var(--amber-text, #B45309);
}
.budget-streak-pill--broken {
    background: rgba(239,68,68,0.1);
    color: var(--red-text, #A8431F);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }
    .badge-card {
        padding: 12px 8px;
    }
    .badge-card__icon {
        font-size: 22px;
    }
    .challenge-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .challenge-card {
        padding: 12px;
    }
    .level-item {
        padding: 8px 10px;
        font-size: 12px;
    }
    .level-item__icon {
        font-size: 16px;
    }
    .health-gauge {
        width: 160px;
        height: 160px;
    }
    .health-gauge__score {
        font-size: 36px;
    }
    .health-components {
        grid-template-columns: 1fr;
    }
}

/* ── Milestone Celebrations ────────────────────────────────────────── */

.celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    pointer-events: none;
    display: none;
}

.celebration-confetti-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.celebration-confetti {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    opacity: 0;
    animation: confettiDrop 2.5s ease-out forwards;
}

@keyframes confettiDrop {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

.celebration-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    pointer-events: all;
    z-index: 10001;
    max-width: 400px;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.celebration-toast--visible {
    transform: translateY(0);
    opacity: 1;
}

.celebration-toast--hiding {
    transform: translateY(120%);
    opacity: 0;
}

.celebration-toast__icon {
    font-size: 36px;
    flex-shrink: 0;
    line-height: 1;
}

.celebration-toast__content {
    flex: 1;
    min-width: 0;
}

.celebration-toast__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.celebration-toast__message {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.celebration-toast__dismiss {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.celebration-toast__dismiss:hover {
    color: var(--text);
}

@media (max-width: 600px) {
    .celebration-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

/* ── Weekly Recaps ─────────────────────────────────────────────────── */

.recap-card {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.recap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.recap-card__period {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recap-card__icon {
    font-size: 20px;
}

.recap-card__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
}

.recap-card__stat-value {
    font-size: 16px;
    font-weight: 700;
}

.recap-card__stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.recap-card__badges {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.recap-detail__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.recap-detail__row:last-child {
    border-bottom: none;
}

.recap-detail__goal {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.recap-detail__goal:last-child {
    border-bottom: none;
}

.recap-section {
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .recap-card__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Spending Challenges ──────────────────────────────────────── */

.spending-type-toggle {
    display: flex;
    gap: 12px;
}

.spending-type-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.spending-type-option input[type="radio"] {
    display: none;
}

.spending-type-option:hover {
    border-color: var(--accent-text, #4C7A2F);
}

.spending-type-option--active {
    border-color: var(--accent-text, #4C7A2F);
    background: var(--accent-bg);
}

.spending-type-option__icon {
    font-size: 24px;
}

.spending-type-option__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.spending-type-option__desc {
    font-size: 11px;
    color: var(--text-muted);
}

.spending-duration-toggle {
    display: flex;
    gap: 12px;
}

.spending-duration-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.spending-duration-option input[type="radio"] {
    display: none;
}

.spending-duration-option:hover {
    border-color: var(--accent-text, #4C7A2F);
}

.spending-duration-option--active {
    border-color: var(--accent-text, #4C7A2F);
    background: var(--accent-bg);
}

.spending-duration-option__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.challenge-card--failed {
    opacity: 0.7;
}

.challenge-card__progress-fill--success {
    background: var(--green);
}

.challenge-card__progress-fill--warning {
    background: var(--amber);
}

.challenge-card__progress-fill--danger {
    background: var(--red);
}

@media (max-width: 600px) {
    .spending-type-toggle,
    .spending-duration-toggle {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════
   FILTER GRID RESPONSIVE (new layout)
   ═══════════════════════════════════════ */

@media (max-width: 600px) {
  .filter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .filter-group--wide { grid-column: span 2; }
  .filter-bar { padding: 12px; }
  .filter-actions { flex-wrap: wrap; }
  .filter-actions .btn-primary,
  .filter-actions .btn-outline { flex: 1; text-align: center; }
}

@media (max-width: 400px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }
  .filter-group--wide { grid-column: span 1; }
}

/* ═══════════════════════════════════════
   ADDITIONAL THEMES
   ═══════════════════════════════════════ */

/* ─── EMERALD BANKING THEME (Light) ─── */
[data-theme="emerald_banking"] {
  --bg: #F0FDF4;
  --surface: #ffffff;
  --surface-alt: #ECFDF5;
  --border: rgba(5, 150, 105, 0.08);
  --border-strong: rgba(5, 150, 105, 0.15);
  --text: #064E3B;
  --text-secondary: #065F46;
  --text-muted: #047857;
  --topbar-bg: rgba(240, 253, 244, 0.88);
  --accent: #059669;
  --accent-glow: rgba(5, 150, 105, 0.2);
  --accent-pill-bg: #ECFDF5;
  --gradient: linear-gradient(135deg, #059669, #10B981);
  --hero-bg: linear-gradient(135deg, #F0FDF4 0%, #D1FAE5 50%, #F0FDF4 100%);
  --hero-orb: rgba(5, 150, 105, 0.06);
  --hero-orb-grad: radial-gradient(circle, var(--hero-orb) 0%, transparent 70%);
  --green: #16a34a;
  --green-bg: rgba(22, 163, 74, 0.07);
  --green-border: rgba(22, 163, 74, 0.15);
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.06);
  --red-border: rgba(220, 38, 38, 0.12);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.06);
  --cyan: #0891b2;
  --cyan-bg: rgba(8, 145, 178, 0.06);
  --pink: #db2777;
  --progress-track: rgba(5, 150, 105, 0.06);
  --tip-bg: linear-gradient(135deg, rgba(5, 150, 105, 0.04), rgba(16, 185, 129, 0.04));
  --tip-border: rgba(5, 150, 105, 0.12);
  --tip-text: #047857;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --toggle-bg: #ECFDF5;
  --toggle-border: rgba(5, 150, 105, 0.2);
  --subtle-bg: rgba(255, 255, 255, 0.8);
  --subtle-border: rgba(5, 150, 105, 0.06);
  --inset-bg: rgba(5, 150, 105, 0.02);
  --inset-border: rgba(5, 150, 105, 0.04);
  --table-header: rgba(5, 150, 105, 0.03);
  --table-row-alt: rgba(5, 150, 105, 0.015);
  --grid-line: rgba(5, 150, 105, 0.06);
  --win-bg: rgba(22, 163, 74, 0.05);
  --win-border: rgba(22, 163, 74, 0.15);
  --hero-text: #064E3B;
  --focus-ring: rgba(5, 150, 105, 0.5);
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --modal-bg: #ffffff;
  --accent-text: #047857;
  --green-text: #15803d;
  --amber-text: #B45309;
  --red-text: #B91C1C;
}

[data-theme="emerald_banking"] .sidebar {
  background: linear-gradient(180deg, #064E3B 0%, #065F46 100%);
  border-right-color: rgba(5, 150, 105, 0.15);
}

/* ─── FROST GLASS THEME (Light, Glassmorphism) ─── */
[data-theme="frost_glass"] {
  --bg: #F0F4FF;
  --surface: rgba(255, 255, 255, 0.65);
  --surface-alt: rgba(241, 245, 249, 0.7);
  --border: rgba(99, 102, 241, 0.1);
  --border-strong: rgba(99, 102, 241, 0.2);
  --text: #1E1B4B;
  --text-secondary: #3730A3;
  --text-muted: #4338CA;
  --topbar-bg: rgba(240, 244, 255, 0.85);
  --accent: #6366F1;
  --accent-glow: rgba(99, 102, 241, 0.25);
  --accent-pill-bg: rgba(255, 255, 255, 0.45);
  --gradient: linear-gradient(135deg, #6366F1, #818CF8);
  --hero-bg: linear-gradient(135deg, #F0F4FF 0%, #E0E7FF 50%, #F0F4FF 100%);
  --hero-orb: rgba(99, 102, 241, 0.08);
  --hero-orb-grad: radial-gradient(circle, var(--hero-orb) 0%, transparent 70%);
  --green: #16a34a;
  --green-bg: rgba(22, 163, 74, 0.07);
  --green-border: rgba(22, 163, 74, 0.15);
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.06);
  --red-border: rgba(220, 38, 38, 0.12);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.06);
  --cyan: #0891b2;
  --cyan-bg: rgba(8, 145, 178, 0.06);
  --pink: #db2777;
  --progress-track: rgba(99, 102, 241, 0.06);
  --tip-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(129, 140, 248, 0.06));
  --tip-border: rgba(99, 102, 241, 0.12);
  --tip-text: #4338CA;
  --card-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  --toggle-bg: rgba(224, 231, 255, 0.6);
  --toggle-border: rgba(99, 102, 241, 0.2);
  --subtle-bg: rgba(255, 255, 255, 0.5);
  --subtle-border: rgba(99, 102, 241, 0.08);
  --inset-bg: rgba(99, 102, 241, 0.03);
  --inset-border: rgba(99, 102, 241, 0.06);
  --table-header: rgba(99, 102, 241, 0.04);
  --table-row-alt: rgba(99, 102, 241, 0.02);
  --grid-line: rgba(99, 102, 241, 0.06);
  --win-bg: rgba(22, 163, 74, 0.05);
  --win-border: rgba(22, 163, 74, 0.15);
  --hero-text: #1E1B4B;
  --focus-ring: rgba(99, 102, 241, 0.5);
  --overlay-bg: rgba(0, 0, 0, 0.4);
  --modal-bg: rgba(255, 255, 255, 0.9);
  --accent-text: #4338CA;
  --green-text: #15803d;
  --amber-text: #B45309;
  --red-text: #B91C1C;
}

[data-theme="frost_glass"] .sidebar {
  background: linear-gradient(180deg, #312E81 0%, #4338CA 100%);
  border-right-color: rgba(99, 102, 241, 0.2);
}

[data-theme="frost_glass"] .card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Floating menus/panels must stay readable over content (2026-07-24 mobile
   bug): the glass --surface (0.65 alpha) works for in-flow cards, which get
   the blur above, but every DROPDOWN inherited the alpha with NO blur and
   rendered semi-transparent over the page. Near-opaque bg + the same blur.
   Covers both chromes: classic topbar dropdowns + the assistant shell's
   menu panels/left sidebar (assistant.css uses the same var). */
[data-theme="frost_glass"] .notification-dropdown,
[data-theme="frost_glass"] .user-dropdown-content,
[data-theme="frost_glass"] .topbar-menu__panel,
[data-theme="frost_glass"] .category-autocomplete__list,
[data-theme="frost_glass"] .ashell-menu__panel {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* The assistant shell's top bar sits on the 0.65 --surface, which shows the
   page through it. Fix it with a near-opaque background, NEVER a blur:
   backdrop-filter (like transform/filter/perspective) makes an element the
   containing block for its position:fixed descendants, and the shell's
   sidebar + Reports panels and their click-away scrim are fixed children of
   this bar. A blur here resolved their `top:66px; bottom:8px` against the
   61px-tall bar instead of the viewport, collapsing the Plan & approvals
   sidebar to a 22px sliver that would not open (2026-08-02, frost_glass
   only). Blur is fine on the panels above — nothing fixed lives inside them.
   The bar is a flex row at the top of the column, so nothing scrolls beneath
   it and the blur bought no visual effect anyway. Guarded by
   agent_authorization/tests/test_web.py::TestSidebarPanelFixedPositioning. */
[data-theme="frost_glass"] .ashell-topbar {
  background: rgba(255, 255, 255, 0.96);
}

/* ─── CARBON THEME (Dark, True Black) ─── */
[data-theme="carbon"] {
  --bg: #000000;
  --surface: #0A0A0A;
  --surface-alt: #171717;
  --border: rgba(34, 211, 238, 0.08);
  --border-strong: rgba(34, 211, 238, 0.15);
  --text: #E4E4E7;
  --text-secondary: #D4D4D8;
  --text-muted: #A1A1AA;
  --topbar-bg: rgba(0, 0, 0, 0.92);
  --accent: #22D3EE;
  --accent-glow: rgba(34, 211, 238, 0.2);
  --accent-pill-bg: #0D1B1F;
  --gradient: linear-gradient(135deg, #22D3EE, #06B6D4);
  --hero-bg: linear-gradient(135deg, #000000 0%, #0A0A0A 50%, #000000 100%);
  --hero-orb: rgba(34, 211, 238, 0.08);
  --hero-orb-grad: radial-gradient(circle, var(--hero-orb) 0%, transparent 70%);
  --green: #22c55e;
  --green-bg: rgba(34, 197, 94, 0.1);
  --green-border: rgba(34, 197, 94, 0.2);
  --red: #ef4444;
  --red-bg: rgba(239, 68, 68, 0.1);
  --red-border: rgba(239, 68, 68, 0.2);
  --amber: #f59e0b;
  --amber-bg: rgba(245, 158, 11, 0.1);
  --cyan: #06b6d4;
  --cyan-bg: rgba(6, 182, 212, 0.1);
  --pink: #ec4899;
  --progress-track: rgba(255, 255, 255, 0.04);
  --tip-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(6, 182, 212, 0.06));
  --tip-border: rgba(34, 211, 238, 0.12);
  --tip-text: #67E8F9;
  --card-shadow: none;
  --toggle-bg: rgba(34, 211, 238, 0.08);
  --toggle-border: rgba(34, 211, 238, 0.15);
  --subtle-bg: rgba(255, 255, 255, 0.03);
  --subtle-border: rgba(255, 255, 255, 0.05);
  --inset-bg: rgba(255, 255, 255, 0.02);
  --inset-border: rgba(255, 255, 255, 0.03);
  --table-header: rgba(34, 211, 238, 0.05);
  --table-row-alt: rgba(255, 255, 255, 0.015);
  --grid-line: rgba(255, 255, 255, 0.03);
  --win-bg: rgba(34, 197, 94, 0.08);
  --win-border: rgba(34, 197, 94, 0.2);
  --hero-text: #ffffff;
  --focus-ring: rgba(34, 211, 238, 0.5);
  --overlay-bg: rgba(0, 0, 0, 0.8);
  --modal-bg: #0A0A0A;
  --accent-text: #22D3EE;
  --green-text: #4ADE80;
  --amber-text: #FBBF24;
  --red-text: #F87171;
  color-scheme: dark;
}

[data-theme="carbon"] .sidebar {
  background: linear-gradient(180deg, #000000 0%, #0A0A0A 100%);
  border-right-color: rgba(34, 211, 238, 0.1);
}

[data-theme="carbon"] input,
[data-theme="carbon"] select,
[data-theme="carbon"] textarea {
  background-color: var(--surface-alt);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="carbon"] input:focus,
[data-theme="carbon"] select:focus,
[data-theme="carbon"] textarea:focus {
  border-color: var(--accent-text, #4C7A2F);
}

[data-theme="carbon"] option {
  background-color: var(--surface);
  color: var(--text);
}

/* ─── Theme Gallery Cards ─── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.theme-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.theme-card:hover {
  border-color: var(--border-strong);
}

.theme-card--active {
  border-color: var(--accent-text, #4C7A2F);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.theme-card--locked {
  opacity: 0.7;
}

.theme-card__preview {
  height: 100px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 10px 10px 0 0;
}

.theme-card__preview-bar {
  height: 12px;
  border-radius: 4px;
}

.theme-card__preview-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  flex: 1;
}

.theme-card__preview-text {
  font-size: 24px;
  font-weight: 700;
}

.theme-card__preview-accent {
  width: 32px;
  height: 16px;
  border-radius: 4px;
}

.theme-card__info {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.theme-card__lock {
  display: flex;
  align-items: center;
  gap: 4px;
}

.theme-card__lock-icon {
  font-size: 14px;
}

.theme-card__status--active {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-text, #4C7A2F);
}

@media (max-width: 600px) {
    .theme-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .theme-card__preview {
        height: 80px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FORUM
   ═══════════════════════════════════════════════════════════════════ */

/* Category filter tabs */
.forum-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.forum-category-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.forum-category-tab:hover {
    color: var(--text);
    border-color: var(--accent-text, #4C7A2F);
}

.forum-category-tab--active {
    color: #fff;
    background: var(--accent-text, #4C7A2F);
    border-color: var(--accent-text, #4C7A2F);
}

/* Post row (list item) */
.forum-post-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.forum-post-row:last-child {
    border-bottom: none;
}

.forum-post-row--pinned {
    border-left: 3px solid var(--warning, #d97706);
    padding-left: 12px;
    margin-left: -12px;
}

.forum-post-row__main {
    flex: 1;
    min-width: 0;
}

.forum-post-row__title-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.forum-post-row__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-post-row__title:hover {
    color: var(--accent-text, #4C7A2F);
}

.forum-post-row__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.forum-post-row__sep {
    color: var(--border);
}

.forum-post-row__stats {
    flex-shrink: 0;
    margin-left: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Pinned / Locked badges */
.forum-pinned-badge,
.forum-locked-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.forum-pinned-badge {
    background: var(--warning-bg, #fef3c7);
    color: var(--warning, #d97706);
}

.forum-locked-badge {
    background: var(--info-bg, #dbeafe);
    color: var(--info, #6b7280);
}

/* Post detail */
.forum-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.forum-post-category {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.forum-post-actions {
    display: flex;
    gap: 8px;
}

.forum-post-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.forum-post-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* Markdown rendered content */
.forum-post-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    word-break: break-word;
}

.forum-post-content h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 20px 0 8px;
    color: var(--text);
}

.forum-post-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 16px 0 6px;
    color: var(--text);
}

.forum-post-content p {
    margin: 0 0 12px;
}

.forum-post-content ul,
.forum-post-content ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.forum-post-content blockquote {
    margin: 12px 0;
    padding: 8px 16px;
    border-left: 3px solid var(--accent);
    background: var(--bg);
    border-radius: 0 4px 4px 0;
    color: var(--text-muted);
}

.forum-post-content code {
    font-family: monospace;
    font-size: 13px;
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--accent-text, #4C7A2F);
}

.forum-post-content pre {
    margin: 12px 0;
    padding: 14px;
    background: var(--bg);
    border-radius: 6px;
    overflow-x: auto;
}

.forum-post-content pre code {
    background: none;
    padding: 0;
}

.forum-post-content a {
    color: var(--accent-text, #4C7A2F);
    text-decoration: underline;
}

.forum-post-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

/* Author card */
.forum-author-card {
    display: flex;
    align-items: center;
    gap: 10px;
}

.forum-author-avatar-wrap {
    flex-shrink: 0;
}

.forum-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
}

.forum-author-avatar--img {
    object-fit: cover;
}

.forum-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forum-author-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.forum-author-level {
    font-size: 11px;
    color: var(--text-muted);
}

.forum-author-badges {
    display: flex;
    gap: 2px;
}

.forum-author-badge {
    font-size: 12px;
    cursor: default;
}

/* Reply */
.forum-reply {
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.forum-reply:first-child {
    border-top: none;
}

.forum-reply-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.forum-reply-meta {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.forum-reply-content {
    padding-left: 46px;
}

.forum-reply-actions {
    display: flex;
    gap: 6px;
    padding-left: 46px;
    margin-top: 6px;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Forum empty state */
.forum-empty {
    padding: 20px;
}


/* ═══════════════════════════════════════════════════════════════════
   FAMILY CHAT
   ═══════════════════════════════════════════════════════════════════ */

.family-chat {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}
.family-chat__messages {
    max-height: 400px;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.family-chat__message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 85%;
}
.family-chat__message--own {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.family-chat__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.family-chat__avatar--img {
    object-fit: cover;
    padding: 0;
    background: none;
}
.family-chat__message-bubble {
    background: var(--surface-alt, var(--surface));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    position: relative;
}
.family-chat__message--own .family-chat__message-bubble {
    background: var(--accent-bg, rgba(141, 177, 58, 0.1));
    border-color: var(--accent-border, rgba(141, 177, 58, 0.25));
}
.family-chat__message-sender {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.family-chat__message--own .family-chat__message-sender {
    display: none;
}
.family-chat__message-content {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
    color: var(--text-primary);
}
.family-chat__message-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}
.family-chat__message-edited {
    font-style: italic;
    color: var(--text-muted);
    font-size: 10px;
}
.family-chat__message-actions {
    display: none;
    gap: 4px;
    margin-top: 4px;
}
.family-chat__message:hover .family-chat__message-actions {
    display: flex;
}
.chat-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.7;
}
.chat-action-btn:hover {
    opacity: 1;
    background: var(--surface-alt, var(--bg-secondary));
}
.family-chat__input {
    border-top: 1px solid var(--border);
    padding: 10px 14px;
}
.family-chat__input textarea {
    resize: none;
    margin-bottom: 6px;
}
.family-chat__input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.family-chat__empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Forum responsive ── */
@media (max-width: 768px) {
    .forum-category-tabs { gap: 4px; }
    .forum-post-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 12px 0;
    }
    .forum-post-row__stats {
        display: none;
    }
    .forum-post-row__meta {
        flex-wrap: wrap;
    }
    .forum-reply-content {
        padding-left: 0;
    }
    .forum-reply-actions {
        padding-left: 0;
    }
    .forum-reply-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    .forum-reply-meta {
        margin-left: 0;
    }
}

/* ── Family chat responsive ── */
@media (max-width: 768px) {
    .family-chat__messages {
        padding: 8px 0;
    }
    .family-chat__message {
        gap: 8px;
    }
    .family-chat__message-bubble {
        max-width: 90%;
    }
    .family-chat__input {
        padding: 8px 10px;
    }
    .chat-action-btn {
        min-height: 36px;
        min-width: 36px;
        font-size: 13px;
        padding: 4px 8px;
    }
}

/* Accent link utility for body-copy links (ensures WCAG-compliant underline, not color-only) */
.link-accent {
    color: var(--accent-text, #4C7A2F);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-accent:hover {
    text-decoration-thickness: 2px;
}

/* ────────────────────────────────────────────────────────────────────────
   Support ticket rows — status color-coding (Phase 137)

   Each ticket row in the user + staff lists gets a 4px colored left border
   matching its status, plus a faint background tint, so scanning a list
   surfaces the status mix at a glance (not just via the small text pill).
   Color palette matches the existing status badges:
     open         → amber  (needs attention)
     in_progress  → accent (work happening)
     resolved     → green  (done, awaiting close)
     closed       → muted  (archived)
   ──────────────────────────────────────────────────────────────────────── */
.ticket-row {
    display: block;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.ticket-row:hover {
    background: var(--surface-alt, var(--surface));
    color: var(--text);
}
.ticket-row--open       { border-left-color: var(--amber-text, #d97706); }
.ticket-row--in_progress { border-left-color: var(--accent-text, #4C7A2F); }
.ticket-row--resolved   { border-left-color: var(--green-text, #4C7A2F); }
.ticket-row--closed     {
    border-left-color: var(--border-strong, var(--border));
    opacity: 0.78;
}

/* Status badge pill — shared across ticket lists + details. */
.ticket-status-pill {
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.ticket-status-pill--open       { background: var(--amber-bg); color: var(--amber-text); }
.ticket-status-pill--in_progress { background: var(--accent-bg, rgba(141,177,58,0.08)); color: var(--accent-text); }
.ticket-status-pill--resolved   { background: var(--green-bg); color: var(--green-text); }
.ticket-status-pill--closed     { background: var(--inset-bg); color: var(--text-muted); }

/* =============================================================================
   PHASE 167 — Site-wide mobile audit fixes
   These target the public / auth / legal / landing surfaces that load
   zoninga.css but NOT responsive.css (everything extending base.html), plus a
   couple of genuinely global touch-interaction gaps. See DEVELOPMENT_PLAN.md
   Phase 167 and CLAUDE.md "Frontend conventions" (mobile).
   ============================================================================= */

/* Generic horizontal-scroll wrapper for wide tables. Declared here (loaded on
   every page) so base.html pages — pricing, legal — can use it too. responsive.css
   also declares it for the dashboard shell (identical, harmless duplicate). */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* iOS Safari auto-zooms the viewport when a focused form control has a computed
   font-size < 16px, and does NOT zoom back out on blur. The compact per-component
   sizes (.auth-field 14px, .calc-field 14px, .filter-input 13px, .form-input 14px,
   .blog-form__* 14-15px, topbar selects 12px) all trip this. responsive.css already
   prevents it on the dashboard shell; this is the global net for every other
   surface. !important is the canonical way to win over the assorted class sizes;
   the :not() exclusions skip controls with no meaningful text font-size. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Legal pages (privacy / terms) load zoninga.css only — give the card breathing
   room and let dense 3-column tables wrap instead of staying cramped at 375px. */
@media (max-width: 600px) {
    .legal-card {
        padding: 1.5rem 1.25rem;
    }
    .legal-card table {
        font-size: 0.8rem;
    }
    .legal-card th,
    .legal-card td {
        padding: 0.4rem 0.5rem;
        word-break: break-word;
    }
}

/* Family group-chat edit/delete actions are revealed on :hover only — invisible
   and unreachable on touch. Show them and enlarge the tap area on coarse pointers. */
@media (hover: none) {
    .family-chat__message-actions {
        display: flex;
    }
    .chat-action-btn {
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════
   FRAMED MODE (Option C "The Frame", Phase 1)
   A classic page rendered with ?framed=1 inside the assistant shell's
   receipt iframe: the template already skips the sidebar, topbar,
   checklist, and floating AI widget — this block just lets the content
   breathe full-width with modest padding. Verify 375px: no horizontal
   scroll (rule in CLAUDE.md "Stylesheet loading + mobile").
   ═══════════════════════════════════════ */
body.framed .main-content {
  margin-left: 0;
  width: 100%;
}
body.framed .page-content {
  padding: 14px 12px;
}
@media (min-width: 768px) {
  body.framed .page-content {
    padding: 18px 22px;
  }
}

/* ═══════════════════════════════════════
   ONE CHROME (Option C Phase 3, 2026-07-12)
   Standalone classic pages adopt the assistant shell's vocabulary: a
   persistent "← Assistant" affordance and a Reports dropdown (label
   renamed from "Receipts" 2026-07-17) in the topbar. Both hidden
   <768px, where the sidebar hamburger owns nav.
   Native <details> menu — CSS-only click-away scrim, works with JS off.
   ═══════════════════════════════════════ */
.topbar-assistant-link {
  display: none;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--accent-text, #4C7A2F);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.topbar-assistant-link:hover {
  background: var(--accent-pill-bg, var(--surface-alt));
}
.topbar-menu {
  display: none;
  position: relative;
}
@media (min-width: 768px) {
  .topbar-assistant-link { display: inline-flex; }
  .topbar-menu { display: block; }
}
.topbar-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.topbar-menu > summary::-webkit-details-marker { display: none; }
.topbar-menu > summary:hover,
.topbar-menu[open] > summary {
  border-color: var(--accent);
  color: var(--accent-text, #4C7A2F);
}
.topbar-menu > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Click-away scrim: part of <summary>, so clicking anywhere outside closes
   the menu with zero JS (same trick as the assistant shell's menus). */
.topbar-menu[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  cursor: default;
}
.topbar-menu__panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
  padding: 8px;
}
.topbar-menu__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 12px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}
.topbar-menu__panel a:hover {
  background: var(--surface-alt);
}

/* ============================================================
   PlanChip (design Revision 02, components/core/PlanChip) — the
   entitlement chip. States what the account can DO, never how it
   is billed: exactly two chips, PREMIUM and FREE. Comp Premium
   shows PREMIUM; a Free account with a dead Stripe record shows
   FREE. Never a third colour, never a dot, never a filled pill.
   Placement: avatar-dropdown account row (right-aligned) + the
   sidebar plan label. Never in a head bar.
   ============================================================ */
.plan-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--z-r-pill, 999px);
  border: 1px solid;
  background: transparent;
  font-family: var(--z-font-mono, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.plan-chip--free {
  border-color: var(--z-border-mid, #C3CFC8);
  color: var(--text-secondary);
}
.plan-chip--premium {
  border-color: var(--z-citron, #8DB13A);
  color: var(--accent-text);
}

/* Avatar-dropdown account row: initials, name + email, chip right-aligned
   (the PlanChip's specced home in the dropdown). */
.user-dropdown-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border-soft, #E9EEEA);
  margin-bottom: 4px;
}
.user-dropdown-account__initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--z-mist, #E6EBE5);
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.user-dropdown-account__id { min-width: 0; flex: 1; }
.user-dropdown-account__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-dropdown-account__email {
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}