/* Dhara — styles. Colours, spacing and radii copied from the design canvas (design-src/gen_design.js, const C). */

/* ---------- tokens: dark is the default ---------- */
:root {
  --b: #15171c;      /* page */
  --cd: #1c1f26;     /* card */
  --tile: #272b34;   /* icon tile, chosen tab */
  --tr: #2d323c;     /* track, inner lines */
  --ln: #23262e;     /* outer lines */
  --i: #e8eaee;      /* text */
  --m: #8b919c;      /* muted */
  --m2: #b4b9c2;     /* muted, stronger */
  --up: #7fd8b0;     /* good */
  --dn: #f2998c;     /* bad */
  --warn: #f0b34a;
  --in: #5fcf9c;     /* income */
  --out: #f2995e;    /* spent */
  --inv: #a094f5;    /* invested */
  --lend: #ea82b8;   /* lent */
  --kept: #5fc9c6;   /* left over, ready money */
  --nw: #7db0f2;     /* net worth */
  --scrim: rgba(8, 10, 14, .6);
  --toast: #2c313c;
  --toast-i: #e8eaee;
  --shadow: 0 -10px 34px rgba(0, 0, 0, .4);
  --shadow-dlg: 0 30px 80px rgba(0, 0, 0, .5);
  --font: Geist, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --rail: 220px;
  --panel: 400px;
  --gut: 16px;
  color-scheme: dark;
}
/* light palette = the light pass at the end of gen_design.js (picture icons keep their colours) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --b: #f5f6f8; --cd: #ffffff; --tile: #eef0f4; --tr: #e2e5eb; --ln: #e5e7ec;
    --i: #15171c; --m: #6b7280; --m2: #4b5563; --up: #16935b; --dn: #d1453b; --warn: #b9800f;
    --in: #16935b; --out: #dd6b26; --inv: #6a57de; --lend: #cc4689; --kept: #138f8b; --nw: #2f74d0;
    --scrim: rgba(20, 24, 32, .35); --toast: #15171c; --toast-i: #f5f6f8;
    --shadow: 0 -10px 34px rgba(20, 24, 32, .12); --shadow-dlg: 0 30px 80px rgba(20, 24, 32, .2);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --b: #f5f6f8; --cd: #ffffff; --tile: #eef0f4; --tr: #e2e5eb; --ln: #e5e7ec;
  --i: #15171c; --m: #6b7280; --m2: #4b5563; --up: #16935b; --dn: #d1453b; --warn: #b9800f;
  --in: #16935b; --out: #dd6b26; --inv: #6a57de; --lend: #cc4689; --kept: #138f8b; --nw: #2f74d0;
  --scrim: rgba(20, 24, 32, .35); --toast: #15171c; --toast-i: #f5f6f8;
  --shadow: 0 -10px 34px rgba(20, 24, 32, .12); --shadow-dlg: 0 30px 80px rgba(20, 24, 32, .2);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--b); }
body {
  margin: 0; min-height: 100dvh; background: var(--b); color: var(--i);
  font-family: var(--font); font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a:active, button:active { opacity: .6; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid var(--nw); outline-offset: 2px; border-radius: 8px; }
svg { display: block; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--m); }
.muted2 { color: var(--m2); }
.up { color: var(--up); } .dn { color: var(--dn); } .warn { color: var(--warn); }
.k-in { color: var(--in); } .k-out { color: var(--out); } .k-inv { color: var(--inv); } .k-lend { color: var(--lend); } .k-kept { color: var(--kept); }
.b600 { font-weight: 600; }
.grow { flex: 1; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- app frame ---------- */
.app { min-height: 100dvh; }
.rail, .panel { display: none; }
.main { min-width: 0; }
.screen {
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) var(--gut) calc(84px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.screen.full { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.screen > * { min-width: 0; }

/* phone bottom bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; padding: 4px 6px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ln); background: var(--b);
}
.tabbar a { flex: 1; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--m); }
.tabbar a[aria-current="page"] { color: var(--i); }
.tabbar .plus { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--i); color: var(--b); display: grid; place-items: center; margin: 0 6px; }
.app.no-nav .tabbar { display: none; }

/* desktop: left rail + content + detail panel (Desk* boards) */
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
  .app.has-panel { grid-template-columns: var(--rail) minmax(0, 1fr) var(--panel); }
  .tabbar { display: none; }
  .rail {
    display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; border-right: 1px solid var(--ln);
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  }
  .screen { max-width: none; margin: 0; padding: 20px 26px 32px; gap: 16px; }
  .screen.full { padding-bottom: 32px; }
  .app.has-panel .panel {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    border-left: 1px solid var(--ln); background: var(--b);
  }
  .panel .screen { padding: 16px 18px 24px; gap: 12px; }
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 700; padding: 0 8px 14px; }
.rail-item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--m2); }
.rail-item[aria-current="page"] { font-weight: 600; color: var(--i); background: var(--cd); }
.rail-group { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m); padding: 14px 10px 4px; }
.rail-add { height: 42px; border-radius: 12px; background: var(--i); color: var(--b); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 600; margin-top: 16px; }
.rail-sync { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--m); padding: 16px 8px 0; }
.rail-theme { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; margin-top: 6px; border-radius: 10px; font-size: 12.5px; color: var(--m2); }

/* desktop columns */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col, 290px), 100%), 1fr)); gap: 18px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---------- headers ---------- */
.hdr { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 8px; }
.bhdr { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.bhdr .title { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.round-btn { width: 40px; height: 44px; display: flex; align-items: center; flex: none; }
.round-btn > span { width: 34px; height: 34px; border-radius: 50%; background: var(--cd); display: grid; place-items: center; color: var(--i); }
.desk-hdr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.desk-hdr .heading { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-right: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.desk-hdr .heading .round-btn { width: auto; height: auto; }
.acct-pick { display: flex; align-items: center; min-height: 44px; }
.acct-pick > span { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px 0 7px; border-radius: 99px; background: var(--cd); font-size: 13px; font-weight: 600; max-width: 190px; }
.acct-pick > span > .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-pick .gl { color: var(--m); }
.search-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--cd); font-size: 13px; color: var(--m); }

/* period bar */
.period { display: flex; align-items: center; }
.period .step { width: 32px; height: 44px; display: grid; place-items: center; color: var(--m); }
.period .step:disabled { opacity: .3; }
.period .lbl { font-size: 15px; font-weight: 600; padding: 12px 1px; white-space: nowrap; }
.period .cal { width: 38px; height: 44px; display: flex; align-items: center; justify-content: flex-end; }
.period .cal > span { width: 34px; height: 34px; border-radius: 10px; background: var(--cd); display: grid; place-items: center; color: var(--i); }

/* ---------- tiles and badges ---------- */
.tile { width: 30px; height: 30px; border-radius: 9px; background: var(--tile); display: grid; place-items: center; flex: none; }
.tile.on-cd { background: var(--cd); }
.tile.big { width: 44px; height: 44px; border-radius: 13px; }
.tile.huge { width: 52px; height: 52px; border-radius: 16px; }
.btile { position: relative; display: block; flex: none; }
.btile .badge { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ring, var(--cd)); display: grid; place-items: center; font-size: 8px; font-weight: 700; line-height: 1; color: #ffffff; }
.btile.huge .badge { right: -6px; bottom: -6px; width: 22px; height: 22px; border-width: 2.5px; font-size: 10.5px; }
.dtile { width: 36px; height: 38px; border-radius: 10px; background: var(--cd); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; line-height: 1.05; }
.dtile.on-cd { background: var(--tile); }
.dtile b { font-size: 14px; font-weight: 700; }
.dtile small { font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--m2); }
.check-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-radius: 5px; padding: 2px 5px; margin-right: 6px; }
.kind-pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; color: var(--kc, var(--out)); background: color-mix(in srgb, var(--kc, var(--out)) 14%, transparent); }

