/* Lenon Finance: visual language follows the Myu Collectibles admin portal (ink app bar, pill nav, white cards, tinted KPI tiles). Self-hosted fonts, no external assets. */
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("/static/fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("/static/fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("/static/fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("/static/fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url("/static/fonts/nunito-latin-900-normal.woff2") format("woff2"); }
:root {
  --bg: #F1F5F9; --card: #FFFFFF; --ink: #0F172A; --text: #1E293B; --muted: #475569; --line: #E2E8F0; --line2: #CBD5E1;
  --orange: #EA580C; --orange-dark: #C2410C; --orange-soft: #FFF1E8; --teal: #0D9488; --teal-dark: #0F766E; --teal-soft: #E6F6F4;
  --blue: #2A75BB; --blue-soft: #E8F1FA; --purple: #7C3AED; --purple-soft: #F1EBFE; --cyan: #0891B2; --cyan-soft: #E0F4F8;
  --rose: #DB2777; --rose-soft: #FDE8F1; --amber: #CA8A04; --amber-soft: #FEF6D8; --slate: #64748B; --slate-soft: #EEF2F6;
  --neg: #B91C1C; --pos: #15803D; --radius: 14px;
  --c1: #2A75BB; --c2: #0D9488; --c3: #EA580C; --c4: #7C3AED; --c5: #DB2777; --c6: #0891B2; --c7: #94A3B8; --c8: #D9A406; --c9: #0F172A;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.06);
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --navh: 64px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.5; color: var(--text); background: var(--bg); }
h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0; }
a { color: var(--teal-dark); }
:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; }
[hidden] { display: none !important; }
.ico { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
code { overflow-wrap: anywhere; background: var(--slate-soft); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.small { font-size: .92rem; } .muted, .cap { color: var(--muted); } .neg { color: var(--neg) !important; }

/* ---------- app bar ---------- */
.appbar { background: var(--ink); color: #fff; }
.appbar-inner { max-width: 1400px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.brandbox { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: inherit; }
.logo { width: 48px; height: 48px; flex: none; display: block; }
.logo-bg { fill: var(--orange); } .logo-line { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .logo-dot { fill: #FDBA74; }
.title { color: #fff; font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; }
.title span { color: #FDBA74; font-weight: 700; }
.updated { margin: 2px 0 0; color: #CBD5E1; font-size: .92rem; }
.appbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.years { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 5px 4px 14px; }
.years-label { color: #CBD5E1; font-size: .9rem; font-weight: 600; margin-right: 4px; }
.years button { font: inherit; font-size: .98rem; font-weight: 700; color: #fff; background: transparent; border: 0; border-radius: 999px; padding: 5px 14px; cursor: pointer; min-height: 38px; }
.years button:hover { background: rgba(255,255,255,.12); }
.years button[aria-pressed="true"] { background: var(--orange); }
.logout { margin: 0; }
.btn-logout { font: inherit; font-size: 1rem; font-weight: 700; color: var(--ink); background: #fff; border: 0; border-radius: 999px; padding: 8px 20px; min-height: 44px; cursor: pointer; }
.btn-logout:hover { background: #FFE4D2; }

/* ---------- pill nav ---------- */
.pillnav { position: sticky; top: 0; z-index: 20; background: rgba(241,245,249,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.pillnav-inner { max-width: 1400px; margin: 0 auto; padding: 9px 24px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pillnav-inner::-webkit-scrollbar { display: none; }
.pillnav a { flex: none; text-decoration: none; color: var(--ink); background: #fff; border: 2px solid var(--line2); border-radius: 999px; padding: 6px 18px; font-weight: 700; font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.pillnav a:hover { border-color: var(--orange); color: var(--orange-dark); }
.pillnav a.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- layout ---------- */
main { max-width: 1400px; margin: 0 auto; padding: 8px 24px 28px; }
main > div > * + * { margin-top: 20px; }
.block-head { margin: 18px 0 0; }
.block-head h2 { font-size: 1.75rem; font-weight: 800; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.block-head .sub { margin: 4px 0 0; color: var(--muted); font-size: 1rem; }
.yr-chip { font-size: .95rem; font-weight: 700; color: var(--orange-dark); background: var(--orange-soft); border-radius: 999px; padding: 3px 12px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.card.pad { padding: 20px 22px; }
.card.pad > h3, .card-head h3 { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin: 0; }
.card.pad > .cap, .card-head .cap { margin: 2px 0 14px; font-size: .98rem; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.grid2 > .card { margin: 0; }
.msg { background: #FEF2F2; color: #7F1D1D; border: 2px solid #FCA5A5; border-radius: 12px; padding: 12px 16px; font-weight: 600; margin: 0 0 14px; }
.ok-msg { background: #DCFCE7; color: #166534; border: 2px solid #86EFAC; border-radius: 12px; padding: 12px 16px; font-weight: 600; margin: 0 0 14px; }
.foot { max-width: 1400px; margin: 0 auto; padding: 8px 24px 32px; color: var(--muted); font-size: .9rem; }
.empty { text-align: center; padding: 20px; color: var(--muted); }
.empty h3 { margin-bottom: 4px; }

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.kpis.k4 > .kpi { grid-column: span 1; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; min-width: 0; --tone: var(--line2); --tone-soft: var(--slate-soft); --tone-dark: var(--ink); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--tone); }
.kpi.blue { --tone: var(--blue); --tone-soft: var(--blue-soft); --tone-dark: #1F5C99; }
.kpi.orange { --tone: var(--orange); --tone-soft: var(--orange-soft); --tone-dark: var(--orange-dark); }
.kpi.purple { --tone: var(--purple); --tone-soft: var(--purple-soft); --tone-dark: #5B21B6; }
.kpi.cyan { --tone: var(--cyan); --tone-soft: var(--cyan-soft); --tone-dark: #0E7490; }
.kpi.teal { --tone: var(--teal); --tone-soft: var(--teal-soft); --tone-dark: var(--teal-dark); }
.kpi.rose { --tone: var(--rose); --tone-soft: var(--rose-soft); --tone-dark: #9D174D; }
.kpi.amber { --tone: var(--amber); --tone-soft: var(--amber-soft); --tone-dark: #854D0E; }
.kpi.slate { --tone: var(--slate); --tone-soft: var(--slate-soft); --tone-dark: #334155; }
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--tone-soft); color: var(--tone-dark); flex: none; }
.kpi-label { font-size: 1.02rem; font-weight: 700; color: var(--muted); line-height: 1.2; }
.kpi-value { font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 800; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-sub { font-size: .95rem; color: var(--muted); }
.kpi-delta { font-size: .9rem; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
.kpi-delta .vs { color: #64748B; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; border-radius: 999px; padding: 1px 9px 1px 5px; font-size: .88rem; background: var(--slate-soft); color: #334155; }
.delta .ico { width: 14px; height: 14px; stroke-width: 3; }
.delta.good { background: #DCFCE7; color: #166534; } .delta.bad { background: #FEE2E2; color: #991B1B; } .delta.neu { background: var(--amber-soft); color: #854D0E; }
.delta.flat { padding-left: 9px; }
.spark { width: 100%; height: 34px; display: block; margin-top: 4px; }
.spark-line { fill: none; stroke: var(--tone); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.spark-area { fill: var(--tone); opacity: .12; }
.kpi.hero { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #7C2D12 140%); color: #fff; border: 0; padding: 26px 28px 20px; justify-content: center; gap: 10px; --tone: var(--orange); }
.kpi.hero::before { background: linear-gradient(var(--orange), var(--teal)); }
.kpi.hero .kpi-icon { background: rgba(255,255,255,.14); color: #fff; width: 54px; height: 54px; }
.kpi.hero .kpi-icon .ico { width: 28px; height: 28px; }
.kpi.hero .kpi-label { color: #E2E8F0; font-size: 1.3rem; }
.kpi.hero .kpi-value { color: #fff; font-size: clamp(2.5rem, 5vw, 3.8rem); }
.kpi.hero .kpi-sub, .kpi.hero .kpi-delta, .kpi.hero .kpi-delta .vs { color: #E2E8F0; font-size: 1.05rem; }
.kpi.hero .spark { height: 56px; }
.kpi.hero .spark-line { stroke: #FDBA74; } .kpi.hero .spark-area { fill: #FDBA74; opacity: .18; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.stat-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--slate-soft); color: var(--muted); display: grid; place-items: center; flex: none; }
.stat-icon .ico { width: 20px; height: 20px; }
.stat-value { font-size: 1.3rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-label { font-size: .9rem; color: var(--muted); font-weight: 600; line-height: 1.2; }

/* ---------- charts ---------- */
.chart-box { width: 100%; }
svg.chart { width: 100%; height: auto; display: block; font-family: var(--font); }
.chart text { fill: #475569; font-size: 12px; font-weight: 600; }
.grid-l { stroke: #E2E8F0; stroke-width: 1; stroke-dasharray: 3 4; } .axis { stroke: #94A3B8; stroke-width: 1.5; }
.s1{fill:var(--c1)} .s2{fill:var(--c2)} .s3{fill:var(--c3)} .s4{fill:var(--c4)} .s5{fill:var(--c5)} .s6{fill:var(--c6)} .s7{fill:var(--c7)} .s8{fill:var(--c8)}
.l1{stroke:var(--c1)} .l2{stroke:var(--c2)} .l3{stroke:var(--c3)} .l4{stroke:var(--c4)} .l5{stroke:var(--c5)} .l6{stroke:var(--c6)}
.ln { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.area { stroke: none; opacity: .13; } .dot { stroke: #fff; stroke-width: 1.5; }
.c1{background:var(--c1)} .c2{background:var(--c2)} .c3{background:var(--c3)} .c4{background:var(--c4)} .c5{background:var(--c5)} .c6{background:var(--c6)} .c7{background:var(--c7)} .c8{background:var(--c8)} .c9{background:var(--c9)}
.d1{stroke:var(--c1)} .d2{stroke:var(--c2)} .d3{stroke:var(--c3)} .d4{stroke:var(--c4)} .d5{stroke:var(--c5)} .d6{stroke:var(--c6)} .d7{stroke:var(--c7)} .d8{stroke:var(--c8)}
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: .95rem; font-weight: 600; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i, .gauge-key i, .lg-list i, .dotc { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }
.dotc { border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.donut { flex: none; max-width: 100%; height: auto; transform: none; }
.donut-track { stroke: #EEF2F6; }
.donut circle { transition: opacity .15s; } .donut circle:hover { opacity: .8; }
.donut-small { fill: #475569; font-size: 2.5px; font-weight: 700; font-family: var(--font); } .donut-big { fill: var(--ink); font-size: 4.6px; font-weight: 800; font-family: var(--font); }
.lg-list { list-style: none; margin: 0; padding: 0; flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.lg-list li:last-child { border-bottom: 0; }
.lg-name { flex: 1; font-weight: 700; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.lg-val { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.lg-pct { color: var(--muted); font-weight: 700; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.gauge { width: 100%; max-width: 340px; display: block; margin: 0 auto; height: auto; font-family: var(--font); }
.gauge-track { stroke: #EEF2F6; } .g-tax { stroke: var(--orange); } .g-ref { stroke: var(--teal); } .g-owe { stroke: var(--neg); }
.gauge path { stroke-linecap: butt; }
.gauge-small { fill: #475569; font-size: 11.5px; font-weight: 700; } .gauge-big { fill: var(--ink); font-size: 26px; font-weight: 800; } .gauge-big.pos { fill: var(--teal-dark); } .gauge-big.neg { fill: var(--neg); }
.gauge-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; font-weight: 700; color: var(--muted); margin-top: 4px; }
.gauge-key span { display: inline-flex; align-items: center; gap: 7px; }
.splitbar { width: 100%; height: 18px; display: block; border-radius: 99px; overflow: hidden; margin: 14px 0 8px; }
.prog { height: 12px; border-radius: 99px; background: #EEF2F6; overflow: hidden; }
.prog span { display: block; height: 100%; border-radius: 99px; width: 0; }
.p1{background:var(--c1)} .p2{background:var(--c2)} .p3{background:var(--c3)} .p4{background:var(--c4)} .p5{background:var(--c5)} .p6{background:var(--c6)} .p7{background:var(--c7)} .p8{background:var(--c8)}
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: flex; flex-direction: column; gap: 5px; }
.bar-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bar-name { font-weight: 700; color: var(--ink); } .bar-val { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.bar-sub { font-size: .9rem; color: var(--muted); }
.flow { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

/* ---------- chips, notes, panels ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.chips .more { margin-left: auto; font-weight: 700; }
.badge { display: inline-block; font-size: .88rem; font-weight: 700; border-radius: 999px; padding: 2px 11px; white-space: normal; background: var(--slate-soft); color: #334155; }
.badge.green { background: #DCFCE7; color: #166534; } .badge.amber { background: #FEF3C7; color: #92400E; } .badge.grey, .badge.slate { background: #E2E8F0; color: #334155; }
.note { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: .98rem; background: var(--blue-soft); color: #1F4E7A; margin-top: 14px; }
.note .ico { flex: none; margin-top: 1px; width: 20px; height: 20px; }
.note.warn { background: #FEF3C7; color: #78350F; } .note.bad { background: #FEF2F2; color: #7F1D1D; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel > summary { cursor: pointer; padding: 14px 20px; font-weight: 800; color: var(--ink); font-size: 1.08rem; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after { content: "+"; width: 28px; height: 28px; border-radius: 50%; background: var(--slate-soft); display: grid; place-items: center; font-size: 1.2rem; color: var(--muted); flex: none; }
.panel[open] > summary::after { content: "–"; }
.panel-body { padding: 0 20px 18px; }
.est .panel { box-shadow: none; margin-top: 14px; background: #F8FAFC; } .est .panel > summary { padding: 8px 16px; font-size: .98rem; min-height: 44px; }
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checks li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .98rem; } .checks li:last-child { border-bottom: 0; }
ul.flags { margin: 6px 0; padding-left: 20px; font-size: .95rem; color: #7C2D12; } ul.flags li { margin: 3px 0; }
.notes-list { display: flex; flex-direction: column; }
.nt { border-bottom: 1px solid var(--line); padding: 8px 0; } .nt:last-child { border-bottom: 0; }
.nt > summary { cursor: pointer; list-style: none; min-height: 40px; display: flex; align-items: center; } .nt > summary::-webkit-details-marker { display: none; }
.nt p { margin: 6px 0 4px; font-size: .98rem; }
.ref { padding: 10px 0; border-bottom: 1px solid var(--line); } .ref p { margin: 4px 0 0; }

/* ---------- receipts ---------- */
.filters { margin: 0 0 14px; }
.seg { display: inline-flex; gap: 4px; background: var(--slate-soft); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.seg button { font: inherit; font-weight: 700; font-size: .95rem; border: 0; background: transparent; color: var(--ink); padding: 6px 16px; border-radius: 999px; cursor: pointer; min-height: 38px; }
.seg button.on, .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.rcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.rc { min-width: 0; border: 1px solid var(--line); border-left: 5px solid var(--line2); border-radius: 12px; background: #fff; }
.rc.likely { border-left-color: var(--teal); } .rc.check { border-left-color: var(--amber); } .rc.excluded { border-left-color: var(--slate); }
.rc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 58px; }
.rc > summary::-webkit-details-marker { display: none; }
.rc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .rc-main b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-main small { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-amt { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.rc-body { padding: 0 14px 12px 14px; border-top: 1px dashed var(--line); font-size: .95rem; } .rc-body p { margin: 8px 0 0; } .rc-meta, .rc-files { color: var(--muted); font-size: .9rem; }

/* ---------- tables ---------- */
.table-wrap { width: 100%; overflow-x: auto; }
.rtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .98rem; font-variant-numeric: tabular-nums; }
.rtable th, .rtable td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rtable .num { text-align: right; }
.rtable thead th { background: #E2E8F0; color: var(--ink); font-weight: 800; font-size: .95rem; border-bottom: 2px solid var(--line2); }
.rtable thead th:first-child { border-top-left-radius: 10px; } .rtable thead th:last-child { border-top-right-radius: 10px; }
.rtable tbody tr:nth-child(even) { background: #F8FAFC; } .rtable tbody tr:hover { background: #FFF7F0; }
.rtable tr.total td { background: var(--orange-soft); font-weight: 800; color: var(--ink); border-top: 2px solid var(--orange); }

/* ---------- forms & buttons ---------- */
form.inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 6px 0; }
form.inline > div { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; }
label { font-weight: 700; font-size: .92rem; color: var(--muted); }
input, select, textarea { font: inherit; border: 2px solid var(--line2); border-radius: 10px; padding: 8px 12px; min-height: 44px; background: #fff; color: var(--ink); width: 100%; }
textarea { min-height: 110px; margin: 10px 0; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
select { width: auto; min-width: 150px; }
.btn { font: inherit; font-weight: 700; border: 2px solid var(--line2); background: #fff; color: var(--ink); padding: 8px 18px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.btn:hover { border-color: var(--orange); color: var(--orange-dark); }
.btn-primary { background: var(--orange); border-color: var(--orange); color: #fff; } .btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.btn-sm { padding: 2px 12px; font-size: .88rem; min-height: 32px; }

/* ---------- sign-in / setup ---------- */
.auth-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #7C2D12 150%); }
.auth-card { background: #fff; border-radius: 20px; padding: 30px 28px; width: 100%; max-width: 400px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.auth-logo svg { width: 56px; height: 56px; display: block; }
.auth-card h1 { margin: 12px 0 2px; font-size: 1.7rem; font-weight: 800; } .auth-sub { color: var(--muted); margin: 0 0 14px; }
.auth-card form { display: flex; flex-direction: column; gap: 6px; }
.auth-card .btn { margin-top: 10px; width: 100%; padding: 11px; }
.auth-card .hint, .auth-hint { color: var(--muted); font-size: .88rem; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi.hero { grid-row: auto; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .rcs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  main, .foot { padding-left: 16px; padding-right: 16px; }
  .appbar-inner { padding: 12px 16px; } .pillnav-inner { padding: 8px 16px; }
  .logo { width: 40px; height: 40px; } .title { font-size: 1.3rem; } .updated { font-size: .82rem; }
  .appbar-actions { width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: 8px; }
  .years { padding-left: 5px; } .years-label { display: none; } .years button { padding: 5px 11px; font-size: .92rem; }
  .btn-logout { padding: 6px 14px; font-size: .95rem; min-height: 40px; }
  .stats .stat:last-child:nth-child(odd) { grid-column: span 2; }
  .block-head h2 { font-size: 1.5rem; }
  .kpis { gap: 10px; } .kpi { padding: 14px 14px 12px; } .kpi-icon { width: 34px; height: 34px; } .kpi-icon .ico { width: 18px; height: 18px; }
  .kpi-label { font-size: .92rem; } .kpi-value { font-size: 1.45rem; } .kpi-delta .vs { display: none; } .kpi-delta { font-size: .8rem; }
  .kpi.hero { padding: 20px 18px 14px; } .kpi.hero .kpi-value { font-size: 2.5rem; } .kpi.hero .kpi-label { font-size: 1.1rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stat { padding: 10px; } .stat-value { font-size: 1.1rem; }
  .card.pad { padding: 16px 16px; } .panel > summary { padding: 12px 16px; } .panel-body { padding: 0 16px 16px; }
  .donut-wrap { gap: 10px; }
  .rtable { font-size: .9rem; }
  .rc-main b, .rc-main small { white-space: normal; overflow: visible; }
  .rc > summary { align-items: flex-start; } .rc-amt { min-width: 0; }
}
@media (max-width: 380px) { .kpis { grid-template-columns: 1fr; } .kpi.hero { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.card + .card, .card + .panel, .panel + .card, .panel + .panel, .panel + .note, .card + .note, .note + .card, .filters + .card, .filters + .panel { margin-top: 20px; }
.est .panel + .panel, .card .panel + .panel { margin-top: 12px; }

/* ---------- v3 additions ---------- */
.kpi-value.txt { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
.kpi.hero .kpi-value.txt { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.tbl select, .panel-body table select { max-width: 200px; font-size: .95rem; padding: 6px 8px; }
.est .panel-body table { margin-bottom: 14px; }

/* ---------- spending categories drill-down ---------- */
.crumbs { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; margin-top: 16px; }
.cat-tile { text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--tone, var(--line2)); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: transform .12s, box-shadow .12s; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.12); }
.cat-tile:focus-visible, .tx > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.cat-name { font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.cat-name i, .cat-hero i { width: 14px; height: 14px; border-radius: 5px; display: inline-block; flex: none; }
.cat-amt { font-size: 1.75rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cat-meta { font-size: .92rem; color: var(--muted); font-weight: 600; }
.ct1{--tone:var(--c1)} .ct2{--tone:var(--c2)} .ct3{--tone:var(--c3)} .ct4{--tone:var(--c4)} .ct5{--tone:var(--c5)} .ct6{--tone:var(--c6)} .ct7{--tone:var(--c7)} .ct8{--tone:var(--c8)}
.cat-hero { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--tone); }
.cat-hero h3 { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.cat-hero .cap { margin: 0 0 0 auto; }
.cat-jump { margin: 14px 0 0; }
.tx-list { display: flex; flex-direction: column; margin-top: 8px; }
.tx { border-bottom: 1px solid var(--line); }
.tx > summary { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 11px 6px; cursor: pointer; list-style: none; }
.tx > summary::-webkit-details-marker { display: none; }
.tx > summary:hover { background: #FFF7F0; }
.tx[open] > summary { background: var(--orange-soft); }
.tx-date { color: var(--muted); font-weight: 700; font-size: .93rem; white-space: nowrap; }
.tx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.tx-items { color: var(--muted); font-weight: 500; }
.tx-amt { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tx-body { padding: 4px 8px 16px; }
.tx-cat { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tx-body .wrap, .rtable .wrap { white-space: normal; display: inline-block; max-width: 420px; }
.badge.blue { background: #DBEAFE; color: #1E3A8A; }
@media (max-width: 700px) { .tx > summary { grid-template-columns: minmax(0, 1fr) auto; } .tx-date { grid-column: 1 / -1; } .tx-name { white-space: normal; } .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-amt { font-size: 1.4rem; } }
:root { --c10: #65A30D; --c11: #0369A1; --c12: #F43F5E; --c13: #78716C; }
.c10{background:var(--c10)} .s10{fill:var(--c10)} .d10{stroke:var(--c10)} .p10{background:var(--c10)} .ct10{--tone:var(--c10)}
.c11{background:var(--c11)} .s11{fill:var(--c11)} .d11{stroke:var(--c11)} .p11{background:var(--c11)} .ct11{--tone:var(--c11)}
.c12{background:var(--c12)} .s12{fill:var(--c12)} .d12{stroke:var(--c12)} .p12{background:var(--c12)} .ct12{--tone:var(--c12)}
.c13{background:var(--c13)} .s13{fill:var(--c13)} .d13{stroke:var(--c13)} .p13{background:var(--c13)} .ct13{--tone:var(--c13)}

/* Overview spending block */
.sp-ov { margin-top: 24px; }
.sp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-head h3 { margin: 0; font-size: 1.15rem; }
.sp-head .btn { margin-left: auto; }
.sp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 16px; margin-top: 12px; align-items: stretch; }
.sp-top > .card { margin: 0; }
.sp-kpis { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.sp-ov .cat-grid { margin-top: 16px; }
@media (max-width: 900px) { .sp-top { grid-template-columns: minmax(0, 1fr); } .sp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .sp-kpis { grid-template-columns: 1fr; } }
.sp-ov .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-kpis .kpi { grid-column: 1 / -1; }
@media (max-width: 700px) { .sp-ov .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }