:root {
  --bg: #050a14;
  /* Hybrid font theme: rounded for display/hero text (wordmark, KPI numbers,
     section headers, modal titles, CTA buttons), neutral sharp sans for body
     copy and inputs. On Apple devices ui-rounded resolves to SF Pro Rounded;
     other platforms fall through to system-ui (Segoe/Roboto/etc). No external
     font is loaded -- system fonts only, per the privacy rule. */
  --font-display: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-soft: ui-rounded, 'SF Pro Rounded', system-ui, var(--font-body);
  --g1: #0d1f3c;
  --g2: #051a30;
  --glass: var(--o04);
  --glass-hover: var(--o07);
  --border: var(--o08);
  --border-bright: var(--o15);
  --green: #00d68f;
  --green2: #00b374;
  --teal: #00c9b1;
  --blue: #2979ff;
  --red: #ff4757;
  --amber: #ffa502;
  --purple: #7c4dff;
  /* Primary text is a softened off-white rather than near-pure white: at 52px/900
     the old #eef2ff bloomed/glared against the near-black --bg. #dfe4f1 still
     measures ~14:1 on --bg (far above the 4.5:1 AA floor) but reads calmer for
     the large, bold KPI numbers and headings. --muted/--soft stay tied to the
     original (238,242,255) base via alpha — they're already dimmed, so they
     aren't a glare source and their tuned contrast must not change. */
  --text: #dfe4f1;
  /* WCAG 2.1 AA requires 4.5:1 for normal text. --muted at alpha 0.4
     measured 3.49:1 on --bg; raising to 0.55 gives ~4.87:1 while
     keeping a clear visual tier below --soft (0.65). */
  --muted: rgba(238,242,255,0.55);
  --soft: rgba(238,242,255,0.65);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* The brand gradient appears on every primary action / accent surface
     (FAB, CTA buttons, active pill, badge step numbers, etc.). Defining
     it once means future color tweaks are a one-line change. */
  --grad-primary: linear-gradient(135deg, var(--green), var(--teal));
  /* Theme-inverting overlay tokens. In dark mode these are the white-alpha
     overlays used throughout for glass surfaces, hairlines, dividers and bar
     tracks; the light theme (below) re-points them to dark-alpha so they invert
     correctly. Inline literals were normalized onto these so the whole app
     themes from one place. Dark values equal the original literals exactly, so
     dark mode is unchanged. */
  --o02: rgba(255,255,255,0.02); --o03: rgba(255,255,255,0.03);
  --o04: rgba(255,255,255,0.04); --o05: rgba(255,255,255,0.05);
  --o06: rgba(255,255,255,0.06); --o07: rgba(255,255,255,0.07);
  --o08: rgba(255,255,255,0.08); --o09: rgba(255,255,255,0.09);
  --o10: rgba(255,255,255,0.10); --o15: rgba(255,255,255,0.15);
  --o30: rgba(255,255,255,0.30);
  /* App background gradient + translucent chrome (header/nav), themeable. */
  --mesh-base: linear-gradient(160deg, #0d1f3c 0%, #050a14 50%, #061522 100%);
  --chrome: rgba(5,10,20,0.85);
  color-scheme: dark;
}
/* ── Light theme (opt-in via data-theme="light" on <html>; set by gbTheme,
   defaulting to the OS preference). Accent hues stay; greens are deepened a
   touch for legible text on light. ── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fc;
  --text: #0f1729;
  --muted: rgba(15,23,41,0.64);
  --soft: rgba(15,23,41,0.72);
  --glass: rgba(15,23,41,0.045);
  --glass-hover: rgba(15,23,41,0.075);
  --border: rgba(15,23,41,0.12);
  --border-bright: rgba(15,23,41,0.20);
  --g1: #e9eef8; --g2: #eaf0f9;
  /* Accents deepened for legible text on a light background (WCAG AA). Light
     mode only — dark-mode accents are unchanged. */
  --green: #0a7d50; --green2: #0a6e47; --teal: #0a7d74;
  --red: #d62f3f; --amber: #8f6200; --blue: #1f64d6; --purple: #6b3ff0;
  --o02: rgba(15,23,41,0.03); --o03: rgba(15,23,41,0.04);
  --o04: rgba(15,23,41,0.05); --o05: rgba(15,23,41,0.05);
  --o06: rgba(15,23,41,0.06); --o07: rgba(15,23,41,0.07);
  --o08: rgba(15,23,41,0.09); --o09: rgba(15,23,41,0.10);
  --o10: rgba(15,23,41,0.11); --o15: rgba(15,23,41,0.16);
  --o30: rgba(15,23,41,0.26);
  --mesh-base: linear-gradient(160deg, #eef3fb 0%, #f6f8fc 50%, #e9eef8 100%);
  --chrome: rgba(246,248,252,0.85);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* Accessibility: visible focus ring for keyboard navigation. :focus-visible
   only matches when the user is navigating with the keyboard, so mouse clicks
   don't get the ring. */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Inline text actions rendered as real <button>s (keyboard-focusable, announced
   as buttons, get the :focus-visible ring) while looking like underlined links. */
.link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--green);
  font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:focus-visible { border-radius: 3px; }
html, body { height: 100%; overflow: hidden; font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
  /* Tabular (monospaced) numerals across the app so every digit renders at
     the same width. Column-aligns Top Spending amounts, Budget vs Actual
     numbers, stat tiles, and transaction list -- the "lining figures"
     look that reads correctly in a finance UI. font-variant-numeric is
     the modern shorthand; font-feature-settings is the fallback for
     engines that don't implement the high-level property. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Mesh background ── */
.mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(0,214,143,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(41,121,255,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(124,77,255,0.05) 0%, transparent 60%),
    var(--mesh-base);
}
.mesh::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── App shell ── */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 430px; margin: 0 auto; position: relative; z-index: 1; }
.safe-top { height: var(--safe-t); }

/* ── Header ── */
.header {
  /* No horizontal padding: the wordmark and Import button line up flush with
     the content cards, which sit at the app edge. */
  padding: 12px 0 10px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 10;
}
.wordmark { font-family: var(--font-display); font-size: 24px; font-weight: 900; letter-spacing: -1px; }
.wordmark .green-part { color: var(--green); }
.wordmark .bar-part { color: var(--text); }
.hdr-right { display: flex; gap: 8px; align-items: center; }
.fab {
  width: 42px; height: 42px; border-radius: 14px; border: none; cursor: pointer;
  background: var(--grad-primary);
  color: #050a14; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,214,143,0.35), 0 0 0 1px rgba(0,214,143,0.2);
  transition: transform 0.15s, box-shadow 0.15s;
}
.fab:active { transform: scale(0.91); box-shadow: 0 2px 10px rgba(0,214,143,0.25); }
#csv-input { display: none; }