/* ---------- cards ---------- */
.card { display: block; background: var(--cd); border-radius: 16px; padding: 11px 13px 12px; min-width: 0; }
.card.col-card { display: flex; flex-direction: column; gap: 6px; }
.card-head { display: flex; align-items: center; gap: 10px; }
.card-head .name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.card-head .amt { font-size: 15px; font-weight: 600; white-space: nowrap; }
.card-head .gl { color: var(--m); }
.track { height: 8px; border-radius: 4px; background: var(--tr); overflow: hidden; }
.track.thin { height: 5px; border-radius: 3px; }
.track.fat { height: 10px; border-radius: 5px; }
.seg { display: flex; gap: 2px; height: 100%; }
.seg > i { display: block; min-width: 0; }
.parts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.part { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.part-l { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--m); white-space: nowrap; min-width: 0; }
.part-l > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.part-v { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.part-s { font-size: 11px; color: var(--m); }
.sw { width: 6px; height: 6px; border-radius: 2px; flex: none; }
.sw-line { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.sw-dot { width: 12px; height: 0; border-top: 2px dotted; flex: none; }
.sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; }
.sec > b { font-size: 15px; font-weight: 600; }
.sec > span { font-size: 12.5px; color: var(--m); text-align: right; }
.sec-card { background: var(--cd); border-radius: 16px; padding: 11px 13px 4px; display: flex; flex-direction: column; }
.sec-card > .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.sec-card > .head > b { font-size: 14.5px; font-weight: 600; }
.side-link { display: flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: var(--m2); }
.box { border: 1px solid var(--ln); border-radius: 16px; padding: 0 13px; display: flex; flex-direction: column; }
.chart-card { background: var(--cd); border-radius: 16px; padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chart-card > .head { display: flex; align-items: center; justify-content: space-between; min-height: 22px; gap: 8px; }
.chart-card > .head > b { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.num { display: flex; flex-direction: column; gap: 2px; }
.num > .big { font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.num > .say { font-size: 13px; color: var(--m2); }
.num.in-card > .big { font-size: 30px; line-height: 1.1; }
.num.in-card > .say { font-size: 12.5px; margin-top: 1px; }

/* ledger (Home statement) */
.ledger { position: relative; display: flex; flex-direction: column; gap: 9px; }
.ledger::before { content: ''; position: absolute; left: 9px; top: 40px; bottom: 26px; width: 2px; background: var(--tr); }
.led { display: flex; align-items: center; gap: 8px; position: relative; }
.led > .sign { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--tr); background: var(--b); display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1; color: var(--m2); flex: none; position: relative; }
.led > .body { flex: 1; min-width: 0; }
.start-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.start-row > span:first-child { color: var(--m2); }
.start-row > b { font-size: 17px; font-weight: 600; }
.end-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.end-row .l { display: flex; flex-direction: column; }
.end-row .l > span:first-child { color: var(--m2); }
.end-row .l > b { font-size: 13px; font-weight: 600; }
.end-row > b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.flat-row { display: flex; align-items: center; gap: 10px; background: var(--cd); border-radius: 16px; padding: 11px 13px; }
.flat-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.flat-row .t > b { font-size: 15px; font-weight: 600; }
.flat-row .t > span { font-size: 12px; color: var(--m); }
.flat-row > .amt { font-size: 15px; font-weight: 600; white-space: nowrap; }
.flat-row .gl { color: var(--m); }
.check-row { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 13px; color: var(--m2); border-top: 1px solid var(--ln); }
.check-row b { font-weight: 600; color: var(--i); }
.check-row .gl:last-child { color: var(--m); }

/* answer strip (Home v2) */
.answer { background: var(--cd); border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.answer .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.answer .mid > span { font-size: 12.5px; color: var(--m); }
.answer .mid > b { font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.answer .side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.answer .side > span { font-size: 12px; color: var(--m); }
.answer .side > b { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* swipe cards */
.swipe { display: flex; flex-direction: column; gap: 8px; }
.swipe-track {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gut)); padding: 0 calc(60px - var(--gut)) 0 var(--gut); scroll-padding: 0 var(--gut); overscroll-behavior-x: contain;
}
.swipe-track::-webkit-scrollbar { display: none; }
.swipe-track > * { flex: none; width: calc(100% + 2 * var(--gut) - 60px); scroll-snap-align: start; min-height: 214px; }
.swipe-dots { display: flex; justify-content: center; gap: 2px; margin: -6px 0; }
.swipe-dots button { height: 24px; display: flex; align-items: center; padding: 0 3px; }
.swipe-dots button > span { height: 6px; width: 6px; border-radius: 3px; background: var(--tr); transition: width .2s; }
.swipe-dots button[aria-selected="true"] > span { width: 16px; background: var(--i); }

/* ---------- rows ---------- */
.erow { display: flex; align-items: center; gap: 10px; min-height: 50px; min-width: 0; }
.erow.tight { min-height: 46px; }
.erow + .erow.lined, .erow.lined { border-top: 1px solid var(--tr); }
.erow .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.erow .t > .n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erow .t > .s { font-size: 12px; color: var(--m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erow > .amt { font-weight: 600; white-space: nowrap; }
.erow > .amt.pos { color: var(--up); }
.day { background: var(--cd); border-radius: 16px; padding: 0 13px 2px; display: flex; flex-direction: column; }
.day-head { display: flex; align-items: center; justify-content: space-between; height: 40px; border-bottom: 1px solid var(--tr); gap: 8px; }
.day-head .d { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.day-head .d > b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.day-head .d > span { font-size: 12.5px; color: var(--m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-head > .net { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.day-head > .net.pos { color: var(--up); }
.day .erow .tile { background: var(--tile); }
.list { display: flex; flex-direction: column; }
.list.gap { gap: 10px; }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.list-head > span { font-size: 12.5px; color: var(--m); }

/* category row + nested entries */
.crow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; }
.crow .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.crow .t > .top { display: flex; justify-content: space-between; gap: 8px; }
.crow .t > .top > .n { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .t > .top > .n > small { font-size: 12px; color: var(--m); margin-left: 6px; }
.crow .t > .top > .a { font-weight: 600; white-space: nowrap; }
.crow > .gl { color: var(--m); }
.crow .track > i { display: block; height: 100%; border-radius: 3px; }
.nest { margin-left: 14px; padding-left: 24px; border-left: 2px solid var(--tr); display: flex; flex-direction: column; }
.nest .dtile { background: var(--cd); }
.nest .sub-crow .tile { width: 26px; height: 26px; border-radius: 8px; }

/* statement lines */
.stl { display: flex; justify-content: space-between; align-items: baseline; min-height: 30px; gap: 8px; }
.stl > span { color: var(--m2); }
.stl > b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.stl.total { border-top: 1px solid var(--tr); margin-top: 4px; padding-top: 6px; }
.stl.total > span { color: var(--i); font-weight: 600; }
.stl.total > b { font-size: 17px; }

/* ---------- controls ---------- */
.tabs { display: flex; background: var(--cd); border-radius: 12px; padding: 3px; }
.tabs > button, .tabs > a { flex: 1; height: 38px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--m2); text-align: center; }
.tabs > [aria-selected="true"] { font-weight: 600; color: var(--i); background: var(--tile); }
.sort-pill { display: flex; align-items: center; min-height: 44px; flex: none; }
.sort-pill > span { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px 0 10px; border-radius: 99px; background: var(--cd); font-size: 12.5px; font-weight: 600; color: var(--m2); white-space: nowrap; }
.sort-pill .gl:last-child { color: var(--m); }
.nest .sort-pill > span, .day .sort-pill > span { background: var(--cd); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -6px calc(-1 * var(--gut)); padding: 0 var(--gut); }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: -6px 0; padding: 0; }
.chip { min-height: 44px; display: flex; align-items: center; flex: none; }
.chip > span { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 99px; font-size: 13px; font-weight: 500; white-space: nowrap; background: var(--cd); color: var(--m2); }
.chip > span > small { font-size: 11.5px; opacity: .7; }
.chip[aria-pressed="true"] > span { background: var(--i); color: var(--b); }
.tag { min-height: 44px; display: flex; align-items: center; }
.tag > span { display: flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 99px; font-size: 12.5px; font-weight: 500; color: var(--m2); box-shadow: inset 0 0 0 1px var(--tr); }
.tag[aria-pressed="true"] > span { background: var(--i); color: var(--b); box-shadow: none; }
.switch { width: 42px; height: 26px; border-radius: 13px; background: var(--tr); display: flex; align-items: center; padding: 0 3px; flex: none; justify-content: flex-start; transition: background .15s; }
.switch > span { width: 20px; height: 20px; border-radius: 50%; background: var(--m2); }
.switch[aria-checked="true"] { background: var(--in); justify-content: flex-end; }
.switch[aria-checked="true"] > span { background: var(--b); }
.switch-row { display: flex; align-items: center; gap: 12px; min-height: 52px; width: 100%; }
.btn { height: 44px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 600; background: var(--cd); color: var(--i); white-space: nowrap; }
.btn.pri { background: var(--i); color: var(--b); }
.btn.dng { color: var(--dn); }
.btn.dng-solid { background: var(--dn); color: var(--b); font-weight: 700; }
.btn.small { height: 36px; padding: 0 13px; font-size: 13px; }
.btn.wide { flex: 1; height: 46px; }
.pill-btn { min-height: 44px; display: flex; align-items: center; }
.pill-btn > span { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--b); color: var(--i); box-shadow: inset 0 0 0 1px var(--tr); }
.pill-btn.pri > span { background: var(--i); color: var(--b); box-shadow: none; }
.ch-switch { display: flex; align-items: center; margin: -11px -6px -11px 0; }
.ch-switch > button { width: 42px; height: 44px; display: grid; place-items: center; color: var(--m); }
.ch-switch > button > span { width: 38px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.ch-switch > button[aria-pressed="true"] { color: var(--i); }
.ch-switch > button[aria-pressed="true"] > span { background: var(--tile); }
.toggle2 { display: flex; align-items: center; margin: -11px -6px -11px 0; }
.toggle2 > button { height: 44px; display: flex; align-items: center; padding: 0 2px; }
.toggle2 > button > span { height: 26px; display: grid; place-items: center; padding: 0 9px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: var(--m); }
.toggle2 > button[aria-pressed="true"] > span { color: var(--i); background: var(--tile); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--m); }
.input { width: 100%; min-width: 0; height: 44px; border: 0; outline: 0; border-radius: 11px; padding: 0 12px; background: var(--cd); font-size: 14px; color: var(--i); }
.input:focus-visible { outline: 2px solid var(--nw); outline-offset: 0; }

/* ---------- sheets, dialogs, toast ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); animation: fade .16s ease-out; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; margin: 0 auto; max-width: 560px; max-height: 92dvh; overflow-y: auto;
  background: var(--b); border-radius: 24px 24px 0 0; padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; box-shadow: var(--shadow); animation: rise .2s ease-out;
}
.sheet > .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--tr); align-self: center; flex: none; }
.sheet > .stitle { font-size: 16px; font-weight: 600; padding: 12px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet .foot { font-size: 12.5px; color: var(--m); padding-top: 10px; border-top: 1px solid var(--ln); }
@media (min-width: 1024px) {
  .sheet { top: 70px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 100px); border-radius: 22px; border: 1px solid var(--ln); box-shadow: var(--shadow-dlg); padding: 14px 20px 20px; animation: fade .16s ease-out; }
  .sheet.wide { width: min(860px, calc(100% - 32px)); }
  .sheet > .grab { display: none; }
}
.opt { display: flex; align-items: center; gap: 12px; min-height: 54px; border-top: 1px solid var(--ln); width: 100%; }
.opt .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opt .t > span { font-weight: 500; }
.opt .t > small { font-size: 12px; color: var(--m); }
.opt[aria-checked="true"] .t > span, .opt[aria-current="true"] .t > span { font-weight: 600; }
.otile { width: 36px; height: 36px; border-radius: 11px; background: var(--cd); display: grid; place-items: center; flex: none; }
.dialog {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 28px));
  background: var(--b); border-radius: 22px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--ln); animation: fade .16s ease-out;
}
.dialog .dhead { display: flex; align-items: center; gap: 12px; }
.dialog .dhead .t { display: flex; flex-direction: column; }
.dialog .dhead .t > b { font-size: 18px; font-weight: 600; }
.dialog .dhead .t > span { font-size: 12.5px; color: var(--m); }
.dialog .acts { display: flex; gap: 8px; }
.toast {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 536px;
  border-radius: 16px; background: var(--toast); color: var(--toast-i); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); overflow: hidden; animation: rise .2s ease-out;
}
.toast .row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; min-height: 56px; }
.toast .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.toast .t > b { font-weight: 600; }
.toast .t > span { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast .secs { font-size: 12px; opacity: .75; }
.toast .undo { height: 44px; padding: 0 16px; display: flex; align-items: center; border-radius: 11px; background: rgba(255, 255, 255, .1); font-weight: 700; }
.toast .bar { height: 3px; background: rgba(255, 255, 255, .12); }
.toast .bar > i { display: block; height: 100%; background: var(--toast-i); transform-origin: left; }
@media (min-width: 1024px) { .toast { left: auto; right: 24px; bottom: 24px; width: 380px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 1024px) { @keyframes rise { from { opacity: 0; } } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* add menu grid ("What are you adding?") */
.amg { display: flex; flex-direction: column; gap: 7px; }
.amg > span { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m); }
.amg > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.amt-tile { height: 72px; border-radius: 12px; background: var(--cd); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 500; text-align: center; line-height: 1.2; padding: 0 2px; }

/* keypad */
.keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.keypad > button { height: 46px; border-radius: 12px; background: var(--cd); font-size: 17px; font-weight: 600; text-align: center; display: grid; place-items: center; }
.keypad > button.op { background: var(--tile); color: var(--m2); }
.keypad > button.save { grid-row: span 2; height: auto; background: var(--i); color: var(--b); font-size: 15px; }
.sum-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sum-hero > .expr { font-size: 13px; color: var(--m); min-height: 18px; }
.sum-hero > .val { font-size: 54px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.sum-hero > .val > small { font-size: 27px; font-weight: 500; color: var(--m); margin-right: 4px; }

/* charts */
.chart { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font); }
.xlabels { display: flex; justify-content: space-between; font-size: 11px; color: var(--m); }
.legend { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.cols-chart { position: relative; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--tr); }
.cols-chart .avg { position: absolute; left: 0; right: 0; border-top: 2px dotted; }
.cols-chart > .grp { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.cols-chart > .grp > i { display: block; width: 42%; border-radius: 3px 3px 0 0; }
.cols-x { display: flex; gap: 8px; font-size: 11px; color: var(--m); }
.cols-x > span { flex: 1; text-align: center; }
.sbar { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.sbar > .l { width: 30px; font-size: 13px; font-weight: 500; }
.sbar > .track { flex: 1; }
.sbar > .v { width: 52px; text-align: right; font-size: 13px; font-weight: 600; }

/* placeholder for screens not built yet */
.todo { background: var(--cd); border-radius: 16px; padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; color: var(--m2); }
.todo b { color: var(--i); font-size: 15px; }
.boot { min-height: 60dvh; display: grid; place-items: center; color: var(--m); }

/* --- entries (Activity, Entry, Add) --- */
.pavatar { border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-weight: 700; line-height: 1; }
.err { color: var(--dn); font-size: 12.5px; }
.err[hidden], [hidden] { display: none !important; }
.tiny { font-size: 12px; }
.fsub { font-size: 12px; color: var(--m); }
.fsub.warn, .fsub .warn { color: var(--warn); }
.fname { font-weight: 500; }
.acts { display: flex; gap: 8px; }
.sheet .acts { margin-top: 12px; }
.fld { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fld .pre { font-size: 20px; font-weight: 600; color: var(--m); }
.fld .input { flex: 1; width: auto; }
.fld .err { flex-basis: 100%; }
.input[aria-invalid="true"] { outline: 2px solid var(--dn); outline-offset: 0; }
.opt-amt { font-weight: 600; white-space: nowrap; }
.opt-amt.dn { color: var(--dn); }

/* pick sheets */
.pick-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--cd); color: var(--m); margin-bottom: 4px; }
.pick-search .input { background: none; padding: 0; height: 42px; }
.pick-h { display: block; font-size: 12px; font-weight: 600; color: var(--m); padding: 12px 0 4px; }
.pick-kids { margin-left: 18px; padding-left: 12px; border-left: 2px solid var(--tr); }
.pick-kids .opt:first-child { border-top: 0; }
.pick-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ln); }
.pick-add .input { flex: 1; min-width: 140px; background: var(--cd); }
.pick-add .err { flex-basis: 100%; }
.pick-same { border-top: 1px solid var(--ln); margin-top: 8px; font-size: 13px; color: var(--m2); }
.pick-foot { position: sticky; bottom: -1px; background: var(--b); padding-top: 10px; margin-top: 6px; }
.pick-grp { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 2px; font-size: 12px; font-weight: 600; color: var(--m); }
.pick-grp b { font-weight: 600; color: var(--m2); }
.sheet .pick-list { display: flex; flex-direction: column; }
.cal-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.cal-quick .chip { min-height: 38px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head b { font-size: 15px; }
.cal-head .step { width: 40px; height: 40px; display: grid; place-items: center; color: var(--m2); }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal-dow span { font-size: 11px; color: var(--m); padding: 4px 0; }
.cal-day { height: 42px; display: grid; place-items: center; }
.cal-day > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; }
.cal-day.out { color: var(--m); opacity: .55; }
.cal-day.today > span { box-shadow: inset 0 0 0 1.5px var(--m); }
.cal-day[aria-pressed="true"] > span { background: var(--i); color: var(--b); font-weight: 700; box-shadow: none; }
.cal-time { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; border-top: 1px solid var(--ln); margin-top: 6px; }
.cal-time .lbl { color: var(--m); font-size: 12.5px; margin-right: auto; }
.tcol { display: flex; flex-direction: column; align-items: center; }
.tcol button { width: 44px; height: 30px; display: grid; place-items: center; color: var(--m); }
.tcol b { font-size: 22px; font-weight: 600; min-width: 34px; text-align: center; }
.colon { font-size: 22px; color: var(--m); }

/* delete sheet */
.del-prev { padding-top: 0; padding-bottom: 0; margin: 8px 0; }
.del-fx { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.del-fx > b { font-size: 13px; padding-bottom: 4px; }
.del-line { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13.5px; border-top: 1px solid var(--ln); }
.del-line .gl { color: var(--m); }
.del-line > b { white-space: nowrap; }

/* entry page */
.chk-banner { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--warn) 12%, var(--cd)); border-radius: 14px; padding: 10px 12px; font-size: 13px; color: var(--m2); }
.chk-banner b { color: var(--i); }
.ehero { background: var(--cd); border-radius: 18px; padding: 18px 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ehero .btile { margin-bottom: 4px; }
.eh-name { font-size: 16px; font-weight: 600; margin-top: 6px; max-width: 100%; overflow-wrap: anywhere; }
.hero-amt { font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; text-align: center; min-height: 44px; }
.hero-amt.static, .hero-date.static { cursor: default; }
.hero-date { font-size: 12.5px; color: var(--m); min-height: 28px; text-align: center; text-decoration: underline; text-decoration-color: var(--tr); text-underline-offset: 3px; }
.hero-date.static { text-decoration: none; }
.dhero { display: flex; align-items: center; gap: 12px; }
.dhero .dh-t { display: flex; flex-direction: column; min-width: 0; }
.dhero .dh-t b { font-size: 17px; font-weight: 600; }
.dhero .hero-date { text-align: left; min-height: 24px; }
.panel .hero-amt { text-align: left; font-size: 34px; line-height: 1.1; min-height: 40px; }
.fcard { background: var(--cd); border-radius: 16px; padding: 0 13px; display: flex; flex-direction: column; }
.flist { display: flex; flex-direction: column; }
.frow { display: flex; align-items: center; gap: 11px; min-height: 50px; width: 100%; text-align: left; }
.frow + .frow { border-top: 1px solid var(--tr); }
.flist .frow { min-height: 52px; border-top: 1px solid var(--ln); }
.flist .frow + .frow { border-top: 1px solid var(--ln); }
.frow > .lbl { width: 70px; flex: none; font-size: 12.5px; color: var(--m); }
.flist .frow > .lbl { width: 74px; }
.frow > .val { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.frow .gl { color: var(--m); }
.chg { height: 44px; display: flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--m2); white-space: nowrap; }
.crow2 { display: flex; align-items: center; gap: 9px; }
.crow2 .cv { display: flex; flex-direction: column; min-width: 0; }
.flist .tile { background: var(--cd); }
.tags { display: flex; flex-wrap: wrap; gap: 0 6px; }
.tag-in { height: 34px; width: 140px; margin: 5px 0; }
.src { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.src-more { font-size: 12px; line-height: 1.45; color: var(--m2); padding: 6px 0 8px; }
.flist .src-more { background: var(--cd); border-radius: 11px; padding: 9px 11px; margin-top: 6px; }
.note .input { height: 46px; border-radius: 13px; padding: 0 13px; }
.note.flat .input { height: 36px; border-radius: 9px; padding: 0 10px; }
.note { display: flex; }
.acts-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.abtn { height: 60px; border-radius: 14px; background: var(--cd); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--i); text-align: center; }
.abtn.dn { color: var(--dn); }
.panel .acts-grid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.panel .abtn { height: 44px; flex-direction: row; gap: 7px; font-size: 13px; }
.kind-pill { white-space: nowrap; }

/* transfer */
.xf-card { background: var(--cd); border-radius: 16px; padding: 4px 13px; display: flex; flex-direction: column; }
.xf-acct { display: flex; align-items: center; gap: 11px; min-height: 64px; }
.xf-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.xf-t b { font-weight: 600; }
.xf-t span, .xf-a span { font-size: 12px; color: var(--m); }
.xf-a { display: flex; flex-direction: column; align-items: flex-end; }
.xf-a b { font-size: 15px; font-weight: 600; }
.xf-swap { align-self: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; color: var(--m2); margin: -4px 0; position: relative; z-index: 1; }
.xf-note { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.xf-note > b { padding-bottom: 4px; }
.ehero.xf { padding: 14px; }

/* split + refund */
.sp-hero, .rr-hero { display: flex; align-items: center; gap: 10px; background: var(--cd); border-radius: 16px; padding: 11px 13px; }
.sp-hero .t, .rr-hero .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-hero .t > span, .rr-hero .t > span { font-size: 12px; color: var(--m); }
.sp-hero .amt, .rr-hero .amt { font-size: 17px; font-weight: 600; white-space: nowrap; }
.split-body { display: flex; flex-direction: column; gap: 10px; }
.sp-sum { display: flex; flex-direction: column; gap: 8px; }
.sp-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.sp-top > span { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.sp-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--m2); }
.sp-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; }
.sp-part { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 6px 8px; align-items: center; background: var(--cd); border-radius: 16px; padding: 10px 12px; }
.sp-who { display: flex; align-items: center; gap: 9px; min-height: 44px; min-width: 0; }
.sp-who .tile { background: var(--tile); }
.sp-t { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sp-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-t .gl { color: var(--m); }
.sp-amt { background: var(--tile); text-align: right; }
.sp-note { grid-column: 1 / -1; grid-row: 2; height: 34px; border: 0; outline: 0; border-radius: 9px; background: var(--tile); padding: 0 10px; font-size: 12.5px; }
.sp-x { width: 40px; height: 44px; display: grid; place-items: center; color: var(--m); }
.sp-part:not(:has(.sp-x)) { grid-template-columns: minmax(0, 1fr) 120px; }
.sp-count { display: flex; flex-direction: column; }
.how { display: flex; flex-direction: column; gap: 2px; }
.how > b { padding-bottom: 4px; }
.how .how-s { padding-top: 6px; border-top: 1px solid var(--tr); margin-top: 4px; color: var(--m2); }
.rf-link { display: flex; flex-direction: column; gap: 6px; }
.rf-now { padding: 0 2px; }
.rf-now b { color: var(--i); }
.chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-row .lbl { font-size: 12px; color: var(--m); }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 99px; background: var(--cd); font-size: 12.5px; font-weight: 600; max-width: 100%; }
.chip-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-btn .gl { color: var(--m); }
.chip-btn .tile { width: 22px; height: 22px; border-radius: 7px; }

/* activity */
.act-sum { display: flex; flex-direction: column; gap: 9px; }
.act-row { display: flex; align-items: center; gap: 8px; }
.search-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--cd); color: var(--m); }
.filter-btn { position: relative; width: 44px; height: 44px; border-radius: 12px; background: var(--cd); display: grid; place-items: center; flex: none; color: var(--i); }
.filter-btn .dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; background: var(--i); color: var(--b); font-size: 10px; font-weight: 700; font-style: normal; display: grid; place-items: center; }
.act-tools { display: flex; align-items: center; gap: 8px; }
.act-tools > .chips { flex: 1; }
.filt-note { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--m); }
.filt-note button { font-weight: 600; color: var(--m2); min-height: 32px; }
.fs-sub { font-size: 12.5px; color: var(--m); padding-bottom: 6px; }
.fs-sections { display: flex; flex-direction: column; gap: 6px; }
.fs-h { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m); padding-top: 10px; }
.fs-h b { text-transform: none; letter-spacing: 0; color: var(--m2); }
.fs-amt { display: flex; align-items: center; gap: 8px; }
.fs-amt .input { background: var(--cd); }
.fs-check { border-top: 1px solid var(--ln); margin-top: 8px; }
.fs-check small { display: block; }
.fs-foot { position: sticky; bottom: -1px; background: var(--b); padding-top: 10px; }
.sheet .chips.wrap { margin: 0; }

