:root {
  /* "Ledger" identity — deep banker's-green ink on cool paper,
     shared with the ExpenseTracker mobile app. */
  --brand-50:#e9f2ee; --brand-100:#cfe5db; --brand-200:#a8cfbe;
  --brand-500:#177b5b; --brand-600:#0f614a; --brand-700:#0a4a39;
  --grad: linear-gradient(135deg,#15735a 0%,#0a4536 100%);
  --ring:rgba(23,123,91,.32);
  --ink-900:#18241f; --ink-700:#41504a; --ink-500:#5a6b62; --ink-400:#8a998f; --ink-300:#c3cec7;
  --bg:#f2f5f3; --card:#ffffff; --border:#e3e9e5;
  --pos:#0e9f6e;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --font-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans",Roboto,sans-serif;
  --sh-card:0 1px 2px rgba(11,36,28,.04), 0 10px 28px -16px rgba(11,36,28,.12);
  --sh-pop:0 24px 60px -12px rgba(11,36,28,.25);
  --sh-brand:0 14px 34px -14px rgba(11,36,28,.38);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; min-height:100%; }
body {
  background:var(--bg); color:var(--ink-900);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
.hidden { display:none !important; }
svg.i { display:inline-block; vertical-align:-0.18em; flex:none; }
.tnum { font-variant-numeric:tabular-nums; }

/* Ledger figures: money and hours are set in tabular figures so columns
   line up exactly, the way a timecard should.

   These were previously set in IBM Plex Mono. Monospace gives the comma a
   full character advance, so ¥608,160 rendered as "608 , 160" — the
   separator floating away from the digits it groups, which reads as loose
   rather than typewritten. Plex Sans with `tabular-nums` keeps the
   fixed-width digits that make the alignment work and gives the comma its
   natural width. Same ledger discipline, without the gap. */
.hero-amount, .hstat-v, .line-v, .shift-amt, .trend .val,
.bighours input, .money input, .day-chip .dom, .tnum,
.ins-val, .ins-fc-amt {
  font-family:var(--font-ui);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.015em;
}
/* Display-size figures take a touch more tracking to stay compact. */
.hero-amount, .ins-fc-amt, .bighours input { letter-spacing:-0.03em; }

::selection { background:var(--brand-200); }

/* ── Buttons ───────────────────────────── */
.btn {
  font:inherit; font-weight:600; border-radius:var(--r-md); cursor:pointer;
  border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s, box-shadow .15s, transform .04s, border-color .15s;
  /* Several buttons are anchors ("Start tracking", "See plans"). Without
     this they carried the browser's default underline and read as links
     sitting inside a button rather than as buttons. */
  text-decoration:none;
}
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
.btn-block { display:flex; width:100%; padding:14px 16px; font-size:15.5px; }
.btn-primary {
  background:linear-gradient(180deg,var(--brand-500),var(--brand-600)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px -2px rgba(10,74,57,.55);
}
.btn-primary:hover { background:linear-gradient(180deg,var(--brand-600),var(--brand-700)); }
.btn-soft { background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100); }
.btn-soft:hover { background:var(--brand-100); }
.btn-danger-ghost { background:#fff; color:#dc2626; border-color:#fecaca; }
.btn-danger-ghost:hover { background:#fef2f2; }
.link {
  background:none; border:none; color:var(--brand-600); font:inherit; font-weight:600; font-size:13.5px;
  cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:5px 7px; border-radius:var(--r-sm);
}
.link:hover { background:var(--brand-50); }
.link:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }

/* ── Auth / boot screen ────────────────── */
.auth-screen {
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:
    radial-gradient(90% 60% at 50% -10%, var(--brand-50) 0%, transparent 60%),
    linear-gradient(180deg,#f8f9fc 0%,#eef0f8 100%);
}
.auth-card {
  width:100%; max-width:400px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:32px 28px; box-shadow:var(--sh-pop); text-align:center;
}
/* Logo mark — a clock with hours rising inside it, the last one a gold coin.
   The ring inherits currentColor (white on the green tile); only the bars and
   the coin are gold, so one mark works anywhere the tile does.
   Two golds are needed: #f0c040 has the lift to read on green, and would be
   washed out on white, where the favicon uses --logo-gold-light instead. */
:root { --logo-gold:#f0c040; --logo-gold-light:#b8860b; }
.lm-bar { stroke:var(--logo-gold); }
.lm-coin { fill:var(--logo-gold); stroke:none; }

.logo {
  width:56px; height:56px; border-radius:16px; margin:0 auto 16px; color:#fff;
  background:var(--grad); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -10px rgba(16,20,40,.4);
}
.auth-title { font-size:23px; font-weight:700; letter-spacing:-.02em; margin:0 0 4px; }
.auth-sub { color:var(--ink-500); font-size:14px; margin:0 0 18px; }
.field-label { display:block; text-align:left; font-size:13px; font-weight:500; color:var(--ink-700); margin:14px 0 6px; }
.field {
  width:100%; border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px;
  font:inherit; font-size:15px; color:var(--ink-900); background:#fff; transition:border-color .15s, box-shadow .15s;
}
.field::placeholder { color:var(--ink-300); }
.field:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--ring); }
select.field {
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23636e83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.auth-toggle { font-size:14px; color:var(--ink-500); margin:16px 0 0; }
.auth-toggle a { color:var(--brand-600); font-weight:600; cursor:pointer; }
/* Sits between the sign-in button and the sign-up toggle. Quieter than the
   toggle so it doesn't compete with it — recovery is the rarer path. */
.auth-forgot { font-size:13.5px; margin:14px 0 0; }
.auth-forgot a { color:var(--ink-500); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.auth-forgot a:hover { color:var(--brand-600); }
.divider-or { display:flex; align-items:center; gap:12px; color:var(--ink-400); font-size:12px; margin:20px 0 14px; }
.divider-or::before, .divider-or::after { content:""; flex:1; height:1px; background:var(--border); }
.trust { margin-top:18px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; color:var(--ink-400); }

/* ── Account & security ────────────────── */
.acc-email {
  margin:4px 0 0; font-size:15px; font-weight:600; color:var(--ink-700);
  /* long addresses shouldn't widen the sheet */
  overflow-wrap:anywhere;
}
/* Visually separated from the rest so nobody wanders into it. Tinted rather
   than merely bordered — this is the one part of the sheet that destroys data. */
.danger-zone {
  margin-top:22px; padding:14px; border-radius:var(--r-lg);
  border:1px solid rgba(220,56,56,.35); background:rgba(220,56,56,.05);
}
.danger-zone .field-label { color:#b91c1c; }
.dark .danger-zone { border-color:rgba(248,113,113,.35); background:rgba(248,113,113,.08); }
.dark .danger-zone .field-label { color:#fca5a5; }

/* ── Jobs ──────────────────────────────── */
/* Horizontal filter row. Scrolls rather than wraps so three or four jobs
   never push the hero down the page. */
.job-chips {
  display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.job-chips::-webkit-scrollbar { display:none; }
.job-chip {
  flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border:1px solid var(--border); border-radius:999px;
  background:var(--card); color:var(--ink-500);
  font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.job-chip.active { border-color:var(--brand-600); color:var(--brand-700); background:var(--brand-50); }
.dark .job-chip.active { background:rgba(255,255,255,.10); color:var(--brand-200); }
.job-dot { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
/* Job name beside a figure — the rate detail sits quieter than the name. */
.job-sub { color:var(--ink-400); font-weight:400; font-size:12.5px; }
/* Colour pips on a calendar day worked at more than one job. */
.cal-dots { position:absolute; bottom:3px; left:0; right:0; display:flex; gap:2px; justify-content:center; }
.cal-dots .job-dot { width:5px; height:5px; }

/* ── Top bar ───────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner { max-width:600px; margin:0 auto; padding:11px 16px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; letter-spacing:-.01em; }
.brand-mark {
  width:28px; height:28px; border-radius:8px; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-ghost-sm {
  background:#fff; border:1px solid var(--border); color:var(--ink-500); font:inherit; font-size:13px; font-weight:500;
  padding:7px 11px; border-radius:var(--r-sm); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:background .15s, color .15s;
}
.btn-ghost-sm:hover { background:var(--bg); color:var(--ink-700); }

/* ── Page + hero ───────────────────────── */
.page { max-width:600px; margin:0 auto; padding:16px 16px 96px; }
.hero {
  position:relative; overflow:hidden;
  background:var(--grad); color:#fff; border-radius:var(--r-xl); padding:22px 20px 20px;
  text-align:center; box-shadow:var(--sh-brand);
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 85% -20%, rgba(255,255,255,.26), transparent 55%),
    radial-gradient(100% 110% at 8% 115%, rgba(10,10,35,.28), transparent 58%);
}
.hero > * { position:relative; }
.hero-top { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:6px; }
.hero-month { font-size:13.5px; font-weight:600; opacity:.95; min-width:128px; }
.nav-btn {
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.22); cursor:pointer; color:#fff;
  background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.nav-btn:hover { background:rgba(255,255,255,.28); }
.nav-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.4); }
.hero-label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.82; margin:8px 0 0; font-weight:500; }
.hero-amount {
  font-size:34px; font-weight:700;
  margin:2px 0 12px; font-variant-numeric:tabular-nums;
}
.hero-amount .sym { font-size:.58em; font-weight:600; opacity:.85; margin-right:2px; }
.hero-pill {
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:500;
}
/* Three stats across a 375px phone leaves each about 100px, which was
   enough to squeeze "Jul 25" onto two visual chunks. Equal-width columns
   with centred content keep the dividers evenly spaced whatever the
   values are, and the padding gives the widest value room to breathe. */
.hero-stats { display:flex; justify-content:center; align-items:stretch; }
.hstat {
  display:flex; flex-direction:column; gap:2px; padding:2px 10px;
  flex:1 1 0; min-width:0; align-items:center; text-align:center;
}
.hstat + .hstat { border-left:1px solid rgba(255,255,255,.28); }
.hstat-v { font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.hstat-k { font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }

/* ── Cards ─────────────────────────────── */
.card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px 20px; box-shadow:var(--sh-card); margin-top:14px;
}
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.card-title { font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-400); }
.card-head .card-title { margin:0; }

/* ── Collapsible sections ─────────────────────
   The whole header acts as the toggle, so it's a comfortable tap target on a
   phone rather than a small chevron you have to aim at. */
/* The padding/negative-margin pair grows the tap area to ~45px without moving
   anything visually — at the natural 33px this was under the 44px minimum for
   a comfortable thumb press. */
.fold-btn {
  display:flex; align-items:center; gap:7px; flex:1; min-width:0;
  background:none; border:0; padding:14px 0; margin:-14px 0; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
}
/* ink-500 rather than ink-400: the chevron is the only affordance showing this
   header is interactive, and at ink-400 it measured 2.99:1 against the card —
   just under the 3:1 WCAG minimum for non-text UI. */
.fold-chev { display:flex; color:var(--ink-500); transition:transform .18s ease; transform:rotate(90deg); }
.folded .fold-chev { transform:rotate(0deg); }
/* The fill alone is only ~1.1:1 against the card, so the pill needs the border
   to read as a pill at all. */
.fold-count {
  font-size:11px; font-weight:600; color:var(--ink-500);
  background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:1px 8px; white-space:nowrap;
}
.folded .fold-body { display:none; }
/* A folded card is just a header, so drop the gap the body used to fill. */
.folded .card-head { margin-bottom:0; }

.line { display:flex; align-items:center; justify-content:space-between; padding:9px 0; }
.line-k { color:var(--ink-700); font-size:14px; }
.line-v { font-weight:600; font-size:14.5px; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.line-v.accent { color:var(--brand-600); }
.line-sep { height:1px; background:var(--border); margin:7px 0; }
/* Bookkeeping convention: a double rule closes a final total. */
.line.total { padding-top:10px; padding-bottom:10px; border-bottom:3px double var(--ink-300); }
.line.total .line-k { font-weight:700; font-size:15px; color:var(--ink-900); }
.line.total .line-v { font-size:20px; font-weight:700; color:var(--brand-600); letter-spacing:-.02em; }
.note { font-size:12px; color:var(--ink-400); line-height:1.55; margin:8px 0 0; }

/* ── Shift list ────────────────────────── */
.shifts { margin-top:4px; }
.shift-item {
  display:flex; align-items:center; gap:12px; padding:11px 8px; margin:0 -8px;
  border-top:1px solid var(--border); border-radius:10px; cursor:pointer; transition:background .12s;
}
.shifts .shift-item:first-child { border-top:none; }
.shift-item:hover { background:var(--bg); }
.day-chip {
  width:46px; height:46px; border-radius:12px; background:var(--brand-50); color:var(--brand-700);
  display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none;
}
.day-chip .dow { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.85; }
.day-chip .dom { font-size:17px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.shift-body { flex:1; min-width:0; }
.shift-main { display:flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; color:var(--ink-900); }
.shift-main svg { color:var(--ink-400); }
.shift-sub { font-size:12.5px; color:var(--ink-400); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shift-amt { font-weight:700; font-size:14.5px; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.shift-chev { color:var(--ink-300); display:flex; }
.shift-item:hover .shift-chev { color:var(--brand-500); }

.empty { text-align:center; padding:28px 12px; }
.empty-ic {
  width:54px; height:54px; border-radius:50%; margin:0 auto 12px; background:var(--brand-50); color:var(--brand-500);
  display:flex; align-items:center; justify-content:center;
}
.empty-title { font-weight:600; color:var(--ink-700); }
.empty-sub { font-size:13px; color:var(--ink-400); margin-top:3px; }

/* ── Messages ──────────────────────────── */
.msg { font-size:13.5px; padding:10px 12px; border-radius:var(--r-md); margin-top:14px; text-align:center; }
.msg.err { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.msg.ok { background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }
.msg.warn { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

/* ── Demo banner ───────────────────────── */
.demo-banner {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700);
  border-radius:var(--r-md); padding:8px 8px 8px 14px; margin-bottom:14px; font-size:13px; font-weight:500;
}
.demo-banner button { flex:none; }

/* ── Modal / sheet ─────────────────────── */
.overlay {
  position:fixed; inset:0; background:rgba(13,17,32,.5); z-index:50;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center; animation:fade .15s ease;
}
.sheet {
  background:var(--bg); width:100%; max-width:480px; border-radius:var(--r-xl) var(--r-xl) 0 0;
  max-height:92vh; overflow-y:auto; padding-bottom:22px; animation:slideup .24s cubic-bezier(.2,.85,.25,1);
}
.sheet-head {
  position:sticky; top:0; background:var(--bg); z-index:1;
  display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px;
}
.sheet-head h2 { margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.sheet-close {
  width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--border); background:#fff;
  color:var(--ink-500); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.sheet-close:hover { color:var(--ink-700); }
.sheet-pad { padding:4px 18px; }
@media (min-width:640px) {
  .overlay { align-items:center; }
  .sheet { border-radius:var(--r-xl); margin:24px; max-height:90vh; animation:pop .18s ease; box-shadow:var(--sh-pop); }
}

/* Big overtime input */
.bighours { position:relative; overflow:hidden; background:var(--grad); color:#fff; border-radius:var(--r-lg); padding:22px 16px; text-align:center; box-shadow:var(--sh-brand); }
.bighours::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 85% -20%, rgba(255,255,255,.24), transparent 55%);
}
.bighours > * { position:relative; }
.bighours input {
  width:100%; border:none; background:none; outline:none; text-align:center;
  font:inherit; font-size:48px; font-weight:700; color:#fff; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.bighours input::placeholder { color:rgba(255,255,255,.45); }
.bighours .cap { opacity:.85; font-size:13px; }
.bighours .pay { font-size:16px; font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums; }

/* Money input (pay setup) */
.money { display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--r-md); padding:0 14px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.money:focus-within { border-color:var(--brand-500); box-shadow:0 0 0 3px var(--ring); }
.money .cur { color:var(--ink-500); font-size:15px; margin-right:6px; }
.money input { flex:1; border:none; outline:none; background:none; padding:12px 0; font:inherit; font-size:16px; font-weight:600; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.money .per { color:var(--ink-400); font-size:13px; }

@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes slideup { from{transform:translateY(100%)} to{transform:none} }
@keyframes pop { from{transform:scale(.96);opacity:0} to{transform:none;opacity:1} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }

/* ── Bottom tab bar ────────────────────── */
.tabbar {
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--border); display:flex; justify-content:center; gap:8px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
}
.tab {
  flex:1 1 0; max-width:130px; background:none; border:none; cursor:pointer; font:inherit; font-size:11px; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; border-radius:10px;
  color:var(--ink-400); transition:color .15s, background .15s;
}
.tab.active { color:var(--brand-600); background:var(--brand-50); }
.tab:hover:not(.active) { background:var(--bg); }
.tab:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }

/* ── Expense category UI ───────────────── */
.cat-ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.cat-bar { margin:12px 0; }
.cat-bar .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.cat-bar .name { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-700); }
.cat-bar .dot { width:9px; height:9px; border-radius:50%; flex:none; }
.cat-bar .amt { font-size:14px; font-weight:600; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.cat-bar .pct { font-size:12.5px; color:var(--ink-400); margin-left:8px; }
.cat-bar .track { height:6px; background:var(--bg); border-radius:999px; overflow:hidden; }
.cat-bar .fill { height:6px; border-radius:999px; }

/* What OCR actually read — folded away until something looks wrong */
.scan-raw { margin-top:8px; }
.scan-raw summary { font-size:12.5px; color:var(--ink-400); cursor:pointer; padding:4px 0; }
.scan-raw pre { margin:6px 0 0; padding:10px; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-md); font-size:11.5px; line-height:1.45; color:var(--ink-700);
  max-height:220px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }

/* Spending limit */
.cap-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:10px 0 8px; }
.cap-spent { font-size:15px; font-weight:600; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.cap-status { font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cap-bar { height:10px; background:var(--bg); border-radius:999px; overflow:hidden; }
.cap-fill { height:10px; border-radius:999px; min-width:2px; }
/* Darkened against white so the status still clears 4.5:1 as normal-size text. */
.cap-status.ok { color:#047857; }
.cap-status.warn { color:#b45309; }
.cap-status.over { color:#dc2626; }
.cap-fill.ok { background:#0e9f6e; }
.cap-fill.warn { background:#d97706; }
.cap-fill.over { background:#dc2626; }
/* On a near-black card the same three colours fall under 4.5:1, and the empty
   half of the track disappears into the card entirely. */
.dark .cap-status.ok { color:#34d399; }
.dark .cap-status.warn { color:#fbbf24; }
.dark .cap-status.over { color:#f87171; }
.dark .cap-fill.ok { background:#34d399; }
.dark .cap-fill.warn { background:#fbbf24; }
.dark .cap-fill.over { background:#f87171; }
.dark .cap-bar { background:rgba(255,255,255,.22); }

.cat-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.cat-chip {
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); background:#fff;
  border-radius:999px; padding:7px 12px; font:inherit; font-size:13px; color:var(--ink-700); cursor:pointer; transition:all .12s;
}
.cat-chip.active { border-color:transparent; color:#fff; }

/* ── Segmented control (This month / Trends) ── */
.seg { display:flex; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:3px; margin-bottom:14px; }
.seg-btn { flex:1; border:none; background:none; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-500); padding:9px; border-radius:9px; cursor:pointer; transition:color .15s, background .15s, box-shadow .15s; }
.seg-btn.active { background:#fff; color:var(--brand-600); box-shadow:0 1px 3px rgba(16,20,40,.1); }

/* ── Month-on-month trend rows ── */
.trend { display:flex; align-items:center; gap:12px; padding:12px 8px; margin:0 -8px; border-top:1px solid var(--border); border-radius:10px; cursor:pointer; transition:background .12s; }
.trend:first-of-type { border-top:none; }
.trend:hover { background:var(--bg); }
.trend.now { background:var(--brand-50); }
.trend .m { width:76px; flex:none; font-size:13.5px; font-weight:600; color:var(--ink-700); }
.trend .mid { flex:1; min-width:0; }
.trend .track { height:8px; background:var(--bg); border-radius:999px; overflow:hidden; }
.trend.now .track { background:#fff; }
.trend .fill { height:8px; border-radius:999px; }
.trend .tsub { font-size:12px; color:var(--ink-400); margin-top:5px; }
.trend .val { flex:none; text-align:right; font-size:14.5px; font-weight:700; color:var(--ink-900); font-variant-numeric:tabular-nums; }

/* ── Appearance: accent swatches ── */
.swatches { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.swatch { width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; box-shadow:0 1px 3px rgba(16,20,40,.2); transition:transform .1s; }
.swatch:hover { transform:scale(1.06); }
.swatch.active { outline:3px solid var(--ink-700); outline-offset:2px; }

/* ── Dark mode — green-tinted ink, accent-agnostic fills ── */
.dark { --bg:#0d1210; --card:#161e1a; --border:#28332d; --ink-900:#edf3ef; --ink-700:#c2cdc6; --ink-500:#8b9a91; --ink-400:#6b7a71; --ink-300:#45534b; }
.dark .auth-screen { background:radial-gradient(90% 60% at 50% -10%, #16241d 0%, transparent 60%), linear-gradient(180deg,#0d1210,#131b16); }
.dark .field, .dark .money, .dark .cat-chip, .dark .sheet-close, .dark .btn-ghost-sm, .dark .btn-danger-ghost, .dark .seg-btn.active { background:var(--card); }
.dark select.field {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b9a91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.dark .topbar { background:rgba(22,30,26,.85); }
.dark .tabbar { background:rgba(22,30,26,.92); }
.dark .tab.active { background:rgba(255,255,255,.08); }
.dark .btn-soft { background:rgba(255,255,255,.08); color:var(--brand-200); border-color:rgba(255,255,255,.12); }
.dark .demo-banner { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:var(--brand-200); }
.dark .day-chip { background:rgba(255,255,255,.08); color:var(--brand-200); }
.dark .trend.now { background:rgba(255,255,255,.06); }
.dark .trend.now .track { background:var(--card); }
/* Accent text needs the light mint on dark surfaces — the deep brand
   green vanishes against near-black. */
.dark .link, .dark .auth-toggle a, .dark .seg-btn.active, .dark .tab.active,
.dark .line-v.accent, .dark .line.total .line-v { color:var(--brand-200); }
.dark .btn-danger-ghost { color:#f87171; border-color:#7f1d1d; }
.dark .msg.err { background:#3a1d1d; color:#fca5a5; border-color:#7f1d1d; }
.dark .msg.ok { background:#10301f; color:#86efac; border-color:#14532d; }
.dark .msg.warn { background:#332608; color:#fcd34d; border-color:#78350f; }

/* ── Calendar overview (month grid) ──────────────────────────── */
.cal-dows { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:8px; }
.cal-dows span { text-align:center; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-400); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:4px; }
.cal-cell {
  /* relative so the multi-job colour pips can anchor to the bottom edge */
  position:relative;
  aspect-ratio:1; border:1px solid transparent; border-radius:9px; background:none; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font:inherit;
}
.cal-cell.blank { border:none; pointer-events:none; }
button.cal-cell { cursor:pointer; transition:background .12s, border-color .12s; }
button.cal-cell:hover { background:var(--bg); border-color:var(--border); }
button.cal-cell:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
.cal-cell .dnum { font-size:11px; font-weight:600; color:var(--ink-500); }
.cal-cell .cval { font-size:9.5px; font-weight:700; line-height:1; color:var(--brand-600); font-variant-numeric:tabular-nums; }
.cal-cell.has { background:var(--brand-50); border-color:var(--brand-100); }
.cal-cell.has .dnum { color:var(--brand-700); }
.cal-cell.today { outline:2px solid var(--brand-500); outline-offset:-2px; }
.dark button.cal-cell:hover { background:rgba(255,255,255,.05); }
/* The highlight fill was left at the light-mode mint (--brand-50) in dark
   mode while the text flipped to light mint (--brand-200) — light on light,
   about 1.4:1, effectively unreadable. Dark modes get the translucent wash
   the rest of the app uses, which the light text actually sits on. */
.dark .cal-cell.has { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); }
.dark .cal-cell.has .dnum, .dark .cal-cell.has .cval { color:var(--brand-200); }

/* ── Paid leave ──────────────────────────────────────────────── */
.leave-top { display:flex; align-items:flex-end; justify-content:space-between; margin:4px 0 10px; }
.leave-num { font-size:30px; font-weight:800; color:var(--brand-600); font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1; }
.leave-num.over { color:#c0392b; }
.leave-unit { font-size:13px; font-weight:600; color:var(--ink-500); margin-left:6px; }
.leave-meta { font-size:12.5px; color:var(--ink-400); font-variant-numeric:tabular-nums; text-align:right; }
.leave-track { height:8px; background:var(--bg); border-radius:999px; overflow:hidden; }
.leave-fill { height:8px; border-radius:999px; background:var(--brand-500); transition:width .3s; }
.leave-fill.over { background:#c0392b; }
.dark .leave-num { color:var(--brand-200); }
.dark .leave-num.over { color:#f87171; }
.dark .leave-fill.over { background:#f87171; }

/* ── Boss Mode — blur every money/hours figure ───────────────── */
.masked .hero-amount, .masked .hstat-v, .masked .line-v, .masked .shift-amt,
.masked .leave-num, .masked .leave-meta, .masked .cval, .masked .trend .val,
.masked .bridge-text {
  filter:blur(9px); -webkit-user-select:none; user-select:none;
}

/* ── Earn & Spend bridge (cross-module insight) ──────────────── */
.bridge {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--brand-50); border:1px solid var(--brand-100);
  border-radius:var(--r-lg); padding:14px 16px; margin-top:14px;
}
.bridge-ic { font-size:26px; line-height:1; }
.bridge-body { flex:1; min-width:0; }
.bridge-title { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-600); margin-bottom:3px; }
.bridge-text { font-size:13.5px; color:var(--ink-700); line-height:1.5; }
.bridge-bar { height:6px; background:var(--card); border-radius:999px; overflow:hidden; margin-top:10px; }
.bridge-fill { height:6px; border-radius:999px; background:var(--brand-500); transition:width .3s; }
.dark .bridge { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
.dark .bridge-title { color:var(--brand-200); }
.btn-ghost-sm.masked-on { background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100); }
.dark .btn-ghost-sm.masked-on { background:rgba(255,255,255,.08); color:var(--brand-200); border-color:rgba(255,255,255,.12); }

/* ── Credit-card editor rows (Pay setup) ─────────────────────── */
.card-row {
  border:1px solid var(--border); border-radius:var(--r-md);
  padding:12px; margin-top:10px; background:var(--card);
}
.card-row-head { display:flex; align-items:center; gap:8px; }
.card-row-head .cf-name { flex:1; }
.card-row .cf-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }

/* ── Earner profile picker ───────────────────────────────────── */
.prof-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.prof-card {
  text-align:left; background:var(--card); border:1.5px solid var(--border); border-radius:12px;
  padding:12px; cursor:pointer; display:flex; flex-direction:column; gap:3px; font:inherit;
  transition:border-color .12s, background .12s;
}
.prof-card:hover { border-color:var(--brand-200); }
.prof-card.active { border-color:var(--brand-500); background:var(--brand-50); }
.prof-card:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
.prof-emoji { font-size:22px; line-height:1; }
.prof-name { font-size:13px; font-weight:700; color:var(--ink-900); }
.prof-blurb { font-size:11px; color:var(--ink-400); line-height:1.35; }
.dark .prof-card.active { background:rgba(255,255,255,.06); }

/* ── Premium insights ────────────────────────────────────── */
.badge-prem {
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:var(--brand-50); color:var(--brand-700);
  border:1px solid var(--brand-100);
}
.dark .badge-prem { background:rgba(255,255,255,.10); color:var(--brand-200); border-color:rgba(255,255,255,.14); }
.ins-sub { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin:14px 0 8px; }

/* Spending donut. The total sits in the hole as normal HTML rather than an
   SVG <text>, so it inherits the app's font and scales with the text-size
   setting instead of being baked into the drawing. */
/* Inside a card the full-size segmented control is too loud — this is a
   switch between two views of one chart, not a change of tab. */
.seg.seg-sm { margin-bottom:10px; }
.seg.seg-sm .seg-btn { font-size:12.5px; padding:7px 6px; }

.donut-wrap { position:relative; width:186px; margin:4px auto 6px; }
.donut { display:block; width:100%; height:auto; }
.dn-mid {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; pointer-events:none;
}
.dn-mid-k { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400); }
.dn-mid-v { font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.dn-legend { display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.dn-row { display:flex; align-items:center; gap:8px; font-size:13px; }
.dn-dot { width:10px; height:10px; border-radius:3px; flex:none; }
/* The name yields first — the percentage and amount are the numbers being
   compared down the column, so they must stay aligned and unclipped. */
.dn-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-700); }
.dn-pct { font-weight:700; color:var(--ink-900); font-variant-numeric:tabular-nums; min-width:38px; text-align:right; }
.dn-amt { color:var(--ink-500); font-variant-numeric:tabular-nums; min-width:72px; text-align:right; }
.ins-row { padding:7px 0; border-bottom:1px solid var(--border); }
.ins-row:last-child { border-bottom:none; }
/* Name, amount and change on one line — the change describes the amount, so
   they belong together. The sparkline drops underneath at full width, which
   frees the name from competing with it and stops longer categories
   truncating to "Transportati…". */
.ins-top { display:flex; align-items:center; gap:9px; }
.ins-bottom { margin:3px 0 0 35px; }
.ins-ic { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:13px; flex:none; }
.ins-ic.sm { width:22px; height:22px; font-size:11px; border-radius:7px; }
.ins-name { flex:1; font-size:14px; color:var(--ink-700); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ins-spark { display:block; }
.ins-spark svg { width:100%; height:16px; display:block; }
.ins-val { font-size:14px; font-weight:700; color:var(--ink-900); font-variant-numeric:tabular-nums; flex:none; }
.ins-val.up { color:#dc2626; }
.ins-val.down { color:#0e9f6e; }
.delta { font-size:11px; font-weight:700; padding:2px 6px; border-radius:6px; flex:none; min-width:46px; text-align:center; }
.delta.up { background:#fee2e2; color:#b91c1c; }
.delta.down { background:#d1fae5; color:#047857; }
.delta.flat { background:var(--bg); color:var(--ink-400); }
.dark .delta.up { background:#3a1d1d; color:#fca5a5; }
.dark .delta.down { background:#10301f; color:#86efac; }
.dark .delta.flat { background:rgba(255,255,255,.06); color:var(--ink-400); }
.ins-forecast { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0 4px; }
.ins-fc-label { font-size:12px; color:var(--ink-500); }
.ins-fc-amt { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink-900); font-variant-numeric:tabular-nums; margin:2px 0; }
.ins-fc-sub { font-size:12px; color:var(--ink-500); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ins-mover { display:flex; align-items:center; gap:9px; padding:6px 0; }

/* ── Plan panel (subscription details) ───────────────────── */
.plan-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; }
.plan-card.ending { background:#fff7ed; border-color:#fed7aa; }
.plan-card.warn { background:#fef2f2; border-color:#fecaca; }
.dark .plan-card { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.dark .plan-card.ending { background:#3a2a16; border-color:#7c4a1d; }
.dark .plan-card.warn { background:#3a1d1d; border-color:#7f1d1d; }
.plan-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.plan-name { font-size:15px; font-weight:700; color:var(--ink-900); }
.plan-flag {
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px;
  background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100);
  text-align:right; line-height:1.35;
}
.plan-card.ending .plan-flag { background:#ffedd5; color:#9a3412; border-color:#fed7aa; }
.plan-flag.warn { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.dark .plan-flag { background:rgba(255,255,255,.10); color:var(--brand-200); border-color:rgba(255,255,255,.14); }
.dark .plan-card.ending .plan-flag { background:rgba(255,255,255,.10); color:#fdba74; border-color:rgba(255,255,255,.14); }
.dark .plan-flag.warn { background:rgba(255,255,255,.10); color:#fca5a5; border-color:rgba(255,255,255,.14); }
.plan-meta {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:8px;
  padding-top:8px; border-top:1px solid var(--border); font-size:13px; color:var(--ink-500);
}
.dark .plan-meta { border-top-color:rgba(255,255,255,.10); }
.plan-meta b { color:var(--ink-900); font-weight:600; font-variant-numeric:tabular-nums; }
.plan-note { font-size:12.5px; color:var(--ink-500); margin:8px 0 0; line-height:1.5; }

/* ── Insights: month-on-month / year-over-year ───────────── */
/* Two months and the word between them. The selects share the width evenly
   so neither month looks like the more important one — the comparison is
   symmetric even though only one side is the subject. */
/* Set off from the reporting above it — this is the interactive part of the
   card and shouldn't read as another row of results. */
.cmp-panel { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.cmp-pick { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cmp-sel { flex:1; min-width:0; padding:9px 10px; font-size:13.5px; }
.cmp-vs { font-size:12px; font-weight:700; color:var(--ink-400); flex:none; text-transform:uppercase; letter-spacing:.04em; }
.cmp-presets { display:flex; gap:6px; margin-bottom:12px; }
.cmp-preset {
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-500);
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:6px 12px; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.cmp-preset:hover:not(:disabled) { border-color:var(--brand-200); color:var(--ink-700); }
.cmp-preset.active { background:var(--brand-50); border-color:var(--brand-500); color:var(--brand-700); }
/* A preset whose month holds nothing stays visible but plainly unavailable —
   hiding it would make the row's contents shift about as months change. */
.cmp-preset:disabled { opacity:.4; cursor:default; }
.dark .cmp-preset.active { background:rgba(255,255,255,.08); color:var(--brand-200); }

.cmp-now { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:2px 0 10px; }
.cmp-now-label { font-size:13px; color:var(--ink-500); }
.cmp-now-amt { font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.cmp-row {
  display:grid; grid-template-columns:1fr auto auto; gap:4px 10px; align-items:baseline;
  padding:8px 0; border-top:1px solid var(--border); font-size:13.5px;
}
.cmp-label { color:var(--ink-700); grid-column:1; }
.cmp-sub { color:var(--ink-400); font-size:11.5px; display:block; }
.cmp-then { color:var(--ink-500); font-variant-numeric:tabular-nums; grid-column:2; }
/* Cash difference and percentage share the second line so the row stays
   readable at 375px instead of squeezing four figures across. */
.cmp-delta { grid-column:2; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.cmp-pct { grid-column:3; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; min-width:42px; text-align:right; }
.cmp-delta.up, .cmp-pct.up { color:#b91c1c; }
.cmp-delta.down, .cmp-pct.down { color:#047857; }
.cmp-delta.flat, .cmp-pct.flat { color:var(--ink-400); font-weight:600; }
.dark .cmp-delta.up, .dark .cmp-pct.up { color:#fca5a5; }
.dark .cmp-delta.down, .dark .cmp-pct.down { color:#86efac; }
.cmp-row.muted .cmp-none { grid-column:2 / -1; color:var(--ink-400); font-size:12.5px; text-align:right; }

/* ── Styles: Paper and Midnight ──────────────────────────── */

/* Paper — warm off-white with brown-grey ink, the colour of an actual
   ledger book. Light-mode based, so it needs no .dark rules. */
.paper {
  --bg:#f6f1e7; --card:#fffdf8; --border:#e6dccb;
  --ink-900:#2a2117; --ink-700:#544737; --ink-500:#6f6151; --ink-400:#9c8d79; --ink-300:#cbbfa9;
}
.paper .topbar { background:rgba(255,253,248,.86); }
.paper .tabbar { background:rgba(255,253,248,.94); }
.paper .auth-screen {
  background:radial-gradient(90% 60% at 50% -10%, #efe6d3 0%, transparent 60%),
             linear-gradient(180deg,#f8f4ea 0%,#f1e9da 100%);
}
.paper .field, .paper .money, .paper .cat-chip, .paper .sheet-close,
.paper .btn-ghost-sm, .paper .btn-danger-ghost, .paper .seg-btn.active { background:var(--card); }

/* Midnight — true black for OLED screens. Rides on .dark for behaviour and
   only replaces the surface colours. */
.midnight {
  --bg:#000000; --card:#0b0f0d; --border:#1d2622;
  --ink-900:#f2f6f4; --ink-700:#bcc7c1; --ink-500:#85938b; --ink-400:#66746c; --ink-300:#3d4a43;
}
.midnight .topbar { background:rgba(11,15,13,.88); }
.midnight .tabbar { background:rgba(11,15,13,.94); }
.midnight .auth-screen { background:radial-gradient(90% 60% at 50% -10%, #0d1a15 0%, transparent 60%), linear-gradient(180deg,#000,#070b09); }
.midnight .card, .midnight .sheet { box-shadow:none; }

/* ── Style picker ────────────────────────────────────────── */
.styles { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.style-btn {
  display:flex; align-items:center; gap:9px; padding:9px 11px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-700);
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md);
  transition:border-color .15s, background .15s;
}
.style-btn:hover { border-color:var(--brand-200); }
.style-btn.active { border-color:var(--brand-500); box-shadow:0 0 0 2px var(--ring); color:var(--ink-900); }

/* Support address. Set big and selectable, and allowed to break mid-word so a
   long address can't push the sheet sideways on a narrow phone. user-select is
   stated explicitly because this is the one string on the page someone will
   want to select by hand when the copy button can't work. */
.support-addr {
  margin-top:10px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700);
  font-size:15px; font-weight:600; text-align:center; word-break:break-all;
  -webkit-user-select:all; user-select:all;
}
.dark .support-addr { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:var(--brand-200); }
.support-diag {
  padding:9px 11px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--border);
  color:var(--ink-500); font-size:12px; line-height:1.45; word-break:break-word;
  -webkit-user-select:all; user-select:all;
}

/* ── Variable monthly income ─────────────────────────────────── */
/* Three rows that read as one sum: amount, rate, and what they come to. The
   total is the only one in the ink colour and at size, because it is the figure
   that can actually be spent — the two above it are the working. */
.mi-grid { display:flex; flex-direction:column; gap:9px; }
.mi-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.mi-k { font-size:13.5px; color:var(--ink-500); }
.mi-v { font-size:14.5px; font-weight:600; color:var(--ink-700); font-variant-numeric:tabular-nums; }
.mi-code { font-size:11.5px; font-weight:700; color:var(--ink-400); letter-spacing:.04em; }
.mi-tot .mi-k { color:var(--ink-700); font-weight:600; }
.mi-tot .mi-v { font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--ink-900); }

/* ── Per-category budgets ────────────────────────────────────── */
.bud-tot {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:2px 0 12px; margin-bottom:4px; border-bottom:1px solid var(--border);
  font-size:13px; color:var(--ink-500);
}
.bud-tot b { font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.bud-fig { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-900); }
.bud-of { font-weight:500; color:var(--ink-400); }
.bud-note { font-size:11.5px; margin-top:5px; color:var(--ink-400); }
/* The bar carries the category's own colour so a row stays recognisable;
   the state shows in the caption instead, which is where the number is. */
.cat-bar.bud-warn .bud-note { color:#b45309; font-weight:600; }
.cat-bar.bud-over .bud-note { color:#b91c1c; font-weight:600; }
.dark .cat-bar.bud-warn .bud-note { color:#fbbf24; }
.dark .cat-bar.bud-over .bud-note { color:#f87171; }

.bud-edit { display:flex; align-items:center; gap:10px; margin-top:10px; }
.bud-edit-name { flex:1; min-width:0; display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bud-edit-name .dot { width:9px; height:9px; border-radius:3px; flex:none; }
/* Fixed width so nine money fields line up as a column of numbers rather
   than stepping in and out with the length of each category name. */
.bud-edit-money { width:132px; flex:none; margin:0; }
/* The suggestion has to be plainly lighter than a real figure. At the input's
   own weight a hint reads as a value already entered, and the whole point of
   this sheet is that leaving a row blank is the normal thing to do. */
.bud-edit-money input::placeholder { color:var(--ink-300); font-weight:500; opacity:1; }

/* ── Wide layout (Premium) ──────────────────────────────────────
   Only below this breakpoint does the class do anything: on a phone there
   is one column no matter what the setting says, so the rules live inside
   the media query rather than being fought back on small screens. */
@media (min-width:1040px) {
  .layout-wide .page {
    max-width:1160px;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px; align-items:start;
  }
  /* The grid's gap owns the spacing now — the cards' own top margin would
     stagger the two columns against each other. */
  .layout-wide .page > * { margin-top:0; }
  /* Things that are the width of the screen conceptually: the headline
     figure, the period switch, and the banner telling you it's a demo. */
  .layout-wide .page > .hero,
  .layout-wide .page > .seg,
  .layout-wide .page > .demo-banner { grid-column:1 / -1; }
  .layout-wide .topbar-inner { max-width:1160px; }
}

/* Two little panes for the comfortable option, one wide one for the other —
   the swatch shows the shape of the choice rather than naming it twice. */
.lay-sw { display:flex; gap:2px; width:22px; height:16px; flex:none; }
.lay-sw i { flex:1; background:var(--ink-300); border-radius:2px; }
.lay-sw.comfortable i:first-child { display:none; }
.style-btn.active .lay-sw i { background:var(--brand-500); }

/* Text size picker. Four across rather than the styles' 2×2, because the
   options are a scale and reading them left-to-right shows that. */
.sizes { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.size-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 4px 8px; cursor:pointer; font:inherit; color:var(--ink-700);
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md);
  transition:border-color .15s, background .15s;
}
.size-btn:hover { border-color:var(--brand-200); }
.size-btn.active { border-color:var(--brand-500); box-shadow:0 0 0 2px var(--ring); color:var(--ink-900); }
/* The specimen is set at the size it selects, so the row previews itself. */
.size-aa { font-weight:700; line-height:1.1; }
.size-name { font-size:11px; font-weight:600; letter-spacing:.01em; }
.style-btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
.style-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* A miniature of the style itself: page colour with a card sitting on it. */
.style-sw { width:20px; height:20px; border-radius:6px; flex:none; border:1px solid rgba(128,128,128,.35); position:relative; }
.style-sw.light    { background:#f2f5f3; }
.style-sw.paper    { background:#f6f1e7; }
.style-sw.dark     { background:#0d1210; }
.style-sw.midnight { background:#000; }
.style-sw::after {
  content:""; position:absolute; left:3px; right:3px; bottom:3px; height:7px; border-radius:2px;
}
.style-sw.light::after    { background:#ffffff; }
.style-sw.paper::after    { background:#fffdf8; }
.style-sw.dark::after     { background:#161e1a; }
.style-sw.midnight::after { background:#0b0f0d; }