/* ── Content ── */
.content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; }
.content::-webkit-scrollbar { display: none; }

/* ── Bottom nav ── */
#bottom-nav { opacity:0; pointer-events:none; transition:opacity 0.4s ease; }
#bottom-nav.visible { opacity:1; pointer-events:auto; }
.bottom-nav {
  display: flex;
  background: var(--chrome);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-b);
}
.nav-btn {
  flex: 1; padding: 9px 4px 10px; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--muted); transition: color 0.2s; position: relative;
}
.nav-btn.active { color: var(--green); }
.nav-btn.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 2px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--green), var(--teal));
}
/* Inline-SVG nav icons. Stroke is currentColor so the icon picks up the
   .nav-btn / .nav-btn.active text color automatically (muted / green). */
.nav-icon { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.nav-label { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }

/* ── Screens ── */
/* ── Screen switching ── */
.screen               { display: none; }
.screen.active        { display: block; }
#screen-setup.active       { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0; }
/* Uniform 16px gap between the app header and each main screen's content.
   Summary is excluded -- it keeps its gap via .gb-welcome so the first-launch
   flash intro is unaffected. */
#screen-budget, #screen-txs, #screen-intro, #screen-settings { padding-top: 16px; }

/* ── Glass card ── */
.g-card {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.g-card:active { border-color: var(--border-bright); }

/* ── Import hero ── */
.import-wrap { padding: 16px 0 0; }
.import-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(0,214,143,0.08), rgba(41,121,255,0.06), rgba(124,77,255,0.04));
  border: 1px solid rgba(0,214,143,0.2);
  border-radius: 28px; padding: 40px 28px 36px; text-align: center;
  margin-bottom: 16px;
}
.import-hero::before {
  content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,214,143,0.15) 0%, transparent 70%);
}
.hero-orb { font-size: 56px; display: block; margin-bottom: 18px; filter: drop-shadow(0 4px 20px rgba(0,214,143,0.4)); }
.hero-title { font-family: var(--font-display); font-size: 26px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 10px; }
.hero-sub { font-size: 14px; color: var(--soft); line-height: 1.65; margin-bottom: 28px; }
.btn-primary {
  width: 100%; padding: 15px; border: none; cursor: pointer; border-radius: 16px;
  background: var(--grad-primary);
  color: #050a14; font-family: var(--font-display); font-size: 16px; font-weight: 800;
  letter-spacing: 0.3px; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 28px rgba(0,214,143,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:active { transform: scale(0.97); }
/* Shared close ✕ for every modal sheet. Was 9 identical inline-style
   buttons before consolidation. 44x44 hit area for accessibility. */
.sheet-close {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--o07); border: 1px solid var(--o10);
  color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sheet-close:hover { color: var(--text); background: var(--o10); }
/* Step-number badge used in the Guide "How to get started" and "How to
   export from your bank" sections (the 1/2/3/4 circles). */
.step-badge {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: var(--grad-primary); color: #050a14;
  font-family: var(--font-display); font-size: 15px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
/* Big primary CTA on the flash intro + walkthrough finish slide. Same
   shape as .btn-primary but with a more prominent shadow and slightly
   different padding -- kept separate to avoid disturbing .btn-primary. */
.btn-flash-cta {
  width: 100%; padding: 16px; border: none; border-radius: 16px;
  background: var(--grad-primary); color: #050a14;
  font-family: var(--font-display); font-size: 16px; font-weight: 900;
  letter-spacing: 0.2px; cursor: pointer;
  box-shadow: 0 6px 28px rgba(0,214,143,0.35);
}
.btn-flash-cta:active { transform: scale(0.97); }
.rules-card { padding: 18px; margin-bottom: 12px; }
.rules-title { font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.rule-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.rule-item:last-child { border-bottom: none; }
.rule-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: rgba(0,214,143,0.12); color: var(--green); flex-shrink: 0; }
.rule-text { color: var(--soft); }

/* ── Month pills ── */
.pills-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; -webkit-overflow-scrolling: touch; }
.pills-row::-webkit-scrollbar { display: none; }
.pill {
  flex-shrink: 0; padding: 7px 18px; border-radius: 22px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); color: var(--muted);
  background: var(--glass); transition: all 0.2s; white-space: nowrap;
  font-family: var(--font-display);
}
/* Native <button class="pill"> reset so the buttons render identically to the previous divs. */
button.pill { font: inherit; line-height: 1.2; -webkit-appearance: none; appearance: none; }
.pill.active {
  background: var(--grad-primary);
  border-color: transparent; color: #050a14;
  box-shadow: 0 3px 14px rgba(0,214,143,0.35);
}

/* ── Net hero card ── */
.net-card {
  position: relative; overflow: hidden; text-align: center;
  padding: 32px 24px 28px; margin-bottom: 14px;
  background: linear-gradient(145deg, rgba(13,31,60,0.9), rgba(5,26,48,0.9));
  border: 1px solid var(--border); border-radius: 28px;
}
.net-card::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 200px;
  background: radial-gradient(ellipse, rgba(0,214,143,0.12) 0%, transparent 65%);
}
.net-card .pulse {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 2px; border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.net-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 10px; }
.net-amt { font-family: var(--font-display); font-size: 52px; font-weight: 900; line-height: 1; margin-bottom: 8px; letter-spacing: -2px; }
.net-mo { font-size: 13px; color: var(--muted); }
/* Subtle accent glow only — the old 30px/0.4 halo bloomed into noticeable glare
   around the 52px budget number. A tighter, fainter shadow keeps a hint of depth
   without the halo. */
.surplus { color: var(--green); text-shadow: 0 0 14px rgba(0,214,143,0.18); }
.deficit { color: var(--red); text-shadow: 0 0 14px rgba(255,71,87,0.15); }