/* search */
.srch-bar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.srch-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 12px; border-radius: 12px; background: var(--cd); color: var(--m); }
.srch-in { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: none; color: var(--i); font-size: 14px; }
.srch-in::-webkit-search-cancel-button { display: none; }
.srch-x { width: 36px; height: 40px; display: grid; place-items: center; color: var(--m); }
.srch-cancel { height: 44px; padding: 0 4px; font-weight: 600; color: var(--m2); }
.srch-res { display: flex; flex-direction: column; gap: 10px; }
.srch-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 26px 12px; color: var(--m2); }
.srch-empty b { color: var(--i); font-size: 16px; }
.did-you { height: 44px; padding: 0 14px; border-radius: 99px; background: var(--cd); color: var(--m2); }
.did-you b { font-size: 14px; color: var(--i); }
.merch { display: flex; flex-direction: column; gap: 11px; }
.merch .mh { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.merch .mh > b { font-size: 16px; font-weight: 600; }
.merch .mh > span { font-size: 12px; color: var(--m); }
.merch .card-head .amt { font-size: 17px; }

/* to check */
.chk-lead { font-size: 13px; color: var(--m2); }
.chk-card { background: var(--cd); border-radius: 16px; padding: 4px 13px 10px; display: flex; flex-direction: column; gap: 4px; }
.chk-card .erow .amt.pos { color: var(--up); }
.chk-why { font-size: 12.5px; color: var(--m2); }
.chk-pills { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; }

/* add */
.screen.full:has(> .add) { min-height: 100dvh; }
.add { display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; }
.add .sum-hero { flex: 1; min-height: 96px; }
.add .sum-hero .hero-line { display: block; }
.add .sum-hero .val { font-size: 56px; }
.chip-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; }
.add .chip-line { margin: 0; }
.scan-pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--cd); font-size: 12.5px; font-weight: 600; }
.cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cat-tile { height: 60px; border-radius: 12px; background: var(--cd); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 500; padding: 0 2px; text-align: center; }
.cat-tile > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-tile[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--i); }
.cat-tile .gl { color: var(--m2); }
.acc-chips { margin: 0; }
.add .field { gap: 6px; }
.add .field > span { font-size: 12px; color: var(--m); }
.person-chip .pavatar { margin-right: 2px; }
.chip[aria-checked="true"] > span { background: var(--i); color: var(--b); }
.swap-btn { align-self: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cd); display: grid; place-items: center; color: var(--m2); margin: -4px 0; }
.sum-note { text-align: center; font-size: 12.5px; color: var(--m); }
.hint { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--m); }
.hint .gl { margin-top: 2px; }
.add .tabs { margin-top: 2px; }
.add .tabs > a { font-size: 12.5px; }
.amt-in { font-size: 22px; font-weight: 600; height: 54px; }
.eq { font-size: 13px; color: var(--m2); min-height: 18px; }
.panel .add { gap: 14px; }

