/* ═══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — obsidian / teal "precision ledger"
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0B1116;            /* obsidian base            */
  --surface:#121A21;       /* card surface             */
  --surface-2:#18222B;     /* elevated / inputs        */
  --surface-3:#1F2B35;     /* hover / segmented active */
  --border:#243039;        /* hairline borders         */
  --border-soft:#1B262E;
  --text:#E8EEF2;          /* primary text             */
  --muted:#8597A3;         /* secondary text           */
  --faint:#5A6B76;         /* tertiary / placeholders  */

  --teal:#2DD4BF;          /* primary accent           */
  --cyan:#38BDF8;          /* secondary accent         */
  --green:#34D399;         /* income / positive        */
  --coral:#FB7185;         /* expense / over-limit      */
  --amber:#FBBF24;         /* near-limit warning       */
  --indigo:#818CF8;        /* tertiary data series     */

  --green-dim:rgba(52,211,153,.14);
  --coral-dim:rgba(251,113,133,.14);
  --teal-dim:rgba(45,212,191,.12);
  --amber-dim:rgba(251,191,36,.16);

  --radius:16px;
  --radius-sm:11px;
  --shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px -12px rgba(0,0,0,.6);
  --font:'Inter','Assistant',system-ui,'Segoe UI','Arial Hebrew',Arial,sans-serif;
  --maxw:1140px;        /* overall app width — lower this if you want a narrower canvas */
  --navh:66px;
}
[data-theme="light"]{
  --bg:#EEF2F4;
  --surface:#FFFFFF;
  --surface-2:#F1F5F7;
  --surface-3:#E4EBEF;
  --border:#D8E0E5;
  --border-soft:#E6ECEF;
  --text:#162028;
  --muted:#5A6B76;
  --faint:#94A4AE;
  --shadow:0 1px 2px rgba(20,30,40,.06), 0 8px 20px -14px rgba(20,30,40,.25);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-variant-numeric:tabular-nums;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.num{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}

/* ── App shell ─────────────────────────────────────────────── */
#app{max-width:var(--maxw);margin:0 auto;min-height:100vh;padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom));position:relative}

/* ── Header ────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,var(--bg) 72%,transparent);
  padding:14px 16px 8px;
}
.titlebar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#demoBanner{
  display:none;margin-bottom:10px;padding:6px 12px;border-radius:10px;text-align:center;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#1a1206;background:var(--amber,#FBBF24);
}
#fsReconnect{
  display:none;margin-bottom:10px;padding:6px 12px;border-radius:10px;
  font-size:12.5px;font-weight:600;color:#04211d;background:var(--teal,#2DD4BF);
  align-items:center;justify-content:center;gap:10px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.02em}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal)}
.iconbtn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;
  transition:.15s;
}
.iconbtn:hover{color:var(--text);border-color:var(--teal);background:var(--surface-2)}
.iconbtn svg{width:19px;height:19px}
#btnQuickAdd{border-color:var(--teal);color:var(--teal)}

/* segmented scope toggle */
.segmented{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:3px;gap:3px;margin-bottom:9px}
.segmented button{
  flex:1;border:0;background:transparent;color:var(--muted);font-family:inherit;font-weight:600;
  font-size:13.5px;padding:8px 4px;border-radius:9px;cursor:pointer;transition:.15s;
}
.segmented button.active{background:var(--surface-3);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.segmented button[data-scope="business"].active{color:var(--cyan)}
.segmented button[data-scope="personal"].active{color:var(--teal)}

/* period chips */
.period-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.period-row::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;border:1px solid var(--border);background:var(--surface);color:var(--muted);
  font-family:inherit;font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.chip.active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)}
.custom-range{display:none;gap:8px;margin-top:9px}
.custom-range.show{display:flex}
.custom-range label{flex:1;font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:4px}

/* ── Views ─────────────────────────────────────────────────── */
main{padding:4px 16px 24px}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view-title{font-size:13px;color:var(--muted);font-weight:600;margin:18px 2px 10px;display:flex;align-items:center;justify-content:space-between}
.view-title:first-child{margin-top:6px}