/* ── Stat row ── */
.stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat-tile {
  padding: 14px 12px; border-radius: 18px; text-align: center;
  background: var(--glass); border: 1px solid var(--border);
  transition: border-color 0.2s;
}
.stat-tile:active { border-color: var(--border-bright); }
/* Tappable variant: full-width button reset so a <button class="stat-tile"> looks identical to the div tiles. */
button.stat-tile { width: 100%; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
button.stat-tile:hover { border-color: var(--border-bright); }
/* Press feedback so tapping the Health-Score tile doesn't feel dead before the modal opens. */
button.stat-tile:active { transform: scale(0.98); border-color: var(--border-bright); }
button.stat-tile:disabled { cursor: default; opacity: 0.7; }
button.stat-tile:disabled:active { transform: none; }
.st-tap-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); margin-top: 4px; font-weight: 600; letter-spacing: 0.03em; }
.st-lbl { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.st-val { font-family: var(--font-display); font-size: 20px; font-weight: 900; letter-spacing: -0.5px; }
.c-green { color: var(--green); }
.c-red   { color: var(--red); }
.c-teal  { color: var(--teal); }
.c-soft  { color: var(--soft); }
.c-text  { color: var(--text); }
.c-muted { color: var(--muted); }
.c-amber { color: var(--amber); }
.c-blue  { color: var(--blue); }
/* ── Centralized component classes (extracted from repeated inline styles).
   Editing any of these propagates to every site that uses the class --
   the whole point of this rule set is design-changes-in-one-place. ── */
/* Bullet rows used in the Guide "Under the Hood" sections: green arrow +
   soft text, lined up with align-items:flex-start so multi-line copy hangs
   correctly off the arrow. */
.bullet-row    { display: flex; gap: 10px; font-size: 12px; align-items: flex-start; }
.bullet-arrow  { color: var(--green); font-weight: 800; flex-shrink: 0; }
/* Modal close ✕ row: header strip that sits above the modal handle / title
   and right-aligns the .sheet-close button. */
.sheet-close-row { display: flex; justify-content: flex-end; margin-bottom: 4px; }
/* Glass card variants used across Guide / Under-the-Hood sections. .glass-card
   wraps a list (no inner padding -- the rows define their own); .glass-card-padded
   is a self-contained card with its own padding (Under the Hood blue/orange cards). */
.glass-card        { background: var(--glass); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-bottom: 14px; }
.glass-card-padded { background: var(--glass); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; margin-bottom: 10px; }
/* List-row dividers inside .glass-card. .list-row is the compact 14px-padding
   variant (settings rows, How to Get Started); .list-row-lg is the 16px-padding
   align-start variant (Under-the-Hood numbered steps, screen descriptions). */
.list-row    { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--o05); }
.list-row-lg { display: flex; gap: 14px; padding: 16px;       border-bottom: 1px solid var(--o05); align-items: flex-start; }
/* Section header above a glass-card on the Guide screen (HOW TO GET STARTED etc). */
.guide-sec-hdr { font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 20px 0 10px; }
/* Row label + description text used inside list-row variants. */
.row-label   { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.row-label-m { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.row-label-s { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.row-desc    { font-size: 12px; color: var(--muted); line-height: 1.6; }
.row-desc-t  { font-size: 12px; color: var(--muted); line-height: 1.5; }
/* Small muted captions used in dialog footers, vendor row meta, etc. */
.caption-xs   { font-size: 11px; color: var(--muted); }
.caption-xs-r { font-size: 11px; color: var(--muted); text-align: right; }
/* "Under the Hood" intro paragraph: slightly larger soft text with bottom margin. */
.uth-intro { font-size: 13px; color: var(--soft); line-height: 1.7; margin-bottom: 12px; }
/* Small 24x24 numbered badge used in the "What happens when you import" steps. */
.step-badge-sm { width: 24px; height: 24px; border-radius: 8px; background: rgba(41,121,255,0.15); border: 1px solid rgba(41,121,255,0.3); color: var(--blue); font-size: 11px; font-weight: 900; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* Storage-card amber row label. */
.kv-label-amber { font-size: 12px; font-weight: 700; color: var(--amber); flex-shrink: 0; }
/* Common flex-between row used in Storage card key-value layout. */
.row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

/* ── Insights modal: metric tile + section card primitives ──────────────────
   Extracted from showCatInsights, which previously inlined the same
   rgba-glass + eyebrow + value composition at every site. Re-usable
   across any drill-down modal that wants the same look. Dynamic colors
   (trend, vs-budget) stay inline at the call site since they depend on
   per-render data. */

/* Small metric card used inside a 2-column grid (Avg/month, Trend, …). */
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.metric-tile {
  background: var(--o04);
  border: 1px solid var(--o07);
  border-radius: 14px;
  padding: 12px 14px;
}
/* Variance modifiers — "is-over" tints red, "is-under" tints green. Used by
   the vs-Budget tile in showCatInsights to signal direction at a glance. */
.metric-tile.is-over  { background: rgba(255,71,87,0.10); border-color: rgba(255,71,87,0.20); }
.metric-tile.is-under { background: rgba(0,214,143,0.10); border-color: rgba(0,214,143,0.20); }
.metric-tile-eyebrow {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin-bottom: 4px;
}
.metric-tile-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
}

/* Larger section container used for chart/list groupings inside the same
   modal (Month-by-Month, Top Vendors). Same colour family as .metric-tile
   but with bigger padding/radius to read as a distinct grouping. */
.section-card {
  background: var(--o03);
  border: 1px solid var(--o07);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.section-card-header {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

/* ── Section header ── */
.sec-hdr { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 22px 0 10px; display: flex; align-items: center; justify-content: space-between; }
.sec-total { font-size: 13px; font-weight: 700; color: var(--soft); letter-spacing: 0; text-transform: none; }

/* ── Category list ── */
.cat-list { border-radius: 20px; overflow: hidden; background: var(--glass); border: 1px solid var(--border); margin-bottom: 12px; }
.cat-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cat-item:last-child { border-bottom: none; }
.cat-icon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.cat-body { flex: 1; min-width: 0; }
.cat-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.cat-bar-bg { height: 3px; background: var(--o07); border-radius: 3px; }
.cat-bar-fg { height: 3px; border-radius: 3px; transition: width 0.6s cubic-bezier(0.34,1.2,0.64,1); }
.cat-right { text-align: right; flex-shrink: 0; }
.cat-amt { font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.cat-pct { font-size: 10px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* ── Budget table ── */
.bva-card { border-radius: 20px; overflow: hidden; background: var(--glass); border: 1px solid var(--border); margin-bottom: 12px; }
.bva-head { display: grid; grid-template-columns: 1fr 72px 72px 60px; gap: 4px; padding: 10px 16px; background: var(--o03); border-bottom: 1px solid var(--border); }
.bva-head span { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.bva-head span:not(:first-child) { text-align: right; }
.bva-row { display: grid; grid-template-columns: 1fr 72px 72px 60px; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--o04); align-items: center; }
.bva-row:last-child { border-bottom: none; }
.bva-cat { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bva-num { font-size: 12px; font-weight: 700; text-align: right; }
.v-over  { color: var(--red); }
.v-under { color: var(--green); }
.v-flat  { color: var(--muted); }

/* ── Search ── */
.search-wrap { position: relative; margin-bottom: 14px; }
.search-wrap input {
  width: 100%; padding: 12px 16px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 16px; color: var(--text); font-size: 14px;
  font-family: var(--font-body); outline: none;
  transition: border-color 0.2s;
}
.search-wrap input:focus { border-color: rgba(0,214,143,0.4); }
.search-wrap input::placeholder { color: var(--muted); }
.search-wrap .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 17px; }
/* Clear-search ✕ button: 44x44 hit area, visible only when input has a value. */
.search-wrap .search-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: none; background: transparent;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  border-radius: 12px;
}
.search-wrap .search-clear:hover { color: var(--text); background: var(--o04); }
.search-wrap.has-value .search-clear { display: flex; }

/* ── Transactions ── */
.tx-date-hdr { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 4px 6px; font-family: var(--font-display); }
.tx-group { border-radius: 20px; overflow: hidden; background: var(--glass); border: 1px solid var(--border); margin-bottom: 10px; }
.tx-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--o04); transition: background 0.15s; }
.tx-item:last-child { border-bottom: none; }
.tx-item:active { background: var(--o03); }
.tx-ic { width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.tx-bd { flex: 1; min-width: 0; }
.tx-desc { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-cat { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 500; }
.tx-amt { font-family: var(--font-display); font-size: 16px; font-weight: 800; flex-shrink: 0; }
.tx-amt.neg { color: var(--red); }
.tx-amt.pos { color: var(--green); }

/* ── Insights ── */
.ins-card { padding: 20px; border-radius: 20px; background: var(--glass); border: 1px solid var(--border); margin-bottom: 12px; position: relative; overflow: hidden; }
.ins-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-bright), transparent); }
.ins-tag { font-size: 10px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; font-family: var(--font-display); }
.ins-num { font-family: var(--font-display); font-size: 34px; font-weight: 900; letter-spacing: -1px; margin-bottom: 6px; line-height: 1; }
.ins-desc { font-size: 13px; color: var(--soft); line-height: 1.6; }
.mo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.mo-tile { padding: 16px; border-radius: 18px; background: var(--glass); border: 1px solid var(--border); }
.mo-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-display); }
.mo-net { font-family: var(--font-display); font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
.mo-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ── Settings ── */
.settings-section { border-radius: 20px; overflow: hidden; background: var(--glass); border: 1px solid var(--border); margin-bottom: 14px; }
.settings-hdr { padding: 12px 16px; background: var(--o03); border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 11px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; }
.settings-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--o04); cursor: pointer; transition: background 0.15s; }
.settings-row:last-child { border-bottom: none; }
.settings-row:active { background: var(--o03); }
/* Native <button class="settings-row"> reset so a button looks/behaves identical to the previous div. */
button.settings-row {
  width: 100%; font: inherit; color: inherit; text-align: left;
  background: transparent; border: none; border-bottom: 1px solid var(--o04);
  -webkit-appearance: none; appearance: none;
}
button.settings-row:hover { background: var(--o02); }
/* sr-only: visually hidden, visible to assistive tech. Used for the global live-region announcer. */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
/* Skip-to-main link: hidden off-canvas until it receives keyboard focus, then
   slides into view at the top-left so a Tab user can jump past the header
   straight into the main content area. */
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 9999;
  background: var(--green); color: #050a14;
  padding: 12px 18px; border-radius: 12px;
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
  text-decoration: none; box-shadow: 0 4px 16px rgba(0,214,143,0.4);
  transition: top 0.15s ease;
}
.skip-link:focus { top: calc(var(--safe-t) + 12px); outline: 2px solid #fff; outline-offset: 2px; }
/* Make the main content area programmatically focusable so the skip link can
   land focus there (a bare anchor target only scrolls; it doesn't move focus).
   Keyboard users (skip link / Tab) get a visible green outline -- WCAG 2.4.7
   Focus Visible. Mouse / touch focus stays clean (no outline) so accidental
   click-focus on the scrolling content region doesn't paint a big border. */
.content[tabindex="-1"]:focus { outline: none; }
.content[tabindex="-1"]:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.s-icon { font-size: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--o05); border-radius: 10px; flex-shrink: 0; }
/* .s-body/.s-label/.s-desc are spans (not divs) so they can live inside
   <button class="settings-row"> -- button content model is phrasing only. */
