/* Networth — layout, finance widgets and page styles on top of Basecoat (shadcn-style tokens).
   Everything here uses Basecoat's variables (--background, --muted-foreground, --border, --radius…)
   so light/dark come for free; the only colours we add are the semantic money/category ones. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --sidebar-width: 15rem;
  --page-max: 72rem;
  --topbar-h: 3.25rem;
  --tabbar-h: calc(3.4rem + env(safe-area-inset-bottom));

  /* semantic money colours */
  --pos: oklch(59% .16 155);          /* emerald-600 */
  --neg: oklch(58% .21 20);           /* rose-600 */
  --warn: oklch(66% .17 70);          /* amber-600 */
  --info: oklch(55% .2 262);          /* blue-600 */
  --pos-soft: color-mix(in oklab, var(--pos) 13%, transparent);
  --neg-soft: color-mix(in oklab, var(--neg) 13%, transparent);
  --warn-soft: color-mix(in oklab, var(--warn) 16%, transparent);
  --info-soft: color-mix(in oklab, var(--info) 12%, transparent);

  /* net-worth categories (swatches, stack bar, chart lenses) */
  --cat-pensions: oklch(58% .2 262);
  --cat-investments: oklch(66% .16 165);
  --cat-property: oklch(74% .16 75);
  --cat-cash: oklch(56% .2 290);
  --cat-crypto: oklch(68% .17 350);
  --cat-owed: oklch(60% .2 22);
  --cat-unassigned: oklch(62% .02 260);

  /* charts */
  --series-1: oklch(58% .2 262);
  --series-2: oklch(68% .17 40);
  --series-3: oklch(66% .16 165);
  --series-4: oklch(74% .16 75);
  --series-5: oklch(68% .17 350);
  --series-6: oklch(56% .2 290);
  --series-7: oklch(62% .02 260);
  --grid: color-mix(in oklab, var(--foreground) 8%, transparent);
  --axis-text: var(--muted-foreground);
  --meter-track: color-mix(in oklab, var(--foreground) 8%, transparent);
  --status-warn: var(--warn);
  --status-critical: var(--neg);
  --nw-surface: var(--card);
  --page-bg: oklch(98.5% 0 0);
}
.dark {
  --pos: oklch(72% .16 155);
  --neg: oklch(72% .17 20);
  --warn: oklch(78% .15 75);
  --info: oklch(70% .16 262);
  --cat-pensions: oklch(68% .17 262);
  --cat-investments: oklch(72% .15 165);
  --cat-property: oklch(80% .14 80);
  --cat-cash: oklch(70% .17 290);
  --cat-crypto: oklch(74% .15 350);
  --cat-owed: oklch(68% .18 22);
  --series-1: oklch(68% .17 262);
  --series-2: oklch(74% .15 40);
  --series-3: oklch(72% .15 165);
  --series-4: oklch(80% .14 80);
  --series-5: oklch(74% .15 350);
  --series-6: oklch(70% .17 290);
  --grid: color-mix(in oklab, var(--foreground) 10%, transparent);
  --page-bg: var(--background);
}

