/* ============================================================================
 *  Digital Space — money.css (v097)
 *  Styles for the private Money workspace (js/money.js). Uses the app's own
 *  tokens (--card, --ink, --muted, --line, --soft, --brand, --accent) so it
 *  follows every theme, Light/Dark and the Glass look.
 * ========================================================================== */
:root{
  --mon-inc:#2563C9; --mon-exp:#D9483B; --mon-ok:#2E8B57; --mon-warn:#B7791F;
  --mon-inc-bg:color-mix(in srgb,var(--mon-inc) 12%,transparent);
  --mon-exp-bg:color-mix(in srgb,var(--mon-exp) 12%,transparent);
}
body.dark{ --mon-inc:#7AA7F0; --mon-exp:#F07B6E; --mon-ok:#6FCF97; --mon-warn:#E9B454; }
:root{ --mon-emi:#6C5CE7; --mon-inv:#F5A524; --mon-spend:#FF6B6B; --mon-left:#20C997; }
body.dark{ --mon-emi:#9D8CFF; --mon-inv:#FFC046; --mon-spend:#FF8787; --mon-left:#38D9A9; }

#view-money{ position:relative; }
.mon-wrap{ display:flex; flex-direction:column; gap:14px; min-width:0; padding-bottom:40px; }
.mon-wrap .panel{ margin-bottom:0; }
.mon-panel{ min-width:0; }
.mon-muted{ color:var(--muted); font-size:12px; }
.mon-wrap .inc, .mon-amt.inc{ color:var(--mon-inc)!important; }
.mon-wrap .exp, .mon-amt.exp{ color:var(--mon-exp)!important; }
.mon-amt.tr{ color:var(--muted); }
.cw-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* header row: month navigation + actions */
.mon-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mon-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.mon-mnav{ display:flex; align-items:center; gap:6px; }
.mon-mnav b{ font-size:17px; font-weight:600; min-width:150px; text-align:center; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.mon-ib{ width:36px; height:36px; display:inline-grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; padding:0; }
.mon-ib:hover{ border-color:var(--brand2); }
.mon-ib .fi{ width:18px; height:18px; }
.mon-ib.sm{ width:30px; height:30px; }
.mon-ib.sm .fi{ width:15px; height:15px; }
.mon-chip{ border:1px solid var(--line); background:var(--soft); color:var(--ink); border-radius:999px; padding:6px 11px; font:inherit; font-size:12px; cursor:pointer; }
.mon-add .fi{ width:15px; height:15px; margin-right:5px; }
.mon-wrap .btn .fi{ width:15px; height:15px; margin-right:5px; }
.mon-lede{ margin:-4px 0 0; font-size:14px; color:var(--muted); }
.mon-lede.bad{ color:var(--mon-exp); }
.mon-lede.good{ color:var(--mon-ok); }

/* KPI row */
.mon-kpis{ grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))!important; margin-bottom:0!important; }
.mon-kpi{ display:flex; flex-direction:column; min-width:0; }
.mon-kpi[data-act]{ cursor:pointer; }
.mon-kpi .kt{ font-size:12px; color:var(--muted); }
html body #view-money .mon-kpi .kv{ font-size:clamp(22px,2.3vw,34px)!important; padding-top:14px; white-space:nowrap; overflow:visible; letter-spacing:-.03em!important; }
html body #view-money .mon-kpi:not([data-act])::after{ display:none; }
html body #view-money .mon-kpi{ min-height:0; }
.mon-kpi .kd{ font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.35; }
html body #view-money .mon-left.bad .kv{ color:var(--mon-exp)!important; }
html body #view-money .mon-left.good .kv{ color:var(--mon-ok)!important; }

/* panels */
.mon-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:14px; }
.mon-ph{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.mon-ph h3{ margin:0!important; }
.mon-link{ background:none; border:0; color:var(--brand2); font:inherit; font-size:12.5px; cursor:pointer; padding:4px 0; }
.mon-empty{ text-align:center; padding:22px 10px; color:var(--muted); font-size:13px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.mon-empty p{ margin:0; }

/* bills (EMIs + investments due) */
.mon-bills{ display:flex; flex-direction:column; }
.mon-wrap[data-sec="overview"] .mon-bills{ max-height:520px; overflow-y:auto; padding-right:4px; scrollbar-width:thin; }
.mon-bill{ display:flex; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--line); }
.mon-bill:last-child{ border-bottom:0; }
.mon-bill-c{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mon-bill-c b{ font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-bill-c small{ color:var(--muted); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-bill-a{ font-variant-numeric:tabular-nums; font-weight:600; font-size:13.5px; white-space:nowrap; }
.mon-bill.paid .mon-bill-c b, .mon-bill.paid .mon-bill-a{ color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
.mon-tick{ width:28px; height:28px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--line); background:transparent; color:transparent; display:grid; place-items:center; cursor:pointer; padding:0; transition:background .15s,border-color .15s; }
.mon-tick .fi{ width:15px; height:15px; }
.mon-tick:hover{ border-color:var(--mon-ok); color:color-mix(in srgb,var(--mon-ok) 50%,transparent); }
.mon-tick.on{ background:var(--mon-ok); border-color:var(--mon-ok); color:#fff; }

/* top categories mini bars */
.mon-topcats{ display:flex; flex-direction:column; gap:9px; }
.mon-tc{ display:grid; grid-template-columns:minmax(0,1.2fr) 1.5fr auto; align-items:center; gap:10px; font-size:13px; }
.mon-tc-l{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-tc-b{ height:8px; background:var(--soft); border-radius:99px; overflow:hidden; }
.mon-tc-b i{ display:block; height:100%; border-radius:99px; }
.mon-tc b{ font-variant-numeric:tabular-nums; font-weight:600; }

/* transaction rows */
.mon-txlist{ display:flex; flex-direction:column; }
.mon-tx{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 4px; background:none; border:0; border-bottom:1px solid var(--line); color:var(--ink); font:inherit; text-align:left; cursor:pointer; border-radius:0; }
.mon-tx:last-child{ border-bottom:0; }
.mon-tx:hover{ background:var(--soft); }
.mon-tx-e{ width:34px; height:34px; flex-shrink:0; border-radius:11px; background:var(--soft); display:grid; place-items:center; font-size:17px; }
.mon-tx-c{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mon-tx-c b{ font-weight:600; font-size:13.5px; }
.mon-tx-c small{ color:var(--muted); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-amt{ font-variant-numeric:tabular-nums; font-weight:600; font-size:13.5px; white-space:nowrap; }
.mon-txd{ display:flex; flex-direction:column; }
.mon-txd > span{ font-size:11px; color:var(--muted); padding-top:8px; }

/* outlook chart */
.mon-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.mon-legend span{ display:inline-flex; align-items:center; gap:6px; }
.mon-sw{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.mon-sw.spend{ background:var(--mon-spend); }
.mon-sw.emi{ background:var(--mon-emi); }
.mon-sw.inv{ background:var(--mon-inv); }
.mon-sw.line{ height:0; border-top:2px dashed var(--muted); border-radius:0; }
.mon-sw.bad{ background:var(--mon-exp); border-radius:50%; width:7px; height:7px; }
.mon-outlook{ display:block; max-height:280px; overflow:visible; }
.mon-grid{ stroke:var(--line); stroke-width:1; }
.mon-axis{ fill:var(--muted); font-size:11px; font-family:inherit; }
.mon-incline{ stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 4; }
.mon-incl{ font-weight:600; }
.mon-seg-spend{ fill:var(--mon-spend); }
.mon-seg-emi{ fill:var(--mon-emi); }
.mon-seg-inv{ fill:var(--mon-inv); }
.mon-dot-bad{ fill:var(--mon-exp); }
.mon-bar{ cursor:pointer; outline:none; }
.mon-bar rect[class^="mon-seg"]{ opacity:.78; transition:opacity .15s; }
.mon-bar:hover rect[class^="mon-seg"], .mon-bar:focus rect[class^="mon-seg"], .mon-bar.on rect[class^="mon-seg"]{ opacity:1; }
.mon-bar.on text{ fill:var(--ink); font-weight:700; }

/* tabs */
.mon-tabs{ display:flex; gap:4px; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:4px; width:max-content; max-width:100%; overflow-x:auto; }
.mon-tab{ border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px; padding:7px 15px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.mon-tab.on{ background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* income / expense / total strip */
.mon-sumbar{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.mon-sumbar > div{ padding:12px 10px; text-align:center; display:flex; flex-direction:column; gap:3px; min-width:0; }
.mon-sumbar > div + div{ border-left:1px solid var(--line); }
.mon-sumbar span{ font-size:11.5px; color:var(--muted); }
.mon-sumbar b{ font-size:16px; font-variant-numeric:tabular-nums; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* daily view */
.mon-search input{ width:100%; box-sizing:border-box; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; padding:10px 14px; font:inherit; font-size:14px; }
.mon-day{ padding:12px 16px!important; }
.mon-day-h{ display:flex; align-items:center; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.mon-day-n{ font-size:24px; font-weight:600; min-width:30px; font-variant-numeric:tabular-nums; }
.mon-day-w{ display:flex; flex-direction:column; font-size:12px; background:var(--soft); border-radius:6px; padding:2px 7px; line-height:1.25; margin-right:auto; }
.mon-day-w small{ color:var(--muted); font-size:10.5px; }
.mon-day-h .mon-amt{ font-size:13px; }

/* calendar */
.mon-cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.mon-dow{ font-size:11px; color:var(--muted); text-align:center; padding:4px 0; }
.mon-cd{ min-height:64px; border:1px solid var(--line); background:var(--card); border-radius:10px; padding:5px; display:flex; flex-direction:column; align-items:flex-start; gap:1px; color:var(--ink); font:inherit; cursor:pointer; min-width:0; overflow:hidden; }
.mon-cd.blank{ border:0; background:transparent; cursor:default; }
.mon-cd.today{ box-shadow:inset 0 0 0 2px var(--brand2); }
.mon-cd.sel{ background:var(--soft); border-color:var(--brand2); }
.mon-cdn{ font-size:12px; font-weight:600; }
.mon-cdi, .mon-cde{ font-size:10.5px; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.mon-cdi{ color:var(--mon-inc); }
.mon-cde{ color:var(--mon-exp); }
.mon-calnote{ margin:12px 0 0; }

/* tables */
.mon-tablewrap{ overflow-x:auto; }
html body #view-money table.mon-table{ width:100%; min-width:0!important; background:transparent!important; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; box-shadow:none!important; border:0!important; }
html body #view-money .mon-table th{ background:transparent!important; position:static; }
.mon-table th{ text-align:left; font-weight:500; color:var(--muted); font-size:11.5px; padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.mon-table td{ padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.mon-table .r{ text-align:right; white-space:nowrap; }
.mon-table tfoot td{ font-weight:700; border-bottom:0; }
.mon-table tbody tr[data-act]{ cursor:pointer; }
.mon-table tbody tr[data-act]:hover td{ background:var(--soft); }
.mon-table tr.now td:first-child{ font-weight:700; }
.mon-table tr.lump td{ color:var(--mon-warn); }
.mon-table tr.done td{ color:var(--muted); }
.mon-pill{ display:inline-block; border:1px solid currentColor; border-radius:99px; padding:0 6px; font-size:10px; }

/* summary */
.mon-kv{ display:flex; flex-direction:column; }
.mon-kv > div{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.mon-kv > div:last-child{ border-bottom:0; }
.mon-kv > div.tot{ font-weight:700; font-size:15px; }
.mon-kv span{ color:var(--muted); }
.mon-kv b{ font-variant-numeric:tabular-nums; }

/* stats */
.mon-seg2{ display:grid; grid-template-columns:1fr 1fr; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:4px; gap:4px; }
.mon-seg2 button{ border:0; background:transparent; color:var(--muted); font:inherit; font-size:13.5px; padding:9px 8px; border-radius:9px; cursor:pointer; font-variant-numeric:tabular-nums; }
.mon-seg2 button.on{ background:var(--card); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.mon-seg2 button.on.inc{ color:var(--mon-inc); box-shadow:inset 0 -2px 0 var(--mon-inc); }
.mon-seg2 button.on.exp{ color:var(--mon-exp); box-shadow:inset 0 -2px 0 var(--mon-exp); }
.mon-stats{ display:grid; grid-template-columns:minmax(200px,280px) 1fr; gap:22px; align-items:center; }
.mon-pie{ max-width:280px; margin:0 auto; width:100%; }
.mon-donut path{ stroke:var(--card); stroke-width:1.5; transition:opacity .15s; }
.mon-donut path:hover{ opacity:.85; }
.mon-donut-t{ fill:var(--ink); font-size:21px; font-weight:600; font-family:inherit; }
.mon-donut-s{ fill:var(--muted); font-size:12px; font-family:inherit; }
.mon-catlist{ display:flex; flex-direction:column; min-width:0; }
.mon-cat{ display:flex; align-items:center; gap:11px; padding:9px 6px; border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer; text-align:left; border-radius:0; }
.mon-cat:last-child{ border-bottom:0; }
.mon-cat:hover, .mon-cat.on{ background:var(--soft); }
.mon-pct{ min-width:42px; text-align:center; color:#fff; font-size:11.5px; font-weight:700; border-radius:6px; padding:3px 4px; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.mon-cat-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-cat b{ font-variant-numeric:tabular-nums; font-weight:600; }

/* budget */
.mon-bud-total{ height:10px; background:var(--soft); border-radius:99px; overflow:hidden; margin:0 0 14px; }
.mon-bud-total i{ display:block; height:100%; background:var(--mon-ok); border-radius:99px; }
.mon-bud-total.over i{ background:var(--mon-exp); }
.mon-buds{ display:flex; flex-direction:column; }
.mon-bud{ display:grid; grid-template-columns:minmax(120px,1.1fr) 1.4fr auto 120px minmax(90px,auto); gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.mon-bud:last-child{ border-bottom:0; }
.mon-bud-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-bud-bar{ height:8px; background:var(--soft); border-radius:99px; overflow:hidden; }
.mon-bud-bar i{ display:block; height:100%; background:var(--mon-ok); border-radius:99px; }
.mon-bud.over .mon-bud-bar i{ background:var(--mon-exp); }
.mon-bud-s{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; text-align:right; }
.mon-bud-s small{ color:var(--muted); font-weight:400; }
.mon-bud-in input{ width:100%; box-sizing:border-box; border:1px solid var(--line); background:var(--soft); color:var(--ink); border-radius:8px; padding:6px 8px; font:inherit; font-size:13px; text-align:right; }
.mon-bud-r{ font-size:11.5px; color:var(--muted); text-align:right; white-space:nowrap; }
.mon-bud.over .mon-bud-r{ color:var(--mon-exp); font-weight:600; }
.mon-bud.nob .mon-bud-bar{ visibility:hidden; }

/* EMIs */
.mon-card + .mon-card{ margin-top:16px; }
.mon-card-h{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:4px 8px 6px; }
.mon-card-h b{ font-size:14px; }
.mon-card-h span{ color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.mon-ends{ display:flex; flex-direction:column; }
.mon-end{ display:grid; grid-template-columns:72px 1fr auto; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; align-items:baseline; }
.mon-end:last-child{ border-bottom:0; }
.mon-end span{ color:var(--muted); }
.mon-end em{ font-style:normal; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }

/* accounts & setup */
.mon-agroup + .mon-agroup{ margin-top:12px; }
.mon-agh{ font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin:6px 0 4px; }
.mon-acct{ display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding:10px 4px; border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer; text-align:left; border-radius:0; }
.mon-acct:hover{ background:var(--soft); }
.mon-acct small{ color:var(--muted); font-size:11px; margin-left:6px; }
.mon-acct b{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.mon-acct.tot{ cursor:default; font-weight:700; border-bottom:0; }
.mon-acct.tot:hover{ background:none; }
.mon-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.mon-chipc{ border:1px solid var(--line); background:var(--soft); color:var(--ink); border-radius:999px; padding:6px 11px; font:inherit; font-size:12.5px; cursor:pointer; }
.mon-chipc:hover{ border-color:var(--brand2); }
.mon-row-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* setup screen */
.mon-setup h3{ font-size:14px!important; text-transform:none!important; letter-spacing:0!important; color:var(--ink)!important; }
.mon-setup p{ font-size:13.5px; line-height:1.55; }
.mon-setup-opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; margin-top:14px; }
.mon-opt{ text-align:left; border:1px solid var(--line); background:var(--soft); color:var(--ink); border-radius:16px; padding:16px; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:6px; }
.mon-opt:hover{ border-color:var(--brand2); }
.mon-opt b{ font-size:15px; }
.mon-opt span{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.mon-pre{ background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:12px; font-size:11.5px; overflow:auto; white-space:pre; color:var(--ink); }

/* floating add button (phones) */
.mon-fab{ display:none; }

/* modal */
.mon-overlay{ z-index:320; }
.mon-modal{ width:560px!important; }
.mon-mbody{ grid-template-columns:1fr 1fr; }
.mon-f{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.mon-f.full{ grid-column:1/-1; }
.mon-f > label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.mon-f input, .mon-f select{ width:100%; box-sizing:border-box; min-height:40px; font-size:16px; }
.mon-bigin{ font-size:22px!important; font-weight:600; font-variant-numeric:tabular-nums; }
.mon-bad{ border-color:var(--mon-exp)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--mon-exp) 25%,transparent)!important; }
.mon-calc{ font-size:12.5px; color:var(--muted); min-height:1em; }
.mon-seg3{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:14px 20px 0; }
.mon-seg3 button{ border:1px solid var(--line); background:var(--card); color:var(--muted); font:inherit; font-size:14px; padding:9px; border-radius:10px; cursor:pointer; }
.mon-seg3 button.income.on{ color:var(--mon-inc); border-color:var(--mon-inc); background:var(--mon-inc-bg); font-weight:600; }
.mon-seg3 button.expense.on{ color:var(--mon-exp); border-color:var(--mon-exp); background:var(--mon-exp-bg); font-weight:600; }
.mon-seg3 button.transfer.on{ color:var(--ink); border-color:var(--ink); background:var(--soft); font-weight:600; }
.mon-catgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; max-height:236px; overflow-y:auto; padding:2px; }
.mon-cg{ display:flex; flex-direction:column; align-items:center; gap:3px; border:1px solid var(--line); background:var(--soft); color:var(--ink); border-radius:10px; padding:8px 4px; font:inherit; font-size:11.5px; cursor:pointer; text-align:center; line-height:1.2; min-width:0; }
.mon-cg span{ font-size:19px; }
.mon-cg.on{ border-color:var(--brand2); background:color-mix(in srgb,var(--brand2) 12%,var(--card)); box-shadow:inset 0 0 0 1px var(--brand2); font-weight:600; }

/* sidebar */
.money-btn-wrap{ margin-top:0; }
.mon-back{ display:block; }

/* phones & tablets */
@media (max-width:860px){
  body[data-view="money"] .waq-fab{ display:none!important; }
  .mon-fab{ display:grid; place-items:center; position:fixed; right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(118px + env(safe-area-inset-bottom,0px));
    width:56px; height:56px; border-radius:50%; border:0; background:var(--mon-exp); color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.25); z-index:120; cursor:pointer; }
  .mon-fab .fi{ width:26px; height:26px; stroke-width:2.2; }
  .mon-head .mon-acts .mon-add{ display:none; }
  html body #view-money .mon-kpis{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; }
  html body #view-money .mon-kpis > .mon-kpi:first-child{ grid-column:1/-1; }
  html body #view-money .mon-kpi{ padding:14px 14px 12px!important; min-height:0!important; }
  html body #view-money .mon-kpi .kt{ font-size:12px!important; padding-right:30px; }
  html body #view-money .mon-kpi::after{ width:24px; height:24px; top:12px; right:12px; background-size:11px; }
  .mon-mnav b{ min-width:0; font-size:16px; }
  html body #view-money .mon-kpi .kv{ font-size:24px!important; padding-top:8px; }
  .mon-stats{ grid-template-columns:1fr; }
  .mon-pie{ max-width:230px; }
  .mon-bud{ grid-template-columns:1fr 100px; grid-template-areas:"n in" "bar bar" "s r"; row-gap:6px; }
  .mon-bud-n{ grid-area:n; } .mon-bud-in{ grid-area:in; } .mon-bud-bar{ grid-area:bar; } .mon-bud-s{ grid-area:s; text-align:left; } .mon-bud-r{ grid-area:r; }
  .mon-hide-sm{ display:none; }
  .mon-cd{ min-height:52px; padding:4px 3px; border-radius:8px; }
  .mon-cdi, .mon-cde{ font-size:9.5px; }
  .mon-mbody{ grid-template-columns:1fr; }
  .mon-modal{ width:100%!important; }
  .mon-tc{ grid-template-columns:minmax(0,1fr) 70px auto; }
}
@media (max-width:420px){
  .mon-sumbar b{ font-size:14px; }
  .mon-day{ padding:10px 12px!important; }
  .mon-tx-e{ width:30px; height:30px; font-size:15px; }
  .mon-cal{ gap:2px; }
}
@media print{ .mon-fab, .mon-acts{ display:none!important; } }

body.dark .mon-link{ color:var(--tint2,#7CB58E); }

/* ── v097b: charts, picker, aligned tables ─────────────────────────────── */
.mon-chart{ display:block; overflow:visible; }
.mon-seg{ opacity:.9; transition:opacity .15s; }
.mon-bar:hover .mon-seg, .mon-bar:focus .mon-seg, .mon-bar.on .mon-seg{ opacity:1; }
.mon-bar.on > rect:first-of-type{ fill:color-mix(in srgb,var(--ink) 5%,transparent); }
.mon-val{ font-weight:700; fill:var(--ink)!important; }
.mon-area{ fill:color-mix(in srgb,var(--mon-emi) 18%,transparent); }
.mon-line{ fill:none; stroke:var(--mon-emi); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.mon-pt{ fill:var(--card); stroke:var(--mon-emi); stroke-width:2; }

/* split bar */
.mon-split{ display:flex; height:22px; border-radius:99px; overflow:hidden; gap:3px; background:var(--soft); }
.mon-split i{ display:block; min-width:4px; }
.mon-split-l{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:12px; font-size:12.5px; }
.mon-split-l span{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); }
.mon-split-l i{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.mon-split-l b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.mon-split-l small{ font-size:11px; color:var(--muted); }

/* what you pay next */
.mon-nexts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.mon-next{ text-align:left; border:1px solid var(--line); background:var(--soft); border-radius:14px; padding:12px 14px; font:inherit; color:var(--ink); cursor:pointer; display:flex; flex-direction:column; gap:3px; min-width:0; }
.mon-next:first-child{ background:color-mix(in srgb,var(--mon-emi) 12%,var(--card)); border-color:color-mix(in srgb,var(--mon-emi) 40%,transparent); }
.mon-next span{ font-size:12px; color:var(--muted); }
.mon-next b{ font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.mon-next small{ font-size:11px; color:var(--muted); }

/* income vs EMIs per person */
.mon-people{ display:flex; flex-direction:column; gap:14px; }
.mon-person-h{ display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:6px; }
.mon-person-h span{ font-weight:600; font-variant-numeric:tabular-nums; }
.mon-gauge{ height:12px; border-radius:99px; background:color-mix(in srgb,var(--mon-left) 22%,var(--soft)); overflow:hidden; }
.mon-gauge i{ display:block; height:100%; border-radius:99px; background:var(--mon-emi); }
.mon-gauge.over{ background:var(--soft); }
.mon-gauge.over i{ background:repeating-linear-gradient(45deg,var(--mon-exp) 0 6px,color-mix(in srgb,var(--mon-exp) 70%,#000) 6px 10px); }
.mon-person small{ display:block; margin-top:5px; font-size:11.5px; color:var(--muted); }

/* timeline of EMIs ending */
.mon-timeline{ position:relative; display:flex; flex-direction:column; }
.mon-timeline:before{ content:""; position:absolute; left:27px; top:8px; bottom:8px; width:2px; background:var(--line); }
.mon-tl{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:6px 0; position:relative; }
.mon-tl-d{ display:flex; flex-direction:column; align-items:center; background:var(--card); border:1.5px solid var(--line); border-radius:10px; padding:3px 0; font-size:10px; color:var(--muted); line-height:1.15; z-index:1; }
.mon-tl-d b{ font-size:13px; color:var(--ink); }
.mon-tl-c{ display:flex; flex-wrap:wrap; gap:5px; }
.mon-tl-c em{ font-style:normal; font-size:12px; border-left:3px solid; background:var(--soft); border-radius:6px; padding:3px 8px; }
.mon-tl-a{ font-size:12.5px; font-weight:600; color:var(--mon-ok); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mon-tl-a small{ color:var(--muted); font-weight:400; }

/* aligned tables (same columns for every card) */
html body #view-money table.mon-fixed{ table-layout:fixed; }
.mon-fixed col.c-item{ width:auto; }
.mon-fixed col.c-amt{ width:15%; }
.mon-fixed col.c-amt2{ width:16%; }
.mon-fixed col.c-per{ width:22%; }
.mon-fixed col.c-left{ width:9%; }
.mon-fixed col.c-rate{ width:9%; }
.mon-fixed td{ overflow:hidden; text-overflow:ellipsis; }
.mon-card{ border:1px solid var(--line); border-left:4px solid var(--cc,var(--brand2)); border-radius:14px; padding:4px 12px 6px; background:color-mix(in srgb,var(--cc,var(--brand2)) 4%,transparent); }
.mon-card + .mon-card{ margin-top:12px; }
.mon-card-h{ display:flex; align-items:baseline; gap:12px; padding:10px 0 4px; flex-wrap:wrap; }
.mon-card-h b{ font-size:14.5px; }
.mon-card-m{ color:var(--muted); font-size:12px; }
.mon-card-r{ margin-left:auto; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; color:var(--cc,var(--ink)); }
.mon-card-r small{ color:var(--muted); font-weight:400; font-size:12px; }
.mon-card .mon-table td:last-child, .mon-card .mon-table th:last-child{ padding-right:4px; }
.mon-item{ display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-sub{ display:block; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-tag{ display:inline-block; font-size:10.5px; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:99px; padding:0 7px; margin:3px 4px 0 0; }
.mon-tag.lump{ color:var(--mon-warn); border-color:currentColor; background:transparent; }
.mon-prog{ display:block; height:4px; border-radius:99px; background:var(--soft); margin-top:6px; overflow:hidden; max-width:180px; }
.mon-prog i{ display:block; height:100%; background:var(--cc,var(--mon-ok)); border-radius:99px; }
.mon-table td small{ font-weight:400; color:var(--muted); font-size:11px; }
.mon-table tr.lump td{ color:inherit; }
.mon-table tr.lump .mon-item{ color:var(--mon-warn); }

/* money coming in */
.mon-inico{ width:28px; height:28px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; background:#22B07D; }
.mon-inico.interest{ background:#2F80ED; }
.mon-inico.principal{ background:#9775FA; }

/* fixed assets */
.mon-assets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:10px; }
.mon-asset{ display:flex; align-items:center; gap:12px; text-align:left; border:1px solid var(--line); background:var(--soft); border-radius:14px; padding:12px 14px; font:inherit; color:var(--ink); cursor:pointer; min-width:0; }
.mon-asset:hover{ border-color:var(--brand2); }
.mon-asset-i{ font-size:26px; }
.mon-asset-c{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mon-asset-c b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-asset-c small{ font-size:11.5px; color:var(--muted); }
.mon-asset-v{ display:flex; flex-direction:column; align-items:flex-end; font-variant-numeric:tabular-nums; }
.mon-asset-v b{ font-size:15px; }
.mon-asset-v small{ font-size:11px; }

.mon-stats-sm{ grid-template-columns:minmax(140px,190px) 1fr!important; gap:16px; }
.mon-cat.static{ cursor:default; }
.mon-cat.static:hover{ background:none; }
.mon-acct.static{ cursor:default; }
.mon-acct.static:hover{ background:none; }
.mon-chipc i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }

/* emoji + colour pickers */
.mon-emo{ border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--soft); }
.mon-emo-top{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.mon-emo-cur{ width:46px; height:46px; flex-shrink:0; border-radius:12px; background:var(--card); border:1px solid var(--line); display:grid; place-items:center; font-size:26px; }
.mon-emo-top input{ flex:1; min-width:0; }
.mon-emo-tabs{ display:flex; gap:4px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.mon-emo-tab{ flex-shrink:0; border:1px solid transparent; background:transparent; border-radius:9px; padding:5px 8px; font:inherit; font-size:15px; cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; gap:5px; }
.mon-emo-tab span{ font-size:11.5px; color:var(--muted); }
.mon-emo-tab.on{ background:var(--card); border-color:var(--line); }
.mon-emo-tab.on span{ color:var(--ink); font-weight:600; }
.mon-emo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:3px; max-height:168px; overflow-y:auto; }
.mon-emo-grid[hidden]{ display:none; }
.mon-emo-e{ height:38px; border:1px solid transparent; background:transparent; border-radius:9px; font-size:21px; cursor:pointer; padding:0; line-height:1; }
.mon-emo-e:hover{ background:var(--card); }
.mon-emo-e.on{ background:var(--card); border-color:var(--brand2); box-shadow:inset 0 0 0 1px var(--brand2); }
.mon-colors{ display:flex; flex-wrap:wrap; gap:7px; }
.mon-col{ width:28px; height:28px; border-radius:50%; border:2px solid var(--card); box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; }
.mon-col.on{ box-shadow:0 0 0 2px var(--ink); }
.mon-col.auto{ width:auto; padding:0 10px; border-radius:99px; background:var(--soft); color:var(--muted); font:inherit; font-size:11.5px; }
.mon-catmodal{ max-height:70vh; overflow-y:auto; }

@media (max-width:860px){
  .mon-nexts{ grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .mon-next{ padding:9px 10px; }
  .mon-next b{ font-size:16px; }
  .mon-stats-sm{ grid-template-columns:1fr!important; }
  html body #view-money table.mon-fixed{ table-layout:auto; }
  .mon-fixed col{ width:auto!important; }
  .mon-card{ padding:2px 8px 4px; }
  .mon-tl{ grid-template-columns:50px 1fr; }
  .mon-tl-a{ grid-column:2; }
  .mon-timeline:before{ left:24px; }
}
.mon-tl-a .lump{ color:var(--mon-warn); font-weight:600; font-size:11.5px; }
@media (max-width:860px){
  html body #view-money .mon-card .mon-table, html body #view-money .mon-fixed{ font-size:12px; }
  html body #view-money .mon-card .mon-table th, html body #view-money .mon-card .mon-table td{ padding:7px 4px; }
  html body #view-money .mon-card .mon-table th:nth-child(4), html body #view-money .mon-card .mon-table td:nth-child(4){ display:none; }
  .mon-item{ white-space:normal; }
  .mon-card-r{ margin-left:0; width:100%; }
}

/* ── v098b: sub-categories + spending wheel ───────────────────────────── */
.mon-wheel{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:26px; align-items:start; }
.mon-pie-lg{ max-width:300px; }
.mon-wheel-r{ min-width:0; }
.mon-wheel-top{ margin:0 0 8px; font-size:13.5px; color:var(--muted); }
.mon-wheel-top b{ color:var(--ink); }
.mon-tabs-sm .mon-tab{ padding:5px 12px; font-size:12px; }
.mon-subs{ margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); display:flex; flex-direction:column; gap:8px; }
.mon-subs-h{ font-size:12px; font-weight:600; color:var(--muted); margin-bottom:2px; }
.mon-subs .mon-tc-b{ background:var(--card); }
.mon-subs .mon-tc b small{ color:var(--muted); font-weight:400; font-size:11px; }
.mon-subn{ font-weight:400; color:var(--muted); }
.mon-subchips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mon-sc{ border:1px solid var(--line); background:var(--soft); color:var(--ink); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer; }
.mon-sc.on{ background:color-mix(in srgb,var(--brand2) 14%,var(--card)); border-color:var(--brand2); font-weight:600; }
.mon-sc-add{ display:inline-flex; gap:6px; align-items:center; }
.mon-sc-add input{ min-height:32px!important; font-size:13px!important; width:170px; border-radius:999px!important; padding:4px 12px!important; }
.mon-subedit{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.mon-subrow{ display:inline-flex; align-items:center; border:1px solid var(--line); background:var(--soft); border-radius:999px; padding:2px 4px 2px 10px; }
.mon-subrow input{ border:0!important; background:transparent!important; min-height:28px!important; width:120px; font-size:13px!important; padding:0!important; box-shadow:none!important; }
.mon-subrow button{ border:0; background:transparent; color:var(--muted); font-size:17px; cursor:pointer; width:24px; height:24px; border-radius:50%; }
.mon-subrow button:hover{ background:var(--card); color:var(--mon-exp); }
@media (max-width:860px){
  .mon-wheel{ grid-template-columns:1fr; gap:14px; }
  .mon-pie-lg{ max-width:240px; margin:0 auto; }
  .mon-sc-add input{ width:150px; }
}

/* ── v101: credit cards linked to EMIs ─────────────────────────────────── */
.mon-agh-r{ float:right; text-transform:none; letter-spacing:0; font-size:11px; }
.mon-ccs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:10px; margin:4px 0 6px; }
.mon-cc{ display:flex; flex-direction:column; gap:10px; text-align:left; padding:14px 16px; border-radius:16px; border:1px solid var(--line); border-top:4px solid var(--cc); background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 10%,var(--card)),var(--card) 60%); color:var(--ink); font:inherit; cursor:pointer; min-width:0; }
.mon-cc:hover{ box-shadow:0 6px 18px color-mix(in srgb,var(--cc) 22%,transparent); }
.mon-cc-top{ display:flex; flex-direction:column; }
.mon-cc-top b{ font-size:14.5px; }
.mon-cc-top small{ font-size:11.5px; color:var(--muted); }
.mon-cc-n{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.mon-cc-n span{ display:flex; flex-direction:column; min-width:0; }
.mon-cc-n small{ font-size:10.5px; color:var(--muted); white-space:nowrap; }
.mon-cc-n b{ font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mon-cc-lim{ display:flex; flex-direction:column; gap:4px; }
.mon-cc-lim small{ font-size:11px; color:var(--muted); }
.mon-cc-bar{ height:7px; border-radius:99px; background:var(--soft); overflow:hidden; }
.mon-cc-bar i{ display:block; height:100%; background:var(--cc); border-radius:99px; }
.mon-cc-days{ font-size:11.5px; color:var(--muted); }
.mon-cardf{ display:grid; grid-template-columns:1fr 1fr; gap:13px; border-top:1px dashed var(--line); padding-top:12px; }
.mon-cardf .mon-f.full{ grid-column:1/-1; }
.mon-linked{ display:flex; flex-direction:column; gap:6px; }
.mon-lk{ display:flex; justify-content:space-between; gap:10px; align-items:center; border:1px solid var(--line); background:var(--soft); border-radius:10px; padding:8px 12px; font:inherit; color:var(--ink); cursor:pointer; text-align:left; }
.mon-lk span{ font-weight:600; font-size:13px; }
.mon-lk small{ color:var(--muted); font-size:11.5px; white-space:nowrap; }
.mon-lk:hover{ border-color:var(--brand2); }
.mon-card-h .mon-link{ font-size:12px; }
@media (max-width:860px){ .mon-cc-n{ grid-template-columns:1fr 1fr; } .mon-cardf{ grid-template-columns:1fr; } .mon-agh-r{ display:none; } }