.s-body { flex: 1; }
.s-label { display: block; font-size: 14px; font-weight: 600; }
.s-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.s-arrow { color: var(--muted); font-size: 18px; }
.budget-row { display: flex; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--o04); }
.budget-row:last-child { border-bottom: none; }
.budget-label { flex: 1; font-size: 13px; color: var(--soft); }
.budget-input { background: var(--o06); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; color: var(--text); font-size: 13px; font-family: var(--font-body); width: 88px; text-align: right; outline: none; transition: border-color 0.2s; }
.budget-input:focus { border-color: rgba(0,214,143,0.5); }
.btn-secondary { width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--glass); color: var(--soft); font-family: var(--font-display); font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 10px; transition: border-color 0.2s; }
.btn-secondary:active { border-color: var(--border-bright); }

/* ── Modals ── */
/* Reset native <dialog> UA styles (1em padding, solid border, auto-centering,
   max-width/max-height limits) so our custom overlay layout takes over.
   Applied to all <dialog> elements used in Greenbar -- screen-lock + every
   modal-overlay. */
dialog { padding: 0; border: none; margin: 0; width: auto; height: auto; max-width: none; max-height: none; color: inherit; background: transparent; }
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: 200; align-items: flex-end; justify-content: center; }
.modal-overlay.open { display: flex; animation: fadeIn 0.2s ease both; }
/* During close we keep display:flex but play the reverse animations; closeModal
   removes the .open and .closing classes once the animation ends. */
