/* Finance app, redesign 1. Light-first, hairline ledger style (refs: Mercury, Brex, N26 on Refero). */
:root {
  --bg: #f5f6f8; --bg-elev: #ffffff; --card: #ffffff; --card-2: #f1f3f5;
  --line: #e6e9ee; --line-2: #eef0f3;
  --text: #111827; --muted: #6b6f7a; --faint: #9aa0a8;
  --accent: #0f766e; --accent-ink: #ffffff; --accent-soft: #e7f3f1;
  --pos-c: #15803d; --blue: #2f5bd3; --amber: #b45309; --red: #dc2626; --violet: #6d4bd1;
  --radius: 14px; --tabbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --bar-bg: #ffffff;
  --shadow: 0 1px 2px rgba(17,24,39,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1013; --bg-elev: #16191d; --card: #16191d; --card-2: #1e2227;
    --line: #262a30; --line-2: #22262b;
    --text: #eef0f3; --muted: #9399a3; --faint: #646a74;
    --accent: #3fb8a6; --accent-ink: #06201c; --accent-soft: #15302c;
    --pos-c: #4ade80; --blue: #7aa2ff; --amber: #f0b453; --red: #f87171; --violet: #a78bfa;
    --bar-bg: #16191d; --shadow: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background-color: var(--bar-bg); color: var(--text); }
body {
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Lock screen ---------- */
.lock { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 24px) 24px calc(var(--safe-b) + 24px);
  background: var(--bg); z-index: 10; }
.lock-inner { width: 100%; max-width: 320px; text-align: center; }
.lock-logo { border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.lock-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 4px; }
.lock-sub { color: var(--muted); margin: 0 0 22px; min-height: 20px; }
.lock-sub.err { color: var(--red); }
.dots { display: flex; justify-content: center; gap: 16px; margin-bottom: 34px; }
.dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--muted); transition: background .12s, border-color .12s; }
.dots i.on { background: var(--text); border-color: var(--text); }
.dots.shake { animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 24px; justify-content: center; }
.keypad button { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--card-2);
  font-size: 30px; font-weight: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; cursor: pointer; }
.keypad button small { font-size: 9px; letter-spacing: .18em; color: var(--muted); margin-top: 3px; font-weight: 600; }
.keypad button:active { background: var(--line); transform: scale(.96); }
.keypad .key-del { background: transparent; font-size: 24px; }
.keypad.busy { opacity: .4; pointer-events: none; }

/* ---------- Layout ---------- */
.view { padding: calc(var(--safe-t) + 14px) 16px calc(var(--tabbar-h) + var(--safe-b) + 28px); max-width: 640px; margin: 0 auto; }
.head { display: flex; align-items: flex-end; justify-content: space-between; margin: 6px 4px 16px; }
.head h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.head .sub { color: var(--muted); font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card-2); display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 18px; height: 18px; fill: var(--text); }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around;
  padding: 6px 8px calc(var(--safe-b) + 6px); height: calc(var(--tabbar-h) + var(--safe-b));
  background: color-mix(in srgb, var(--bg-elev) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--line); z-index: 5; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--faint); font-size: 10.5px; font-weight: 600; padding-top: 4px; }
.tabbar svg { width: 25px; height: 25px; fill: currentColor; }
.tabbar a.active { color: var(--accent); }