/* ── Cards & primitives ────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card + .card{margin-top:12px}
.row{display:flex;align-items:center;gap:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.tiny{font-size:11.5px}
.label{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.01em}

/* balance hero */
.hero{background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.hero .label{margin-bottom:6px}
.balance{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.balance.pos{color:var(--text)}
.balance.neg{color:var(--coral)}
.hero-sub{display:flex;gap:18px;margin-top:14px}
.hero-sub .item{flex:1}
.hero-sub .v{font-size:17px;font-weight:700;margin-top:2px}
.v.income{color:var(--green)} .v.expense{color:var(--coral)}

.stat{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:13px 14px}
.stat .label{margin-bottom:5px}
.stat .v{font-size:20px;font-weight:700;letter-spacing:-.02em}

/* buttons */
.btn{font-family:inherit;font-weight:600;font-size:14px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:11px 14px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn:hover{border-color:var(--teal);background:var(--surface-3)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#06231F}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--coral);border-color:transparent;background:var(--coral-dim)}
.btn.danger:hover{border-color:var(--coral)}
.btn.sm{padding:8px 11px;font-size:12.5px;border-radius:9px}
.btn.block{width:100%}
.btn svg{width:16px;height:16px}

/* inputs */
input,select,textarea{font-family:inherit;font-size:15px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:11px 12px;width:100%;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim)}
/* checkboxes must NOT animate the focus glow: the .15s transition adds an extra
   layout-shift frame on the first click after a re-render (visible flicker in Chrome) */
input[type="checkbox"]{transition:none}
input::placeholder{color:var(--faint)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238597A3' stroke-width='2'><path d='M3 5l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:left 12px center;padding-left:34px}
.field{display:flex;flex-direction:column;gap:6px}
.field > .label{margin-bottom:0}
.chk{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:0 12px;cursor:pointer;align-self:end;height:44px}
.chk input{width:auto;accent-color:var(--teal);width:17px;height:17px}

/* income/expense toggle in quick add */
.ie-toggle{display:flex;gap:8px}
.ie-toggle button{flex:1;padding:12px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
/* generic active state (e.g. the subscription cycle toggle, data-cyc); the data-ie rules below
   are more specific and override it for the income/expense toggle */
.ie-toggle button.active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)}
.ie-toggle button.active[data-ie="expense"]{background:var(--coral-dim);border-color:var(--coral);color:var(--coral)}
.ie-toggle button.active[data-ie="income"]{background:var(--green-dim);border-color:var(--green);color:var(--green)}

/* transaction list */
.tx{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border-soft)}
.tx:last-child{border-bottom:0}
.tx .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;font-size:15px;font-weight:700}
.tx .ic.exp{background:var(--coral-dim);color:var(--coral)}
.tx .ic.inc{background:var(--green-dim);color:var(--green)}
.tx .meta{flex:1;min-width:0}
.tx .meta .t1{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .meta .t2{font-size:11.5px;color:var(--muted);margin-top:1px;display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:10.5px;padding:1px 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.tag.biz{color:var(--cyan);border-color:rgba(56,189,248,.3)}
.tag.per{color:var(--teal);border-color:rgba(45,212,191,.3)}
.tx .amt{font-weight:700;font-size:15px;flex:0 0 auto;white-space:nowrap}
.amt.inc{color:var(--green)} .amt.exp{color:var(--text)}
.edit,.del{cursor:pointer;flex:0 0 auto;transition:.15s;padding:6px;color:var(--faint);display:inline-grid;place-items:center}
.edit:hover{color:var(--teal)}
.del:hover{color:var(--coral)}
.tx .edit,.tx .del{opacity:.5}
.tx:hover .edit,.tx:hover .del{opacity:1}

/* filters */
.filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.filters input,.filters select{flex:1;min-width:120px;font-size:13px;padding:9px 11px}

/* insights tab: summary stats, anomaly rows, category comparison table */
.ins-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:6px}
.ins-delta{font-size:12px;font-weight:700;display:inline-block;margin-top:4px}
.ins-delta.good{color:var(--green)} .ins-delta.bad{color:var(--coral)} .ins-delta.flat{color:var(--faint);font-weight:600}
.ins-item{display:flex;align-items:baseline;gap:8px;padding:9px 4px;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.ins-item:last-child{border-bottom:0}
.ins-item .tag{flex:0 0 auto}
.ins-row{display:grid;grid-template-columns:1fr 90px 90px 130px;gap:8px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.ins-row:last-child{border-bottom:0}
.ins-row .c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ins-row.ins-head{font-size:11.5px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
.ins-row .ins-delta{margin-top:0}
/* narrow screens: drop the "previous month" column (the delta already tells the story)
   so the category name keeps readable width */
@media(max-width:480px){
  .ins-row{grid-template-columns:1fr 80px 112px;font-size:12.5px}
  .ins-row > :nth-child(3){display:none}
}

/* transactions summary strip — income + expenses share the top row, net breaks below */
.tx-summary{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:13px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.tx-summary:empty{display:none}
.txs-row{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.txs-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.txs-lbl{font-size:11.5px;color:var(--muted);font-weight:600}
.txs-val{font-weight:700;font-size:16px}
.txs-val.inc{color:var(--green)} .txs-val.exp{color:var(--coral)}
.txs-net{border-top:1px solid var(--border-soft);margin-top:11px;padding-top:11px;display:flex;flex-direction:column;align-items:center;gap:2px}
.txs-net .txs-val{font-size:23px;letter-spacing:-.02em}

/* progress bars (budget ceilings) */
.bar-wrap{margin-top:9px}
.bar-head{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.bar-head .cat{font-weight:600}
.bar-head .nums{color:var(--muted)}
.bar{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--teal);transition:width .4s}
.bar i.warn{background:var(--amber)}
.bar i.over{background:var(--coral)}
.bar-row.over .nums{color:var(--coral)}
.bar-row.warn .nums{color:var(--amber)}
.bar-row + .bar-row{margin-top:13px}
.flag{font-size:10px;font-weight:700;padding:1px 7px;border-radius:6px;margin-inline-start:6px}
.flag.warn{background:var(--amber-dim);color:var(--amber)}
.flag.over{background:var(--coral-dim);color:var(--coral)}

/* chart */
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px}
.legend .li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.chart-wrap{display:flex;align-items:center;gap:6px}
.empty{text-align:center;color:var(--faint);font-size:13px;padding:26px 10px}

/* recurring / card rows */
.lrow{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--border-soft)}
.lrow:last-child{border-bottom:0}
.lrow .meta{flex:1;min-width:0}
.lrow .meta .t1{font-weight:600;font-size:14.5px}
.lrow .meta .t2{font-size:11.5px;color:var(--muted)}
.lrow .amt{font-weight:700}
.cardface{background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:14px;padding:15px;position:relative;overflow:hidden}
.cardface::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,var(--teal-dim),transparent 70%);pointer-events:none}
.cardface .nm{font-weight:700;font-size:15px}
.cardface .proj{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:10px}
.cardface .sub{font-size:11.5px;color:var(--muted);margin-top:2px}

/* cards tab: summary, color accent, utilization caption, accordion, swatches
   (the utilization BAR reuses the existing .bar / .bar i / .bar i.warn / .bar i.over) */
.cardsum{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:13px}
.cardsum .t{font-weight:700;color:var(--text)}
.cardface{border:1.5px solid var(--card-accent,var(--border))}
.cardface .nm{display:flex;align-items:baseline;min-width:0;flex:1;overflow:hidden}
.cardface .nm .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cardface .last4{flex:0 0 auto;font-size:11.5px;color:var(--faint);letter-spacing:.06em;margin-inline-start:6px}
.cardface.clickable{cursor:pointer}
.utilcap{font-size:11px;color:var(--muted);margin-top:10px;margin-bottom:4px}
.utilcap.unset{color:var(--faint)}
.cardtxlist{margin-top:12px;border-top:1px solid var(--border);padding-top:8px}
.cardtx{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:4px 0;color:var(--muted)}
.cardtx .a{color:var(--text);font-weight:600;white-space:nowrap}
.cardtxlist .empty{color:var(--faint);font-size:12px;padding:6px 0;text-align:start}
.cswatches{display:flex;flex-wrap:wrap;gap:8px}
.cswatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.cswatch.sel{border-color:var(--text);box-shadow:0 0 0 2px var(--bg)}
.pstar{color:var(--amber);font-size:12px;flex:0 0 auto}
/* dashboard card widget */
/* fill the hero's height via flexbox (NOT height:100% — a %-height in an auto grid track
   triggers an intrinsic-sizing pass that paints an oversized frame for one tick on re-render) */
#cardWidget{align-self:stretch;display:flex;flex-direction:column}
#cardWidget > .card{flex:1;min-height:0;box-sizing:border-box}
.cw-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.cw-nav{display:flex;align-items:center;gap:6px}
.cw-month{font-weight:600;font-size:13px;min-width:66px;text-align:center}
.cw-select{width:150px;flex:0 0 auto;padding:5px 8px 5px 30px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-big{font-size:28px;font-weight:700;color:var(--cyan);letter-spacing:-.02em}
.cw-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.cw-toggle input{width:auto;accent-color:var(--teal)}
.cw-toggle:has(input:disabled){opacity:.45;cursor:default}
.cw-estline{font-size:12.5px;color:var(--cyan);font-weight:600;margin-top:4px}
.cw-estline:empty{display:none}
.cwlist{margin-top:10px;border-top:1px solid var(--border);padding-top:6px}
.cwrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;padding:6px;border-radius:9px;cursor:pointer;transition:.12s}
.cwrow:hover{background:var(--surface-2)}
.cwrow .nm{display:flex;align-items:center;gap:8px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cwrow .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.cwrow .a{font-weight:600;flex:0 0 auto}

/* forecast table */
.fc{width:100%;border-collapse:collapse;font-size:13px}
.fc th{text-align:start;font-size:11px;color:var(--muted);font-weight:600;padding:7px 6px;border-bottom:1px solid var(--border)}
.fc td{padding:9px 6px;border-bottom:1px solid var(--border-soft);font-weight:600}
.fc td.inc{color:var(--green)} .fc td.exp{color:var(--coral)}
.fc td.bal.neg{color:var(--coral)}
.fc td.bal.warn-bal{color:var(--amber)}
.odbar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:13px}
.odbar i{display:block;height:100%;border-radius:999px;transition:width .4s}
.odrow{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-top:7px}
.fc tr:last-child td{border-bottom:0}

/* settings chips list */
.chiplist{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.catchip{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:6px 6px 6px 12px;font-size:13px}
.catchip button{border:0;background:transparent;color:var(--faint);cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:14px}
.catchip button:hover{color:var(--coral);background:var(--coral-dim)}
.catchip .catmove{font-size:12px}
.catchip .catmove:hover{color:var(--teal);background:var(--teal-dim)}
.catchip .catmove:disabled{opacity:.3;cursor:default;color:var(--faint);background:transparent}

/* bottom nav */
nav{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  height:calc(var(--navh) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(11,17,22,.86);backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  display:flex;max-width:var(--maxw);margin:0 auto;
}
[data-theme="light"] nav{background:rgba(255,255,255,.9)}
nav button{flex:1;border:0;background:transparent;color:var(--faint);font-family:inherit;font-size:10.5px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:.15s;padding-top:2px}
nav button svg{width:22px;height:22px}
nav button.active{color:var(--teal)}

/* modal */
.modal-bg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);display:none;align-items:flex-end;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:20px 20px 0 0;width:100%;max-width:var(--maxw);max-height:90vh;overflow-y:auto;padding:18px 16px calc(20px + env(safe-area-inset-bottom));animation:up .25s ease}
@media(min-width:560px){.modal-bg{align-items:center}.modal{border-radius:20px}}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.modal h3{font-size:17px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.modal .stack > *{margin-bottom:11px}

/* toast */
#toast{position:fixed;bottom:calc(var(--navh) + 18px);left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface-3);border:1px solid var(--border);color:var(--text);padding:11px 16px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:80;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow);max-width:90%}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-color:var(--coral);color:var(--coral)}
.hidden{display:none!important}
hr.sep{border:0;border-top:1px solid var(--border-soft);margin:14px 0}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE / WIDE LAYOUT — spreads content across the browser on desktop
   while keeping the single-column phone layout intact on narrow screens.
   ═══════════════════════════════════════════════════════════════════════ */
#nav{max-width:640px}                 /* keep bottom nav centred, not stretched */
.modal{max-width:560px}               /* dialogs stay a comfortable reading width */

/* grouped blocks used by the dashboard / settings grids */
.tile > .view-title:first-child{margin-top:0}
.dash-grid > .tile + .tile,
.set-grid  > .tile + .tile{margin-top:14px}
#cardsList{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-items:start}
#cardsList .card{margin-top:0}

@media(min-width:880px){
  main{padding:8px 22px 30px}

  /* header: scope toggle + period side by side instead of stacked */
  .controls{display:flex;gap:18px;align-items:flex-start}
  #scopeToggle{flex:0 0 300px;margin-bottom:0}
  .period-wrap{flex:1;min-width:0}

  /* dashboard → two-column grid */
  .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .dash-grid > .tile + .tile{margin-top:0}
  .tile.full{grid-column:1 / -1}

  /* transactions summary → card-like, centered, not full-bleed on desktop */
  .tx-summary{max-width:440px;margin-inline:auto;margin-bottom:16px}


  /* settings → auto-fitting tiles */
  .set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;align-items:start}
  .set-grid > .tile + .tile{margin-top:0}
  .set-grid .view-title:first-child{margin-top:2px}
}

/* ── Adaptive navigation: vertical sidebar on desktop, bottom bar on mobile ── */
#siderail{display:none}
#siderail button{
  display:flex;align-items:center;gap:12px;width:100%;
  border:0;background:transparent;color:var(--muted);
  font-family:inherit;font-size:14.5px;font-weight:600;
  padding:11px 13px;border-radius:11px;cursor:pointer;transition:.15s;text-align:start;
}
#siderail button svg{width:20px;height:20px;flex:0 0 auto}
#siderail button:hover{background:var(--surface-2);color:var(--text)}
#siderail button.active{background:var(--teal-dim);color:var(--teal)}
#siderail .spacer{margin-top:auto}

@media(min-width:880px){
  #shell{display:flex;max-width:1240px;margin:0 auto;align-items:flex-start}
  #siderail{
    display:flex;flex-direction:column;flex:0 0 218px;
    position:sticky;top:0;height:100vh;padding:18px 12px;gap:3px;
    border-inline-end:1px solid var(--border);
  }
  #app{max-width:none;margin:0;flex:1;min-width:0;padding-bottom:28px}
  #nav{display:none}
  #btnSettings{display:none}   /* settings lives in the sidebar on desktop — drop the duplicate gear */
  #btnQuickAdd{display:grid}   /* quick-add stays in the top bar on desktop */
  #toast{bottom:24px}
}