.modal-overlay.closing { display: flex; animation: fadeOut 0.22s ease both; }
.modal-overlay.closing .sheet { animation: sheetDown 0.24s cubic-bezier(0.6,0,0.6,1) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.sheet {
  background: #0c1628; border: 1px solid var(--border); border-radius: 28px 28px 0 0;
  padding: 20px 20px 40px; width: 100%; max-width: 430px; max-height: 88vh; overflow-y: auto;
  animation: sheetUp 0.35s cubic-bezier(0.34,1.2,0.64,1) both;
  /* Used by the swipe-to-dismiss handler to translate the sheet during a drag. */
  will-change: transform;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
.sheet-handle { width: 36px; height: 4px; background: var(--border-bright); border-radius: 2px; margin: 0 auto 20px; }
.sheet-title { font-family: var(--font-display); font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.sheet-sub { font-size: 13px; color: var(--soft); margin-bottom: 20px; line-height: 1.5; }
.sheet-label { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-family: var(--font-display); }
.sheet-input { width: 100%; background: var(--glass); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; color: var(--text); font-size: 14px; font-family: var(--font-body); outline: none; margin-bottom: 12px; transition: border-color 0.2s; }
.sheet-input:focus { border-color: rgba(0,214,143,0.4); }
/* Bank-export <select> on the Guide page. Same look as .sheet-input but a hair tighter
   (12px radius, 11px/14px padding) and no bottom margin so the steps panel sits flush. */
.bank-select { width: 100%; background: var(--glass); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; color: var(--text); font-size: 14px; font-family: var(--font-body); outline: none; transition: border-color 0.2s; }
.bank-select:focus { border-color: rgba(0,214,143,0.4); }
.remap-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.remap-row input { flex: 1; background: var(--glass); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; color: var(--text); font-size: 13px; font-family: var(--font-body); outline: none; }
.remap-row input:focus { border-color: rgba(0,214,143,0.4); }
.del-btn { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,71,87,0.12); border: none; color: var(--red); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.add-btn { width: 100%; padding: 11px; background: rgba(0,214,143,0.08); border: 1px dashed rgba(0,214,143,0.3); border-radius: 14px; color: var(--green); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); margin-bottom: 12px; transition: background 0.2s; }
.add-btn:active { background: rgba(0,214,143,0.14); }

/* ── Empty ── */
.empty { text-align: center; padding: 70px 20px; }
.empty-icon { font-size: 44px; margin-bottom: 14px; filter: grayscale(0.3); }
.empty p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.empty-action {
  display: inline-block; margin-top: 16px; padding: 11px 22px; border: none;
  border-radius: 14px; background: var(--grad-primary); color: #050a14;
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
  cursor: pointer; letter-spacing: 0.2px;
}
.empty-action:active { transform: scale(0.97); }
.empty-link {
  display: inline-block; margin-top: 14px; padding: 8px 16px; border: 1px solid var(--border);
  border-radius: 12px; background: transparent; color: var(--soft);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; cursor: pointer;
}
.empty-link:hover { border-color: var(--border-bright); color: var(--text); }

* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

.app-preview { margin:12px 0 14px; background:linear-gradient(155deg,#0b1628 0%,#06101e 100%); border:1px solid rgba(0,214,143,0.20); border-radius:26px; padding:16px 16px 18px; position:relative; overflow:hidden; }
.ap-glow { position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:260px; height:180px; background:radial-gradient(ellipse,rgba(0,214,143,0.09) 0%,transparent 70%); pointer-events:none; }
.ap-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ap-wordmark { font-family: var(--font-display); font-size:17px; font-weight:900; letter-spacing:-0.5px; }
.ap-g { color:#00d68f; }
.ap-icon-btn { width:28px; height:28px; border-radius:9px; background:var(--o06); border:1px solid var(--o09); display:flex; align-items:center; justify-content:center; font-size:13px; color:rgba(238,242,255,0.5); }
.ap-fab { width:30px; height:30px; border-radius:10px; background:var(--grad-primary); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:#050a14; }
.ap-pills { display:flex; gap:6px; margin-bottom:12px; }
.ap-pill { padding:4px 12px; border-radius:20px; font-size:10px; font-weight:600; font-family: var(--font-display); border:1px solid var(--o08); color:rgba(238,242,255,0.35); background:var(--o04); }
.ap-pill.active { background:var(--grad-primary); border-color:transparent; color:#050a14; box-shadow:0 2px 10px rgba(0,214,143,0.3); }
.ap-net-card { background:linear-gradient(145deg,#0e2040,#081728); border:1px solid var(--o07); border-radius:18px; padding:16px; margin-bottom:12px; position:relative; overflow:hidden; }
.ap-net-glow { position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:180px; height:120px; background:radial-gradient(ellipse,rgba(0,214,143,0.10) 0%,transparent 70%); pointer-events:none; }
.ap-net-pulse { position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg,transparent,rgba(0,214,143,0.45),transparent); }
.ap-net-lbl { font-size:9px; color:rgba(238,242,255,0.4); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; margin-bottom:3px; }
.ap-net-amt { font-family: var(--font-display); font-size:32px; font-weight:900; letter-spacing:-1px; color:#00d68f; line-height:1; margin-bottom:2px; }
.ap-net-sub { font-size:10px; color:rgba(238,242,255,0.38); margin-bottom:12px; }
.ap-ie-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.ap-ie-tile { background:var(--o04); border:1px solid var(--o06); border-radius:10px; padding:8px 10px; }
.ap-ie-lbl { font-size:9px; color:rgba(238,242,255,0.38); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; margin-bottom:3px; }
.ap-ie-val { font-family: var(--font-display); font-size:13px; font-weight:900; letter-spacing:-0.3px; }
.ap-bars-hdr { font-size:9px; color:rgba(238,242,255,0.38); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; margin-bottom:8px; }
.ap-bars-card { background:var(--o03); border:1px solid var(--o06); border-radius:16px; padding:4px 0; margin-bottom:14px; }
.ap-bar-item { display:flex; align-items:center; gap:8px; padding:7px 12px; border-bottom:1px solid var(--o04); }
.ap-bar-ic { width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.ap-bar-name { font-size:10px; font-weight:500; flex:0 0 58px; color:rgba(238,242,255,0.65); }
.ap-bar-bg { flex:1; height:3px; background:var(--o07); border-radius:3px; }
.ap-bar-fg { height:3px; border-radius:3px; animation:apBarGrow 0.9s cubic-bezier(0.34,1.2,0.64,1) both; }
@keyframes apBarGrow { from { width:0 !important; } }
.ap-bar-amt { font-size:10px; font-weight:700; flex:0 0 36px; text-align:right; font-family: var(--font-display); }


/* ── Flash intro ── */
#flash-intro { position:relative; }
/* ── Welcome screen ── */
.gb-welcome { padding: 16px 0 8px; }
.gb-brand-wrap { text-align: center; padding: 28px 20px 24px; background: linear-gradient(155deg, rgba(0,214,143,0.06) 0%, rgba(41,121,255,0.04) 50%, rgba(124,77,255,0.03) 100%); border: 1px solid rgba(0,214,143,0.15); border-radius: 28px; margin-bottom: 14px; position: relative; overflow: hidden; }
.gb-brand-glow { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 300px; height: 200px; background: radial-gradient(ellipse, rgba(0,214,143,0.10) 0%, transparent 70%); pointer-events: none; }
.gb-logo-svg { width: 100%; max-width: 280px; height: 120px; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto; }
.gb-brand-tagline { font-size: 14px; color: var(--soft); letter-spacing: 0.02em; }
.gb-feature-list { background: var(--glass); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-bottom: 14px; }
.gb-feature-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--o05); }
.gb-feature-icon { font-size: 20px; width: 38px; height: 38px; border-radius: 12px; background: rgba(0,214,143,0.08); border: 1px solid rgba(0,214,143,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gb-feature-body { flex: 1; }
.gb-feature-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.gb-feature-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ── Setup walkthrough ── */
.setup-step { display:none; flex-direction:column; height:100%; padding:24px 20px 20px; }
.setup-step.active { display:flex; }
.setup-progress { display:flex; gap:6px; margin-bottom:28px; }
.setup-pip { flex:1; height:3px; border-radius:2px; background:var(--o10); transition:background 0.3s; }
.setup-pip.done { background:var(--green); }
.setup-pip.active { background:var(--teal); }
.setup-q { font-family:var(--font-display); font-size:24px; font-weight:900; letter-spacing:-0.5px; line-height:1.25; margin-bottom:8px; }
.setup-sub { font-size:14px; color:var(--soft); line-height:1.6; margin-bottom:24px; }
.setup-options { display:flex; flex-direction:column; gap:10px; flex:1; }
.setup-opt {
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--glass); border:1px solid var(--border);
  border-radius:18px; cursor:pointer; transition:all 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.setup-opt:active, .setup-opt.selected {
  border-color:var(--green); background:rgba(0,214,143,0.08);
}
.setup-opt.selected .setup-opt-check { opacity:1; }
.setup-opt-icon { font-size:24px; flex-shrink:0; }
.setup-opt-body { flex:1; }
.setup-opt-label { font-size:15px; font-weight:600; margin-bottom:2px; }
.setup-opt-desc { font-size:12px; color:var(--muted); }
.setup-opt-check { width:20px; height:20px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-size:11px; color:#050a14; opacity:0; transition:opacity 0.2s; flex-shrink:0; font-weight:900; }
.setup-input-wrap { position:relative; margin-bottom:10px; }
.setup-input-wrap .prefix { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--muted); font-family:var(--font-display); font-weight:700; }
.setup-input {
  width:100%; padding:16px 16px 16px 32px;
  background:var(--glass); border:1px solid var(--border);
  border-radius:16px; color:var(--text); font-size:18px;
  font-family:var(--font-display); font-weight:700; outline:none;
  transition:border-color 0.2s;
}
.setup-input:focus { border-color:rgba(0,214,143,0.5); }
.setup-input::placeholder { color:var(--muted); font-weight:400; }
.setup-nav { display:flex; gap:10px; margin-top:20px; }
.setup-back { padding:14px 20px; border:1px solid var(--border); background:var(--glass); color:var(--soft); font-family:var(--font-display); font-size:14px; font-weight:700; border-radius:14px; cursor:pointer; }
.setup-next { flex:1; padding:14px; border:none; background:var(--grad-primary); color:#050a14; font-family:var(--font-display); font-size:15px; font-weight:900; border-radius:14px; cursor:pointer; transition:opacity 0.15s; }
.setup-next:disabled { opacity:0.4; }
.setup-skip { text-align:center; font-size:12px; color:var(--muted); margin-top:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.budget-cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.budget-cat-tile {
  background:var(--glass); border:1px solid var(--border);
  border-radius:14px; padding:12px 14px;
  display:flex; flex-direction:column; gap:6px;
}
.budget-cat-tile .bct-label { font-size:12px; color:var(--soft); font-weight:500; display:flex; align-items:center; gap:6px; }
.budget-cat-tile .bct-input {
  width:100%; background:none; border:none; border-bottom:1px solid var(--border);
  color:var(--text); font-family:var(--font-display); font-size:18px;
  font-weight:800; outline:none; padding:4px 0;
}
.budget-cat-tile .bct-input:focus { border-bottom-color:var(--green); }

/* ── Friendly budget settings ── */
.budget-section-hdr { font-size:11px; font-weight:800; color:var(--green); text-transform:uppercase; letter-spacing:0.1em; padding:14px 16px 8px; font-family:var(--font-display); }
.budget-cat-row2 { display:flex; align-items:center; padding:10px 16px; border-bottom:1px solid var(--o04); gap:12px; }
.budget-cat-row2 .bcr-icon { font-size:18px; width:32px; text-align:center; flex-shrink:0; }
.budget-cat-row2 .bcr-label { flex:1; font-size:13px; color:var(--soft); }
.budget-cat-row2 .bcr-input { background:var(--o06); border:1px solid var(--border); border-radius:10px; padding:6px 10px; color:var(--text); font-size:14px; font-family:var(--font-display); font-weight:700; width:84px; text-align:right; outline:none; }
.budget-cat-row2 .bcr-input:focus { border-color:rgba(0,214,143,0.5); }


/* ── Housing type buttons ── */
.ht-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.ht-btn {
  padding:15px 0; border-radius:14px; font-family:var(--font-display);
  font-size:15px; font-weight:800; letter-spacing:0.02em; cursor:pointer;
  border:2px solid var(--border); background:var(--glass); color:var(--muted);
  transition:all 0.2s; -webkit-tap-highlight-color:transparent;
}
.ht-btn:active { opacity:0.8; }

/* ── Food buttons (step 4) ── */
.food-btn-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px; }
.food-btn {
  padding:15px 0; border-radius:14px; font-family:var(--font-display);
  font-size:15px; font-weight:800; cursor:pointer;
  border:2px solid var(--border); background:var(--glass); color:var(--muted);
  transition:all 0.2s; -webkit-tap-highlight-color:transparent;
}

/* ── Lifestyle buttons (step 5) ── */
.lifestyle-btn-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; margin-bottom:4px; }
.lifestyle-btn {
  padding:15px 4px; border-radius:14px; font-family:var(--font-display);
  font-size:14px; font-weight:800; cursor:pointer;
  border:2px solid var(--border); background:var(--glass); color:var(--muted);
  transition:all 0.2s; -webkit-tap-highlight-color:transparent;
}

/* Shared "selected" state across all three setup-button types (housing /
   food / lifestyle). Was 3 byte-identical rules before consolidation. */
.ht-btn.chosen, .food-btn.chosen, .lifestyle-btn.chosen {
  border-color: var(--green); background: rgba(0,214,143,0.10); color: var(--green);
}


/* ── Metallic shimmer on Greenbar wordmark ── */
@keyframes metallicShimmer {
  0%   { background-position: 300% center; }
  100% { background-position: -300% center; }
}
.gb-shimmer {
  background: linear-gradient(
    100deg,
    #00b876 0%,
    #00c98a 18%,
    #a8f0d0 30%,
    #d4fff0 38%,
    #ffffff 44%,
    #f0f0f0 47%,
    #c8f5e0 52%,
    #ffffff 56%,
    #e8ffef 62%,
    #00d68f 76%,
    #00b876 100%
  );
  background-size: 350% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: metallicShimmer 3.2s cubic-bezier(0.22,0.61,0.36,1) 0.1s 1 forwards;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(0,214,143,0.4));
}

/* ── Streaks & Badges ── */
.streaks-card { background:var(--glass); border:1px solid var(--border); border-radius:20px; padding:16px 18px; margin-bottom:12px; }
.streaks-header { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.streak-stat { flex:1; text-align:center; }
.streak-num { font-family:var(--font-display); font-size:22px; font-weight:900; letter-spacing:-0.5px; }
.streak-lbl { font-size:10px; color:var(--muted); margin-top:2px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.streak-divider { width:1px; height:36px; background:var(--border); flex-shrink:0; }
.badge-section-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:var(--soft); margin:12px 0 8px; }
.badge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.badge-tile { background:var(--o04); border:1px solid var(--o08); border-radius:14px; padding:10px 8px; text-align:center; }
.badge-tile.badge-locked { opacity:0.45; }
.badge-icon { width:26px; height:26px; margin:0 auto 6px; filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 0 6px currentColor); }
.badge-icon svg { width:100%; height:100%; display:block; }
.badge-name { font-size:11px; font-weight:800; color:var(--soft); line-height:1.2; margin-bottom:3px; }
.badge-desc { font-size:9px; color:var(--muted); line-height:1.4; }
.badge-prog { width:100%; height:4px; background:var(--o08); border-radius:3px; margin-top:6px; overflow:hidden; }

/* ── AI Help Agent ── */
.ai-msg {
  max-width: 88%; padding: 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.55; word-break: break-word;
}
.ai-msg-bot {
  background: rgba(0,214,143,0.08); border: 1px solid rgba(0,214,143,0.2);
  color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px;
}
.ai-msg-user {
  background: rgba(0,214,143,0.12); border: 1px solid rgba(0,214,143,0.2);
  color: var(--text); align-self: flex-end; border-bottom-right-radius: 4px;
}
.ai-msg-loading {
  background: rgba(0,214,143,0.05); border: 1px solid rgba(0,214,143,0.1);
  color: var(--muted); align-self: flex-start; border-bottom-left-radius: 4px;
  font-style: italic;
}
#ai-help-btn:active { transform: scale(0.92); }
.ff { font-family: var(--font-display) !important; }

/* ── Security: lock screen + PIN pad + privacy mode ── */
/* Full-viewport overlay that masks the entire app until biometric/PIN unlocks.
   Sits above the bottom-nav (z-index 100) so the user can't navigate around it. */
#screen-lock {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 40px) 24px calc(var(--safe-b) + 24px);
}
#screen-lock.active { display: flex; }
#screen-lock .lock-brand { font-family: var(--font-display); font-size: 38px; font-weight: 900; letter-spacing: -1px; margin-bottom: 8px; }
#screen-lock .lock-brand .green-part { color: var(--green); }
#screen-lock .lock-tagline { font-size: 13px; color: var(--soft); margin-bottom: 36px; }
#screen-lock .lock-prompt { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 20px; }
#screen-lock .lock-error  { font-size: 13px; color: var(--red); min-height: 18px; margin-bottom: 12px; text-align: center; }
#lock-biometric-btn {
  margin-bottom: 28px; padding: 12px 22px; border: 1px solid rgba(0,214,143,0.3);
  background: rgba(0,214,143,0.08); color: var(--green); border-radius: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; cursor: pointer;
}
#screen-lock .lock-forgot {
  margin-top: 32px; font-size: 12px; color: var(--muted); cursor: pointer;
  background: none; border: none; text-decoration: underline; text-underline-offset: 3px;
}
/* PIN dots: 6 small circles that fill in as the user types digits. */
.pin-dots { display: flex; gap: 14px; margin-bottom: 28px; }
.pin-dot  { width: 14px; height: 14px; border-radius: 50%; background: var(--o10); border: 1px solid var(--o15); transition: background 0.15s, transform 0.1s; }
.pin-dot.filled { background: var(--green); border-color: var(--green); transform: scale(1.1); }
.pin-dot.shake  { animation: pinShake 0.4s ease both; }
@keyframes pinShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
/* 3x4 number keypad (1-9, then blank-0-backspace). Buttons are big enough for thumbs. */
.pin-pad { display: grid; grid-template-columns: repeat(3, 78px); gap: 14px; }
.pin-key {
  width: 78px; height: 78px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--glass); color: var(--text);
  font-family: var(--font-display); font-size: 28px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.pin-key:active { background: var(--glass-hover); transform: scale(0.94); }
.pin-key.blank  { visibility: hidden; cursor: default; }
.pin-key.backspace { font-size: 22px; color: var(--muted); }
/* Privacy mode: blur every number-bearing surface until the user taps to reveal.
   .revealed temporarily lifts the blur (12s window) after a successful unlock. */
body.privacy-mode .net-amt,
body.privacy-mode .st-val,
body.privacy-mode .st-tap-hint,
body.privacy-mode .cat-amt,
body.privacy-mode .cat-pct,
body.privacy-mode .tx-amt,
body.privacy-mode .bva-num,
body.privacy-mode .sec-total {
  filter: blur(9px); transition: filter 0.25s ease; cursor: pointer;
}
body.privacy-mode.revealed .net-amt,
body.privacy-mode.revealed .st-val,
body.privacy-mode.revealed .st-tap-hint,
body.privacy-mode.revealed .cat-amt,
body.privacy-mode.revealed .cat-pct,
body.privacy-mode.revealed .tx-amt,
body.privacy-mode.revealed .bva-num,
body.privacy-mode.revealed .sec-total {
  filter: blur(0);
}
/* Header eye-icon toggle that flips privacy-mode on the body. Sits next to
   the AI-help button -- 32x32 to match the existing surface. */
#privacy-toggle-btn {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--glass); color: var(--muted); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
#privacy-toggle-btn.visible { display: flex; }
#privacy-toggle-btn:hover { color: var(--text); background: var(--glass-hover); }
#privacy-toggle-btn.on { color: var(--green); border-color: rgba(0,214,143,0.3); background: rgba(0,214,143,0.06); }
/* PIN-pad in Settings (set/change-PIN flow) -- smaller variant fits inside the modal. */
.sheet-pin-pad { display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; justify-content: center; margin: 14px auto 6px; }
.sheet-pin-pad .pin-key { width: 64px; height: 64px; font-size: 22px; }
.sheet-pin-pad .pin-key.backspace { font-size: 18px; }
.sheet-pin-dots { justify-content: center; margin: 18px 0 8px; }
/* Auto-lock + idle-timeout pill rows in Settings. */
.choice-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.choice-pill {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--glass); color: var(--muted); cursor: pointer;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
}
.choice-pill.selected { background: var(--grad-primary); border-color: transparent; color: #050a14; }

/* ── Coachmark tour (gbTour) ── */
/* Full-viewport dim overlay; tap the dim area to skip the whole tour. */
#tour-overlay {
  position: fixed; inset: 0; z-index: 450;
  background: rgba(0,0,0,0.55);
  animation: tourFade 0.2s ease both;
}
@keyframes tourFade { from { opacity: 0; } to { opacity: 1; } }
/* Coachmark card. Positioned by JS each step. */
#tour-card {
  position: absolute; width: 280px; max-width: calc(100vw - 24px);
  background: #0c1628; border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 16px 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-family: var(--font-body); color: var(--text);
  animation: tourPop 0.25s cubic-bezier(0.34,1.4,0.64,1) both;
}
@keyframes tourPop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
#tour-step-indicator {
  font-family: var(--font-display); font-size: 11px; font-weight: 800;
  color: var(--green); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 4px;
}
#tour-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  color: var(--text); margin-bottom: 6px;
}
#tour-copy {
  font-size: 13px; color: var(--soft); line-height: 1.55; margin-bottom: 12px;
}
#tour-actions { display: flex; justify-content: flex-end; }
#tour-skip {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: transparent; color: var(--muted); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
#tour-skip:hover { color: var(--text); background: var(--o06); }
/* Arrow nub on the card. The class controls which edge it sits on; left is
   set by JS to align with the centre of the target element. */
#tour-arrow {
  position: absolute; width: 12px; height: 12px;
  background: #0c1628; border: 1px solid var(--border);
  border-right: none; border-bottom: none;
}
.tour-arrow-top    { top: -7px;     transform: rotate(45deg); }
.tour-arrow-bottom { bottom: -7px;  transform: rotate(225deg); }
/* Subtle green halo on whichever element the current step is pointing at. */
.tour-target-pulse {
  animation: tourPulse 1.8s ease-in-out infinite;
  position: relative; z-index: 460; /* lift above the dim overlay */
  border-radius: 16px;
}
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,214,143,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(0,214,143,0); }
}