/* ---------- base ---------- */
html { font-family: var(--font-sans); -webkit-text-size-adjust: 100%; }
body { background: var(--page-bg); color: var(--foreground); font-size: .9375rem; line-height: 1.5; min-height: 100dvh; font-feature-settings: "cv11", "ss01", "calt"; }
a:not(.btn):not(.badge) { color: inherit; text-decoration: none; }
a:not(.btn):not(.badge):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.btn, .badge, .tabbar a, .sidebar a, .row, .chip span, .seg button { text-decoration: none !important; }
h1, h2, h3 { letter-spacing: -.02em; font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
h3 { font-size: .95rem; margin: 0 0 .4rem; }
p { margin: 0 0 .75rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--muted); padding: .1em .35em; border-radius: .3em; }
strong, b { font-weight: 600; }
svg.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }
.spin { animation: nw-spin 1s linear infinite; }
@keyframes nw-spin { to { transform: rotate(360deg); } }
[aria-busy="true"]::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .4em; vertical-align: -.1em; border-radius: 50%; border: 2px solid color-mix(in oklab, currentColor 25%, transparent); border-top-color: currentColor; animation: nw-spin .8s linear infinite; }
button[aria-busy="true"]::before { margin-right: .5em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- utilities ---------- */
.muted { color: var(--muted-foreground); }
.small { font-size: .85rem; }
.tiny { font-size: .76rem; }
.num, .money { font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1 1 auto; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; margin: 0; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.cluster { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.grid2, .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid2 > *, .two-col > *, .grid > * { min-width: 0; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .two-col, .grid { grid-template-columns: 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- shell ---------- */
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 650; letter-spacing: -.02em; font-size: 1rem; color: var(--foreground); }
.brand-mark { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: var(--primary); color: var(--primary-foreground); }
.brand-mark svg { width: 1rem; height: 1rem; }

.sidebar nav { background: var(--sidebar); border-color: var(--sidebar-border); }
.sidebar nav > header { padding: .9rem 1rem .6rem; }
.sidebar nav > section { padding: .25rem .6rem; gap: .9rem; }
.sidebar nav > section h3 { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); padding: .4rem .6rem .25rem; margin: 0; font-weight: 600; }
.sidebar nav > section ul { gap: .1rem; }
.sidebar nav > section ul li > a { gap: .6rem; padding: .45rem .6rem; border-radius: calc(var(--radius) - 2px); font-size: .875rem; font-weight: 500; color: var(--sidebar-foreground); }
.sidebar nav > section ul li > a svg { width: 1.05rem; height: 1.05rem; color: var(--muted-foreground); }
.sidebar nav > section ul li > a[aria-current="page"] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 600; }
.sidebar nav > section ul li > a[aria-current="page"] svg { color: var(--sidebar-accent-foreground); }
.nav-count { margin-left: auto; font-size: .7rem; font-weight: 600; min-width: 1.3rem; height: 1.3rem; padding: 0 .4rem; border-radius: 999px; background: var(--neg); color: #fff; display: inline-grid; place-items: center; }
.nav-count.busy { background: transparent; color: var(--muted-foreground); }
.sidebar nav > footer { padding: .6rem; border-top: 1px solid var(--sidebar-border); }
.palette-hint { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .6rem; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); border-radius: calc(var(--radius) - 2px); font: inherit; font-size: .82rem; cursor: pointer; }
.palette-hint:hover { border-color: var(--ring); color: var(--foreground); }
.palette-hint .kbd { margin-left: auto; }
.kbd { font-family: inherit; font-size: .68rem; padding: .1rem .35rem; border-radius: .3rem; border: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); }

.app-main { min-height: 100dvh; display: flex; flex-direction: column; }

/* collapsed sidebar: icon rail (html.nav-collapsed, persisted; ⌘B) */
.sidebar nav > header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.nav-toggle svg { width: 1rem; height: 1rem; }
.nav-toggle-top { display: none; }
.sidebar nav > section ul li > a span:first-of-type, .sidebar nav > section h3, .brand-name, .palette-hint span, .palette-hint .kbd { transition: opacity .15s; }
@media (min-width: 48rem) {
  .nav-collapsed { --sidebar-width: 3.6rem; }
  .nav-collapsed .sidebar nav > header { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
  .nav-collapsed .sidebar nav > header .brand, .nav-collapsed .sidebar nav > header .nav-toggle { display: none; }
  .nav-collapsed .sidebar nav > section h3, .nav-collapsed .sidebar nav > section ul li > a > span:not(.nav-count), .nav-collapsed .palette-hint span, .nav-collapsed .palette-hint .kbd { display: none; }
  .nav-collapsed .sidebar nav > section { padding-left: .45rem; padding-right: .45rem; }
  .nav-collapsed .sidebar nav > section ul li > a { justify-content: center; padding: .55rem 0; }
  .nav-collapsed .nav-count { position: absolute; top: .05rem; right: .1rem; margin: 0; min-width: 1rem; height: 1rem; font-size: .6rem; padding: 0 .2rem; border: 2px solid var(--sidebar); }
  .nav-collapsed .sidebar nav > footer { padding: .45rem; }
  .nav-collapsed .palette-hint { justify-content: center; padding: .5rem 0; }
  .nav-collapsed .nav-toggle-top { display: inline-flex; }
  .nav-collapsed .sidebar nav > header { padding-top: .75rem; }
  .nav-collapsed .sidebar nav > header::before { content: ""; }
}
.nav-collapsed .sidebar nav > section h3 { display: none; }
.topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: .35rem; padding: 0 1rem; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); background: color-mix(in oklab, var(--page-bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
.topbar-spacer { flex: 1; }
.brand-mobile { display: none; }
@media (min-width: 48rem) { .nav-collapsed .brand-mobile { display: inline-flex; } }
.cur-form { margin: 0; }
.cur-form select.select { height: 2rem; font-size: .8rem; padding-right: 1.8rem; background-color: transparent; border-color: transparent; color: var(--muted-foreground); }
.cur-form select.select:hover { border-color: var(--border); color: var(--foreground); }
.page { flex: 1; width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }
.page > *:first-child { margin-top: 0; }

/* theme + privacy toggle icons */
.th-moon, .dark .th-sun { display: none; }
.dark .th-moon { display: block; }
.mask-btn .eye-off, #mask-toggle .eye-off { display: none; }
html.masked #mask-toggle .eye-open { display: none; }
html.masked #mask-toggle .eye-off { display: block; }
html.masked #mask-toggle { color: var(--warn); }
.money .mask { display: none; }
html.masked .money .amt { display: none; }
html.masked .money .mask { display: inline; letter-spacing: .05em; }
html.masked input.vinput, html.masked input[name="budget"] { -webkit-text-security: disc; }
@supports not (-webkit-text-security: disc) { html.masked input.vinput, html.masked input[name="budget"] { color: transparent; } }
html.masked input.vinput::placeholder, html.masked input[name="budget"]::placeholder { color: transparent; }

/* mobile: no sidebar, bottom tab bar */
.tabbar { display: none; }
@media (max-width: 47.99rem) {
  .sidebar { display: none !important; }
  .sidebar + * { margin-left: 0 !important; }
  .brand-mobile { display: inline-flex; }
  .palette-btn { display: inline-flex; }
  .page { padding: 1rem 1rem calc(var(--tabbar-h) + 1.5rem); }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in oklab, var(--background) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); justify-content: space-around; }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; font-size: .66rem; font-weight: 500; color: var(--muted-foreground); position: relative; }
  .tabbar a svg { width: 1.3rem; height: 1.3rem; }
  .tabbar a.active { color: var(--foreground); }
  .tabbar a.active::before { content: ""; position: absolute; top: 0; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--foreground); }
  .tabbar .ico { position: relative; display: inline-flex; }
  .tabbar .ico .dot { position: absolute; top: -2px; right: -4px; width: .5rem; height: .5rem; border-radius: 50%; background: var(--neg); border: 2px solid var(--background); }
  h1 { font-size: 1.3rem; }
}
@media (min-width: 48rem) { .palette-btn { display: none; } }

