:root {
  --bg: #f6f7f9; --surface: #fff; --text: #0f172a; --muted: #64748b; --line: #e5e7eb;
  --accent: #0ea5e9; --accent-ink: #0369a1; --accent-btn: #0369a1; --accent-soft: #e0f2fe; --good: #15803d; --warn: #c2410c; --bad: #b91c1c;
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) {
    --bg: #0b0f17; --surface: #131a26; --text: #e5e7eb; --muted: #94a3b8; --line: #243041;
    --accent: #38bdf8; --accent-ink: #7dd3fc; --accent-btn: #0284c7; --accent-soft: #0c2a3d; --good: #4ade80; --warn: #fbbf24; --bad: #f87171;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0b0f17; --surface: #131a26; --text: #e5e7eb; --muted: #94a3b8; --line: #243041;
    --accent: #38bdf8; --accent-ink: #7dd3fc; --accent-btn: #0284c7; --accent-soft: #0c2a3d; --good: #4ade80; --warn: #fbbf24; --bad: #f87171;
    color-scheme: dark;
  }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 14px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
button.danger { color: var(--bad); }
input, select, textarea { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 10px; width: 100%; }
[hidden] { display: none !important; }

.top { position: sticky; top: 0; z-index: 5; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 18px; }
#tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
#tabs button { border: 0; background: none; color: var(--muted); }
#tabs button.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.month { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.month button { padding: 4px 12px; }
#monthLabel { min-width: 120px; text-align: center; }