/* ── Reduced-motion: respect prefers-reduced-motion (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  /* Cancel all keyframe animations and motion transitions */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep the wordmark legible without the shimmer sweep */
  .gb-shimmer {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--green) !important;
    color: var(--green) !important;
    filter: none !important;
  }
  /* Disable active-state scale "press" effect for users who set reduce-motion */
  .fab:active, #ai-help-btn:active { transform: none !important; }
}

/* ════ Manual transaction entry ════ */

/* Floating add button (Transactions screen only) */
#fab-add-tx {
  position: fixed; right: 18px; bottom: calc(78px + env(safe-area-inset-bottom,0px));
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--green); color: #fff; font-size: 30px; line-height: 1; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,214,143,0.40); cursor: pointer; z-index: 90;
  opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#fab-add-tx.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#fab-add-tx:active { transform: scale(.94); }

/* Type toggle (segmented control) */
.addtx-toggle {
  display: flex; gap: 6px; background: var(--o05);
  border: 1px solid var(--border); border-radius: 14px; padding: 5px; margin: 8px 0 4px;
}
.addtx-seg {
  flex: 1; min-height: 44px; border: none; border-radius: 10px; background: transparent;
  color: var(--soft); font-family: var(--font-display); font-weight: 800; font-size: 15px;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.addtx-seg.active { color: #050a14; }
#add-tx-type-expense.active { background: var(--red); }
#add-tx-type-income.active  { background: var(--green); }

/* Amount field (accent follows type) */
.addtx-amount-wrap {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  border: 1.5px solid var(--red); border-radius: 14px; padding: 10px 14px;
  transition: border-color .15s ease;
}
.addtx-amount-wrap.income { border-color: var(--green); }
.addtx-currency { font-size: 24px; font-weight: 800; color: var(--muted); font-family: var(--font-display); }
.addtx-amount {
  flex: 1; width: 100%; border: none; background: transparent; outline: none; color: var(--text);
  font-size: 30px; font-weight: 800; font-family: var(--font-display);
}
.addtx-amount::placeholder { color: var(--muted); }

/* Labels / counters / collapsible links / footer */
.addtx-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin: 14px 2px 6px;
}
.addtx-counter { font-size: 11px; color: var(--muted); text-align: right; margin: 4px 2px 0; }
.addtx-toggle-link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--green); font-size: 13px; font-weight: 700; cursor: pointer; padding: 14px 2px 4px;
}
.addtx-toggle-link .tw-arrow { font-size: 11px; }
.addtx-footer { display: flex; gap: 10px; margin-top: 18px; }
.addtx-footer .btn-secondary, .addtx-footer .btn-primary { flex: 1; }