/* scan */
.scan-view { --paper: #f4f1e8; --ink: #2a2a28; --cam: #0b0c0f; position: relative; background: var(--cam); border-radius: 18px; padding: 22px 26px; aspect-ratio: 3 / 3.6; max-height: 62dvh; overflow: hidden; display: grid; place-items: center; }
.scan-paper { width: 100%; background: var(--paper); color: var(--ink); padding: 12px 14px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.45; display: flex; flex-direction: column; transform: rotate(-1.2deg); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.scan-paper b { text-align: center; font-size: 12px; }
.scan-paper .sp { text-align: center; opacity: .75; }
.scan-paper > span:not(.sp) { text-align: center; opacity: .75; }
.scan-paper .ln { display: flex; justify-content: space-between; gap: 8px; }
.scan-paper .ln.tot { border-top: 1px dashed var(--ink); margin-top: 4px; padding-top: 3px; font-weight: 700; }
.scan-view .cn { position: absolute; width: 26px; height: 26px; border: 3px solid var(--kept); }
.scan-view .tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scan-view .tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scan-view .bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scan-view .br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scan-badge { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: var(--kept); color: #06302f; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.scan-hint { text-align: center; font-size: 13px; color: var(--m2); }
.scan-proto { text-align: center; font-size: 12px; color: var(--m); }
.scan-shutter { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 4px 0; }
.shutter { width: 68px; height: 68px; border-radius: 50%; border: 3px solid var(--i); display: grid; place-items: center; }
.shutter > span { width: 52px; height: 52px; border-radius: 50%; background: var(--i); }
.shut-x { width: 44px; height: 44px; border-radius: 50%; background: var(--cd); display: grid; place-items: center; }
.rr-ok { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--up); }

/* --- plans (invest.js, plan.js, protect.js) --- */
:root { --mood-0: #43b06c; --mood-1: #9bc53d; --mood-2: #f0b34a; --mood-3: #e2574c; }
.pl-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--tile); color: var(--m2); flex: none; }
.pl-pill.good { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.pl-pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pl-pill.bad { color: var(--dn); background: color-mix(in srgb, var(--dn) 14%, transparent); }
.pl-pill.inv { color: var(--inv); background: color-mix(in srgb, var(--inv) 16%, transparent); }
.pl-kv { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.pl-kv > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pl-kv > div > span { font-size: 12px; color: var(--m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-kv > div > b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.pl-kv > div > small { font-size: 11.5px; color: var(--m); }
.pl-bar { display: flex; flex-direction: column; gap: 6px; }
.pl-bar .track > i { display: block; height: 100%; border-radius: inherit; }
.pl-cap { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--m); }
.pl-cap > span { min-width: 0; }
.pl-box { background: var(--cd); border-radius: 16px; padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pl-box.flat { gap: 0; }
.pl-bhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.pl-bhead > b { font-size: 14.5px; font-weight: 600; }
.pl-bhead > span { font-size: 12.5px; color: var(--m2); text-align: right; }
.pl-box > p, .pl-note { margin: 0; font-size: 12px; color: var(--m); line-height: 1.45; }
.pl-box > p.pl-note b { color: var(--i); }
.pl-stl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 28px; }
.pl-stl > span { color: var(--m2); }
.pl-stl > b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.pl-stl.total { border-top: 1px solid var(--tr); padding-top: 8px; margin-top: 2px; }
.pl-stl.total > span { color: var(--i); font-weight: 600; }
.pl-stl.total > b { font-size: 17px; }
.pl-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 13px; background: var(--cd); border-radius: 16px; }
.pl-link > .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-link > .t > b { font-weight: 600; }
.pl-link > .t > span { font-size: 12px; color: var(--m); }
.pl-link > .gl { color: var(--m); }
.pl-link.ghost { background: none; box-shadow: inset 0 0 0 1px var(--ln); }
.pl-twin { display: flex; gap: 8px; }
.pl-twin > * { flex: 1; }
.pl-hold { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px 14px; background: var(--cd); border-radius: 16px; padding: 13px; min-width: 0; }
.pl-hold .l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-hold .l > .kn { font-size: 13px; color: var(--m2); }
.pl-hold .l > .v { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.pl-hold .l > .g { font-size: 13px; font-weight: 600; }
.pl-hold .l > .since { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--m); }
.pl-hold .r { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-fact { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.pl-fact > i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--m); }
.pl-fact > i.good { background: var(--up); } .pl-fact > i.warn { background: var(--warn); } .pl-fact > i.bad { background: var(--dn); }
.pl-fact > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pl-fact > span > b { font-size: 13px; font-weight: 600; }
.pl-fact > span > small { font-size: 12px; color: var(--m); }
.pl-mood { display: flex; flex-direction: column; gap: 8px; }
.pl-mood .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pl-mood .top .t { display: flex; flex-direction: column; }
.pl-mood .top .t > b { font-size: 15px; font-weight: 600; }
.pl-mood .top .t > span { font-size: 12.5px; color: var(--m2); }
.pl-mood .segs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px 0; }
.pl-mood .segs > i { height: 8px; border-radius: 4px; display: block; }
.pl-mood .segs > u { position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--i); transform: translateX(-2px); }
.pl-mood .names { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 12px; color: var(--m); }
.pl-mood .names > span.on { color: var(--i); font-weight: 600; }
.pl-bond { display: flex; flex-direction: column; gap: 10px; background: var(--cd); border-radius: 16px; padding: 12px 13px; min-width: 0; }
.pl-bond .head { display: flex; align-items: center; gap: 10px; }
.pl-bond .head > .n { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bond .head > .n > small { font-size: 12px; font-weight: 400; color: var(--m); margin-left: 6px; }
.pl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px; padding-top: 6px; }
.pl-form .wide { grid-column: 1 / -1; }
.pl-field > span { font-size: 12.5px; color: var(--m); }
.pl-err { min-height: 0; font-size: 12px; color: var(--dn); }
.pl-err:empty { display: none; }
.pl-field .input[aria-invalid="true"] { outline: 2px solid var(--dn); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--m) 50%), linear-gradient(135deg, var(--m) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.pl-pick { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 7px; }
.pl-pick > button { height: 72px; border-radius: 12px; background: var(--cd); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; text-align: center; box-shadow: inset 0 0 0 0 var(--i); }
.pl-pick > button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--i); }
.pl-pick > button .tile { background: var(--tile); }
.pl-sheet-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.pl-hint { display: flex; align-items: center; gap: 10px; background: var(--cd); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--m2); }
.pl-hint b { color: var(--i); }
.pl-hint .gl { color: var(--m); }
.pl-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 10px; padding: 9px 0; border-top: 1px solid var(--tr); align-items: start; }
.pl-step:first-of-type { border-top: 0; }
.pl-step > i { width: 24px; height: 24px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: var(--m2); }
.pl-step > b { font-size: 14px; font-weight: 600; line-height: 1.35; padding-top: 2px; }
.pl-step > small { grid-column: 2; font-size: 12px; color: var(--m); }
.pl-limit { display: flex; align-items: center; gap: 10px; min-height: 55px; border-top: 1px solid var(--ln); }
.pl-limit:first-of-type { border-top: 0; }
.pl-limit > .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-limit > .t > b { font-weight: 600; }
.pl-limit > .t > small { font-size: 12px; color: var(--m); }
.pl-stepper { display: flex; align-items: center; gap: 4px; }
.pl-stepper > button { width: 34px; height: 34px; border-radius: 10px; background: var(--cd); display: grid; place-items: center; font-size: 18px; font-weight: 600; flex: none; }
.pl-stepper > input { width: 78px; height: 34px; border: 0; outline: 0; background: none; text-align: center; font-weight: 600; font-size: 14.5px; color: var(--i); }
.pl-stepper > input:focus-visible { outline: 2px solid var(--nw); border-radius: 8px; }
.pl-sumline { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 12px; border-top: 1px solid var(--ln); color: var(--m2); }
.pl-sumline > b { font-size: 19px; color: var(--i); font-weight: 600; }
.pl-ring { width: 118px; height: 118px; flex: none; }
.pl-goal { display: flex; flex-direction: column; gap: 9px; background: var(--cd); border-radius: 16px; padding: 12px 13px 13px; min-width: 0; }
.pl-goal .head { display: flex; align-items: center; gap: 10px; }
.pl-goal .head > .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-goal .head > .t > b { font-size: 15px; font-weight: 600; }
.pl-goal .head > .t > span { font-size: 12px; color: var(--m); }
.pl-goal .nums { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pl-goal .nums > .a { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.pl-goal .nums > .a > small { font-size: 13px; font-weight: 400; color: var(--m); margin-left: 6px; }
.pl-goal .nums > b { font-size: 14px; font-weight: 600; }
.pl-goal .say { font-size: 12.5px; color: var(--m2); }
.pl-add { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 13px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ln); color: var(--m2); font-weight: 600; width: 100%; }
.pl-add > span.pl-plus { width: 30px; height: 30px; border-radius: 9px; border: 1.5px dashed var(--tr); display: grid; place-items: center; }
.pl-hero { display: flex; gap: 14px; align-items: center; background: var(--cd); border-radius: 16px; padding: 14px; }
.pl-hero .side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-hero .side > div { display: flex; flex-direction: column; }
.pl-hero .side span { font-size: 12px; color: var(--m); }
.pl-hero .side b { font-size: 16px; font-weight: 600; }
.pl-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; text-align: center; }
.pl-days > div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; color: var(--m); }
.pl-days > div > b { font-size: 12.5px; font-weight: 600; color: var(--i); }
.pl-strip { display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 4px; }
.pl-strip > i { height: 14px; border-radius: 4px; background: var(--tr); display: block; }
.pl-strip > i.ok { background: var(--up); } .pl-strip > i.late { background: var(--warn); }
.pl-strip-l { display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 11px; color: var(--m); }
.pl-rows { background: var(--cd); border-radius: 16px; padding: 0 13px; display: flex; flex-direction: column; }
.pl-rrow { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 52px; border-top: 1px solid var(--tr); }
.pl-rrow:first-child { border-top: 0; }
.pl-rrow > span { font-size: 13px; color: var(--m); }
.pl-rrow > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-rrow > div > .t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pl-rrow > div > .t > b { font-weight: 600; }
.pl-rrow > div > .t > small { font-size: 12px; color: var(--m); }
.pl-year { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--m); padding-top: 4px; }
.pl-tl { display: block; width: 100%; height: auto; overflow: visible; }
.pl-tl text { font-family: var(--font); }
.pl-ptr { display: flex; align-items: center; gap: 9px; }
.pl-sw3 { display: inline-flex; gap: 3px; }
/* --- end plans --- */
/* --- money: accounts, people, net worth --- */
.card-head .name small, .sub { font-size: 12px; font-weight: 400; color: var(--m); margin-left: 8px; }
.card-head .name > .sub { display: block; margin: 0; }
.grp-rows { display: flex; flex-direction: column; margin-top: 4px; }
.erow > .gl { color: var(--m); }
.erow[aria-current="true"] { background: color-mix(in srgb, var(--i) 7%, transparent); border-radius: 10px; }
a.card[aria-current="true"] { box-shadow: inset 0 0 0 1.5px var(--i); }
.found { display: flex; align-items: center; gap: 10px; border-radius: 16px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.found .ft { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.found .ft > b { font-size: 14.5px; font-weight: 600; }
.found .ft > span { font-size: 12.5px; color: var(--m2); }
.found > .gl:last-child { color: var(--m); }
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.acc-grid > .full { grid-column: 1 / -1; }
.acc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hide-amts .amt, .hide-amts .part-v, .hide-amts .big, .hide-amts .stl > b { filter: blur(7px); user-select: none; }
.pnl-head { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.pnl-head .pn { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.pnl-head .pn > small { display: block; font-size: 12.5px; font-weight: 400; color: var(--m); }
.pnl-head .pa { font-size: 17px; font-weight: 600; }
.narrow { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
@media (min-width: 1024px) { .narrow { gap: 14px; } }
.cap { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--m); }
.lede { font-size: 13px; color: var(--m2); }
.have { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--up); }
.box .erow { padding: 0; min-height: 52px; }
.box .erow.lined:first-child { border-top: 0; }
.pill-up, .pill-warn { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.pill-up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.pill-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill-note { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; color: var(--m2); background: var(--tile); }
.cyc-track { overflow: visible; }
.cyc-track .seg { position: relative; }
.cyc-track .seg > i { border-radius: 4px; }
.cyc-track .seg::after { content: ''; position: absolute; right: -1px; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--i); }
.day-grid { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1024px) { .day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; } }
.flat-row > .switch { margin-left: auto; }
button.flat-row { width: 100%; text-align: left; }
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.qa { background: var(--tile); border-radius: 12px; padding: 9px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-height: 84px; }
.qa .tile { background: var(--cd); }
.qa b { font-size: 12px; font-weight: 600; line-height: 1.2; }
.qa small { font-size: 11px; color: var(--m); }
.cnt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb { display: flex; flex-direction: column; gap: 2px; background: var(--tile); border-radius: 12px; padding: 10px 12px; min-width: 0; border: 1.5px solid transparent; }
.cb.on { border-color: var(--i); }
.cb > small { font-size: 12px; color: var(--m); }
.cb > b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.cin { display: flex; align-items: center; gap: 4px; font-size: 22px; font-weight: 600; }
.cin .input { height: 30px; padding: 0; background: none; font-size: 22px; font-weight: 600; letter-spacing: -.02em; min-width: 0; }
.cnt-acts { display: flex; gap: 8px; }
.cnt-acts .btn { padding: 0 8px; }
.bchart { display: flex; flex-direction: column; gap: 10px; }
.bc-area { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.bc-avg { position: absolute; left: 0; right: 0; border-top: 2px dotted var(--i); opacity: .85; pointer-events: none; z-index: 1; }
.bc { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.bc .bv { font-size: 11px; font-weight: 600; color: var(--m2); }
.bc .bar { width: 100%; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--out) 38%, var(--cd)); min-height: 3px; }
.bc .bar.cur { background: var(--out); }
.bc .bl { font-size: 11.5px; color: var(--m); height: 18px; }
.bc .bl.cur { color: var(--i); font-weight: 700; }
.bnote { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--m2); }
.bnote.warn { color: var(--warn); }
.pay-sheet { background: var(--cd); border-radius: 20px; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pay-sheet .stitle { font-size: 16px; font-weight: 600; }
.radio { display: flex; align-items: center; gap: 12px; min-height: 58px; width: 100%; border-top: 1px solid var(--tr); cursor: pointer; }
.radio:first-child { border-top: 0; }
.radio .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--m); flex: none; position: relative; }
.radio[aria-checked="true"] .dot { border-color: var(--i); }
.radio[aria-checked="true"] .dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--i); }
.radio .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.radio .t > b { font-weight: 600; }
.radio .t > small { font-size: 12px; color: var(--m); }
.radio > b { font-size: 15px; font-weight: 600; }
.oth-ph, .oth-row .input { width: 120px; height: 40px; border-radius: 11px; background: var(--tile); color: var(--m); display: flex; align-items: center; padding: 0 12px; font-size: 14px; flex: none; }
.oth-row .input { color: var(--i); }
.info { display: flex; align-items: flex-start; gap: 10px; background: var(--tile); border-radius: 12px; padding: 11px 12px; font-size: 12.5px; color: var(--m2); }
.info .gl { margin-top: 2px; }
.info .t { display: flex; flex-direction: column; }
.info .t > b { color: var(--i); font-size: 14px; }
.pay-err { font-size: 12.5px; color: var(--dn); }
.pay-err:empty { display: none; }
.slider { display: flex; flex-direction: column; gap: 6px; }
.sl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--m2); }
.sl-top b { color: var(--i); font-weight: 600; }
input.rng { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; --pct: 50%; cursor: pointer; }
input.rng::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--m2) var(--pct), var(--tr) var(--pct)); }
input.rng::-moz-range-track { height: 6px; border-radius: 3px; background: var(--tr); }
input.rng::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--m2); }
input.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--i); border: 0; margin-top: -7px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
input.rng::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--i); border: 0; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 13px; }
.facts > span { color: var(--m2); }
.facts > b { text-align: right; font-weight: 600; }
.pcard { display: block; }
.pcard .pc-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--m); }
.mini-people { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.mini-people .mp { display: flex; align-items: center; gap: 8px; }
.mini-people .mp > span { display: flex; flex-direction: column; line-height: 1.2; }
.mini-people small { font-size: 11.5px; color: var(--m); }
.mini-people b { font-size: 13.5px; font-weight: 600; }
.people-list { display: flex; flex-direction: column; gap: 10px; }
.hist { display: flex; flex-direction: column; }
.due-row { display: flex; align-items: center; gap: 12px; min-height: 56px; width: 100%; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.due-row .t { flex: 1; display: flex; flex-direction: column; }
.due-row .t > small { font-size: 12px; color: var(--m); }
.due-row .link, button.link { font-size: 13px; font-weight: 600; color: var(--m2); }
.check-card { display: flex; align-items: center; gap: 10px; background: var(--cd); border-radius: 16px; padding: 11px 13px; }
.check-card .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.check-card .t > small { color: var(--m); font-size: 12px; }
.hero-amt { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero-amt > small { font-size: 12.5px; color: var(--m); }
.hero-amt .ha { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.hero-amt .rs { font-size: 26px; color: var(--m); }
.hero-amt .val, .hero-amt .amt-in { font-size: 48px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.hero-amt .amt-in { width: 7ch; background: none; border: 0; outline: 0; text-align: left; color: var(--i); min-width: 0; padding: 0; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chip-big { height: 46px; border-radius: 12px; background: var(--tile); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--m2); text-align: center; }
.chip-big[aria-pressed="true"] { background: var(--i); color: var(--b); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two > * { min-width: 0; }
.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kind-tile { height: 74px; border-radius: 12px; background: var(--tile); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; border: 2px solid transparent; }
.kind-tile .tile { background: var(--cd); }
.kind-tile[aria-pressed="true"] { border-color: var(--i); }
.hint { display: flex; align-items: center; gap: 10px; background: var(--tile); border-radius: 12px; padding: 10px 12px; }
.hint .t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hint .t > b { font-size: 13.5px; }
.hint .t > small { font-size: 12px; color: var(--m); }
.add-tile { width: 30px; height: 30px; border-radius: 9px; border: 1.5px dashed var(--m); display: grid; place-items: center; color: var(--m2); flex: none; }
.erow .n > i.sq { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; }
.erow .t > .s.wrap { white-space: normal; }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stats4 > div { display: flex; flex-direction: column; min-width: 0; }
.stats4 small { font-size: 11px; color: var(--m); }
.stats4 b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.res2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res { background: var(--tile); border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 2px; }
.res small { font-size: 11.5px; color: var(--m2); }
.res b { font-size: 17px; font-weight: 600; }
.res span { font-size: 12px; color: var(--m); }
.ibar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.ibar > span:first-child { width: 56px; color: var(--m2); }
.ibar > .track { flex: 1; }
.ibar > b { width: 70px; text-align: right; font-weight: 600; }
.yr { display: flex; justify-content: space-between; font-size: 13px; color: var(--m2); padding: 10px 0 2px; font-weight: 600; }
.yr > span:last-child { font-size: 12.5px; color: var(--m); font-weight: 500; }

/* --- system (categories, rules, reports, settings, onboarding) --- */
.note { margin: 0; font-size: 12.5px; color: var(--m); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.link { font-size: 13px; font-weight: 600; color: var(--m2); min-height: 32px; padding: 0 6px; }
.sys-label { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m); }
.sys-link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px; border-radius: 14px; border: 1px solid var(--ln); font-size: 13px; font-weight: 500; color: var(--m2); }
.sys-link .gl:last-child { margin-left: auto; }
.rcard { background: var(--cd); border-radius: 16px; padding: 0 13px; display: flex; flex-direction: column; min-width: 0; }
.rcard.tight { padding: 0 12px; }
.rrow { display: flex; align-items: center; gap: 12px; min-height: 56px; width: 100%; min-width: 0; padding: 6px 0; }
.rrow + .rrow { border-top: 1px solid var(--tr); }
.rrow .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rrow .t > b { font-size: 14.5px; font-weight: 600; }
.rrow .t > span { font-size: 12px; color: var(--m); }
.rrow > .gl { color: var(--m); }
.glead { width: 30px; display: grid; place-items: center; color: var(--m2); flex: none; }
.pill-s { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; background: var(--tile); color: var(--m2); }
.pill-s.bad { color: var(--dn); background: color-mix(in srgb, var(--dn) 14%, transparent); }
.pill-s.good { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.sbox { position: relative; }
.sbox > .gl { position: absolute; left: 12px; top: 14px; color: var(--m); pointer-events: none; z-index: 1; }
.col.sc { gap: 10px; scroll-margin-top: 12px; }

/* category list cards */
.ccard { background: var(--cd); border-radius: 16px; padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 9px; }
.chead { display: flex; align-items: center; gap: 10px; }
.chead .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chead .t > b { font-size: 15px; font-weight: 600; }
.chead .t > small { font-size: 12px; color: var(--m); }
.chead .amt { font-size: 15px; font-weight: 600; white-space: nowrap; }
.chead .gl { color: var(--m); }
.csubs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.csub { display: flex; align-items: center; gap: 8px; min-height: 46px; min-width: 0; }
.csub .tile { width: 26px; height: 26px; border-radius: 8px; background: var(--tile); }
.csub .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.csub .n { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csub .r2 { display: flex; align-items: center; gap: 6px; }
.csub .r2 b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.csub .r2 .track { flex: 1; min-width: 16px; }
.csub .track > i { display: block; height: 100%; border-radius: 3px; }
.cat-desk { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
.catlist { gap: 8px; }
.row2 { display: flex; gap: 8px; align-items: center; }
.row2 > .sbox { flex: 1; }
.citem.open { background: var(--cd); border-radius: 14px; padding: 0 10px 6px; }
.csublist { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--tr); }
.csublist .on .n { font-weight: 700; }
.zrow { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--m2); font-size: 13.5px; }
.zrow .tile { width: 26px; height: 26px; border-radius: 8px; }
.catpane { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pane-head { display: flex; align-items: center; gap: 12px; }
.pane-head .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pane-head .t > b { font-size: 22px; font-weight: 600; }
.pane-head .t > small { font-size: 12.5px; color: var(--m); }
.bline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bline b.big { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.bline small { font-size: 12.5px; color: var(--m); }
.bfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.chart-card .head > .pill-s { margin-left: auto; }
a.chart-card { color: inherit; }
.crow .t > .s2 { font-size: 12px; color: var(--m); margin-top: -3px; }

/* forms */
.form-card { background: var(--cd); border-radius: 16px; padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.form-err { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--dn); }
.form-err:empty { display: none; }
.form-acts { display: flex; gap: 8px; }
.add-row { display: flex; gap: 8px; align-items: center; }
.add-row > .input { flex: 1; }
select.input { appearance: auto; }
.cat-preview { display: flex; align-items: center; gap: 12px; }
.cat-preview .t { display: flex; flex-direction: column; min-width: 0; }
.cat-preview .t > b { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-preview .t > small { font-size: 12.5px; color: var(--m); }
.pv-tile { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.ibtn { height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--tile); box-shadow: inset 0 0 0 2px transparent; }
.ibtn[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--i); }
.color-row { display: flex; flex-wrap: wrap; gap: 4px; }
.cbtn { width: 44px; height: 44px; display: grid; place-items: center; }
.cbtn > i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--cd); }
.cbtn[aria-checked="true"] > i { box-shadow: 0 0 0 2px var(--cd), 0 0 0 4px var(--i); }
.switch-row .t { flex: 1; display: flex; flex-direction: column; }
.switch-row .t small { color: var(--m); font-size: 12px; }

/* rules */
.infocard { background: var(--cd); border-radius: 16px; padding: 12px 13px; display: flex; gap: 10px; }
.infocard .t { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--m2); }
.infocard .t > b { color: var(--i); font-size: 14px; }
.rulerow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; min-width: 0; }
.rulerow + .rulerow { border-top: 1px solid var(--tr); }
.rulerow > .switch { margin-top: 6px; }
.rulerow .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rulerow .n { font-weight: 600; font-size: 15px; }
.rulerow .tgt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--m2); }
.rulerow .tgt .tile { width: 24px; height: 24px; border-radius: 7px; }
.rulerow .tgt .tile svg { width: 16px; height: 16px; }
.rulerow .desc { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--m); }
.rulerow.off .t, .rulerow.off > .ltr { opacity: .55; }
.ltr { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; flex: none; }

/* merchant, tag */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.facts > div { display: flex; flex-direction: column; font-size: 12px; color: var(--m); }
.facts > div > b { font-size: 11.5px; font-weight: 600; color: var(--m2); }
.facts > div > span { font-size: 14px; font-weight: 600; color: var(--i); }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; align-items: center; }
.legend-row > span { display: flex; align-items: center; gap: 6px; }