main { max-width: 1180px; margin: 0 auto; padding: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.card.flush { padding: 0; overflow-x: auto; }
.card h3, .section-title { margin: 0 0 8px; font-size: 15px; }
.section-title { margin: 20px 0 10px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.card-head select { width: auto; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.spacer { flex: 1; }
.empty { text-align: center; padding: 32px; }
.note { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.note code { font-size: 13px; }
.badge { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi .label { color: var(--muted); font-size: 13px; }
.kpi .value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .sub { color: var(--muted); font-size: 13px; }
.banner { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); cursor: pointer; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; }
.cat-card:hover { border-color: var(--accent); }
.cat-card .head { display: flex; align-items: center; gap: 10px; }
.icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; flex: none; }
.cat-card .name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-card .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bar { height: 8px; border-radius: 99px; background: var(--line); margin: 12px 0 8px; overflow: hidden; position: relative; }
.bar > span { display: block; height: 100%; border-radius: 99px; }
.bar > i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: .45; }
.cat-card .foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.over { color: var(--bad) !important; font-weight: 600; }
.pace { color: var(--warn) !important; }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.chart-box { position: relative; height: 280px; }
@media (max-width: 860px) { .charts { grid-template-columns: 1fr; } }

.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.toolbar input[type=search] { flex: 1; min-width: 200px; }
.toolbar select { width: auto; }
.check { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.check input { width: auto; }
table.tx { width: 100%; border-collapse: collapse; }
.tx th, .tx td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tx th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.tx td.num, .tx th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx .desc { font-weight: 500; }
.tx .acct { color: var(--muted); font-size: 13px; }
.tx select { width: auto; min-width: 180px; padding: 5px 8px; }
.tx select.unset { border-color: var(--warn); }
.tx .credit { color: var(--good); }
.tx .lock { font-size: 12px; color: var(--muted); cursor: pointer; margin-left: 6px; }
.pending { font-size: 11px; color: var(--muted); border: 1px solid var(--line); padding: 1px 6px; border-radius: 99px; margin-left: 6px; }

.cat-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cat-row { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.cat-row:hover { border-color: var(--accent); }
.cat-row .info { flex: 1; min-width: 0; }
.cat-row .kw { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row .kind { font-size: 12px; color: var(--muted); }

.item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.err { color: var(--bad); font-size: 13px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label, .label { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid .check { display: flex; font-weight: 400; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .top { padding: 10px 16px; } main { padding: 16px; } }

.icon-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-picker button { width: 40px; height: 40px; padding: 0; font-size: 20px; }
.icon-picker button.sel { border: 2px solid var(--accent); background: var(--accent-soft); }

dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); width: min(560px, calc(100vw - 32px)); padding: 20px; }
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog h3 { margin-top: 0; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 20; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover { border-color: var(--line); }
input[type=color] { height: 40px; padding: 4px; cursor: pointer; }
.setup { margin-top: 14px; font-size: 14px; }
.setup summary { cursor: pointer; font-weight: 600; }
.setup ol { padding-left: 20px; display: grid; gap: 6px; }
.parsed { margin-top: 12px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 14px; padding: 12px; border-radius: 10px; background: var(--accent-soft); }
.parsed dt { color: var(--muted); }
.parsed dd { margin: 0; font-weight: 500; }

/* Phone: transactions become stacked cards instead of a wide table. */
@media (max-width: 640px) {
  .tx thead { display: none; }
  .tx tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "desc amt" "date acct" "cat cat"; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .tx td { padding: 0; border: 0; }
  .tx td:nth-child(1) { grid-area: date; color: var(--muted); font-size: 13px; }
  .tx td:nth-child(2) { grid-area: desc; min-width: 0; overflow-wrap: anywhere; }
  .tx td:nth-child(3) { grid-area: acct; text-align: right; }
  .tx .acct-name { display: none; }
  .tx td:nth-child(4) { grid-area: amt; font-weight: 600; }
  .tx td:nth-child(5) { grid-area: cat; margin-top: 6px; }
  .tx td[colspan] { grid-column: 1 / -1; }
  .tx select { width: 100%; min-width: 0; }
  .toolbar select { flex: 1; }
  .top { gap: 8px 12px; }
  #tabs { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  #tabs button { padding: 6px 10px; white-space: nowrap; }
  .month { margin-left: auto; }
  #monthLabel { min-width: 0; }
  .kpi .value { font-size: 22px; }
  .chart-box { height: 220px; }
}

/* Monthly total: same card as categories, a bit larger. */
#kpis { display: block; }
.cat-card.total { padding: 18px 20px; }
.cat-card.total .name { font-size: 17px; }
.cat-card.total .amt { font-size: 22px; }
.cat-card.total .bar { height: 12px; }
.cat-card.total .foot { font-size: 14px; }
.budget-link { color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.budget-link:hover { background: var(--accent-soft); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.keypad button { height: 52px; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.keypad button:active { background: var(--accent-soft); }
#incomeGrid .foot { margin-top: 10px; }
.amt.credit, #incomeGrid .amt { color: var(--good); }
.hero { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.hero-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-summary { margin: 10px 0 0; }

/* Drag-and-drop tiles */
.tile-ghost { opacity: .35; border-style: dashed; }
.tile-chosen { box-shadow: 0 8px 24px rgb(0 0 0 / .18); border-color: var(--accent); }
#catGrid .cat-card, #incomeGrid .cat-card { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Settings (gear) button in the header */
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; color: var(--muted); }
.icon-btn:hover { color: var(--accent-ink); }
.icon-btn.active { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
.page-title { margin: 0 0 14px; font-size: 20px; }

/* Trends: six small charts */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.trend-card { margin: 0; padding: 14px; cursor: pointer; }
.trend-card:hover { border-color: var(--accent); }
.trend-head { display: flex; align-items: center; gap: 10px; }
.trend-head .name { font-weight: 600; }
.trend-now { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.trend-box { position: relative; height: 130px; margin-top: 10px; }
@media (max-width: 640px) { .trend-grid { grid-template-columns: minmax(0, 1fr); } }
/* Phone: four tabs share the row evenly so none is cut off */
@media (max-width: 640px) {
  #tabs { gap: 2px; }
  #tabs button { flex: 1 1 0; padding: 6px 2px; font-size: 13.5px; text-align: center; }
}
.cashback-card .chart-box { height: 260px; }
.hero-pair { display: flex; gap: 24px; }
.hero-pair .hero + .hero { padding-left: 24px; border-left: 1px solid var(--line); }
@media (max-width: 640px) { .hero-pair { gap: 14px; } .hero-pair .hero + .hero { padding-left: 14px; } .hero-pair .hero-value { font-size: 18px; } }
@media (max-width: 640px) {
  .cashback-card .card-head { flex-wrap: wrap; }
  .cashback-card .hero-pair { width: 100%; }
  .cashback-card .hero { align-items: flex-start; }
}

/* Ignored transactions */
.tx tr.ignored td:not(:last-child) { opacity: .5; }
.tx tr.ignored td.num:not(:first-child) { text-decoration: line-through; }
/* Ignore toggle: a quiet round eye icon, strongest when the row is hovered or the transaction is ignored */
.ignore-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; margin-left: 6px; vertical-align: middle;
  border-radius: 999px; border: 1px solid transparent; background: none; color: var(--muted); opacity: .45; transition: opacity .15s, background .15s, color .15s; }
.tx tr:hover .ignore-btn, .ignore-btn:focus-visible { opacity: 1; }
.ignore-btn:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.ignore-btn.on { opacity: 1; background: var(--accent-soft); color: var(--accent-ink); }
.chip-ignored { font-size: 11px; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
@media (hover: none) { .ignore-btn { opacity: .8; } }
@media (max-width: 640px) { .tx td:nth-child(5) { display: flex; gap: 6px; align-items: center; } .tx td:nth-child(5) select { flex: 1; } .ignore-btn { margin-left: 0; flex: none; } }
@media (min-width: 641px) { .tx td:last-child { white-space: nowrap; } .tx td:last-child select { min-width: 150px; max-width: 200px; } }
.key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 1px; }
.income-card .chart-box { height: 300px; }
.ivs-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 4px 10px; font-size: 13px; border-radius: 8px; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }

/* Trend chart colours: validated for colour-blind separation in both modes */
:root { --chart-ok: #0284c7; --chart-over: #ef4444; --chart-save: #16a34a; }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) { --chart-ok: #38bdf8; --chart-over: #f87171; --chart-save: #4ade80; } }
:root[data-theme="dark"] { --chart-ok: #38bdf8; --chart-over: #f87171; --chart-save: #4ade80; }
.trend-legend-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 6px 0 12px; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.ok { background: var(--chart-ok); } .sw.over { background: var(--chart-over); }
.sw.now { background: var(--chart-ok); opacity: .33; }
.sw.budget { width: 16px; height: 0; border-top: 2px dashed var(--muted); border-radius: 0; }

/* Trends: remove (×) a category chart, re-add from the menu */
.trend-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trend-add { width: auto; padding: 4px 8px; font-size: 13px; border-radius: 8px; color: var(--accent-ink); }
.trend-head { position: relative; }
.trend-remove { margin-left: 4px; width: 26px; height: 26px; padding: 0; border-radius: 999px; border-color: transparent; background: none;
  color: var(--muted); font-size: 18px; line-height: 1; opacity: .45; flex: none; }
.trend-card:hover .trend-remove, .trend-remove:focus-visible { opacity: 1; }
.trend-remove:hover { background: var(--accent-soft); color: var(--bad); }
@media (hover: none) { .trend-remove { opacity: .8; } }

/* Back bar after drilling down into Transactions */
.back-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; position: sticky; top: 62px; z-index: 4;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.back-btn { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; font-weight: 600; padding: 6px 12px; }
.back-btn:hover { border-color: var(--accent); }
@media (max-width: 640px) { .back-bar { top: 92px; } }

/* Tappable transaction date; edited dates show ✎ */
.date-btn { border: 0; background: none; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; font: inherit; font-variant-numeric: tabular-nums; color: inherit; cursor: pointer; }
.date-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
.date-btn.edited { color: var(--accent-ink); font-weight: 600; }

/* Dashboard headline: this month's spending + last 6 months */
.spend-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; padding: 18px 20px; grid-column: 1 / -1; }
.spend-main { cursor: pointer; min-width: 0; }
.spend-card .label { color: var(--muted); font-size: 14px; }
.spend-card .big { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0 12px; font-variant-numeric: tabular-nums; }
.spend-card .bar { height: 10px; }
.mstrip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; }
.mstrip button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; background: none; border-radius: 10px; min-width: 0; }
.mstrip button:hover { border-color: var(--line); }
.mstrip button.sel { background: var(--accent-soft); }
.mstrip .v { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mstrip .col { display: flex; align-items: flex-end; height: 70px; width: 100%; justify-content: center; }
.mstrip .col span { width: 60%; max-width: 22px; background: var(--chart-ok); opacity: .45; border-radius: 4px 4px 0 0; }
.mstrip button.sel .col span { opacity: 1; }
.mstrip button.sel .v, .mstrip button.sel .m { color: var(--text); font-weight: 600; }
.mstrip .m { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .spend-card { grid-template-columns: minmax(0, 1fr); gap: 14px; } .spend-card .big { font-size: 30px; } }

/* ---------- Liquid glass theme ----------
   Apple system fonts (SF Pro), clear frosted panels with a light-catching rim, floating over a vivid colour field.
   Layout is unchanged; this block only restyles. */
:root {
  --bg: #e9eef8; --text: #0b0b0f; --muted: rgb(28 28 34 / .62); --line: rgb(20 20 40 / .08);
  --glass: rgb(255 255 255 / .38); --glass-strong: rgb(255 255 255 / .72);
  --rim: linear-gradient(140deg, rgb(255 255 255 / .95), rgb(255 255 255 / .25) 30%, rgb(255 255 255 / .06) 55%, rgb(255 255 255 / .55));
  --glass-shadow: 0 1px 1px rgb(255 255 255 / .7) inset, 0 -1px 1px rgb(0 0 0 / .04) inset, 0 20px 50px -12px rgb(30 41 80 / .25), 0 2px 6px rgb(30 41 80 / .06);
  --track: rgb(20 20 40 / .09);
  --radius: 26px;
}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) {
    --bg: #04050a; --text: #f5f5f7; --muted: rgb(235 235 245 / .6); --line: rgb(255 255 255 / .08);
    --glass: rgb(30 32 44 / .38); --glass-strong: rgb(60 62 78 / .6);
    --rim: linear-gradient(140deg, rgb(255 255 255 / .35), rgb(255 255 255 / .08) 30%, rgb(255 255 255 / .02) 55%, rgb(255 255 255 / .18));
    --glass-shadow: 0 1px 1px rgb(255 255 255 / .12) inset, 0 20px 50px -12px rgb(0 0 0 / .7);
    --track: rgb(255 255 255 / .1);
  }
}
:root[data-theme="dark"] {
    --bg: #04050a; --text: #f5f5f7; --muted: rgb(235 235 245 / .6); --line: rgb(255 255 255 / .08);
    --glass: rgb(30 32 44 / .38); --glass-strong: rgb(60 62 78 / .6);
    --rim: linear-gradient(140deg, rgb(255 255 255 / .35), rgb(255 255 255 / .08) 30%, rgb(255 255 255 / .02) 55%, rgb(255 255 255 / .18));
    --glass-shadow: 0 1px 1px rgb(255 255 255 / .12) inset, 0 20px 50px -12px rgb(0 0 0 / .7);
    --track: rgb(255 255 255 / .1);
  }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.011em; background: var(--bg); min-height: 100vh;
}
/* The colour field the glass floats over */
body::before {
  content: ""; position: fixed; inset: -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 30% at 4% 4%, #38bdf8 0, transparent 70%),
    radial-gradient(26% 28% at 96% 4%, #a78bfa 0, transparent 70%),
    radial-gradient(30% 30% at 96% 96%, #f9a8d4 0, transparent 70%),
    radial-gradient(28% 28% at 4% 96%, #5eead4 0, transparent 70%);
  opacity: .45; filter: blur(60px) saturate(130%);
  animation: drift 40s ease-in-out infinite alternate;
}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) body::before {
    background:
      radial-gradient(30% 35% at 10% 12%, #0284c7 0, transparent 70%),
      radial-gradient(28% 32% at 90% 8%, #6d28d9 0, transparent 70%),
      radial-gradient(34% 34% at 85% 80%, #1d4ed8 0, transparent 70%),
      radial-gradient(30% 30% at 18% 78%, #0f766e 0, transparent 70%);
    opacity: .55;
  }
}
:root[data-theme="dark"] body::before {
    background:
      radial-gradient(30% 35% at 10% 12%, #0284c7 0, transparent 70%),
      radial-gradient(28% 32% at 90% 8%, #6d28d9 0, transparent 70%),
      radial-gradient(34% 34% at 85% 80%, #1d4ed8 0, transparent 70%),
      radial-gradient(30% 30% at 18% 78%, #0f766e 0, transparent 70%);
    opacity: .55;
  }
@keyframes drift { to { transform: translate3d(3%, -2%, 0) scale(1.06) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* Glass panels: clear frosted fill + a light-catching rim drawn as a gradient border */
.card, .cat-card, .cat-row, .back-bar, dialog, .toast, .top-inner {
  position: relative; background: var(--glass); border: 0; border-radius: var(--radius);
  -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%);
  box-shadow: var(--glass-shadow);
}
.card::after, .cat-card::after, .cat-row::after, .back-bar::after, dialog::after, #tabs::after, button.glassy::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cat-card, .cat-row, .trend-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.cat-card:hover, .cat-row:hover, .trend-card:hover { transform: translateY(-3px) scale(1.01); }
.cat-card:active, .cat-row:active, .trend-card:active { transform: scale(.98); transition-duration: .1s; }
.card.flush { overflow: hidden; }
.card { padding: 20px 22px; }
.cat-card { padding: 16px 18px; }
.cat-grid { gap: 14px; }

/* Header: transparent bar, floating glass tab capsule */
.top { background: transparent; border-bottom: 0; padding-top: 14px; padding-bottom: 6px; }
.brand { font-weight: 700; font-size: 20px; letter-spacing: -.025em; }
#tabs { position: relative; flex: 0 1 auto; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass);
  -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%); box-shadow: var(--glass-shadow); }
#tabs button { border-radius: 999px; padding: 7px 16px; color: var(--text); font-weight: 500; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .25s, box-shadow .25s; }
#tabs button.active { background: var(--glass-strong); font-weight: 600;
  box-shadow: 0 1px 1px rgb(255 255 255 / .8) inset, 0 4px 14px rgb(30 41 80 / .18); }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) #tabs button.active { box-shadow: 0 1px 1px rgb(255 255 255 / .2) inset, 0 4px 14px rgb(0 0 0 / .5); } }
:root[data-theme="dark"] #tabs button.active { box-shadow: 0 1px 1px rgb(255 255 255 / .2) inset, 0 4px 14px rgb(0 0 0 / .5); }

/* Capsule glass buttons */
button { position: relative; border-radius: 999px; border: 0; background: var(--glass); color: var(--text);
  -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
  box-shadow: var(--glass-shadow); transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s; }
button:hover { background: var(--glass-strong); border-color: transparent; }
button:active { transform: scale(.95); }
button.primary { background: linear-gradient(180deg, #38bdf8, #0284c7); color: #fff; font-weight: 600;
  box-shadow: 0 1px 1px rgb(255 255 255 / .5) inset, 0 8px 20px -6px rgb(2 132 199 / .6); }
button.primary:hover { background: linear-gradient(180deg, #7dd3fc, #0369a1); }
.seg button, .mstrip button, .date-btn, .ignore-btn, .trend-remove, .budget-link, .icon-picker button, .keypad button {
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.mstrip button, .date-btn, .trend-remove, .budget-link { box-shadow: none; }
.mstrip button:not(.sel), .date-btn, .trend-remove, .ignore-btn:not(.on) { background: none; box-shadow: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 999px; color: var(--text); }
.month button { width: 36px; height: 36px; padding: 0; }
input, select, textarea { border-radius: 14px; border: 0; background: var(--glass-strong); box-shadow: 0 0 0 1px var(--line) inset; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--accent) inset, 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }

/* Segmented switches */
.seg { background: var(--track); border: 0; border-radius: 999px; padding: 3px; }
.seg button { border-radius: 999px; background: none; box-shadow: none; color: var(--text); }
.seg button.on { background: var(--glass-strong); box-shadow: 0 1px 1px rgb(255 255 255 / .8) inset, 0 2px 8px rgb(30 41 80 / .15); }

/* Typography */
.spend-card .label { font-size: 15px; font-weight: 500; color: var(--muted); }
.spend-card .big { font-size: 46px; font-weight: 700; letter-spacing: -.04em; margin: 2px 0 14px; }
.cat-card .amt { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cat-card .name, .trend-head .name { font-weight: 600; letter-spacing: -.015em; }
.hero-value, .trend-now strong { font-weight: 700; letter-spacing: -.03em; }
.section-title, .page-title { font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 28px 4px 14px; }
.card h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.tx th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); }
.cat-card .foot, .muted { color: var(--muted); }

/* Bars and icons */
.bar { background: var(--track); height: 6px; margin: 14px 0 10px; }
.spend-card .bar { height: 10px; }
.icon { border-radius: 13px; box-shadow: 0 1px 1px rgb(255 255 255 / .6) inset; }
.mstrip button.sel { background: var(--glass-strong); box-shadow: 0 1px 1px rgb(255 255 255 / .8) inset, 0 6px 16px rgb(30 41 80 / .15); }
.mstrip .col span { border-radius: 8px; width: 55%; }

/* Dialogs, toast, lists */
dialog { background: var(--glass-strong); padding: 24px; }
dialog::backdrop { background: rgb(10 10 20 / .2); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
.keypad button { border-radius: 18px; height: 56px; }
.toast { background: var(--glass-strong); color: var(--text); border-radius: 999px; padding: 12px 20px; }
.tx th, .tx td { border-bottom-color: var(--line); }
.tx tr:hover td { background: rgb(255 255 255 / .18); }
.banner { border-radius: 18px; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.note, .parsed { border-radius: 16px; background: var(--glass-strong); }
.back-bar { padding: 8px 10px; }

@media (min-width: 641px) { .top { flex-wrap: nowrap; } #tabs { flex-wrap: nowrap; } #tabs button { white-space: nowrap; padding: 7px 14px; } }
@media (max-width: 640px) {
  #tabs { flex: 1 1 100%; }
  #tabs button { padding: 7px 2px; }
  .spend-card .big { font-size: 40px; }
  .card { padding: 18px; }
}
.brand { white-space: nowrap; flex: none; }

/* Review fixes */
/* Frosted header so content no longer shows through it when scrolling */
.top { background: color-mix(in srgb, var(--bg) 62%, transparent); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); padding-bottom: 12px; }
/* Budget amount: plain grey text (still tappable to edit) */
.budget-link { color: var(--muted); text-decoration: none; }
.budget-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; background: none; }
/* Today marker: a white notch instead of a dark tick */
.bar { overflow: visible; }
.bar > i { top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; opacity: 1;
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .18), 0 1px 3px rgb(0 0 0 / .25); }
/* Category icons: line icon in the category colour, on a soft tinted circle */
.icon { color: var(--c, var(--text)); background: color-mix(in srgb, var(--c, #94a3b8) 15%, transparent); border-radius: 50%;
  box-shadow: 0 1px 1px rgb(255 255 255 / .55) inset, 0 0 0 .5px color-mix(in srgb, var(--c, #94a3b8) 25%, transparent) inset; }
.icon .ti { font-size: 20px; line-height: 1; }
.icon-picker button { color: var(--text); }
.icon-picker button .ti { font-size: 20px; }
.form-grid .check { white-space: normal; align-items: flex-start; } .form-grid .check input { margin-top: 3px; }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .icon { color: color-mix(in srgb, var(--c, #fff) 65%, #fff); background: color-mix(in srgb, var(--c, #94a3b8) 28%, transparent); } }
:root[data-theme="dark"] .icon { color: color-mix(in srgb, var(--c, #fff) 65%, #fff); background: color-mix(in srgb, var(--c, #94a3b8) 28%, transparent); }
/* Line-icon badges in the logo and card titles */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; font-size: 18px;
  background: linear-gradient(160deg, #38bdf8, #0369a1); box-shadow: 0 1px 1px rgb(255 255 255 / .5) inset, 0 4px 10px -2px rgb(3 105 161 / .5); }
.h-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; vertical-align: -7px; border-radius: 50%; font-size: 17px;
  color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .h-ico { color: color-mix(in srgb, var(--c) 60%, #fff); background: color-mix(in srgb, var(--c) 28%, transparent); } }
:root[data-theme="dark"] .h-ico { color: color-mix(in srgb, var(--c) 60%, #fff); background: color-mix(in srgb, var(--c) 28%, transparent); }

/* ---------- Tier 1 ----------
   1. Glass is for navigation only (header, tab bar, dialogs, toast). Content sits on calm, near-solid cards:
      easier to read and far cheaper to draw on a phone. */
:root { --card: rgb(255 255 255 / .86); --card-border: rgb(20 20 40 / .06);
  --card-shadow: 0 1px 2px rgb(30 41 80 / .05), 0 8px 24px -12px rgb(30 41 80 / .14); }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) { --card: rgb(28 28 32 / .92); --card-border: rgb(255 255 255 / .07); --card-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 30px -14px rgb(0 0 0 / .8); }
}
:root[data-theme="dark"] { --card: rgb(28 28 32 / .92); --card-border: rgb(255 255 255 / .07); --card-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 30px -14px rgb(0 0 0 / .8); }
.card, .cat-card, .cat-row, .back-bar {
  background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--card-shadow), 0 0 0 1px var(--card-border) inset;
}
.card::after, .cat-card::after, .cat-row::after, .back-bar::after { content: none; }
body::before { animation: none; }
/* Buttons inside content are plain, not glass */
main button { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(120 120 128 / .1); box-shadow: none; }
main button:hover { background: rgb(120 120 128 / .18); }
main button.primary { background: linear-gradient(180deg, #38bdf8, #0284c7); box-shadow: 0 1px 1px rgb(255 255 255 / .5) inset, 0 6px 16px -6px rgb(2 132 199 / .55); }
main .seg button, main .mstrip button, main .date-btn, main .trend-remove, main .ignore-btn:not(.on), main .budget-link { background: none; }
main .seg button.on { background: var(--glass-strong); }
main .mstrip button.sel { background: rgb(120 120 128 / .1); box-shadow: none; }
.cat-card:hover, .cat-row:hover, .trend-card:hover { transform: translateY(-2px); }
#tabs .ti { display: none; }

/* 2. Phone: floating glass tab bar at the bottom, one-row header */
@media (max-width: 640px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .top { flex-wrap: nowrap; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
  .brand { font-size: 0; gap: 0; }               /* logo badge only */
  .brand-mark { font-size: 18px; }
  .month { margin-left: auto; gap: 4px; }
  .month button, .icon-btn { width: 44px; height: 44px; }
  #monthLabel { font-size: 17px; }
  #tabs {
    position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 6px; border-radius: 30px; order: 0; overflow: visible;
    background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
    box-shadow: var(--glass-shadow), 0 12px 40px -8px rgb(30 41 80 / .3);
  }
  #tabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; border-radius: 24px;
    font-size: 10.5px; font-weight: 600; color: var(--muted); }
  #tabs .ti { display: block; font-size: 24px; line-height: 1; }
  #tabs button.active { color: var(--accent-ink); background: var(--glass-strong); }
  .back-bar { top: calc(66px + env(safe-area-inset-top)); }
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }

  /* 3. Phone: categories as one grouped list with compact rows */
  .cat-grid { gap: 0; border-radius: 22px; overflow: hidden; background: var(--card);
    box-shadow: var(--card-shadow), 0 0 0 1px var(--card-border) inset; }
  .cat-grid .cat-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "icon name amt" "icon bar bar" "icon foot foot";
    column-gap: 12px; row-gap: 0; align-items: center; padding: 11px 16px; border-radius: 0; background: none; box-shadow: none; }
  .cat-grid .cat-card + .cat-card { box-shadow: 0 -1px 0 var(--line); }
  .cat-grid .cat-card .head { display: contents; }
  .cat-grid .cat-card .icon { grid-area: icon; width: 36px; height: 36px; align-self: center; }
  .cat-grid .cat-card .name { grid-area: name; font-size: 16px; }
  .cat-grid .cat-card .amt { grid-area: amt; font-size: 16px; }
  .cat-grid .cat-card .bar { grid-area: bar; margin: 6px 0 4px; height: 5px; }
  .cat-grid .cat-card .foot { grid-area: foot; font-size: 12.5px; }
  .cat-grid .cat-card:hover { transform: none; }
  .cat-grid .cat-card:active { background: rgb(120 120 128 / .1); transform: none; }
  #incomeGrid .foot { margin-top: 2px; }
  .tile-chosen { background: var(--card) !important; box-shadow: 0 10px 30px rgb(0 0 0 / .2) !important; border-radius: 16px !important; }
}
.back-bar { position: sticky; }

/* ---------- Tier 2 ---------- */
/* Large month title (iOS large-title style) with the last-updated time */
.large-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 4px 16px; }
.lt-year { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.large-title h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.updated { font-size: 13px; color: var(--muted); padding-bottom: 4px; white-space: nowrap; }
@media (max-width: 640px) {
  #monthLabel { opacity: 0; transition: opacity .2s; }
  .top.show-month #monthLabel { opacity: 1; }
}
#nextMonth:disabled { opacity: .3; }
/* Month change slide after a swipe */
@keyframes slide-next { from { opacity: .3; transform: translateX(40px); } }
@keyframes slide-prev { from { opacity: .3; transform: translateX(-40px); } }
main.slide-next { animation: slide-next .3s cubic-bezier(.2,.8,.2,1); }
main.slide-prev { animation: slide-prev .3s cubic-bezier(.2,.8,.2,1); }
/* Pull to refresh */
.ptr { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -6px auto 10px; width: fit-content;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--card); box-shadow: var(--card-shadow); }
.ptr .ti { font-size: 16px; transition: transform .2s; }
.ptr.ready .ti { transform: rotate(180deg); color: var(--accent-ink); }
.ptr.spinning .ti { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Transactions grouped by day */
.card.flush { overflow: clip; }
.tx .day-row td { position: sticky; top: var(--header-h, 64px); z-index: 2; padding: 9px 16px 7px; font-size: 13px; font-weight: 600; color: var(--muted);
  background: color-mix(in srgb, var(--card) 85%, var(--bg)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.tx .day-row td { display: table-cell; }
.tx .day-row td > span { display: inline-block; }
.tx .day-row .day-total { float: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.tx-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tx-main .icon { width: 34px; height: 34px; flex: none; }
.tx-main .icon .ti { font-size: 18px; }
.tx-text { min-width: 0; }
.tx td.acct { white-space: nowrap; }
.date-btn { color: var(--muted); font-size: 13px; }
/* Category picker as a chip (opens the native iOS picker) */
.tx select { appearance: none; -webkit-appearance: none; border-radius: 999px; padding: 6px 30px 6px 12px; font-size: 13.5px; font-weight: 500;
  background: rgb(120 120 128 / .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  box-shadow: none; }
.tx select.unset { background-color: color-mix(in srgb, var(--warn) 14%, transparent); }
@media (max-width: 640px) {
  .tx tr.day-row { display: block; padding: 0; border: 0; }
  .tx .day-row td { display: block; padding: 10px 16px 7px; }
  .tx tr[data-id] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc amt" "acct date" "cat cat"; padding: 12px 16px; }
  .tx tr[data-id] td:nth-child(3) { grid-area: acct; text-align: left; padding-left: 46px; font-size: 12.5px; }
  .tx tr[data-id] td:nth-child(1) { grid-area: date; text-align: right; }
  .tx tr[data-id] td:nth-child(5) { margin-top: 8px; padding-left: 46px; }
}

/* Bottom sheets: dialogs slide up from the bottom on phones */
@media (max-width: 640px) {
  dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 28px 28px 0 0; max-height: 92vh; overflow-y: auto;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); }
  dialog::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--track); margin: 0 auto 14px; }
  dialog[open] { animation: sheet-up .38s cubic-bezier(.2,.8,.2,1); }
  dialog::after { content: none; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
dialog { position: fixed; }
@media (min-width: 641px) {
  .tx th, .tx td { padding: 10px 12px; }
  .tx td:last-child select { min-width: 0; width: 150px; max-width: 150px; text-overflow: ellipsis; }
  .tx .desc { overflow-wrap: anywhere; }
}
@media (min-width: 641px) and (max-width: 900px) { .tx td.acct, .tx th:nth-child(3) { display: none; } }
/* Month arrows sit beside the large title; on phones the header is just logo · (month on scroll) · settings */
.large-title { align-items: flex-end; }
.large-title .updated { padding: 2px 0 0; }
.lt-nav { display: none; gap: 8px; padding-bottom: 6px; }
.lt-nav button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; font-size: 20px; }
.lt-nav button:disabled { opacity: .3; }
@media (max-width: 640px) {
  .lt-nav { display: flex; }
  .top { position: sticky; }
  .top .month { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .top .month button { display: none; }
  .top .month #monthLabel { font-size: 16px; font-weight: 600; }
  #settingsBtn { margin-left: auto; }
}
/* Top bar: logo and tabs on the left, month and settings pushed to the right edge */
@media (min-width: 641px) {
  .top .month { margin-left: auto; }
  #settingsBtn { flex: none; }
}
/* Tablet widths: tighten so the settings button never falls off the edge */
@media (min-width: 641px) and (max-width: 960px) {
  .top { gap: 10px; }
  .brand { font-size: 0; gap: 0; }
  .brand-mark { font-size: 18px; }
  #tabs button { padding: 7px 10px; }
  #monthLabel { min-width: 0; }
}

/* ---------- Premium dark ----------
   True-black canvas, softly lit graphite cards with a hairline top highlight, a glowing hero card,
   luminous gradient bars and lit icons. Dark theme only. */
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) { --bg: #000; --muted: rgb(235 235 245 / .55); --line: rgb(255 255 255 / .07);
    --card: linear-gradient(180deg, rgb(30 31 38 / .94), rgb(17 18 23 / .94));
    --card-shadow: 0 1px 0 rgb(255 255 255 / .07) inset, 0 0 0 1px rgb(255 255 255 / .055) inset, 0 24px 48px -24px rgb(0 0 0 / .9); }:root:not([data-theme="light"]) body::before { opacity: .42; }:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .cat-card, :root:not([data-theme="light"]) .cat-row, :root:not([data-theme="light"]) .back-bar { background: var(--card); box-shadow: var(--card-shadow); }:root:not([data-theme="light"]) .large-title h1, :root:not([data-theme="light"]) .section-title, :root:not([data-theme="light"]) .page-title { background: linear-gradient(180deg, #fff 35%, #9aa3b5); -webkit-background-clip: text; background-clip: text; color: transparent; }:root:not([data-theme="light"]) .spend-card { position: relative; isolation: isolate;
    background: radial-gradient(90% 120% at 0% 0%, rgb(56 189 248 / .16), transparent 55%),
                radial-gradient(80% 110% at 100% 100%, rgb(139 92 246 / .16), transparent 60%),
                linear-gradient(180deg, #17181f, #0d0e12); }:root:not([data-theme="light"]) .spend-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
    background: linear-gradient(135deg, rgb(56 189 248 / .7), rgb(255 255 255 / .06) 35%, rgb(255 255 255 / .04) 65%, rgb(167 139 250 / .6));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }:root:not([data-theme="light"]) .spend-card .big { background: linear-gradient(180deg, #fff 30%, #b6c2d6); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 18px rgb(56 189 248 / .18)); }:root:not([data-theme="light"]) .bar { background: rgb(255 255 255 / .07); box-shadow: inset 0 1px 1px rgb(0 0 0 / .5); }:root:not([data-theme="light"]) .bar > span { background-image: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .28));
    box-shadow: 0 0 14px -2px var(--bar, transparent), inset 0 1px 0 rgb(255 255 255 / .25); }:root:not([data-theme="light"]) .mstrip .col span { background-image: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0)); }:root:not([data-theme="light"]) .mstrip button.sel { background: rgb(255 255 255 / .06); box-shadow: 0 0 0 1px rgb(255 255 255 / .06) inset; }:root:not([data-theme="light"]) .mstrip button.sel .col span { background-image: linear-gradient(180deg, #7dd3fc, #0284c7); box-shadow: 0 0 22px -4px rgb(56 189 248 / .9); }:root:not([data-theme="light"]) .icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #94a3b8) 45%, transparent), 0 0 18px -6px var(--c, transparent); }:root:not([data-theme="light"]) .h-ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 16px -6px var(--c); }:root:not([data-theme="light"]) .brand-mark { box-shadow: 0 1px 1px rgb(255 255 255 / .35) inset, 0 0 22px -4px rgb(56 189 248 / .8); }:root:not([data-theme="light"]) #tabs { background: rgb(28 29 36 / .55); box-shadow: 0 0 0 1px rgb(255 255 255 / .08) inset, 0 1px 0 rgb(255 255 255 / .08) inset, 0 20px 40px -12px rgb(0 0 0 / .9); }:root:not([data-theme="light"]) #tabs button.active { color: #e0f2fe; background: linear-gradient(180deg, rgb(56 189 248 / .28), rgb(2 132 199 / .18));
    box-shadow: 0 0 0 1px rgb(125 211 252 / .3) inset, 0 0 24px -6px rgb(56 189 248 / .7); }:root:not([data-theme="light"]) .top { background: rgb(0 0 0 / .55); border-bottom-color: rgb(255 255 255 / .06); }:root:not([data-theme="light"]) main button.primary, :root:not([data-theme="light"]) button.primary { box-shadow: 0 1px 1px rgb(255 255 255 / .4) inset, 0 0 26px -6px rgb(56 189 248 / .8); }:root:not([data-theme="light"]) .seg button.on, :root:not([data-theme="light"]) main .seg button.on { background: rgb(255 255 255 / .12); box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset; }:root:not([data-theme="light"]) .tx .day-row td { background: rgb(10 10 14 / .85); }:root:not([data-theme="light"]) .over { text-shadow: 0 0 14px rgb(248 113 113 / .45); }:root:not([data-theme="light"]) dialog { background: linear-gradient(180deg, rgb(36 37 46 / .9), rgb(20 21 27 / .92)); box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset, 0 -20px 60px rgb(0 0 0 / .7); }
}
:root[data-theme="dark"] { --bg: #000; --muted: rgb(235 235 245 / .55); --line: rgb(255 255 255 / .07);
    --card: linear-gradient(180deg, rgb(30 31 38 / .94), rgb(17 18 23 / .94));
    --card-shadow: 0 1px 0 rgb(255 255 255 / .07) inset, 0 0 0 1px rgb(255 255 255 / .055) inset, 0 24px 48px -24px rgb(0 0 0 / .9); }:root[data-theme="dark"] body::before { opacity: .42; }:root[data-theme="dark"] .card, :root[data-theme="dark"] .cat-card, :root[data-theme="dark"] .cat-row, :root[data-theme="dark"] .back-bar { background: var(--card); box-shadow: var(--card-shadow); }:root[data-theme="dark"] .large-title h1, :root[data-theme="dark"] .section-title, :root[data-theme="dark"] .page-title { background: linear-gradient(180deg, #fff 35%, #9aa3b5); -webkit-background-clip: text; background-clip: text; color: transparent; }:root[data-theme="dark"] .spend-card { position: relative; isolation: isolate;
    background: radial-gradient(90% 120% at 0% 0%, rgb(56 189 248 / .16), transparent 55%),
                radial-gradient(80% 110% at 100% 100%, rgb(139 92 246 / .16), transparent 60%),
                linear-gradient(180deg, #17181f, #0d0e12); }:root[data-theme="dark"] .spend-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
    background: linear-gradient(135deg, rgb(56 189 248 / .7), rgb(255 255 255 / .06) 35%, rgb(255 255 255 / .04) 65%, rgb(167 139 250 / .6));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }:root[data-theme="dark"] .spend-card .big { background: linear-gradient(180deg, #fff 30%, #b6c2d6); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 18px rgb(56 189 248 / .18)); }:root[data-theme="dark"] .bar { background: rgb(255 255 255 / .07); box-shadow: inset 0 1px 1px rgb(0 0 0 / .5); }:root[data-theme="dark"] .bar > span { background-image: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .28));
    box-shadow: 0 0 14px -2px var(--bar, transparent), inset 0 1px 0 rgb(255 255 255 / .25); }:root[data-theme="dark"] .mstrip .col span { background-image: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0)); }:root[data-theme="dark"] .mstrip button.sel { background: rgb(255 255 255 / .06); box-shadow: 0 0 0 1px rgb(255 255 255 / .06) inset; }:root[data-theme="dark"] .mstrip button.sel .col span { background-image: linear-gradient(180deg, #7dd3fc, #0284c7); box-shadow: 0 0 22px -4px rgb(56 189 248 / .9); }:root[data-theme="dark"] .icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #94a3b8) 45%, transparent), 0 0 18px -6px var(--c, transparent); }:root[data-theme="dark"] .h-ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 16px -6px var(--c); }:root[data-theme="dark"] .brand-mark { box-shadow: 0 1px 1px rgb(255 255 255 / .35) inset, 0 0 22px -4px rgb(56 189 248 / .8); }:root[data-theme="dark"] #tabs { background: rgb(28 29 36 / .55); box-shadow: 0 0 0 1px rgb(255 255 255 / .08) inset, 0 1px 0 rgb(255 255 255 / .08) inset, 0 20px 40px -12px rgb(0 0 0 / .9); }:root[data-theme="dark"] #tabs button.active { color: #e0f2fe; background: linear-gradient(180deg, rgb(56 189 248 / .28), rgb(2 132 199 / .18));
    box-shadow: 0 0 0 1px rgb(125 211 252 / .3) inset, 0 0 24px -6px rgb(56 189 248 / .7); }:root[data-theme="dark"] .top { background: rgb(0 0 0 / .55); border-bottom-color: rgb(255 255 255 / .06); }:root[data-theme="dark"] main button.primary, :root[data-theme="dark"] button.primary { box-shadow: 0 1px 1px rgb(255 255 255 / .4) inset, 0 0 26px -6px rgb(56 189 248 / .8); }:root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] main .seg button.on { background: rgb(255 255 255 / .12); box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset; }:root[data-theme="dark"] .tx .day-row td { background: rgb(10 10 14 / .85); }:root[data-theme="dark"] .over { text-shadow: 0 0 14px rgb(248 113 113 / .45); }:root[data-theme="dark"] dialog { background: linear-gradient(180deg, rgb(36 37 46 / .9), rgb(20 21 27 / .92)); box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset, 0 -20px 60px rgb(0 0 0 / .7); }
/* Phone grouped list: rows stay transparent inside the one card (ids outrank the dark-theme card rule) */
@media (max-width: 640px) {
  #catGrid .cat-card, #incomeGrid .cat-card { background: none; box-shadow: none; }
  #catGrid .cat-card + .cat-card, #incomeGrid .cat-card + .cat-card { box-shadow: 0 -1px 0 var(--line); }
}

/* ---------- Power features ---------- */
/* Toolbar: filters and select */
.tool-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tool-btn .ti { font-size: 17px; }
.tool-btn.on { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; color: var(--accent-ink); }
.count-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 700;
  background: var(--accent-btn); color: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: -4px 0 14px; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); }
.filters label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); flex: 1 1 150px; }
.filters button { flex: none; }
.tx-summary { margin: -4px 4px 12px; font-weight: 500; }
/* Notes and tags on a row */
.tx-note { font-size: 13px; color: var(--text); opacity: .8; margin-top: 3px; font-style: italic; }
.tx-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { font-size: 11.5px; font-weight: 600; padding: 2px 8px !important; border-radius: 999px; color: var(--accent-ink) !important;
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important; box-shadow: none !important; }
.more-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; margin-left: 2px; vertical-align: middle; border-radius: 999px;
  background: none !important; box-shadow: none !important; color: var(--muted); opacity: .6; }
.more-btn .ti { font-size: 18px; }
.more-btn.on, .tx tr:hover .more-btn { opacity: 1; }
.more-btn.on { color: var(--accent-ink); }
.split-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  background: color-mix(in srgb, #a78bfa 18%, transparent) !important; color: #7c3aed; box-shadow: none !important; }
:root[data-theme="dark"] .split-chip { color: #c4b5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .split-chip { color: #c4b5fd; } }
/* Select mode */
.tx-check { width: 20px; height: 20px; flex: none; accent-color: var(--accent-btn); }
.tx.selecting tr[data-id] { cursor: pointer; }
.tx tr.picked td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bulk-bar { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: min(760px, calc(100vw - 24px)); padding: 10px 12px; border-radius: 26px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
  box-shadow: var(--glass-shadow), 0 16px 40px -10px rgb(0 0 0 / .35); }
.bulk-bar button, .bulk-bar select { font-size: 14px; padding: 7px 12px; }
.bulk-bar select { width: auto; border-radius: 999px; }
.bulk-count { font-weight: 700; padding: 0 6px; }
.bulk-bar .ti { font-size: 16px; vertical-align: -2px; }
@media (max-width: 640px) {
  .bulk-bar { bottom: calc(100px + env(safe-area-inset-bottom)); gap: 6px; padding: 8px; border-radius: 22px; }
  .bulk-bar button, .bulk-bar select { padding: 6px 10px; font-size: 13px; }
  body.bulk-open { padding-bottom: calc(200px + env(safe-area-inset-bottom)); }
  .toolbar .tool-btn { flex: 1; justify-content: center; }
}
/* Details sheet: split editor */
.split-box { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgb(120 120 128 / .08); }
.split-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 40px; gap: 8px; margin-top: 8px; }
.split-row input { text-align: right; font-variant-numeric: tabular-nums; }
.split-del { width: 40px; padding: 0; display: grid; place-items: center; color: var(--muted); }
#splitLeft { margin: 8px 0 0; font-weight: 600; }
#splitLeft.over { color: var(--warn); }
#txDialog textarea { resize: vertical; }
/* Toast with Undo */
.toast { display: flex; align-items: center; gap: 12px; }
.toast-undo { padding: 5px 12px !important; font-weight: 700; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, transparent) !important; box-shadow: none !important; }
/* Rules manager */
.rule-tools { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.rule-tools input { flex: 1 1 200px; }
.rule-tools select { width: auto; flex: none; }
.rule-list { display: grid; gap: 6px; }
.rule-row { display: grid; grid-template-columns: 78px minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 14px; background: rgb(120 120 128 / .07) !important; box-shadow: none !important; }
.rule-row:hover { background: rgb(120 120 128 / .14) !important; }
.rule-main code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; overflow-wrap: anywhere; }
.rule-cat { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.rule-cat .icon { width: 26px; height: 26px; }
.rule-cat .icon .ti { font-size: 15px; }
.rule-cat span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-type { font-size: 11px; font-weight: 700; text-align: center; padding: 3px 8px; border-radius: 999px; background: rgb(120 120 128 / .14); color: var(--muted); }
.rule-type.t-always { background: color-mix(in srgb, #a78bfa 22%, transparent); color: #7c3aed; }
.rule-type.t-amount { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #b45309; }
.rule-type.t-keyword { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); }
.rule-type.t-ignore { background: color-mix(in srgb, #ef4444 16%, transparent); color: #b91c1c; }
.rule-test { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgb(120 120 128 / .08); }
.rule-test ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.rule-test li { display: flex; justify-content: space-between; gap: 10px; }
.rule-test li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
@media (max-width: 640px) {
  .rule-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .rule-cat { grid-column: 2 / -1; grid-row: 2; }
}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .rule-type.t-always { color: #c4b5fd; }:root:not([data-theme="light"]) .rule-type.t-amount { color: #fcd34d; }:root:not([data-theme="light"]) .rule-type.t-ignore { color: #fca5a5; }
}
:root[data-theme="dark"] .rule-type.t-always { color: #c4b5fd; }:root[data-theme="dark"] .rule-type.t-amount { color: #fcd34d; }:root[data-theme="dark"] .rule-type.t-ignore { color: #fca5a5; }

/* Budget alerts card */
.alert-opts { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-top: 16px; }
.alert-opts label:not(.check) { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); flex: 1 1 180px; }
.alert-opts .check { flex: 1 1 100%; }
#pushEnable .ti { font-size: 17px; vertical-align: -3px; }
#pushDevices .dev { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 2px 4px 2px 10px; border-radius: 999px; background: rgb(120 120 128 / .12); color: var(--text); }
#pushDevices .dev-x { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: none !important; box-shadow: none !important; color: var(--muted); line-height: 1; }

/* ---------- Merchants ---------- */
.merch-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 6px; }
.merch-tools input[type=search] { flex: 1 1 220px; }
.merch-list { display: grid; gap: 4px; margin-top: 8px; }
.merch-row { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 16px; background: none !important; box-shadow: none !important; }
.merch-row:hover { background: rgb(120 120 128 / .08) !important; }
.merch-rank { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.merch-text { display: grid; gap: 2px; min-width: 0; }
.merch-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merch-meta { font-size: 12.5px; color: var(--muted); }
.merch-bar { height: 4px; border-radius: 3px; background: rgb(120 120 128 / .14); margin-top: 4px; overflow: hidden; }
.merch-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.merch-amt { display: grid; justify-items: end; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.merch-more { margin-top: 8px; width: 100%; }
/* Merchant sheet */
.wide-dialog { width: min(640px, calc(100vw - 32px)); }
.merch-head { display: flex; align-items: center; gap: 12px; }
.merch-head h3 { margin: 0; font-size: 20px; }
.merch-head p { margin: 2px 0 0; }
.merch-head .icon { width: 44px; height: 44px; }
.merch-head .icon .ti { font-size: 22px; }
.md-close { margin-left: auto; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; }
.md-hero { display: grid; margin: 18px 0 12px; }
.md-big { font-size: 38px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.md-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.md-stats > div:not(.md-years) { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgb(120 120 128 / .08); }
.md-stats strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.md-years { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.md-chart { position: relative; height: 150px; margin: 16px 0 6px; }
.md-sub { margin: 14px 0 6px; font-size: 15px; }
.md-list { display: grid; max-height: 40vh; overflow-y: auto; border-radius: 14px; }
.md-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.md-date { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.md-desc { overflow-wrap: anywhere; }
.md-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.md-amt.credit { color: var(--good); }
@media (max-width: 640px) {
  .md-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-row { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .md-big { font-size: 34px; }
  .merch-row { grid-template-columns: 18px 34px minmax(0, 1fr) auto; gap: 10px; padding: 9px 6px; }
}

/* ---------- Data health ---------- */
.health-banners:not(:empty) { display: grid; gap: 8px; margin-bottom: 14px; }
.hb { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: var(--card-shadow); }
.hb > .ti { font-size: 22px; flex: none; }
.hb-warn > .ti { color: var(--warn); }
.hb-error > .ti { color: var(--bad); }
.hb-error { box-shadow: var(--card-shadow), inset 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent); }
.hb-text { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 14px; }
.hb-text span { color: var(--muted); font-size: 13px; }
.hb-go { flex: none; padding: 6px 14px; font-weight: 600; }
.hb-x { flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: none !important; box-shadow: none !important; color: var(--muted); }
#healthWarnings { display: grid; gap: 8px; }
#healthWarnings .hb { box-shadow: none; background: rgb(120 120 128 / .08); }
.badge.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.health-accounts { display: grid; }
.ha-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.ha-name, .ha-last { display: grid; gap: 1px; }
.ha-last { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ha-last.stale { color: var(--warn); }
.dup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding: 12px; margin-bottom: 8px; border-radius: 16px; background: rgb(120 120 128 / .08); }
.dup-amt { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.dup-pair { display: grid; gap: 6px; }
.dup-tx { display: grid; }
.dup-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.dup-actions button { font-size: 13px; padding: 6px 12px; }
@media (max-width: 640px) { .hb { flex-wrap: wrap; } .hb-text { flex: 1 1 calc(100% - 80px); } }
#healthBanners .hb-text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { #healthBanners .hb { padding: 10px 12px; gap: 10px; } #healthBanners .hb-go { padding: 5px 12px; } }
.merchants-card { margin-top: 16px; }

/* ---------- Sign in ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); max-width: none; }
.login-card { width: min(400px, 100%); text-align: center; padding: 32px 26px; }
.login-logo { border-radius: 18px; box-shadow: 0 10px 30px -8px rgb(2 132 199 / .5); }
.login-card h1 { margin: 14px 0 6px; font-size: 28px; letter-spacing: -.03em; }
.login-card .label { text-align: left; margin-top: 12px; }
.login-btn { width: 100%; margin-top: 16px; padding: 12px 16px; font-size: 16px; }
.login-page { padding-bottom: 0 !important; }
/* Security card */
.pk-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.pk-row .muted { display: block; }

/* App lock: privacy cover while in the background, and the lock setting */
.privacy-cover { display: none; position: fixed; inset: 0; z-index: 1000; place-items: center; align-content: center; gap: 14px;
  background: var(--bg); color: var(--muted); font-weight: 600; }
.privacy-cover img { border-radius: 18px; }
body.privacy .privacy-cover { display: grid; }
body.privacy main, body.privacy .top, body.privacy #tabs { visibility: hidden; }
.lock-opt { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); margin: 6px 0 10px; max-width: 320px; }

/* Blur when idle: hides everything after a pause; first tap brings it back */
main, dialog { transition: filter .25s ease; }
body.amounts-hidden main, body.amounts-hidden dialog[open] { filter: blur(18px); pointer-events: none; } /* taps only reveal */
.tap-to-show { display: none; position: fixed; z-index: 900; left: 50%; top: 45%; transform: translate(-50%, -50%); align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; background: var(--glass-strong); color: var(--text);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--glass-shadow); pointer-events: none; }
body.amounts-hidden .tap-to-show { display: inline-flex; }
body.privacy .tap-to-show { display: none; }
.idle-opt { margin: 0 0 10px; font-size: 14px; white-space: normal; align-items: flex-start; }
.idle-opt input { margin-top: 3px; }

/* Rules: collapsible groups */
.rule-list { gap: 8px; }
.rule-group { border-radius: 16px; background: rgb(120 120 128 / .07); }
.rule-group > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.rule-group > summary::-webkit-details-marker { display: none; }
.rule-group > summary::after { content: "›"; margin-left: 4px; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .2s; }
.rule-group[open] > summary::after { transform: rotate(90deg); }
.rule-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.rule-items { display: grid; gap: 4px; padding: 0 8px 10px; }
.rule-items .rule-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; background: var(--card) !important; }
.rule-more { margin-top: 4px; }
@media (max-width: 640px) {
  .rule-items .rule-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rule-items .rule-cat { grid-column: 1 / -1; grid-row: 2; }
  .rule-hint { display: none; }
}
@media (max-width: 640px) {
  .rule-items .rule-row { padding: 8px 12px; row-gap: 2px; }
  .rule-items .rule-cat { font-size: 13px; color: var(--muted); }
  .rule-items .rule-cat .icon { width: 20px; height: 20px; }
  .rule-items .rule-cat .icon .ti { font-size: 12px; }
}