/* Scrollable modal on small screens */
#modal-add-tx .sheet { max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Manual badge + delete icon in the tx list */
.tx-badge-manual {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--border); border-radius: 5px;
  padding: 0 4px; margin-left: 6px; line-height: 14px; vertical-align: middle;
}
.tx-del {
  flex-shrink: 0; margin-left: 10px; width: 30px; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.tx-del:hover, .tx-del:active { background: rgba(255,71,87,0.12); color: var(--red); }

/* Empty state (Transactions screen) */
.tx-empty { text-align: center; padding: 56px 24px; color: var(--muted); }
.tx-empty-icon { font-size: 34px; margin-bottom: 12px; opacity: .7; }
.tx-empty-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.tx-empty-sub { font-size: 13px; line-height: 1.6; }
.tx-empty-sub .fab-ref { color: var(--green); font-weight: 800; }

/* ════ Anomaly report ════ */
.anom-header { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 8px; }
.anom-head-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.anom-card {
  background: var(--glass); border: 1px solid var(--border); border-left: 4px solid var(--muted);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
  transition: opacity .3s ease, transform .3s ease;
}
.anom-card-row { display: flex; gap: 12px; align-items: flex-start; }
.anom-card-icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.anom-card-body { flex: 1; min-width: 0; }
.anom-card-msg { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.anom-card-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.anom-review-btn {
  margin-top: 10px; padding: 6px 12px; border-radius: 9px;
  border: 1px solid rgba(0,214,143,0.3); background: rgba(0,214,143,0.08);
  color: var(--green); font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: var(--font-display);
}
.anom-card.anom-reviewed { opacity: .45; transform: scale(.99); }
.anom-footer { display: flex; gap: 10px; margin-top: 14px; }
.anom-footer .btn-secondary, .anom-footer .btn-primary { flex: 1; }

/* Summary anomaly badge */
#anomaly-badge {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(58px + env(safe-area-inset-top,0px)); z-index: 85;
  background: rgba(255,165,2,0.14); border: 1px solid rgba(255,165,2,0.4);
  color: var(--amber); font-family: var(--font-display); font-weight: 700; font-size: 12px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}