/* reports */
.year-pill { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 13px; border-radius: 99px; background: var(--cd); font-size: 14px; font-weight: 600; }
.cols-chart.tri > .grp { gap: 1px; }
.cols-chart.tri > .grp > i { width: 28%; }
.cols-chart .yax { position: absolute; right: -2px; top: 0; bottom: 0; width: 0; }
.cols-chart .yax > span { position: absolute; right: 0; transform: translate(0, 50%); font-size: 10px; color: var(--m); background: var(--cd); padding-left: 3px; }
.ycols { padding-right: 18px; }
.facts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fact { display: flex; align-items: center; gap: 10px; background: var(--cd); border-radius: 14px; padding: 10px 11px; min-width: 0; }
.mtile { width: 36px; height: 38px; border-radius: 10px; background: var(--tile); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; flex: none; }
.fact .t { display: flex; flex-direction: column; min-width: 0; }
.fact .t small { font-size: 11.5px; color: var(--m); }
.fact .t b { font-size: 14px; font-weight: 600; }
.nwline { display: flex; justify-content: space-between; font-size: 12px; color: var(--m); }
.card .head, .card .head2, .chart-card .head2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.card .head > b, .head2 > b { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card.cmp { display: flex; flex-direction: column; gap: 8px; }
.cmprow { padding: 9px 0; display: flex; flex-direction: column; gap: 6px; }
.cmprow + .cmprow { border-top: 1px solid var(--tr); }
.cmprow .head { display: flex; align-items: center; gap: 9px; }
.cmprow .head > .tile { width: 26px; height: 26px; border-radius: 8px; }
.cmprow .head > b:nth-of-type(1) { flex: 1; font-size: 14px; font-weight: 600; }
.cmprow .head > b:last-child { font-size: 14px; }
.pairs { display: flex; flex-direction: column; gap: 5px; }
.pair { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pair .pl { width: 28px; color: var(--m); }
.pair .track { flex: 1; }
.pair .track > i { display: block; height: 100%; border-radius: 3px; }
.pair .pv { width: 78px; text-align: right; font-weight: 600; font-size: 12.5px; }
.rep-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.rep-head > b { font-size: 17px; font-weight: 600; }
.cols.reports { align-items: start; }

/* settings, sync, export, import */
.eye-fab { position: fixed; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px; border-radius: 99px; background: var(--i); color: var(--b); font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
@media (min-width: 1024px) { .eye-fab { bottom: 20px; right: 24px; } }
.cover { position: fixed; inset: 0; z-index: 200; background: var(--b); display: grid; place-items: center; }
.lockscreen { position: fixed; inset: 0; z-index: 300; background: var(--b); display: grid; place-items: center; overflow-y: auto; }
.lk-in { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; width: min(340px, 100%); }
.lk-in > b { font-size: 22px; font-weight: 600; margin-top: 8px; }
.lk-in > span { color: var(--m); font-size: 13.5px; margin-bottom: 8px; }
.pin { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; outline: 0; }
.pin-dots { display: flex; gap: 12px; height: 16px; }
.pin-dots > i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--m); transition: background .1s; }
.pin-dots > i.on { background: var(--i); box-shadow: none; }
.pin-msg { min-height: 18px; font-size: 12.5px; color: var(--m); }
.pin-msg.bad { color: var(--dn); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; justify-content: center; }
.pin-pad > button { height: 60px; border-radius: 18px; background: var(--cd); font-size: 22px; font-weight: 600; display: grid; place-items: center; text-align: center; }
.pin-pad > span { display: block; }
.pin-title { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding-bottom: 8px; }
.pin-title > b { font-size: 18px; }
.syncbar { display: flex; align-items: center; gap: 12px; background: var(--cd); border-radius: 16px; padding: 12px 13px; }
.syncbar .t { flex: 1; display: flex; flex-direction: column; }
.syncbar .t > b { font-size: 15px; }
.syncbar .t > span { font-size: 12.5px; color: var(--m); }
.card .vers { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--tr); margin-top: 8px; }
.card > b { display: block; margin-bottom: 4px; }
.fmt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fmt-b { background: var(--cd); border-radius: 14px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; box-shadow: inset 0 0 0 2px transparent; }
.fmt-b b { font-size: 13px; }
.fmt-b small { font-size: 11px; color: var(--m); }
.fmt-b[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--i); }
.fmt-b:disabled { opacity: .45; }
.mini-badge { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; font-style: normal; color: #fff; }
.btn.tall { height: auto; flex-direction: column; gap: 2px; padding: 11px 16px; background: var(--i); color: var(--b); }
.btn.tall small { font-size: 11.5px; font-weight: 500; opacity: .7; }
.btn.tall:disabled { opacity: .35; }
.or { display: flex; align-items: center; gap: 10px; color: var(--m); font-size: 12px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--ln); }
.pv { display: flex; align-items: center; gap: 12px; }
.pv .t { display: flex; flex-direction: column; font-size: 12.5px; }
.pv .t > b { font-size: 15px; }
.big2 { font-size: 15px; font-weight: 600; }
.maprow { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1.5fr); align-items: start; gap: 8px; padding: 10px 0; border-top: 1px solid var(--tr); }
.maprow .src { display: flex; flex-direction: column; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.maprow .src small { color: var(--m); font-size: 11.5px; }
.maprow > .gl { margin-top: 4px; color: var(--m); }
.maprow .dst { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.maprow .dst small { font-size: 11.5px; color: var(--m); }
.maprow .dline { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.maprow .dline .tile { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.maprow select.input { height: 36px; font-size: 12.5px; }
details.card summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.errs { display: flex; flex-direction: column; gap: 4px; font-size: 12px; padding-top: 8px; max-height: 200px; overflow-y: auto; }

/* inbox */
.nitem { display: flex; gap: 12px; padding: 12px 0; }
.nitem + .nitem { border-top: 1px solid var(--tr); }
.nitem .nb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.nitem .nt { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.nitem .nt > b { font-size: 14.5px; font-weight: 600; }
.nitem .nt > small { color: var(--m); white-space: nowrap; }
.nitem.read .nt > b { font-weight: 500; opacity: .8; }
.nstat { display: flex; gap: 22px; }
.nstat > span { display: flex; flex-direction: column; }
.nstat small { font-size: 11.5px; color: var(--m); }
.pill-link { align-self: flex-start; display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--tr); font-size: 12.5px; font-weight: 600; margin-top: 4px; }

/* prominent disclosure (SMS and notification access): a full screen above the app, shown before the permission */
.disclosure { position: fixed; inset: 0; z-index: 250; background: var(--b); color: var(--i); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.disclosure-in { display: flex; flex-direction: column; gap: 14px; max-width: 460px; margin: 0 auto; padding: calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); min-height: 100%; box-sizing: border-box; }
.disclosure .wacts { margin-top: auto; padding-top: 8px; }

/* welcome and onboarding */
.welcome { justify-content: center; min-height: 100dvh; gap: 18px; max-width: 460px; }
.wbrand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; }
.whead { margin: 0; font-size: 34px; line-height: 1.12; letter-spacing: -.03em; font-weight: 600; }
.wsub { margin: 0; color: var(--m2); font-size: 14.5px; }
.wrows { display: flex; flex-direction: column; gap: 12px; }
.wrow { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.wrow .t { display: flex; flex-direction: column; }
.wrow .t > b { font-size: 14.5px; font-weight: 600; }
.wrow .t > span { font-size: 12.5px; color: var(--m); }
.wacts { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; align-items: stretch; }
.wacts .btn { flex: none; }
.wacts .small { text-align: center; }
.ob-top { display: flex; align-items: center; justify-content: space-between; }
.ob-dots { display: flex; gap: 6px; }
.ob-dots > i { width: 7px; height: 7px; border-radius: 4px; background: var(--tr); }
.ob-dots > i.on { width: 20px; background: var(--i); }
.flow { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 4px; color: var(--m); }
.fnode { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 78px; font-size: 11.5px; color: var(--m2); }
.obh { margin: 0; font-size: 24px; letter-spacing: -.02em; font-weight: 600; }
@media (min-width: 1024px) { .screen.full:has(.ob-top), .screen.welcome { margin: 0 auto; max-width: 480px; } }
.screen > .btn.wide, .narrow > .btn.wide, .pay-sheet > .btn.wide, .card > .btn.wide { flex: none; width: 100%; }
.ibar .track > i { display: block; height: 100%; border-radius: 4px; background: var(--dn); opacity: .8; }
.facts { display: flex; flex-direction: column; gap: 8px; }
.frow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.frow > span { color: var(--m2); }
.frow > b { font-weight: 600; text-align: right; }

/* --- review: export copy fallback --- */
.copy-box { width: 100%; min-height: 180px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.4; white-space: pre; overflow: auto; box-sizing: border-box; }
.syncbar.bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dn) 40%, transparent); }
.card input.input[type=password] { background: var(--tile); border-radius: 12px; padding: 0 12px; min-height: 44px; width: 100%; box-sizing: border-box; }

/* --- bank SMS import (screens/import-sms.js) --- */
.sms-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
.sms-box { height: auto; min-height: 150px; padding: 10px 12px; resize: vertical; background: var(--b); line-height: 1.4; font-size: 13px; white-space: pre-wrap; box-sizing: border-box; }
.sms-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sms-acts .grow { flex: 1; }
.sms-out { gap: 10px; }
.sms-step { font-size: 15px; font-weight: 600; margin-top: 6px; scroll-margin-top: 12px; }
.sms-row { width: 100%; text-align: left; }
.sms-row.off { opacity: .45; }
.sms-row.off .amt { text-decoration: line-through; text-decoration-thickness: 1px; }
.sms-found .rrow .sms-bal { font-size: 13.5px; font-weight: 600; white-space: nowrap; margin-right: 4px; }
.sms-um select { margin-top: 8px; }
.sms-ign-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sms-ign-list > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sms-ign-list b { font-size: 12.5px; font-weight: 600; }
.sms-ign-list span { font-size: 12px; color: var(--m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-out .btn.wide { flex: none; width: 100%; margin-top: 4px; }