/* command palette tweaks */
.command [role="menuitem"] .cmd-sub { margin-left: auto; color: var(--muted-foreground); font-size: .78rem; }
.command-dialog { width: min(38rem, calc(100vw - 2rem)); }

/* ---------- cards & sections ---------- */
.card { border: 1px solid var(--border); box-shadow: 0 1px 2px 0 rgb(0 0 0 / .03); border-radius: var(--radius); margin-bottom: 1rem; --tw-ring-shadow: 0 0 #0000; padding-block: 0; gap: 0; }
.card > header { padding: 1rem 1.1rem 0; gap: .15rem; }
.card > header:last-child { padding-bottom: 1rem; }
.card > header h2, .card > header h3, .card > header .card-title { font-size: .95rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.card > header p, .card > header .card-description { margin: 0; font-size: .82rem; color: var(--muted-foreground); }
.card > section { padding: .85rem 1.1rem 1rem; }
.card > header + section { padding-top: .65rem; }
.card > footer { padding: 0 1.1rem 1rem; gap: .5rem; }
.card.tight > section { padding: .6rem .9rem .7rem; }
.card.flush > section { padding: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0 .6rem; }
.sec-head h3, .sec-head h2 { margin: 0; font-size: 1rem; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.h-sub { font-size: .9rem; font-weight: 400; color: var(--muted-foreground); letter-spacing: 0; }
.crumb { font-size: .82rem; color: var(--muted-foreground); margin-bottom: .5rem; display: inline-flex; align-items: center; gap: .25rem; }
.crumb svg { width: .9rem; height: .9rem; }
.month-head { display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.month-head h1 { margin: 0 .25rem; }
.month-arrow { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.month-arrow svg { width: 1rem; height: 1rem; }
.month-arrow:hover { background: var(--accent); }
.month-arrow.disabled { opacity: .35; pointer-events: none; }

/* ---------- alerts (Basecoat .alert + tints) ---------- */
.alert { margin-bottom: 1rem; border-radius: var(--radius); }
.alert[data-variant="warning"] { border-color: color-mix(in oklab, var(--warn) 40%, var(--border)); background: var(--warn-soft); }
.alert[data-variant="warning"] > svg { color: var(--warn); }
.alert[data-variant="success"] { border-color: color-mix(in oklab, var(--pos) 40%, var(--border)); background: var(--pos-soft); }
.alert[data-variant="success"] > svg { color: var(--pos); }
.alert[data-variant="info"] { background: var(--muted); }
.alert[data-variant="info"] > svg { color: var(--info); }
.alert.slim { padding: .55rem .8rem; font-size: .85rem; grid-template-columns: auto 1fr; column-gap: .5rem; }
.alert.slim > section, .alert.slim > h2 { font-size: .85rem; }
.alert.slim > svg { width: 1rem; height: 1rem; }
.alert a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- badges (Basecoat .badge + tone classes) ---------- */
.badge { white-space: nowrap; }
.badge.ok, .badge.income { background: var(--pos-soft); color: var(--pos); border-color: transparent; }
.badge.err { background: var(--neg-soft); color: var(--neg); border-color: transparent; }
.badge.stale { background: var(--warn-soft); color: oklch(48% .14 70); border-color: transparent; }
.dark .badge.stale { color: var(--warn); }
.badge.ai { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge.transfer { background: color-mix(in oklab, var(--cat-cash) 14%, transparent); color: var(--cat-cash); border-color: transparent; }
.badge.refund { background: color-mix(in oklab, var(--series-3) 16%, transparent); color: var(--series-3); border-color: transparent; }
.badge.ignore { opacity: .6; }
.badge.expense { background: var(--muted); color: var(--muted-foreground); }
.badge.owner.me { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge.owner.partner { background: color-mix(in oklab, var(--series-3) 16%, transparent); color: var(--series-3); border-color: transparent; }
.badge.owner.joint { background: color-mix(in oklab, var(--cat-cash) 14%, transparent); color: var(--cat-cash); border-color: transparent; }
.badge svg { width: .8rem; height: .8rem; }

/* ---------- forms ---------- */
.label { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: .35rem; font-size: .82rem; font-weight: 500; line-height: 1.3; }
.label > .input, .label > .select, .label > .textarea { font-weight: 400; }
.label .hint { font-weight: 400; color: var(--muted-foreground); }
.input, .select { width: 100%; }
.input.sm, .select.sm { width: auto; min-width: 7rem; height: 2rem; font-size: .82rem; padding-top: 0; padding-bottom: 0; }
.select.sm { padding-right: 1.8rem; }
.table .input.sm, .table .select.sm { min-width: 0; }
.input.xs { width: 6rem; }
.form-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.form-row .label { flex: 1 1 9rem; min-width: 0; }
.form-row > .btn { flex: none; }
.check { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; }
.check input { width: 1rem; height: 1rem; accent-color: var(--primary); margin: 0; }
.btn { gap: .4rem; }
.btn svg { width: 1rem; height: 1rem; }
.btn[data-size="sm"] svg, .btn[data-size="xs"] svg { width: .9rem; height: .9rem; }
.btn.wide { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; margin: 0; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: inherit; }
.link-btn:hover { color: var(--foreground); }

/* ---------- tables ---------- */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 1rem; }
.card > section > .table-container, .card > .table-container { border: 0; border-radius: 0; margin: 0; }
.card > .table-container { border-top: 1px solid var(--border); }
.card > header + .table-container { margin-top: .85rem; }
.card > .table-container + footer { padding-top: .85rem; }
.table { font-size: .85rem; }
.table th { color: var(--muted-foreground); font-size: .76rem; font-weight: 500; text-align: left; padding: .55rem .75rem; }
.table td { padding: .5rem .75rem; border-top: 1px solid var(--border); white-space: normal; }
.table tbody tr:first-child td { border-top: 0; }
.table thead + tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover td { background: color-mix(in oklab, var(--foreground) 2.5%, transparent); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
tr.review-row td { background: var(--warn-soft); }
tr.done-row td { opacity: .95; }
.desc { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
span.desc { display: block; }
.desc.is-clipped { cursor: pointer; }
.desc.is-clipped:hover, .desc.is-clipped:focus-visible { text-decoration: underline dotted; text-underline-offset: 2px; }
.desc.desc-open { white-space: normal; overflow-wrap: anywhere; cursor: zoom-out; }
.scope-prompt { display: none; gap: .3rem; margin-top: .3rem; flex-wrap: wrap; }
tr.dirty .scope-prompt { display: flex; }
tr.dirty .accept-btn { display: none; }
.filter-bar { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; }
.pager { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--muted-foreground); }

/* ---------- list primitive (.rows/.row) ---------- */
.rows { display: flex; flex-direction: column; }
.row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border); color: var(--foreground); }
.rows > .row:last-child, .rows > .row-details:last-child > .row, .rows > :last-child > .row { border-bottom: 0; }
.rows.compact .row { padding: .4rem 0; }
a.row { border-radius: 0; transition: background .12s; margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; }
a.row:hover { background: color-mix(in oklab, var(--foreground) 3%, transparent); text-decoration: none; }
a.row:hover .row-title { text-decoration: none; }
.row-l { min-width: 0; display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.row-title { font-weight: 500; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.row-sub { font-size: .78rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; }
.row-r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; gap: .05rem; }
.row-r .num { font-weight: 500; }
.row-delta { font-size: .76rem; color: var(--muted-foreground); }
.row-delta.warn { color: var(--warn); }
.row-chev { color: var(--muted-foreground); width: 1rem; height: 1rem; flex: none; }
.swatch { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.cat-pensions { background: var(--cat-pensions); } .cat-investments { background: var(--cat-investments); } .cat-property { background: var(--cat-property); }
.cat-cash { background: var(--cat-cash); } .cat-crypto { background: var(--cat-crypto); } .cat-owed { background: var(--cat-owed); } .cat-unassigned { background: var(--cat-unassigned); }
.bar { display: block; height: 4px; border-radius: 2px; background: var(--meter-track); margin-top: .35rem; overflow: hidden; max-width: 22rem; }
.bar i { display: block; height: 100%; background: var(--foreground); border-radius: 2px; opacity: .8; }
.bar i.over { background: var(--neg); opacity: 1; }
.bar i.warn { background: var(--warn); opacity: 1; }
.stack-bar { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; margin: .1rem 0 .9rem; background: var(--meter-track); gap: 2px; }
.stack-bar i { display: block; height: 100%; }
.meter { position: relative; height: 6px; border-radius: 3px; background: var(--meter-track); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--series-1); border-radius: 3px; }
.meter.warn > span { background: var(--status-warn); }
.meter.over > span { background: var(--status-critical); }
.cov { display: flex; gap: 1px; margin-top: .35rem; max-width: 20rem; }
.cov i { flex: 1; height: 5px; border-radius: 1px; background: var(--pos); opacity: .75; }
.cov i.gap { background: var(--neg); opacity: .5; }
.legend { display: flex; gap: 1rem; font-size: .78rem; color: var(--muted-foreground); margin: .25rem 0 .5rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }

/* ---------- stats / hero ---------- */
.hero-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem 1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .03); }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.label-cap, .hero-card .label, .kpi .label, .hero-line .label { display: block; user-select: auto; line-height: 1.3; font-size: .72rem; font-weight: 500; color: var(--muted-foreground); letter-spacing: .06em; text-transform: uppercase; }
.hero-num { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 650; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.hero-num.sm { font-size: clamp(1.35rem, 3.4vw, 1.7rem); letter-spacing: -.025em; }
.hero-sub { font-size: .85rem; margin-top: .4rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; color: var(--muted-foreground); }
.delta { display: inline-flex; align-items: center; gap: .15rem; font-weight: 600; font-variant-numeric: tabular-nums; font-size: .8rem; padding: .1rem .45rem .1rem .35rem; border-radius: 999px; }
.delta svg { width: .85rem; height: .85rem; }
.delta.pos { background: var(--pos-soft); color: var(--pos); }
.delta.neg { background: var(--neg-soft); color: var(--neg); }
.delta.flat { background: var(--muted); color: var(--muted-foreground); }
.hero-chart { height: 250px; margin-top: 1rem; }
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 320px; }
.chart-box.short { height: 190px; }
.chart-hint { margin: .35rem 0 0; font-size: .74rem; color: var(--muted-foreground); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .95rem; }
.kpi .value { font-size: 1.35rem; font-weight: 650; line-height: 1.2; margin-top: .2rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .value.hero { font-size: 2.1rem; }
.kpi .delta-line { font-size: .78rem; margin-top: .2rem; color: var(--muted-foreground); }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: .25rem; }
.kpi-row > div { min-width: 0; }
.kpi-row > div + div { border-left: 1px solid var(--border); padding-left: 1rem; }
@media (max-width: 420px) { .kpi-row { gap: .6rem; } .kpi-row > div + div { padding-left: .6rem; } .hero-num.sm { font-size: 1.2rem; } }
.hero-line { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin: 0 0 1rem; }
.hero-line .strong { font-size: 1.35rem; font-weight: 650; letter-spacing: -.02em; }

/* segmented control (shadcn tabs look) */
.seg-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--muted); border-radius: calc(var(--radius) - 2px); padding: 3px; gap: 2px; }
.seg button { margin: 0; padding: .28rem .65rem; font: inherit; font-size: .78rem; font-weight: 500; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; color: var(--muted-foreground); cursor: pointer; line-height: 1.3; transition: background .12s, color .12s; }
.seg button:hover { color: var(--foreground); }
.seg button.on { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.dark .seg button.on { background: var(--accent); }

/* callout ("nag") */
.nag { display: flex; justify-content: space-between; align-items: center; gap: .75rem; color: var(--foreground); background: var(--warn-soft); border: 1px solid color-mix(in oklab, var(--warn) 35%, var(--border)); border-radius: var(--radius); padding: .65rem .9rem; margin-bottom: 1rem; font-size: .88rem; }
.nag:hover { text-decoration: none; filter: brightness(.98); }
.nag.quiet { background: var(--muted); border-color: var(--border); }
.nag-cta { white-space: nowrap; font-weight: 600; display: inline-flex; align-items: center; gap: .15rem; }
.nag-cta svg { width: .9rem; height: .9rem; }
.nag svg.lead { width: 1.1rem; height: 1.1rem; color: var(--warn); flex: none; }
.nag .nag-body { display: flex; align-items: center; gap: .6rem; min-width: 0; }

/* month detail (tap a month on the chart) */
.month-detail { margin-top: .9rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; background: var(--muted); }
.line-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .4rem; }
.line-head .link-btn { margin-left: auto; }

/* chips (filters) */
.chips { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .75rem; }
.chips a { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: .82rem; white-space: nowrap; }
.chips a.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 500; }
.chips a .muted { color: inherit; opacity: .7; }
.chip-grid { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { margin: 0; position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span { display: inline-block; padding: .28rem .65rem; border-radius: 999px; border: 1px solid var(--border); font-size: .82rem; cursor: pointer; background: var(--card); transition: background .1s, color .1s; }
.chip span:hover { background: var(--accent); }
.chip input:checked + span { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); font-weight: 500; }
.chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 1px; }
.chip.word span { border-style: dashed; }
.chip-sep { font-size: .68rem; color: var(--muted-foreground); align-self: center; padding: 0 .3rem; text-transform: uppercase; letter-spacing: .08em; }
.kind-words { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

/* details-based disclosures */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.settings-block { margin-bottom: 1rem; }
.settings-block > summary { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted-foreground); padding: .3rem 0; }
.settings-block > summary::before { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: .2rem; }
.settings-block[open] > summary::before { transform: rotate(45deg); }
.settings-block > summary:hover { color: var(--foreground); }
.settings-block[open] > summary { margin-bottom: .6rem; }
.sheet-details { margin: 0; }
.sheet-details > summary { font-size: .82rem; color: var(--foreground); padding: .25rem .55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.sheet-details > summary:hover { background: var(--accent); }
.sheet-details[open] { flex-basis: 100%; order: 5; }
.sheet-details[open] > summary { background: var(--accent); }
.sheet { margin-top: .6rem; padding: .7rem .8rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); border: 1px solid var(--border); }
.sheet .actions { margin-top: .6rem; }
.inline-details { display: inline-block; margin: 0; }
.inline-details > summary { display: inline-flex; }
.inline-details[open] { display: block; margin-top: .4rem; }
.inline-details[open] > summary { margin-bottom: .5rem; }
.inline-details .chip-grid { margin-bottom: .5rem; }
.row-details { margin: 0; }
.row-details > summary.row { cursor: pointer; }
.row-details[open] > summary .row-title { font-weight: 600; }
.row-details .sheet { margin: .2rem 0 .7rem; }
.recent-block { margin: 0; }
.recent-block > summary { padding: .45rem 0; font-size: .82rem; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: .35rem; }
.recent-block > summary:hover { color: var(--foreground); }
.recent-block .scard { margin-top: .5rem; opacity: .92; }
.new-account { margin: 0; }
.new-account > summary { font-size: .78rem; color: var(--muted-foreground); }
.new-account > summary:hover { color: var(--foreground); }
.new-account[open] > summary { margin-bottom: .4rem; }

/* ---------- inbox ---------- */
.upload-block { margin: .25rem 0 1.25rem; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1.4rem 1rem; border: 1.5px dashed color-mix(in oklab, var(--foreground) 22%, transparent); border-radius: var(--radius); background: var(--card); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--foreground); background: var(--accent); }
.dropzone .dz-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--muted); color: var(--foreground); margin-bottom: .2rem; }
.dropzone .dz-icon svg { width: 1.15rem; height: 1.15rem; }
.dropzone .dz-title { font-weight: 600; font-size: .92rem; }
.dropzone .dz-sub { font-size: .78rem; color: var(--muted-foreground); }
.visually-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.inbox-section { margin-bottom: 1.5rem; }
.cards { display: flex; flex-direction: column; gap: .6rem; }
.scard, .gcard, .inbox-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .95rem .75rem 1.1rem; background: var(--card); display: flex; flex-direction: column; gap: .35rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .03); }
.scard::before, .inbox-card::before, .gcard.transfer-q::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--border); }
.scard.ask::before, .scard.guess::before, .inbox-card.ask::before { background: var(--warn); }
.scard.failed::before, .inbox-card.failed::before { background: var(--neg); }
.scard.linked::before, .inbox-card.linked::before { background: var(--pos); }
.scard.busy::before, .inbox-card.busy::before { background: var(--info); }
.gcard.transfer-q::before { background: var(--cat-cash); }
.scard-head, .inbox-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.scard-title, .inbox-file { font-weight: 600; overflow-wrap: anywhere; }
.scard.compact { padding-top: .55rem; padding-bottom: .55rem; }
.scard-head .grow { flex: 1; }
.link-options { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; }
.link-form { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin: 0; }
.link-form .select { width: auto; max-width: 16rem; }
@media (max-width: 600px) { .link-options { flex-direction: column; align-items: stretch; } .link-form { width: 100%; } .link-form .select { flex: 1; max-width: none; } }
.gcard.done { background: var(--pos-soft); border-color: color-mix(in oklab, var(--pos) 30%, var(--border)); }
.gform { margin: 0; }
.gcard-head { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.gcard-title { font-weight: 600; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.gcard-amt { white-space: nowrap; font-weight: 600; }
.gcard-sub { margin: .05rem 0 .5rem; }
.pick { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pick .grow { flex: 1; }
.picked { font-weight: 600; padding: .25rem .7rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: .82rem; }
.pick .minor { background: none; border: 0; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 3px; padding: .2rem .35rem; font: inherit; font-size: .8rem; cursor: pointer; }
.pick .minor:hover { color: var(--foreground); }
.notice { background: color-mix(in oklab, var(--cat-cash) 10%, transparent); border-radius: calc(var(--radius) - 2px); padding: .5rem .75rem; font-size: .86rem; margin: .2rem 0 .5rem; }
.btn-like { font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: .1rem; }
.btn-like svg { width: .9rem; height: .9rem; }

/* ---------- review (group page) ---------- */
.bulkbar { position: sticky; top: var(--topbar-h); z-index: 5; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; padding: .5rem .7rem; margin-bottom: .6rem; border-radius: var(--radius); background: color-mix(in oklab, var(--card) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.bulkbar .grow { flex: 1; }
.bulkbar label { margin: 0; }
.bulkbar .setall, .setall-bar .setall { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .85rem; }
.setall-bar { padding: .1rem 0 .6rem; }
table.group-rows td, table.review-rows td { vertical-align: top; }
.g-name { font-weight: 600; }
table.group-rows, table.review-rows { width: 100%; table-layout: fixed; }
table.group-rows .c-cat .select, table.group-rows .c-kind .select, table.review-rows .c-cat .select, table.review-rows .c-kind .select { width: 100%; min-width: 0; }
table.group-rows .c-name, table.review-rows .c-desc { overflow-wrap: anywhere; }
table.review-rows .c-acct { overflow: hidden; text-overflow: ellipsis; }
tr.group-row.done-row td { background: var(--pos-soft); opacity: 1; }
.cell-label { display: none; }
@media (max-width: 1023px) {
  table.group-rows, table.group-rows tbody, table.group-rows tr, table.group-rows td,
  table.review-rows, table.review-rows tbody, table.review-rows tr, table.review-rows td { display: block; }
  table.group-rows thead, table.review-rows thead { display: none; }
  .table-container.cards { overflow-x: visible; border: 0; background: none; }
  table.group-rows tr, table.review-rows tr { display: grid; align-items: start; gap: .15rem .5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .65rem .75rem; margin-bottom: .6rem; background: var(--card); }
  table.group-rows td, table.review-rows td { padding: 0; border: none; background: none !important; }
  table.group-rows tr > td:empty, table.review-rows tr > td:empty { display: none; }
  table.group-rows tr { grid-template-columns: 1.4rem minmax(0, 1fr) auto; grid-template-areas: "sel name count" "sel name total" "cat cat kind" "act act act"; }
  table.review-rows tr { grid-template-columns: 1.4rem minmax(0, 1fr) auto; grid-template-areas: "sel date total" "sel acct total" "sel dsc dsc" "cat cat kind"; }
  .c-sel { grid-area: sel; } .c-name { grid-area: name; } .c-count { grid-area: count; } .c-total { grid-area: total; } .c-cat { grid-area: cat; } .c-kind { grid-area: kind; } .c-act { grid-area: act; } .c-date { grid-area: date; } .c-acct { grid-area: acct; } .c-desc { grid-area: dsc; }
  .c-count, .c-total { text-align: right; white-space: nowrap; font-size: .85rem; }
  .c-count { color: var(--muted-foreground); }
  .cell-label { display: inline; }
  .c-total { font-weight: 600; font-size: .9rem; }
  table.group-rows tr.review-row, table.review-rows tr.review-row { background: color-mix(in oklab, var(--warn) 8%, var(--card)); }
  table.group-rows tr.done-row, table.review-rows tr.done-row { background: color-mix(in oklab, var(--pos) 9%, var(--card)); }
  .c-cat .select, .c-kind .select { width: 100%; min-width: 0; margin-top: .35rem; }
  .c-kind .select { min-width: 7rem; }
  .c-act { margin-top: .45rem; }
  .c-act .btn { flex: 1; }
  table.group-rows .desc, table.review-rows .desc { max-width: 100%; }
  .bulkbar { font-size: .85rem; gap: .4rem .6rem; }
  .bulkbar .grow { display: none; }
  .bulkbar #sel-approve { flex: 1; }
  .setall-bar .setall { width: 100%; }
  .setall-bar .select { flex: 1; min-width: 6rem; }
  .wide-only { display: none; }
}

/* ---------- values pass ---------- */
.vrow { cursor: text; }
.vrow.fixed { opacity: .7; }
.vinput { width: 9rem; text-align: right; font-variant-numeric: tabular-nums; }
.wide-btn { width: 100%; margin-top: .75rem; }
.budget-form { display: flex; gap: .5rem; align-items: flex-end; margin-top: .8rem; }

/* ---------- chat ---------- */
.chat-wrap { display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h) - 6rem); }
.chat-log { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; flex: 1; }
.msg { padding: .65rem .9rem; border-radius: 1rem; max-width: 82%; white-space: pre-wrap; font-size: .92rem; line-height: 1.5; }
.msg.user { align-self: flex-end; background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: .3rem; }
.msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: .3rem; }
.msg details { margin-top: .5rem; font-size: .76rem; color: var(--muted-foreground); }
.msg details > summary { display: inline-flex; }
.msg pre { font-size: .72rem; white-space: pre-wrap; margin: .3rem 0 0; background: var(--muted); padding: .4rem .5rem; border-radius: .4rem; color: var(--foreground); }
.chat-form { display: flex; gap: .5rem; position: sticky; bottom: 1rem; background: var(--page-bg); padding-top: .5rem; }
.chat-form .input { flex: 1; height: 2.6rem; }
.chat-form .btn { height: 2.6rem; }
.htmx-request .spinner { display: inline-block; }
.spinner { display: none; }
.prompt-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.prompt-chips button { font: inherit; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; }
.prompt-chips button:hover { background: var(--accent); }
@media (max-width: 47.99rem) { .chat-form { bottom: calc(var(--tabbar-h) + .5rem); } .chat-wrap { min-height: auto; } }

/* ---------- misc pages ---------- */
.menu-list { display: flex; flex-direction: column; gap: .5rem; }
.menu-list a { display: flex; align-items: center; gap: .85rem; color: var(--foreground); padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.menu-list a:hover { background: var(--accent); text-decoration: none; }
.menu-list .mi { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: var(--muted); color: var(--foreground); flex: none; }
.menu-list .mi svg { width: 1.1rem; height: 1.1rem; }
.menu-list .mt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.menu-list .mt b { font-weight: 600; }
.menu-list .mt span { font-size: .8rem; color: var(--muted-foreground); }
.menu-list .row-chev { margin-left: auto; }
.auth { max-width: 24rem; margin: 8vh auto 0; }
.auth .brand { margin-bottom: 1.25rem; font-size: 1.1rem; }
.auth .brand-mark { width: 2.1rem; height: 2.1rem; }
.auth .card > section { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.auth h1 { font-size: 1.25rem; margin: 0; }
.empty { text-align: center; padding: 2rem 1rem; color: var(--muted-foreground); font-size: .9rem; }
.empty svg { width: 2rem; height: 2rem; margin-bottom: .5rem; opacity: .6; }
.checklist li { margin-bottom: .35rem; }
.month-nav { display: flex; align-items: center; gap: .6rem; }
.foot { text-align: center; color: var(--muted-foreground); }
.avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: var(--muted); color: var(--foreground); font-weight: 600; font-size: .78rem; flex: none; text-transform: uppercase; }
.setting-row { display: grid; grid-template-columns: 1fr; gap: .25rem; }
.badge-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; vertical-align: middle; margin-right: .3rem; }