/* ---------- Cards ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); border: 0.5px solid var(--line); }
.card h2 { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px; letter-spacing: .01em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card h3 { font-size: 16px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
.section-title { font-size: 20px; font-weight: 750; letter-spacing: -.02em; margin: 22px 4px 10px; display: flex; align-items: baseline; justify-content: space-between; }
.section-title small { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.grid2 .card { margin: 0; }

.hero { background: var(--card); }
.big { font-size: 38px; font-weight: 750; letter-spacing: -.035em; line-height: 1.05; }
.mid { font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.pos { color: var(--accent); } .neg { color: var(--red); } .warn { color: var(--amber); }
.usd { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.kpi .label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.kpi .val { font-size: 21px; font-weight: 720; letter-spacing: -.025em; }
.kpi .note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 4px 9px; border-radius: 999px; background: var(--card-2); color: var(--muted); white-space: nowrap; }
.chip.green { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.chip.amber { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.chip.red { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.chip.blue { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.chip.violet { background: color-mix(in srgb, var(--violet) 16%, transparent); color: var(--violet); }

.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; margin-bottom: 12px; font-size: 13px;
  background: color-mix(in srgb, var(--amber) 12%, var(--card)); border: 0.5px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.banner b { color: var(--amber); }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 0.5px solid var(--line); }
.list li:first-child { border-top: 0; padding-top: 2px; }
.list .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; font-size: 17px; background: var(--card-2); }
.list .grow { flex: 1; min-width: 0; }
.list .t { font-weight: 600; font-size: 14.5px; }
.list .s { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.list .r { text-align: right; flex: none; }
.list .r .v { font-weight: 650; font-size: 14.5px; }

.rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 14px; }
.rows dt { color: var(--muted); white-space: nowrap; }
.rows dd { margin: 0; text-align: right; font-weight: 600; }

.seg { display: flex; background: var(--card-2); border-radius: 12px; padding: 3px; margin: 0 0 14px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 8px 6px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.18); }

.progress { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

.empty { text-align: center; padding: 18px 8px 10px; }
.empty .em-ic { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 14px; background: var(--card-2); display: grid; place-items: center; font-size: 22px; }
.empty .em-t { font-weight: 650; font-size: 15px; }
.empty .em-s { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.empty code { font-size: 11.5px; background: var(--card-2); padding: 1px 5px; border-radius: 5px; }
.ghost { opacity: .35; }

.tier { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-top: 0.5px solid var(--line); font-size: 14px; }
.tier:first-of-type { border-top: 0; }
.tier .n { font-weight: 600; }
.tier .p { font-weight: 650; text-align: right; }
.tier .m { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
svg.chart text { font: 600 10.5px -apple-system, BlinkMacSystemFont, sans-serif; fill: var(--muted); }
.foot { text-align: center; color: var(--faint); font-size: 11.5px; margin: 18px 0 4px; }
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.back { display: inline-block; color: var(--accent); text-decoration: none; font-weight: 600; font-size: 15px; margin: 2px 4px 0; }
.tile { border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 19px;
  background: color-mix(in srgb, var(--c) 22%, var(--card-2)); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c) 45%, transparent); }
.sections li { padding: 0; }
.sections li a { display: flex; align-items: center; gap: 12px; padding: 11px 0; color: inherit; text-decoration: none; width: 100%; }
.sections li:first-child a { padding-top: 2px; }
.chev { color: var(--faint); font-size: 22px; flex: none; }
a.card { display: block; color: inherit; text-decoration: none; }
.proj { border-left: 3px solid var(--c); }
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--line); }
.mini .ml { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.mini .mv { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.proj-strip { display: flex; align-items: center; gap: 10px; margin: -6px 4px 14px; font-size: 13px; color: var(--muted); }
.proj-strip span:nth-child(2) { flex: 1; }
.banner.blue { background: color-mix(in srgb, var(--blue) 12%, var(--card)); border-color: color-mix(in srgb, var(--blue) 35%, transparent); }
.banner.blue b { color: var(--blue); }
.kpi .note code, .list code { font-size: 11px; background: var(--card-2); padding: 1px 4px; border-radius: 4px; }

/* partner split table */
.split-row { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(var(--n), minmax(0, 1fr)); gap: 8px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.split-row:last-of-type { border-bottom: 0; }
.split-row.head { padding-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.split-row .sl { font-size: 14px; color: var(--muted); }
.split-row .sl small { display: block; font-size: 11px; color: var(--faint); margin-top: 1px; }
.split-row .sv { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }
.split-row.head .sv { font-size: 12px; font-weight: 600; }
.split-row .sv.you:not(.pos) { color: var(--text); }
.split-row.head .sv.you { color: var(--accent); }
.split-sep { padding: 12px 0 2px; }

/* ---------- App shell ----------
   The document scrolls normally (no fixed html/body height, no overflow hidden, no JS measuring).
   html/body are painted in the tab bar colour (--bar-bg); the dark page background lives on .app.
   So if an iOS home-screen app ends the layout viewport above the physical screen edge, whatever
   iOS shows below it is canvas = bar colour, and the bar visually runs to the bottom edge. */
html, body { min-height: 100%; height: auto; overflow: visible; }
.app { min-height: 100vh; min-height: 100dvh; background-color: var(--bg); }
.view { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 28px); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
  height: auto; min-height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 8px env(safe-area-inset-bottom, 0px);
  align-items: stretch; background: var(--bar-bg); }
.tabbar a { justify-content: center; padding: 0; min-height: var(--tabbar-h); }
.locked .tabbar { display: none !important; }
/* While locked, the strip iOS leaves below the viewport matches the lock screen's flat bottom (--bg). */
html.locked, html:has(body.locked), body.locked { background-color: var(--bg); }
.diag { font-size: 10.5px; opacity: .7; margin-top: 4px; }

html, body { padding: 0 !important; margin: 0 !important; border: 0 !important; transform: none !important; }

/* ---------- Responsive (Apple devices) ---------- */
.side-brand { display: none; }
/* Landscape iPhone / any notch side: keep content out of left/right insets */
.view { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.tabbar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
.list .grow, .list .t, .list .s { overflow-wrap: anywhere; }
.card, .page > * { min-width: 0; }
.rows dd { overflow-wrap: anywhere; }
.split { overflow-x: auto; }

/* Focus + pointer hover (Mac) */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.keypad button:focus-visible { border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  a.card, .icon-btn, .keypad button, .seg button, .tabbar a, .sections li a { transition: background-color .15s, transform .15s, box-shadow .15s, color .15s; }
  a.card:hover { transform: translateY(-1px); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
  .icon-btn:hover, .keypad button:not(.key-del):hover { background: color-mix(in srgb, var(--text) 10%, var(--card-2)); }
  .seg button:not(.on):hover { color: var(--text); }
  .tabbar a:not(.active):hover { color: var(--text); }
  .sections li a:hover .chev { color: var(--accent); }
}

/* PIN screen: centred on every size, also in short landscape */
.lock { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); overflow-y: auto; }
@media (max-height: 560px) and (orientation: landscape) {
  .lock-inner { max-width: 640px; display: grid; grid-template-columns: 1fr auto; column-gap: 40px; align-items: center; text-align: center; }
  .lock-logo { width: 52px; height: 52px; grid-column: 1; margin: 0 auto; }
  .lock-title, .lock-sub, .dots { grid-column: 1; }
  .lock-title { font-size: 22px; margin-top: 8px; }
  .dots { margin-bottom: 0; }
  .keypad { grid-column: 2; grid-row: 1 / span 4; grid-template-columns: repeat(3, 60px); gap: 8px 18px; }
  .keypad button { width: 60px; height: 60px; font-size: 24px; }
}
@media (min-width: 768px) and (min-height: 700px) {
  .lock-inner { max-width: 380px; }
  .lock-logo { width: 84px; height: 84px; }
  .lock-title { font-size: 30px; }
  .keypad { grid-template-columns: repeat(3, 82px); gap: 18px 28px; }
  .keypad button { width: 82px; height: 82px; }
}

/* iPad (portrait, Split View wide halves, iPhone landscape): 2-column card grid */
@media (min-width: 740px) {
  .view { max-width: 980px; padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
  .page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .page > * { grid-column: 1 / -1; }
  .page > .card:not(.hero), .page > section.card:not(.hero) { grid-column: auto; }
  .page > .grid2, .page > .head, .page > .back, .page > .section-title, .page > .banner, .page > .seg, .page > .foot, .page > .proj-strip, .page > .small { grid-column: 1 / -1; }
  .page > .card { margin-bottom: 16px; }
  .page-projects > a.card.proj { grid-column: auto; }
  .app .page > .card:has(.grid2), .app .page > .card:has(.split-row), .app .page > .card.split { grid-column: 1 / -1; }
  .grid2 { gap: 16px; margin-bottom: 16px; }
  .head h1 { font-size: 36px; }
  .icon-btn { width: 40px; height: 40px; }
  .seg button { padding: 10px 8px; font-size: 14px; }
  .list li { padding: 12px 0; }
  .list .t, .list .r .v { font-size: 15px; }
  p, .em-s, .banner div { max-width: 70ch; }
  .tabbar a { font-size: 11.5px; }
}

/* Wide (iPad landscape, Stage Manager large windows, Mac): left sidebar instead of bottom tab bar */
@media (min-width: 1024px) {
  :root { --side-w: 232px; }
  html:not(.locked), html:not(.locked) body { background-color: var(--bg); }
  .app { padding-left: calc(var(--side-w) + env(safe-area-inset-left)); }
  .tabbar { top: 0; bottom: 0; left: 0; right: auto; width: calc(var(--side-w) + env(safe-area-inset-left)); height: auto; min-height: 0;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px;
    padding: calc(var(--safe-t) + 22px) 14px calc(var(--safe-b) + 16px) max(14px, calc(env(safe-area-inset-left) + 14px));
    border-top: 0; border-right: 0.5px solid var(--line); background: var(--bar-bg); }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
  .side-brand img { border-radius: 7px; }
  .tabbar a { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; color: var(--muted); }
  .tabbar svg { width: 20px; height: 20px; }
  .tabbar a.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
  .view { padding-top: calc(var(--safe-t) + 28px); padding-bottom: calc(var(--safe-b) + 40px); max-width: 1040px; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .tabbar a:not(.active):hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
}

/* Mac / big displays: 3 columns where cards are independent */
@media (min-width: 1360px) {
  .view { max-width: 1280px; padding-left: 40px; padding-right: 40px; }
  .page-projects, .page-general, .page-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* money plan tracker */
.mp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.mp-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.mp-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px 8px; white-space: nowrap; }
.mp-table td { padding: 9px 8px; border-top: 0.5px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-table td:first-child { font-weight: 600; }

/* ================= Redesign layer ================= */
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; font-size: 15px; letter-spacing: -.005em; }
.tnum, .big, .mid, .val, .v, .mv, .sv, .p, dd, td { font-variant-numeric: tabular-nums; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }
svg.i.inl { width: 14px; height: 14px; vertical-align: -2px; color: var(--faint); }
.ini { font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card h2 { font-size: 12.5px; text-transform: none; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.card h2 svg.i { width: 15px; height: 15px; }
.head { margin: 4px 2px 18px; align-items: center; }
.head h1 { font-size: 30px; font-weight: 650; letter-spacing: -.028em; }
.head .sub { font-size: 12.5px; color: var(--muted); }
.head-act { display: flex; gap: 8px; align-items: center; }
.icon-btn { background: var(--card); border: 1px solid var(--line); color: var(--text); }
.icon-btn svg { fill: none; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-weight: 550; font-size: 14px; margin: 0 0 6px; }
.back svg.i { width: 16px; height: 16px; }
.section-title { font-size: 17px; font-weight: 650; letter-spacing: -.015em; margin: 26px 2px 10px; align-items: center; gap: 10px; }
.section-title > span { display: flex; align-items: baseline; gap: 8px; }
.big { font-size: 36px; font-weight: 650; letter-spacing: -.035em; }
.mid { font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
.mid .unit { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.label { font-size: 12.5px; color: var(--muted); font-weight: 550; margin-bottom: 4px; }
.kpi .val { font-weight: 650; }
.pos { color: var(--pos-c); }
.hero { border-color: var(--line); }
.hero h2 { color: var(--muted); }
.list li { border-top: 1px solid var(--line-2); }
.list .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--card-2); color: var(--muted); border: 1px solid var(--line-2); }
.list .ic svg.i { width: 17px; height: 17px; }
.list .t { font-weight: 550; }
.list .r .v { font-weight: 600; }
.tile { color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--card)) !important; border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); border-radius: 10px; display: grid; place-items: center; font-size: 0; }
.tile svg.i { width: 55%; height: 55%; }
.tile .ini { font-size: 13px; color: var(--c); }
.chev { color: var(--faint); display: inline-flex; }
.chev svg.i { width: 16px; height: 16px; }
.empty .em-ic { background: var(--card-2); color: var(--muted); border: 1px solid var(--line-2); border-radius: 12px; }
.empty .em-ic svg.i { width: 20px; height: 20px; }
.banner { border-radius: 12px; align-items: center; }
.banner > span { color: var(--amber); display: inline-flex; }
.banner.blue > span { color: var(--blue); }
.chip { font-weight: 600; border-radius: 6px; padding: 3px 8px; }
.progress { height: 6px; }
.seg { border: 1px solid var(--line); background: var(--card-2); border-radius: 10px; }
.seg button.on { background: var(--card); box-shadow: 0 1px 2px rgba(17,24,39,.08); }
.keypad button { background: var(--card); border: 1px solid var(--line); color: var(--text); }
.keypad .key-del { border: 0; background: transparent; }
.keypad .key-del svg { width: 26px; height: 26px; }
.lock-logo { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tabbar { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bar-bg) 92%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.tabbar svg { fill: none; width: 24px; height: 24px; }
.tabbar a { color: var(--faint); font-weight: 550; }
.tabbar a.active { color: var(--accent); }
@media (min-width: 1024px) {
  .tabbar { border-right: 1px solid var(--line); background: var(--bar-bg); }
  .tabbar a.active { background: var(--accent-soft); color: var(--accent); }
  .side-brand { font-weight: 650; }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* edit / add controls */
[data-edit] { position: relative; }
.edit-btn { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--faint); display: grid; place-items: center; cursor: pointer; padding: 0; }
.edit-btn svg.i { width: 15px; height: 15px; }
.edit-btn:hover, .edit-btn:active { color: var(--accent); background: var(--accent-soft); }
section.card[data-edit] > .edit-btn, .goal > .edit-btn { position: absolute; top: 12px; right: 12px; }
.goal { padding-right: 34px; }
td.ed-td { width: 36px; padding: 4px !important; }
.add-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; letter-spacing: 0; }
.add-btn svg.i { width: 15px; height: 15px; }
.card h2 .add-btn { margin-left: auto; height: 28px; font-size: 12.5px; }
.add-btn:hover { background: var(--accent-soft); }
.add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.page > .add-grid { grid-column: 1 / -1; }
.add-tile { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; cursor: pointer; color: var(--text); }
.add-tile:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.at-ic { grid-row: span 2; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.at-ic svg.i { width: 16px; height: 16px; }
.at-t { font-weight: 600; font-size: 14px; }
.at-s { font-size: 12px; color: var(--muted); }
.data-card .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.page > .data-card, .page > .colls { grid-column: 1 / -1; }
.coll { border-top: 1px solid var(--line-2); padding: 4px 0; }
.coll:first-child { border-top: 0; }
.coll summary { display: flex; justify-content: space-between; padding: 10px 2px; cursor: pointer; font-weight: 550; list-style: none; }
.coll summary::-webkit-details-marker { display: none; }
.coll[open] summary { color: var(--accent); }
.coll > .add-btn { margin: 6px 0 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-weight: 600; font-size: 14.5px; cursor: pointer; }
.btn svg.i { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger.ghost { background: transparent; color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }

/* sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: rgba(17,24,39,.32); opacity: 0; transition: opacity .2s; }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 92dvh; display: flex; flex-direction: column; background: var(--card); border-radius: 18px 18px 0 0; padding: 18px max(18px, env(safe-area-inset-right)) calc(18px + var(--safe-b)) max(18px, env(safe-area-inset-left)); transform: translateY(24px); opacity: 0; transition: transform .22s ease, opacity .22s ease; box-shadow: 0 -8px 30px rgba(17,24,39,.12); }
.sheet-wrap.on .sheet-bg { opacity: 1; } .sheet-wrap.on .sheet { transform: none; opacity: 1; }
.sheet-form { display: flex; flex-direction: column; min-height: 0; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-h h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.sheet-p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.sheet-body { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 4px 1px 8px; }
.fld { display: flex; flex-direction: column; gap: 5px; grid-column: 1 / -1; }
.fld:has(input[inputmode="decimal"]), .fld:has(input[type="date"]), .fld:has(input[type="month"]), .fld:has(select), .fld:has(input[type="color"]) { grid-column: auto; }
.fld label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fld .opt { font-weight: 450; color: var(--faint); }
.fld input, .fld select { height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 0 12px; font: inherit; font-size: 16px; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.fld input[type="color"] { padding: 4px; }
.chk { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.chk input { width: 20px; height: 20px; accent-color: var(--accent); }
.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-pick label { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick label:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.form-err { color: var(--red); font-size: 13.5px; margin: 4px 0; }
.sheet-actions { display: flex; gap: 8px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line-2); margin-top: 6px; }
.sheet-actions .sp { flex: 1; }
@media (min-width: 740px) {
  .sheet-wrap { align-items: center; padding: 24px; }
  .sheet { border-radius: 16px; padding-bottom: 18px; max-height: 86vh; }
}
@media (prefers-color-scheme: dark) { .sheet-bg { background: rgba(0,0,0,.55); } }
.btn.ghost { opacity: 1; }
section.card.pipe > div:first-child { padding-right: 30px; }
section.card[data-edit] > .edit-btn { top: 10px; right: 8px; }

/* ---------- Themes (Manage > Appearance). No attribute = Automatic (prefers-color-scheme). ---------- */
html[data-theme="light"] { --bg:#f5f6f8;--bg-elev:#fff;--card:#fff;--card-2:#f1f3f5;--line:#e6e9ee;--line-2:#eef0f3;--text:#111827;--muted:#6b6f7a;--faint:#9aa0a8;--accent:#0f766e;--accent-ink:#fff;--accent-soft:#e7f3f1;--pos-c:#15803d;--blue:#2f5bd3;--amber:#b45309;--red:#dc2626;--violet:#6d4bd1;--bar-bg:#fff;--shadow:0 1px 2px rgba(17,24,39,.04);color-scheme:light; }
html[data-theme="dark"] { --bg:#0e1013;--bg-elev:#16191d;--card:#16191d;--card-2:#1e2227;--line:#262a30;--line-2:#22262b;--text:#eef0f3;--muted:#9399a3;--faint:#646a74;--accent:#3fb8a6;--accent-ink:#06201c;--accent-soft:#15302c;--pos-c:#4ade80;--blue:#7aa2ff;--amber:#f0b453;--red:#f87171;--violet:#a78bfa;--bar-bg:#16191d;--shadow:none;color-scheme:dark; }
html[data-theme="midnight"] { --bg:#0e1013;--bg-elev:#16191d;--card:#16191d;--card-2:#1e2227;--line:#262a30;--line-2:#22262b;--text:#eef0f3;--muted:#9399a3;--faint:#646a74;--accent:#3fb8a6;--accent-ink:#06201c;--accent-soft:#15302c;--pos-c:#4ade80;--blue:#7aa2ff;--amber:#f0b453;--red:#f87171;--violet:#a78bfa;--bar-bg:#16191d;--shadow:none;color-scheme:dark; --bg:#000;--bg-elev:#0c0c0e;--card:#0c0c0e;--card-2:#151518;--line:#1f1f23;--line-2:#18181b;--text:#f5f5f7;--muted:#a1a1aa;--faint:#6b6b73;--accent:#5eead4;--accent-ink:#022c26;--accent-soft:#0d2a26;--bar-bg:#000; }
html[data-theme="graphite"] { --bg:#0e1013;--bg-elev:#16191d;--card:#16191d;--card-2:#1e2227;--line:#262a30;--line-2:#22262b;--text:#eef0f3;--muted:#9399a3;--faint:#646a74;--accent:#3fb8a6;--accent-ink:#06201c;--accent-soft:#15302c;--pos-c:#4ade80;--blue:#7aa2ff;--amber:#f0b453;--red:#f87171;--violet:#a78bfa;--bar-bg:#16191d;--shadow:none;color-scheme:dark; --bg:#1b1d21;--bg-elev:#24272c;--card:#24272c;--card-2:#2c3036;--line:#353a41;--line-2:#30343a;--text:#eceef1;--muted:#a3a9b3;--faint:#717782;--accent:#8ab4ff;--accent-ink:#0b1a33;--accent-soft:#25334d;--bar-bg:#24272c; }
html[data-theme="sand"] { --bg:#f5f6f8;--bg-elev:#fff;--card:#fff;--card-2:#f1f3f5;--line:#e6e9ee;--line-2:#eef0f3;--text:#111827;--muted:#6b6f7a;--faint:#9aa0a8;--accent:#0f766e;--accent-ink:#fff;--accent-soft:#e7f3f1;--pos-c:#15803d;--blue:#2f5bd3;--amber:#b45309;--red:#dc2626;--violet:#6d4bd1;--bar-bg:#fff;--shadow:0 1px 2px rgba(17,24,39,.04);color-scheme:light; --bg:#f4efe6;--bg-elev:#fffcf6;--card:#fffcf6;--card-2:#f3ece0;--line:#e6dccb;--line-2:#eee6d8;--text:#2a2118;--muted:#76695a;--faint:#a3968a;--accent:#9a5b1e;--accent-soft:#f5e7d6;--pos-c:#2f7a32;--red:#b42318;--bar-bg:#fffcf6; }
html[data-theme="navy"] { --bg:#0e1013;--bg-elev:#16191d;--card:#16191d;--card-2:#1e2227;--line:#262a30;--line-2:#22262b;--text:#eef0f3;--muted:#9399a3;--faint:#646a74;--accent:#3fb8a6;--accent-ink:#06201c;--accent-soft:#15302c;--pos-c:#4ade80;--blue:#7aa2ff;--amber:#f0b453;--red:#f87171;--violet:#a78bfa;--bar-bg:#16191d;--shadow:none;color-scheme:dark; --bg:#0b1424;--bg-elev:#111d33;--card:#111d33;--card-2:#17263f;--line:#1f3150;--line-2:#1a2a46;--text:#eaf1fb;--muted:#9fb0c8;--faint:#6a7d99;--accent:#7cc4ff;--accent-ink:#04203a;--accent-soft:#16304f;--pos-c:#5ee08f;--red:#ff8080;--bar-bg:#111d33; }
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:8px; }
.page > .theme-grid { grid-column:1 / -1; }
.theme-opt { position:relative; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; cursor:pointer; color:var(--text); display:flex; flex-direction:column; gap:2px; }
.theme-opt.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.th-sw { position:relative; height:52px; border-radius:8px; border:1px solid rgba(127,127,127,.25); margin-bottom:8px; overflow:hidden; }
.th-sw i { position:absolute; left:10px; right:28px; top:12px; height:12px; border-radius:4px; }
.th-sw b { position:absolute; left:10px; width:28px; bottom:10px; height:8px; border-radius:4px; }
.th-n { font-weight:600; font-size:14px; } .th-s { font-size:12px; color:var(--muted); }
.th-ck { position:absolute; top:16px; right:16px; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; }
.th-ck svg.i { width:13px; height:13px; stroke-width:2.4; }
.sheet-back { align-self:flex-start; display:inline-flex; align-items:center; gap:2px; border:0; background:none; color:var(--accent); font-weight:550; font-size:14px; padding:0 0 8px; cursor:pointer; }
.sheet-back svg.i { width:16px; height:16px; }

/* ---------------- full-stack additions: owed, budgets, export, toast ---------------- */
a.kpi-link { display: block; color: inherit; text-decoration: none; min-width: 0; }
a.kpi-link > .card { height: 100%; margin: 0; }
.h-link { display: inline-flex; align-items: center; gap: 2px; color: inherit; text-decoration: none; }
.h-link svg.i { width: 14px; height: 14px; }
.seg a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--muted); text-decoration: none; text-align: center; }
.seg a span { font-size: 12px; font-weight: 500; }
.seg a.on { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.owe-row .r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.btn.small-btn { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; gap: 4px; color: var(--accent); }
.btn.small-btn svg.i { width: 14px; height: 14px; }
.btn.small-btn:disabled { opacity: .5; }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 14px; }
.month-nav .mn-l { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.month-nav .icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.bud-list li { align-items: flex-start; }
.bud-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; font-size: 14.5px; }
.bud-top .t { font-weight: 600; }
.exp-list li a { display: flex; align-items: center; gap: 12px; width: 100%; color: inherit; text-decoration: none; }
.exp-list .chev svg { width: 18px; height: 18px; }
.hero .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
a.btn { text-decoration: none; }
.banner-card { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.banner-card .btn-row { display: flex; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); transform: translate(-50%, 12px); opacity: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px; max-width: min(92vw, 520px); padding: 11px 14px 11px 16px; border-radius: 12px;
  background: var(--text); color: var(--bg); font-size: 14px; font-weight: 500; box-shadow: 0 8px 28px rgba(0,0,0,.22); transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast button { border: 0; background: transparent; color: var(--accent-soft); font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 2px; }
@media (min-width: 1024px) { .toast { left: calc(50% + var(--side-w) / 2); bottom: 28px; } }
@media (min-width: 740px) { .page > .month-nav { grid-column: 1 / -1; } .app .page.page-owed > section.card, .app .page.page-budgets > section.card, .app .page.page-export > section.card { grid-column: 1 / -1; } }
.fld input[type="date"], .fld input[type="month"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; }