/* ── dashboard renewal-alerts strip ── */
#renewAlerts .card{padding:12px 14px}
.alertrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--border)}
.alertrow:last-child{border-bottom:0}
.alertrow .nm{font-weight:600;min-width:110px}
.alertrow .pk{font-size:13px;color:var(--muted)}
.alertrow .pk b{color:var(--text)}

/* ── subscriptions: cancelled rows ── */
.lrow.cancelled{opacity:.5}

/* ── statement import: mapping + review tables ── */
.impTable{width:100%;border-collapse:collapse;font-size:12px;direction:ltr}
.impTable td,.impTable th{border:1px solid var(--border);padding:4px 6px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impRow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.impRow:last-child{border-bottom:0}
.impRow .d{color:var(--muted);font-size:12px;min-width:74px}
.impRow .ds{flex:1;min-width:120px;font-size:13px}
.impRow select{max-width:130px;padding:6px 8px;font-size:12px}
.impChip{font-size:10.5px;border-radius:999px;padding:2px 8px;font-weight:700}
.impChip.new{background:var(--green-dim);color:var(--green)}
.impChip.dup{background:var(--amber-dim);color:var(--amber)}
.impChip.card{background:var(--teal-dim);color:var(--teal)}
.impChip.done{background:var(--surface-3);color:var(--faint)}
.modal.wide{max-width:760px}