/* 두손장부 design system
   Layout: desktop = 248px sidebar + fluid content (max 1320) with 12-col card grid; phone = top bar + content + bottom tab bar with center add button.
   Identity: open-ledger mark in two hands' colors (indigo + coral). Indigo = action and income, ink = spending, coral = second person. */
:root{
  --bg:#f2f4f7; --surface:#ffffff; --surface-2:#f6f7f9; --surface-3:#eceef2; --line:#e8ebf0; --line-2:#f1f3f6;
  --ink:#101828; --ink-2:#475467; --ink-3:#8b95a5; --ink-4:#c3c9d3;
  --brand:#3e5bf5; --brand-2:#2c47d8; --brand-soft:#edf0ff; --brand-ink:#ffffff; --brand-line:#d5dcff; --brand-btn:#3e5bf5; --brand-btn-2:#2c47d8; --grid:#eceff3;
  --coral:#ff6a55; --coral-soft:#ffede9;
  --good:#0f9f6e; --good-soft:#e5f7ef; --warn:#d98500; --warn-soft:#fff4dd; --bad:#e5484d; --bad-soft:#fdecec;
  --note:#fff6d1; --note-ink:#5a4708;
  --t-assets:#2a78d6; --t-liabilities:#e34948; --t-capital:#4a3aa7; --t-expenses:#eb6834; --t-income:#1baf7a;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948; --s0:#a3abb8;
  --sh-1:0 1px 2px rgba(16,24,40,.04),0 2px 6px rgba(16,24,40,.03);
  --sh-2:0 10px 30px rgba(16,24,40,.10),0 2px 6px rgba(16,24,40,.05);
  --sh-3:0 24px 60px rgba(16,24,40,.22);
  --r-xl:24px; --r-lg:20px; --r:14px; --r-sm:11px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --gut:16px; --side:248px; --cp:22px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c0e12; --surface:#15181e; --surface-2:#1b1f26; --surface-3:#242933; --line:#252a33; --line-2:#1e232b;
  --ink:#f2f4f7; --ink-2:#b5bdc9; --ink-3:#7f8897; --ink-4:#4c5462;
  --brand:#8197ff; --brand-2:#9aabff; --brand-soft:#1c2340; --brand-ink:#ffffff; --brand-line:#2e3966; --brand-btn:#4f6bff; --brand-btn-2:#6580ff; --grid:rgba(255,255,255,.06);
  --coral:#ff8b78; --coral-soft:#3a201c;
  --good:#3ccf94; --good-soft:#12291f; --warn:#f2b44a; --warn-soft:#2f2412; --bad:#ff7378; --bad-soft:#36191b;
  --note:#3b3418; --note-ink:#f3e3a3;
  --t-assets:#3987e5; --t-liabilities:#e66767; --t-capital:#9085e9; --t-expenses:#d95926; --t-income:#199e70;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#2f9a2f; --s7:#9085e9; --s8:#e66767; --s0:#5d6573;
  --sh-1:0 1px 0 rgba(255,255,255,.03); --sh-2:0 12px 32px rgba(0,0,0,.5); --sh-3:0 24px 70px rgba(0,0,0,.6);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c0e12; --surface:#15181e; --surface-2:#1b1f26; --surface-3:#242933; --line:#252a33; --line-2:#1e232b;
  --ink:#f2f4f7; --ink-2:#b5bdc9; --ink-3:#7f8897; --ink-4:#4c5462;
  --brand:#8197ff; --brand-2:#9aabff; --brand-soft:#1c2340; --brand-ink:#ffffff; --brand-line:#2e3966; --brand-btn:#4f6bff; --brand-btn-2:#6580ff; --grid:rgba(255,255,255,.06);
  --coral:#ff8b78; --coral-soft:#3a201c;
  --good:#3ccf94; --good-soft:#12291f; --warn:#f2b44a; --warn-soft:#2f2412; --bad:#ff7378; --bad-soft:#36191b;
  --note:#3b3418; --note-ink:#f3e3a3;
  --t-assets:#3987e5; --t-liabilities:#e66767; --t-capital:#9085e9; --t-expenses:#d95926; --t-income:#199e70;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#2f9a2f; --s7:#9085e9; --s8:#e66767; --s0:#5d6573;
  --sh-1:0 1px 0 rgba(255,255,255,.03); --sh-2:0 12px 32px rgba(0,0,0,.5); --sh-3:0 24px 70px rgba(0,0,0,.6);
  color-scheme:dark}

html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-feature-settings:"ss06"}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-user-select:none;user-select:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:var(--brand);text-decoration:none}
.tnum,table td.num,.cols .num{font-variant-numeric:tabular-nums}
.ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::selection{background:var(--brand-soft)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== shell ===== */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100%;background:linear-gradient(to right,var(--surface) calc(var(--side) - 1px),var(--line) calc(var(--side) - 1px),var(--line) var(--side),transparent var(--side))}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:20px 14px 16px;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;scrollbar-width:none}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;font-weight:800;font-size:18.5px;letter-spacing:-.045em}
.brand svg{flex:none}
.ledger-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 10px 10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-align:left;margin-bottom:10px;transition:background .15s}
.ledger-btn:hover{background:var(--surface-2)}
.ledger-dot{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;flex:none}
.ledger-btn .t{flex:1;min-width:0}
.ledger-btn b{display:block;font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger-btn small{display:block;font-size:12px;color:var(--ink-3);font-weight:500}
.nav-sec{font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;padding:14px 12px 6px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--ink-2);font-weight:600;font-size:14.5px;text-align:left;transition:background .15s,color .15s}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--brand-soft);color:var(--brand)}
.nav button .badge{margin-left:auto}
.nav .ai-dot{width:7px;height:7px;border-radius:50%;background:var(--coral);margin-left:auto}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:12px}
.side-cta{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.people{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);background:var(--surface-2);font-size:13px;color:var(--ink-2)}
.people .stack-ava{display:flex}
.people .stack-ava>*+*{margin-left:-8px}
.ava{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex:none;box-shadow:0 0 0 2px var(--surface-2);object-fit:cover}
.ava.sm{width:20px;height:20px;font-size:10px}
.online{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 2px var(--surface-2)}
.main{min-width:0;display:flex;flex-direction:column}
.content{width:100%;max-width:1320px;margin:0 auto;padding:28px 36px 64px;display:flex;flex-direction:column;gap:22px}
.mtop,.tabbar{display:none}

.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.phead .ttl{min-width:0}
.phead small{display:block;font-size:13.5px;color:var(--ink-3);font-weight:600;margin-bottom:3px}
.phead h1{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.15}
.phead .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.phead .acts-end{display:inline-flex;align-items:center;gap:8px}
/* a chosen date range takes room in a wide head: the search button gives up its shortcut hint first */
.phead .acts:has(.pp-dates) .searchkey{min-width:0}
.phead .acts:has(.pp-dates) .searchkey kbd{display:none}
.searchkey{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-3);font-size:14px;min-width:240px;transition:border-color .15s}
.searchkey:hover{border-color:var(--ink-4)}
.searchkey kbd{margin-left:auto}
kbd{font-family:var(--font);font-size:11.5px;font-weight:700;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 6px;line-height:18px}
.btn kbd{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2);color:inherit}

@media (max-width:1099px){
  .app{grid-template-columns:minmax(0,1fr);background:none}
  .side{display:none}
  .mtop{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:30;align-items:center;gap:8px;height:58px;padding:0 10px 0 16px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px)}
  .mtop .sp{flex:1}
  .mtop .ledger-btn{width:auto;max-width:64vw;margin:0;border:0;background:none;padding:6px 4px}
  .mtop .ledger-btn b{font-size:17px;font-weight:800}
  .mtop .ledger-btn small{display:none}
  .content{padding:4px var(--gut) calc(110px + env(safe-area-inset-bottom,0px));gap:18px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:6px 0 3px;font-size:11px;font-weight:700;color:var(--ink-3)}
  .tabbar button[aria-current="page"]{color:var(--ink)}
  .tabbar .add{align-self:center;justify-self:center;width:52px;height:52px;border-radius:18px;background:var(--brand-btn);color:var(--brand-ink);display:grid;place-items:center;padding:0;box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 40%,transparent);margin-bottom:2px}
  .phead h1{font-size:26px}
  .phead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 8px}
  .phead .acts{grid-column:1/-1;order:3}
  .phead .acts:empty{display:none}
  .phead .searchkey{display:none}
  .hide-m{display:none!important}
  .kv b{font-size:16.5px}
  .hero{font-size:38px}.hero small{font-size:21px}
  .kv.kv3{gap:10px 12px}
}
@media (min-width:1100px){.hide-d{display:none!important}}

/* ===== grid & cards ===== */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}
@media (max-width:1280px){.c3{grid-column:span 6}}
@media (max-width:1099px){.grid{gap:14px}.c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12}}
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:22px;min-width:0;display:flex;flex-direction:column;gap:16px}
.card.flat{box-shadow:none;background:var(--surface-2)}
.card.pad0{padding:0;gap:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.card-h h2,.card-h h3{font-size:16.5px;font-weight:750;letter-spacing:-.025em}
.card-h .more{border:0;background:none;color:var(--ink-3);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:2px;padding:4px 2px;border-radius:8px}
.card-h .more:hover{color:var(--ink)}
.pad0 .card-h{padding:20px 22px 6px}
@media (max-width:1099px){.card{padding:18px;border-radius:var(--r-xl)}.pad0 .card-h{padding:18px 18px 4px}}
.lbl{font-size:14px;font-weight:600;color:var(--ink-3)}
.hero{font-size:44px;font-weight:800;letter-spacing:-.045em;line-height:1.05;overflow-wrap:anywhere}
.hero small{font-size:24px;font-weight:700;margin-left:3px;letter-spacing:-.02em;color:var(--ink-2)}
.big{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.1;overflow-wrap:anywhere}
.big small{font-size:17px;font-weight:700;margin-left:2px;color:var(--ink-2)}
@media (max-width:1099px){.hero{font-size:38px}}
.delta{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:8px;font-size:13px;font-weight:700;white-space:nowrap}
.delta.good{background:var(--good-soft);color:var(--good-t)}.delta.bad{background:var(--bad-soft);color:var(--bad-t)}.delta.flat{background:var(--surface-2);color:var(--ink-2)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px 18px}
.kv>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.kv span{font-size:13px;color:var(--ink-3);font-weight:600}
.kv .delta{align-self:flex-start;margin-top:4px}
.kv b{font-size:18px;font-weight:750;letter-spacing:-.025em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kv b.faint{color:var(--ink-3);font-weight:650;font-size:15px}
.kv.kv3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:-8px}
.hero-delta{display:flex;align-items:center;gap:6px;padding-bottom:6px}
.hero-note{margin-top:-8px}
.nw-card{cursor:pointer}
.mix{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.mixbar{display:flex;height:8px;border-radius:5px;overflow:hidden;gap:2px;background:var(--surface-3)}
.mixbar i{display:block;height:100%}
.mixrows{display:flex;flex-direction:column;gap:8px}
.mixrows div{display:grid;grid-template-columns:8px minmax(0,1fr) auto 64px;gap:10px;align-items:center;font-size:13.5px}
.mixrows i{width:8px;height:8px;border-radius:3px}
.mixrows span{color:var(--ink-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mixrows em{font-style:normal;color:var(--ink-3);font-size:12.5px}
.mixrows b{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.mixleg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.mixleg span{display:inline-flex;align-items:center;gap:6px}
.mixleg i{width:8px;height:8px;border-radius:3px;display:inline-block}
.mixleg b{color:var(--ink-3);font-weight:600}
.qi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.qi li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.qi-ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--ink-2);margin-top:-1px}
.qi-ic.good{background:var(--good-soft);color:var(--good-t)}.qi-ic.bad{background:var(--bad-soft);color:var(--bad-t)}.qi-ic.warn{background:var(--warn-soft);color:var(--warn-t)}
.split{height:1px;background:var(--line);margin:0 -22px}
@media (max-width:1099px){.split{margin:0 -18px}}
.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}.vfaint{color:var(--ink-3);font-weight:450}
.inc{color:var(--brand-t)}.neg{color:var(--bad-t)}.pos{color:var(--good-t)}
.sub{font-size:13.5px;color:var(--ink-3)}
.small{font-size:13px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row.nw{flex-wrap:nowrap}
.sp{flex:1}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.center{text-align:center}

/* ===== controls ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 15px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:650;font-size:14.5px;white-space:nowrap;color:var(--ink);transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--brand-btn);border-color:var(--brand-btn);color:var(--brand-ink)}
.btn.pri:hover{background:var(--brand-btn-2);border-color:var(--brand-btn-2)}
.btn.soft{background:var(--brand-soft);border-color:transparent;color:var(--brand)}
.btn.soft:hover{background:color-mix(in srgb,var(--brand-soft) 70%,var(--brand-line))}
.btn.ghost{border-color:transparent;background:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.danger{color:var(--bad-t);border-color:transparent;background:var(--bad-soft)}
.btn.sm{height:32px;padding:0 11px;font-size:13.5px;border-radius:10px;gap:5px}
.btn.lg{height:54px;font-size:16.5px;border-radius:16px;font-weight:700}
.btn.block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.ibtn{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;border:0;background:none;color:var(--ink-2);transition:background .15s}
.ibtn:hover{background:var(--surface-3);color:var(--ink)}
.ibtn.on{background:var(--brand-soft);color:var(--brand)}
.ibtn.sm{width:32px;height:32px;border-radius:9px}
.lnk{border:0;background:none;padding:0;color:var(--brand);font-weight:650;font-size:inherit}
.lnk:hover{text-decoration:underline;text-underline-offset:3px}
input[type=text],input[type=date],input[type=month],input[type=number],input[type=search],select,textarea{height:46px;border:1px solid transparent;border-radius:12px;background:var(--surface-2);padding:0 14px;font-size:15.5px;width:100%;min-width:0;transition:border-color .15s,background .15s}
textarea{height:auto;padding:12px 14px;resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
input:hover,select:hover,textarea:hover{border-color:var(--line)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
input::placeholder,textarea::placeholder{color:var(--ph,var(--ink-4))}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);margin:0;flex:none;cursor:pointer}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>span{font-size:13px;font-weight:650;color:var(--ink-2)}
.field small{font-size:12.5px;color:var(--ink-3)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fgrid .full{grid-column:1/-1}
@media (max-width:560px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:12px;background:var(--surface-3);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg button{border:0;background:none;height:32px;padding:0 13px;border-radius:9px;font-size:13.5px;font-weight:650;color:var(--ink-2);white-space:nowrap;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.seg.full{display:grid;width:100%}
.seg.full button{height:38px;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
@media (max-width:1099px){.chips.scroll{margin:0 calc(-1 * var(--gut));padding:2px var(--gut);scroll-padding:0 var(--gut)}}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--ink-2);max-width:100%;transition:background .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--ink-4);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip.brand{background:var(--brand-soft);border-color:transparent;color:var(--chip-t)}
.chip small{color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.chip.on small{color:color-mix(in srgb,var(--surface) 70%,transparent)}
.chip .x{display:grid;place-items:center;border:0;background:none;color:inherit;opacity:.6;padding:0;margin-right:-4px}
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.badge.brand{background:var(--brand-soft);color:var(--brand-t)}.badge.good{background:var(--good-soft);color:var(--good-t)}.badge.warn{background:var(--warn-soft);color:var(--warn-t)}.badge.bad{background:var(--bad-soft);color:var(--bad-t)}.badge.coral{background:var(--coral-soft);color:var(--coral)}
.mnav{display:inline-flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:2px}
.mnav .ibtn{width:34px;height:34px;border-radius:9px}
.mnav .lab{border:0;background:none;font-weight:700;font-size:14.5px;padding:0 8px;min-width:96px;height:34px;border-radius:9px;white-space:nowrap}
.mnav .lab:hover{background:var(--surface-2)}
.searchbox{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:13px;background:var(--surface-2);color:var(--ink-3);border:1px solid transparent}
.searchbox:focus-within{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.searchbox input{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;height:42px!important}
.bar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:4px;background:var(--brand);transition:width .4s ease}
.bar.over i{background:var(--bad)}.bar.warn i{background:var(--warn)}.bar.ink i{background:var(--ink)}
.bar em{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.5}
.bar.thin{height:6px}

/* ===== transactions ===== */
.days{display:flex;flex-direction:column}
.dayh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 22px 6px;font-size:13.5px;font-weight:700;color:var(--ink-2);position:sticky;top:0;background:var(--surface);z-index:1}
.dayh span{font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:13px}
/* a long period lists its days under month headings with the month's totals */
.monh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:20px 22px 4px;margin-top:6px;border-top:1px solid var(--line-2)}
.days>div:first-child .monh{border-top:0;margin-top:0}
.monh b{font-size:16px;font-weight:750;letter-spacing:-.02em}
.monh>span{font-size:13px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (max-width:1099px){.monh{padding:20px 18px 4px}}
.tx{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;padding:11px 22px;border:0;background:none;text-align:left;transition:background .12s}
.tx:hover{background:var(--surface-2)}
.tx.sel{background:var(--brand-soft)}
.tx.wide{grid-template-columns:24px 42px minmax(0,1fr) minmax(120px,190px) minmax(120px,190px) 120px}
.tx.wide.bal{grid-template-columns:24px 42px minmax(0,1fr) minmax(120px,190px) minmax(120px,190px) 120px 120px}
@media (max-width:1099px){.tx{padding:11px 18px;gap:12px}.dayh{padding:16px 18px 6px;position:static;background:none}}
.glyph{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;flex:none}
.glyph .ico{width:21px;height:21px}
.glyph .who{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:#fff;box-shadow:0 0 0 2px var(--surface)}
.tx-m{display:flex;flex-direction:column;gap:2px;min-width:0}
.tx-t{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tx-t .badge{height:19px;font-size:11px;padding:0 6px}
.tx-s{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-a{font-weight:700;font-size:15.5px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tx-a.inc,.tx-a.refund{color:var(--brand-t)}
.tx-a.tr{color:var(--ink-2)}
.tx-c{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px;min-width:0}
.tx-c .dot{width:7px;height:7px;border-radius:50%;flex:none}
.tx-b{font-size:13.5px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.thead{display:grid;gap:14px;padding:10px 22px;font-size:12.5px;font-weight:700;color:var(--ink-3);border-bottom:1px solid var(--line)}
.thead.wide{grid-template-columns:24px 42px minmax(0,1fr) minmax(120px,190px) minmax(120px,190px) 120px}
.thead.wide.bal{grid-template-columns:24px 42px minmax(0,1fr) minmax(120px,190px) minmax(120px,190px) 120px 120px}
.thead .r{text-align:right}
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 20px;text-align:center;color:var(--ink-3);font-size:14.5px}
.empty .art{width:64px;height:64px;border-radius:20px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.empty b{color:var(--ink);font-size:16.5px}
.selbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:6px;background:var(--ink);color:var(--surface);border-radius:16px;padding:8px 8px 8px 18px;box-shadow:var(--sh-3);max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}
.selbar b{white-space:nowrap;font-size:14.5px}
.selbar .btn{background:transparent;border-color:transparent;color:var(--surface)}
.selbar .btn:hover{background:rgba(255,255,255,.12)}
@media (max-width:1099px){.selbar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* list rows */
.lrow{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;padding:13px 22px;border:0;background:none;text-align:left;color:var(--ink)}
button.lrow:hover{background:var(--surface-2)}
.lrow+.lrow::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--line-2)}
.lrow .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lrow .t b{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .t small{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.lrow .v small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600}
@media (max-width:1099px){.lrow{padding:13px 18px}.lrow+.lrow::before{left:18px;right:18px}}
.mi{width:40px;height:40px;border-radius:13px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-2);flex:none}

/* category rows */
.cat-list{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0}
.cat{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;border:0;background:none;padding:4px;margin:-4px;border-radius:12px;text-align:left;color:inherit;width:calc(100% + 8px)}
.cat:hover{background:var(--surface-2)}
.cat-foot{margin-top:2px}
.cat .nm{display:flex;flex-direction:column;gap:6px;min-width:0}
.cat .nm div{display:flex;justify-content:space-between;gap:8px;font-size:14.5px;font-weight:650}
.cat .nm div span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat .nm div em{font-style:normal;color:var(--ink-3);font-weight:600;font-size:13px;white-space:nowrap}
.cat .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:14.5px;min-width:86px}
.cat .v small{display:block;font-size:12px;font-weight:650}
.swatch{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none}
.swatch .ico{width:19px;height:19px}

/* ===== tables ===== */
.tbl{overflow-x:auto;margin:0 -22px;padding:0 22px}
@media (max-width:1099px){.tbl{margin:0 -18px;padding:0 18px}}
table.fin{width:100%;border-collapse:collapse;font-size:14px}
table.fin th,table.fin td{padding:11px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line-2)}
table.fin th:first-child,table.fin td:first-child{padding-left:0}
table.fin th:last-child,table.fin td:last-child{padding-right:0}
table.fin thead th{font-size:12.5px;color:var(--ink-3);font-weight:700;border-bottom:1px solid var(--line)}
table.fin .num{text-align:right;font-variant-numeric:tabular-nums}
table.fin tr.sec td{font-size:13px;color:var(--ink-3);font-weight:800;letter-spacing:.02em;padding-top:22px;border-bottom:0}
table.fin tr.grp td{font-weight:750}
table.fin tr.grp td:first-child button{font-weight:750}
table.fin tr.kid td{color:var(--ink-2)}
table.fin tr.kid td:first-child{padding-left:38px}
table.fin tr.tot td{font-weight:800;border-top:1px solid var(--ink-4);border-bottom:3px double var(--ink-4)}
table.fin tr.big td{font-weight:800;font-size:15px;border-bottom:0;background:var(--surface-2)}
table.fin tr.big td:first-child{padding-left:12px;border-radius:12px 0 0 12px}
table.fin tr.big td:last-child{padding-right:12px;border-radius:0 12px 12px 0}
table.fin td:first-child{white-space:normal;min-width:150px}
table.fin .share{display:flex;align-items:center;gap:8px;min-width:120px}
table.fin .share .bar{flex:1;height:6px}
table.fin .share span{width:42px;text-align:right;font-size:12.5px;color:var(--ink-3)}
table.fin tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
table.fin tr.big:hover td{background:var(--surface-2)}
table.fin .fsub,table.fin .dsub,.fnote{display:none}
table.fin tr.grp .fsub{padding-left:24px}
@media (max-width:640px){table.fin .optc,table.fin .optm{display:none}table.fin .dsub{display:block;margin-top:2px;font-size:12px;font-weight:650;color:var(--ink-3)}table.fin .dsub.pos{color:var(--good-t)}table.fin .dsub.neg{color:var(--bad-t)}table.fin thead .dsub{font-size:11.5px;font-weight:700}table.fin .fsub{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}table.fin .fsub span{white-space:nowrap}.fnote{display:block;margin-top:2px}}
.alink{border:0;background:none;padding:0;text-align:left;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:6px}
.alink:hover{color:var(--brand)}
.caret{border:0;background:none;padding:0;color:var(--ink-3);display:inline-grid;place-items:center;width:18px;height:18px;transition:transform .15s}
.caret.open{transform:rotate(90deg)}

/* ===== tabs ===== */
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:2px}
.pp-sel{width:auto;height:40px;padding:0 34px 0 12px;font-weight:650}
/* a chosen range: from and to dates side by side, with the step buttons in front */
.pp-dates{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pp input[type=date]{width:auto;height:40px}
@media (max-width:1099px){
  .sticky-tabs{position:sticky;top:calc(58px + env(safe-area-inset-top,0px));z-index:20;background:var(--bg);margin:0 calc(-1 * var(--gut));padding:0 var(--gut)}
  /* a sideways tab row fades only where more tabs are hidden */
  .tabs[data-fl],.tabs[data-fr]{--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
  .tabs[data-fl]{--fl:44px}.tabs[data-fr]{--fr:44px}
  .tabs button{padding:10px 11px 11px;font-size:14.5px}
  .pp{flex-wrap:wrap;row-gap:8px}
  .pp input[type=date]{flex:1 1 0;min-width:0}
  .pp:has(input[type=date]) .pp-sel{flex:1 1 0;min-width:0}
  .pp{min-width:0;max-width:100%}
  .pp:has(.pp-dates){flex:1 1 100%}
  .pp .pp-dates{flex:1 1 100%;display:flex}
  .pp .pp-dates input[type=date]{width:0}
}
@media (max-width:374px){.pp .mnav .lab{min-width:0;padding:0 4px}.pp .mnav .ibtn{width:30px}.pp-sel{padding:0 28px 0 10px;background-position:right 8px center}}
.tabs button{flex:none;border:0;background:none;padding:10px 14px 12px;font-size:15px;font-weight:650;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}

/* ===== charts ===== */
.chart{position:relative;width:100%}
.chart svg{width:100%;display:block;overflow:visible}
.chart text{fill:var(--ink-3);font-size:11.5px;font-family:var(--font);font-variant-numeric:tabular-nums}
.chart .grid line{stroke:var(--grid);stroke-width:1}
.chart .axis line{stroke:var(--line)}
.tip{position:absolute;pointer-events:none;z-index:5;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);border-radius:12px;padding:9px 11px;font-size:12.5px;min-width:130px;transform:translate(-50%,-100%);white-space:nowrap}
.tip b{display:block;font-size:12.5px;color:var(--ink-3);font-weight:650;margin-bottom:4px}
.tip div{display:flex;align-items:center;gap:7px;justify-content:space-between;font-weight:650}
.tip div span{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:600}
.tip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend i.line{height:3px;width:14px;border-radius:2px}
.legend i.dash{height:0;width:14px;border-top:2px dashed;border-radius:0;background:none!important}
.donut-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
@media (max-width:560px){.donut-wrap{grid-template-columns:minmax(0,1fr);justify-items:center}.donut-wrap .cat-list{justify-self:stretch}}
.heatwrap{display:flex;gap:6px;--hc:clamp(12px,calc((100cqw - 190px) / 53),19px)}
.heat-days{display:grid;grid-template-rows:16px repeat(7,var(--hc));gap:3px;font-size:10.5px;color:var(--ink-3);flex:none}
.heat-days span{line-height:var(--hc)}
.heat-scroll{overflow-x:auto;padding-bottom:4px;min-width:0}
.heat-months{display:grid;gap:3px;height:16px;font-size:10.5px;color:var(--ink-3);margin-bottom:3px}
.heat-months span{white-space:nowrap}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,var(--hc));grid-auto-columns:var(--hc);gap:3px}
.heat-legend{display:flex;align-items:center;gap:3px;justify-content:flex-end;font-size:10.5px;color:var(--ink-3);margin-top:8px}
.heat-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.heat-legend span{margin:0 4px}
.heat i{width:var(--hc);height:var(--hc);border-radius:3px;background:var(--surface-3)}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .wd{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-3);padding:4px 0 6px}
.cal .wd:first-child{color:var(--bad-t)}.cal .wd:nth-child(7){color:var(--brand)}
.cal .c{min-height:84px;border:0;background:var(--surface-2);border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-width:0;transition:background .12s}
.cal .c:hover{background:var(--surface-3)}
.cal .c.sel{background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand)}
.cal .c.off{visibility:hidden}
.cal .dn{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.cal .dn.today{color:#fff;background:var(--brand-btn);border-radius:7px;padding:0 6px}
.cal .v{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:auto}
.cal .v.in{color:var(--brand-t)}
.cal .intensity{width:100%;height:4px;border-radius:2px;background:var(--surface-3);margin-top:4px;overflow:hidden}
.cal .intensity i{display:block;height:100%;background:var(--ink-2);border-radius:2px}
@media (max-width:700px){.cal{gap:3px}.cal .c{min-height:58px;padding:5px 4px;border-radius:9px}.cal .v{font-size:10px}.cal .dn{font-size:12.5px}}

/* card tiles */
.ctiles{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:8px 8px 12px;margin:-8px -8px -4px}
.ctile{flex:none;width:250px;aspect-ratio:1.586;border-radius:20px;padding:18px 20px;border:0;text-align:left;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-1);transition:transform .15s,box-shadow .15s}
.ctile::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.10)}
.ctile:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.ctile.on{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--brand),var(--sh-2)}
.ctile small{opacity:.8;font-size:12.5px;font-weight:650;position:relative}
.ctile .nm{font-weight:700;font-size:15px;position:relative}
.ctile b{font-size:24px;font-weight:800;letter-spacing:-.035em;position:relative}
.ctile .chip-ic{width:34px;height:24px;border-radius:6px;background:linear-gradient(135deg,#f5d77a,#c9a33c);position:relative}

/* notes */
.notes{display:flex;flex-wrap:wrap;gap:10px}
.note{background:var(--note);color:var(--note-ink);border-radius:16px;padding:12px 14px;font-size:14px;flex:1 1 220px;max-width:380px;display:flex;flex-direction:column;gap:8px;border:0;text-align:left}
.note p{white-space:pre-wrap;overflow-wrap:anywhere}
.note small{font-size:12px;opacity:.9}
.note textarea{background:transparent;border:0;padding:0;color:inherit;height:auto;box-shadow:none!important;font-size:14.5px}
.note .btn{background:color-mix(in srgb,var(--note-ink) 12%,transparent);color:var(--note-ink);border-color:transparent}

/* ===== sheets ===== */
.ov{position:fixed;inset:0;z-index:60;background:rgba(10,13,20,.42);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;overflow-y:auto;animation:fade .16s ease}
.sheet{position:relative;width:100%;max-width:560px;background:var(--surface);border-radius:24px;box-shadow:var(--sh-3);display:flex;flex-direction:column;max-height:84vh;animation:pop .2s cubic-bezier(.2,.8,.2,1)}
.sheet.wide{max-width:920px}.sheet.mid{max-width:720px}
.sh-h{display:flex;align-items:center;gap:6px;padding:18px 14px 6px 24px;flex:none}
.sh-h h2{flex:1;font-size:19px;font-weight:800;letter-spacing:-.035em}
.sh-h .ibtn:first-child{margin-left:-12px}
.sh-b{overflow-y:auto;padding:10px 24px 24px;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.sh-f{padding:12px 24px 20px;display:flex;gap:8px;border-top:1px solid var(--line-2);flex:none}
.grab{display:none}
@media (max-width:759px){
  .ov{align-items:flex-end;padding:0}
  .sheet,.sheet.wide,.sheet.mid{max-width:none;border-radius:24px 24px 0 0;max-height:calc(100% - 24px - env(safe-area-inset-top,0px));animation:up .28s cubic-bezier(.2,.8,.2,1)}
  .sh-b:last-child{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--surface-3);margin:8px auto 0;flex:none}
  .sh-h{padding:6px 10px 2px 20px}.sh-b{padding:8px 18px 20px}.sh-f{padding:10px 18px 16px}
}
@keyframes up{from{transform:translateY(100%)}}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}

/* entry sheet */
.amt{display:flex;align-items:baseline;justify-content:center;gap:4px;padding:8px 0 0;cursor:text}
.amt input{border:0!important;background:none!important;box-shadow:none!important;height:auto!important;padding:0!important;font-size:44px!important;font-weight:800;letter-spacing:-.045em;text-align:right;min-width:.6em;max-width:86%;font-variant-numeric:tabular-nums}
.amt span{font-size:26px;font-weight:700;color:var(--ink-3)}
.amt-hint{text-align:center;font-size:13.5px;color:var(--ink-3);margin-top:-8px;min-height:20px;font-variant-numeric:tabular-nums}
.quick-amt{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.quick-amt button{height:30px;padding:0 11px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:650;color:var(--ink-2)}
.quick-amt button:hover{border-color:var(--ink-4);color:var(--ink)}
.pickrow{display:flex;flex-direction:column;gap:8px}
.pickrow .h{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink-2)}
.pickrow .chips .chip{height:36px}
.pickrow .chip.on{background:var(--brand-btn);border-color:var(--brand-btn);color:var(--brand-ink)}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:8;background:var(--surface);border-radius:14px;box-shadow:var(--sh-2);border:1px solid var(--line);overflow-y:auto;max-height:290px;padding:6px}
.sugg button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;border:0;background:none;text-align:left;border-radius:10px}
.sugg button:hover,.sugg button.act{background:var(--surface-2)}
.sugg small{color:var(--ink-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.rel{position:relative}
.pk-list{display:flex;flex-direction:column;border-radius:14px;background:var(--surface-2);overflow:hidden}
.pk-row{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;border:0;background:none;text-align:left;font-size:15px;font-weight:550}
.pk-row:hover{background:var(--surface-3)}
.pk-row+.pk-row::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--line)}
.pk-row .ck{margin-left:auto;color:var(--brand)}
.pk-gh{padding:12px 16px 4px;font-size:12.5px;font-weight:750;color:var(--ink-3)}
.pk-gh+.pk-row::before{display:none}
.more-toggle{border:0;background:none;color:var(--ink-3);font-weight:650;font-size:13.5px;display:inline-flex;align-items:center;gap:4px;padding:2px 0}

/* command palette */
.cmd{max-width:640px}
.cmd .in{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.cmd .in input{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;height:30px!important;font-size:18px!important;font-weight:600}
.cmd .res{padding:8px;max-height:56vh;overflow-y:auto}
.cmd .grp{font-size:12px;font-weight:750;color:var(--ink-3);padding:10px 12px 4px}
.cmd .it{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;background:none;border-radius:12px;text-align:left;font-size:14.5px}
.cmd .it.act,.cmd .it:hover{background:var(--surface-2)}
.cmd .it .k{margin-left:auto;color:var(--ink-3);font-size:12.5px}
.preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;border-radius:14px;background:var(--brand-soft);margin:6px 4px}
.preview div{display:flex;flex-direction:column;gap:2px;min-width:0}
.preview span{font-size:11.5px;font-weight:700;color:var(--brand)}
.preview b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.preview{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* AI */
.ai-panel{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100%;z-index:55;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:slidein .22s ease}
.ai-h{display:flex;align-items:center;gap:10px;padding:16px 14px 12px 20px;border-bottom:1px solid var(--line-2)}
.ai-h h2{flex:1;font-size:17px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.ai-b{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.ai-f{padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px}
.ai-in{display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 14px;border-radius:16px;background:var(--surface-2);border:1px solid transparent}
.ai-in:focus-within{border-color:var(--brand);background:var(--surface)}
.ai-in textarea{border:0!important;background:none!important;box-shadow:none!important;padding:8px 0!important;max-height:140px;min-height:24px;resize:none;font-size:15px}
.msg{max-width:92%;font-size:14.5px;line-height:1.6}
.msg.me{align-self:flex-end;background:var(--brand-btn);color:var(--brand-ink);padding:10px 14px;border-radius:18px 18px 4px 18px;white-space:pre-wrap}
.msg.bot{align-self:flex-start;color:var(--ink)}
.msg.bot p+p,.msg.bot p+ul,.msg.bot ul+p{margin-top:8px}
.msg.bot ul{margin:6px 0 0;padding-left:18px}
.msg.bot li+li{margin-top:3px}
.msg.bot strong{font-weight:750}
.msg .tool{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);background:var(--surface-2);border-radius:8px;padding:3px 8px;margin:2px 0}
.ai-mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--coral));display:grid;place-items:center;color:#fff;flex:none}
.prompts{display:flex;flex-direction:column;gap:8px}
.prompts button{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-align:left;font-size:14px;font-weight:600;color:var(--ink-2)}
.prompts button:hover{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand)}
.insight{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 9%,var(--surface)),color-mix(in srgb,var(--coral) 7%,var(--surface)));border:1px solid color-mix(in srgb,var(--brand) 16%,transparent)}
.insight .txt{font-size:14.5px;line-height:1.65;color:var(--ink)}
.insight .txt p+p{margin-top:6px}
.thinking{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);font-size:14px}
.thinking::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (max-width:759px){.ai-panel{width:100%;border-left:0;top:env(safe-area-inset-top,0px)}}

/* audit */
.finding{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:flex-start;padding:16px 22px;position:relative}
.finding+.finding::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--line-2)}
.finding .sev{width:10px;height:10px;border-radius:50%;margin-top:6px}
.finding .sev.high{background:var(--bad)}.finding .sev.mid{background:var(--warn)}.finding .sev.low{background:var(--ink-4)}
.finding b{display:block;font-size:15px;font-weight:700}
.finding p{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.finding .acts{display:flex;gap:6px;flex-wrap:wrap;grid-column:2;margin-top:6px}
.finding .acts:empty{display:none}
@media (max-width:700px){.finding{padding:14px 18px}}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);width:max-content;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--surface);padding:12px 14px 12px 18px;border-radius:14px;font-weight:600;font-size:14.5px;max-width:calc(100vw - 32px);box-shadow:var(--sh-3);animation:pop .2s ease}
.toast.err{background:var(--bad);color:#fff}
.toast .lnk{color:color-mix(in srgb,var(--brand) 55%,#fff)}
@media (max-width:1099px){.toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px 16px;text-align:center;color:var(--ink-3)}
.welcome{max-width:720px;margin:6vh auto 0;display:flex;flex-direction:column;gap:22px}
.welcome h1{font-size:34px;font-weight:800;letter-spacing:-.045em;line-height:1.2}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* an odd last option spans the row instead of leaving an empty cell beside it */
.choices>.choice:last-child:nth-child(odd){grid-column:1/-1}
.choice{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);text-align:left}
.choice:hover{border-color:var(--ink-4)}
.choice.on{border-color:var(--brand);background:var(--brand-soft)}
.choice b{font-size:15.5px}
.choice small{font-size:13px;color:var(--ink-3);line-height:1.45}
@media (max-width:560px){.choices{grid-template-columns:minmax(0,1fr)}}
.kbdhelp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-size:14px}
.kbdhelp div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-2)}

/* budget rows */
.bhead,.brow{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(120px,2fr) 110px 130px 110px;gap:16px;align-items:center;padding:10px 22px}
.bhead{font-size:12.5px;font-weight:700;color:var(--ink-3);border-bottom:1px solid var(--line);padding-top:6px}
.bhead .r,.brow .ba,.brow .bv,.brow .bl{text-align:right}
.brow{padding:12px 22px;position:relative}
.brow+.brow::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--line-2)}
.brow .bn{font-weight:650;font-size:15px;min-width:0}
.brow .bn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .ba{font-weight:700}
.brow .bl{font-size:14px;color:var(--ink-2);font-weight:600}
.bedit{border:0;background:none;color:var(--ink);font-weight:650;text-decoration:underline dotted var(--ink-4);text-underline-offset:4px;font-size:14.5px;padding:4px 6px;border-radius:8px;font-variant-numeric:tabular-nums}
.bedit:hover{background:var(--surface-2)}
.bedit.unset{color:var(--brand);text-decoration:none}
.bedit:disabled{color:var(--ink-2);background:none;cursor:default}
.bgrp{display:flex;justify-content:space-between;padding:18px 22px 4px;font-size:13px;font-weight:750;color:var(--ink-3)}
@media (max-width:1099px){
  .brow{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n a v" "b b l";gap:8px 12px;padding:12px 18px}
  .brow .bn{grid-area:n}.brow .ba{grid-area:a}.brow .bv{grid-area:v}.brow .bb{grid-area:b}.brow .bl{grid-area:l;font-size:12.5px}
  .brow+.brow::before{left:18px;right:18px}.bgrp{padding:16px 18px 4px}
}

.lrow.lgh{padding-bottom:4px;cursor:default}
.lrow.lgh b{font-size:13.5px;color:var(--ink-3);font-weight:650}
.lrow.lgh .v{font-size:13.5px}
.more-row small{color:var(--brand);font-weight:650;font-size:13.5px}

.datechip-w{position:relative;display:inline-flex}
.datechip{gap:6px}
.datechip-in{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.msg.bot .tool{margin-top:10px}
.chips.follow{margin-top:-4px}
.chips.follow .chip{font-size:13px;height:32px}

/* row checkboxes appear on hover, or stay once anything is selected */
.tx.wide input[type=checkbox]{opacity:0;transition:opacity .12s}
.tx.wide:hover input[type=checkbox],.tx.wide.sel input[type=checkbox],.tx.wide input[type=checkbox]:focus-visible,.days.selecting .tx.wide input[type=checkbox]{opacity:1}

.onboard{gap:14px;background:linear-gradient(135deg,var(--surface) 60%,var(--brand-soft))}
.ob-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ob-h h2{font-size:20px;font-weight:800;letter-spacing:-.035em;margin-top:2px}
.ob-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.ob-step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:border-color .15s,transform .15s}
.ob-step:hover{border-color:var(--brand-line);transform:translateY(-1px)}
.ob-step .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ob-step b{font-size:14.5px;font-weight:700}
.ob-step small{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.ob-step .ico:last-child{color:var(--ink-4)}
.ob-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-weight:800;font-size:13px;color:var(--ink-2)}
.ob-step.done{background:var(--surface-2);border-color:transparent}
.ob-step.done b{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4)}
.ob-step.done .ob-n{background:var(--good);color:#fff}
.op-row{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2)}
.op-row span{display:flex;flex-direction:column;min-width:0}
.op-row b{font-size:14.5px;font-weight:650}
.op-row small{font-size:12.5px;color:var(--ink-3)}
.op-row input{text-align:right;font-weight:700}

.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;border:1.5px dashed var(--line);border-radius:16px;color:var(--ink-3);font-size:14px;padding:16px}
.chart-empty .ico{color:var(--ink-4)}

/* =====================================================================
   LIQUID GLASS LAYER
   Translucent glass surfaces float over a soft, living colour field.
   Ink capsules for primary actions, Apple-style blue only for links and data.
   ===================================================================== */
:root{
  --brand:#0a66e8; --brand-2:#0055cc; --brand-soft:rgba(10,102,232,.10); --brand-line:rgba(10,102,232,.28);
  --brand-btn:#121419; --brand-btn-2:#2b2f38; --brand-ink:#ffffff;
  --ink:#0d1017; --ink-2:#3c4452; --ink-3:#545d6c; --ink-4:#a9b0bc; --ph:#6b7482;
  --surface-2:rgba(116,126,148,.085); --surface-3:rgba(116,126,148,.15);
  --line:rgba(15,23,42,.085); --line-2:rgba(15,23,42,.055); --grid:rgba(15,23,42,.065);
  --glass:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.56));
  --glass-strong:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.80));
  --glass-edge:rgba(255,255,255,.78);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),inset 1px 0 0 rgba(255,255,255,.45);
  --glass-sh:0 1px 2px rgba(20,28,58,.04),0 14px 34px -10px rgba(20,28,58,.14);
  --blur:blur(26px) saturate(185%);
  --s1:#0a66e8; --s2:#ff7a45; --s3:#14b07a; --s4:#f2a20c; --s5:#e86aa6; --s6:#2f9e44; --s7:#6a4cdb; --s8:#e5484d; --s0:#a4acb9;
  --r-lg:28px; --r-xl:30px;
  /* text versions of the signal colours, dark enough for 4.5:1 on light glass */
  --good-t:#067650; --bad-t:#c42f34; --warn-t:#965a00; --brand-t:#0956c4; --chip-t:#004bb5;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --brand:#3d9bff; --brand-2:#66b0ff; --brand-soft:rgba(61,155,255,.14); --brand-line:rgba(61,155,255,.35);
  --brand-btn:#f4f6f9; --brand-btn-2:#ffffff; --brand-ink:#0b0d12;
  --ink:#f3f5f8; --ink-2:#c3c9d3; --ink-3:#a1a9b5; --ink-4:#555d6b; --ph:#8a93a1;
  --surface:#1a1d24; --surface-2:rgba(255,255,255,.055); --surface-3:rgba(255,255,255,.095);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05); --grid:rgba(255,255,255,.06);
  --glass:linear-gradient(180deg,rgba(34,37,46,.62),rgba(22,24,31,.55));
  --glass-strong:linear-gradient(180deg,rgba(34,37,46,.92),rgba(24,26,33,.90));
  --glass-edge:rgba(255,255,255,.09);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(255,255,255,.03);
  --glass-sh:0 18px 40px -12px rgba(0,0,0,.55);
  --s1:#3d9bff; --s2:#ff8a5c; --s3:#2fc58f; --s4:#f5b73b; --s5:#f07fb6; --s6:#4cc061; --s7:#8f78ff; --s8:#ff6b6f; --s0:#5d6573;
  --good-t:#3ccf94; --bad-t:#ff7378; --warn-t:#f2b44a; --brand-t:#3d9bff; --chip-t:#66b0ff;
}}
:root[data-theme="dark"]{
  --brand:#3d9bff; --brand-2:#66b0ff; --brand-soft:rgba(61,155,255,.14); --brand-line:rgba(61,155,255,.35);
  --brand-btn:#f4f6f9; --brand-btn-2:#ffffff; --brand-ink:#0b0d12;
  --ink:#f3f5f8; --ink-2:#c3c9d3; --ink-3:#a1a9b5; --ink-4:#555d6b; --ph:#8a93a1;
  --surface:#1a1d24; --surface-2:rgba(255,255,255,.055); --surface-3:rgba(255,255,255,.095);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05); --grid:rgba(255,255,255,.06);
  --glass:linear-gradient(180deg,rgba(34,37,46,.62),rgba(22,24,31,.55));
  --glass-strong:linear-gradient(180deg,rgba(34,37,46,.92),rgba(24,26,33,.90));
  --glass-edge:rgba(255,255,255,.09);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(255,255,255,.03);
  --glass-sh:0 18px 40px -12px rgba(0,0,0,.55);
  --s1:#3d9bff; --s2:#ff8a5c; --s3:#2fc58f; --s4:#f5b73b; --s5:#f07fb6; --s6:#4cc061; --s7:#8f78ff; --s8:#ff6b6f; --s0:#5d6573;
  --good-t:#3ccf94; --bad-t:#ff7378; --warn-t:#f2b44a; --brand-t:#3d9bff; --chip-t:#66b0ff;
}

/* colour field behind the glass */
html{background:#eef1f6}
body{background:transparent;position:relative}
body::before{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 8% 6%,rgba(255,196,170,.85),transparent 70%),
    radial-gradient(34vmax 28vmax at 92% 2%,rgba(204,196,255,.85),transparent 70%),
    radial-gradient(40vmax 34vmax at 78% 96%,rgba(170,214,255,.85),transparent 70%),
    radial-gradient(30vmax 26vmax at 22% 88%,rgba(196,240,218,.75),transparent 70%),
    radial-gradient(26vmax 22vmax at 52% 44%,rgba(255,236,200,.55),transparent 72%),
    #eef1f6;
  animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2vmax,1.5vmax,0) scale(1.04)}100%{transform:translate3d(1.5vmax,-1vmax,0) scale(1.02)}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::before{background:
    radial-gradient(38vmax 30vmax at 8% 6%,rgba(255,110,70,.22),transparent 70%),
    radial-gradient(34vmax 28vmax at 92% 2%,rgba(120,90,255,.30),transparent 70%),
    radial-gradient(40vmax 34vmax at 78% 96%,rgba(40,140,255,.26),transparent 70%),
    radial-gradient(30vmax 26vmax at 22% 88%,rgba(40,200,150,.16),transparent 70%),#07080c}
  :root:not([data-theme="light"]) html,:root:not([data-theme="light"]){background:#07080c}}
:root[data-theme="dark"] body::before{background:
    radial-gradient(38vmax 30vmax at 8% 6%,rgba(255,110,70,.22),transparent 70%),
    radial-gradient(34vmax 28vmax at 92% 2%,rgba(120,90,255,.30),transparent 70%),
    radial-gradient(40vmax 34vmax at 78% 96%,rgba(40,140,255,.26),transparent 70%),#07080c}

/* glass material */
.card,.side,.sheet,.ai-panel,.ledger-btn,.searchkey,.mnav,.btn:not(.pri):not(.danger):not(.ghost):not(.soft),.chip:not(.on):not(.brand),.toast,.ctile-wrap{
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-hi),var(--glass-sh)}
.card{border-radius:var(--r-lg)}
.card.flat{background:var(--surface-2);box-shadow:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.chip:not(.on):not(.brand){box-shadow:var(--glass-hi),0 2px 8px -2px rgba(20,28,58,.10)}
.btn:not(.pri):not(.danger):not(.ghost):not(.soft){box-shadow:var(--glass-hi),0 2px 8px -2px rgba(20,28,58,.10)}
.split{background:var(--line)}

/* shell: floating glass sidebar */
.app{grid-template-columns:276px minmax(0,1fr);background:none}
.side{top:14px;height:calc(100vh - 28px);margin:14px 0 14px 14px;border-radius:30px;padding:18px 12px 14px}
.brand{font-weight:750;letter-spacing:-.04em}
.nav button{border-radius:14px;color:var(--ink-2)}
.nav button:hover{background:rgba(255,255,255,.45)}
.nav button[aria-current="page"]{background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 1px 2px rgba(20,28,58,.06),0 6px 16px -6px rgba(20,28,58,.18);font-weight:700}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nav button:hover{background:rgba(255,255,255,.06)}:root:not([data-theme="light"]) .nav button[aria-current="page"]{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}}
:root[data-theme="dark"] .nav button[aria-current="page"]{background:rgba(255,255,255,.12)}
.ledger-btn{border-radius:18px}
.people{background:var(--surface-2);border-radius:16px}
.content{padding:30px 34px 64px 30px}

/* type: lighter, tighter, more editorial */
.phead h1{font-weight:750;letter-spacing:-.045em}
.phead .ttl small{color:var(--ink-3);font-weight:600}
.hero{font-weight:720;letter-spacing:-.055em;font-size:50px}
.hero small{font-weight:650;color:var(--ink-3)}
.big{font-weight:720;letter-spacing:-.05em}
.kv b{font-weight:700}
.card-h h2,.card-h h3{font-weight:700;letter-spacing:-.03em}
.lbl{color:var(--ink-2);font-weight:650}

/* controls */
.btn{border-radius:999px;height:40px;padding:0 17px}
.btn.sm{border-radius:999px}
.btn.pri{background:var(--brand-btn);border-color:var(--brand-btn);color:var(--brand-ink);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 20px -8px rgba(10,12,20,.45)}
.btn.pri:hover{background:var(--brand-btn-2);border-color:var(--brand-btn-2)}
.btn.soft{background:rgba(255,255,255,.6);color:var(--ink);border:1px solid var(--glass-edge);box-shadow:var(--glass-hi)}
.btn.soft:hover{background:rgba(255,255,255,.85)}
.btn kbd{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.22)}
.seg{border-radius:999px;padding:3px;background:var(--surface-3)}
.seg button{border-radius:999px}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.95);box-shadow:0 1px 2px rgba(20,28,58,.08),0 4px 12px -4px rgba(20,28,58,.18)}
.mnav{border-radius:999px;padding:3px}
.mnav .ibtn,.mnav .lab{border-radius:999px}
.searchkey{border-radius:999px}
.chip{border-radius:999px}
.chip.on{background:var(--brand-btn);border-color:var(--brand-btn);color:var(--brand-ink)}
.chip.brand{background:var(--brand-soft);border-color:transparent;color:var(--chip-t)}
.ibtn{border-radius:999px}
.ibtn.on{background:var(--brand-btn);color:var(--brand-ink)}
input[type=text],input[type=date],input[type=month],input[type=number],input[type=search],select,textarea{border-radius:14px}
input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.92)}
.bar{background:var(--surface-3)}
.badge{border-radius:999px}
.pickrow .chip.on{background:var(--brand-btn);border-color:var(--brand-btn);color:var(--brand-ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .seg button[aria-pressed="true"]{background:rgba(255,255,255,.16)}:root:not([data-theme="light"]) .btn.soft{background:rgba(255,255,255,.08)}:root:not([data-theme="light"]) input:focus,:root:not([data-theme="light"]) select:focus,:root:not([data-theme="light"]) textarea:focus{background:rgba(255,255,255,.08)}}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{background:rgba(255,255,255,.16)}

/* tone down the "AI" look: no gradient badges, monochrome marks */
.ai-mark{background:var(--brand-btn);color:var(--brand-ink);border-radius:50%}
.insight{background:var(--glass);border:1px solid var(--glass-edge)}
.glyph{border-radius:50%}
.swatch{border-radius:50%}

/* lists inside glass */
.dayh{background:transparent;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tx:hover,.lrow:hover{background:rgba(255,255,255,.35)}
.thead{border-bottom-color:var(--line)}

/* sheets, command bar, AI panel */
.ov{background:rgba(12,16,26,.22);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
.sheet{background:var(--glass-strong);border-radius:30px}
.ai-panel{top:12px;right:12px;bottom:12px;border-radius:30px;width:430px;background:var(--glass-strong)}
.cmd .it.act,.cmd .it:hover{background:rgba(116,126,148,.12)}
.toast{background:rgba(18,20,26,.86);color:#fff;border-color:rgba(255,255,255,.12)}

/* card tiles get a glass sheen */
.ctile{border-radius:24px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 30px -14px rgba(10,14,30,.5)}
.ctile::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 42%);pointer-events:none}
.ctile.on{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 5px var(--ink),0 16px 30px -14px rgba(10,14,30,.5)}

/* phone: floating glass top bar and capsule tab bar */
@media (max-width:1099px){
  .app{grid-template-columns:minmax(0,1fr)}
  .mtop{background:linear-gradient(180deg,rgba(238,241,246,.72),rgba(238,241,246,.35));-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%)}
  .tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:6px 8px;border-radius:32px;border:1px solid var(--glass-edge);background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi),0 18px 40px -12px rgba(20,28,58,.30);align-items:center}
  .tabbar button{padding:6px 0 4px;border-radius:24px}
  .tabbar button[aria-current="page"]{color:var(--ink);background:rgba(116,126,148,.12)}
  .tabbar .add{width:50px;height:50px;border-radius:50%;margin:0;box-shadow:0 10px 22px -8px rgba(10,12,20,.55)}
  .content{padding:4px var(--gut) calc(112px + env(safe-area-inset-bottom,0px))}
  .card{border-radius:26px}
  .hero{font-size:40px}
  .ai-panel{top:0;right:0;bottom:0;border-radius:0;width:100%}
}
/* only the phone bottom sheet sits on the bottom edge; between 760 and 1099 px the sheet floats and keeps its round corners */
@media (max-width:759px){.sheet{border-radius:30px 30px 0 0}}
@media (max-width:1099px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mtop{background:linear-gradient(180deg,rgba(7,8,12,.72),rgba(7,8,12,.3))}}
/* glass tuning: clearer glass over a more vivid field, with a soft specular sheen */
:root{--glass:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,.42));--blur:blur(30px) saturate(200%)}
body::before{background:
    radial-gradient(40vmax 32vmax at 6% 4%,rgba(255,168,138,.95),transparent 68%),
    radial-gradient(36vmax 30vmax at 94% 0%,rgba(178,162,255,.95),transparent 68%),
    radial-gradient(42vmax 36vmax at 82% 98%,rgba(118,188,255,.9),transparent 68%),
    radial-gradient(32vmax 28vmax at 18% 92%,rgba(140,228,196,.85),transparent 68%),
    radial-gradient(28vmax 24vmax at 50% 46%,rgba(255,214,160,.55),transparent 70%),
    #e9edf4}
.card{position:relative;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 70% at 0% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 52%),radial-gradient(90% 50% at 100% 100%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card::before{background:radial-gradient(130% 70% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 52%)}}
:root[data-theme="dark"] .card::before{background:radial-gradient(130% 70% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 52%)}
.card.flat::before{display:none}
.mtop .ledger-btn{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero-card{background:radial-gradient(70% 90% at 100% 0%,rgba(10,102,232,.09),transparent 62%),var(--glass)}
.nw-card{background:radial-gradient(70% 90% at 100% 0%,rgba(20,176,122,.09),transparent 62%),var(--glass)}
.onboard{background:radial-gradient(60% 120% at 100% 0%,rgba(178,162,255,.22),transparent 60%),var(--glass)}

/* =====================================================================
   TYPOGRAPHY
   Pretendard: the most used Korean UI face, whose Latin and figures are
   drawn from Inter, the most used UI face in the US. Inter and Noto Sans KR
   load from Google Fonts as a second line so the app never falls back to
   a system font. Money is always set in tabular figures.
   ===================================================================== */
:root{--font:"Pretendard Variable","Pretendard","Inter","Noto Sans KR",-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
body{font-family:var(--font);font-size:15px;line-height:1.55;letter-spacing:-.012em;font-feature-settings:"tnum" 1,"ss06" 1;text-rendering:optimizeLegibility}
h1,h2,h3{font-feature-settings:"tnum" 0,"ss06" 1}
.phead h1{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-.038em}
.phead .ttl small{font-size:13px;letter-spacing:-.005em;font-weight:600;margin-bottom:4px;display:block}
.card-h h2{font-size:17px;font-weight:680;letter-spacing:-.028em}
.card-h h3{font-size:16px;font-weight:680;letter-spacing:-.025em}
.lbl{font-size:13.5px;letter-spacing:-.01em}
.hero{font-size:52px;line-height:1.02;font-weight:700;letter-spacing:-.048em}
.hero small{font-size:24px;letter-spacing:-.02em;margin-left:4px}
.big{font-size:30px;line-height:1.08;font-weight:700;letter-spacing:-.042em}
.big small{font-size:17px;letter-spacing:-.01em}
.kv span{font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.kv b{font-size:19px;font-weight:680;letter-spacing:-.03em}
.sub,.muted{letter-spacing:-.008em}
.sub{font-size:13px}
.chart text{font-family:var(--font);font-size:11.5px;letter-spacing:-.01em}
.tx-a,.v,.ba,.bl,.bv,td.num,.tnum{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.nav button{font-size:14.5px;letter-spacing:-.018em}
.btn{font-size:14.5px;letter-spacing:-.018em;font-weight:650}
.seg button{letter-spacing:-.015em}
.badge,.delta{letter-spacing:-.01em}
@media (max-width:1099px){
  .phead h1{font-size:26px}
  .hero{font-size:42px}.hero small{font-size:21px}
  .big{font-size:28px}
  .kv b{font-size:17px}
}

.teaser .tz{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.teaser .tz>div{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:20px;background:var(--surface-2)}
.teaser .tz b{font-size:15px;font-weight:680;letter-spacing:-.025em}
.teaser .tz small{font-size:13px;color:var(--ink-3);line-height:1.5;letter-spacing:-.01em}
.tz-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:var(--ink);box-shadow:0 4px 12px -6px rgba(20,28,58,.25);margin-bottom:4px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tz-ic{background:rgba(255,255,255,.1)}}
.ob-step small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Korean wraps at word boundaries, never mid-word */
body{word-break:keep-all;overflow-wrap:break-word}
.tx-t span,.tx-s,.ledger-btn b,.cat .nm div span,.mixrows span{word-break:normal}
/* keep toasts above the floating tab bar on phones */
@media (max-width:1099px){.toast{bottom:calc(96px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 32px)}}

/* account reordering */
.acc-row{grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px}
.drag-h{display:grid;place-items:center;width:28px;height:36px;margin-left:-8px;border:0;background:none;color:var(--ink-4);cursor:grab;touch-action:none;border-radius:8px}
.drag-h:hover,.drag-h:focus-visible{color:var(--ink-2);background:var(--surface-2)}
.drag-h:active{cursor:grabbing}
.acc-row.dragging{background:var(--surface-2)}
.drop-line{position:absolute;right:18px;height:0;border-top:2.5px solid var(--brand);pointer-events:none;z-index:3}
.drop-line::before{content:"";position:absolute;left:-5px;top:-6.5px;width:9px;height:9px;border-radius:50%;background:var(--brand)}
.drop-line span{position:absolute;right:0;top:-24px;font-size:12px;font-weight:700;color:var(--brand);background:var(--surface);padding:2px 8px;border-radius:999px;box-shadow:var(--sh-1)}
.drop-line span:empty{display:none}

/* =====================================================================
   NARROW PC AND TABLET (768 to 1279px): slim glass rail, so cards keep room for full amounts
   ===================================================================== */
@media (min-width:768px) and (max-width:1279px){
  .app{grid-template-columns:96px minmax(0,1fr)}
  .side{display:flex;position:sticky;top:12px;height:calc(100vh - 24px);margin:12px 0 12px 12px;padding:14px 8px;border-radius:28px;align-items:stretch;overflow:visible}
  .side .brand{justify-content:center;font-size:0;gap:0;padding:2px 0 10px}
  .side .ledger-btn{justify-content:center;padding:8px 0;margin-bottom:8px}
  .side .ledger-btn .t,.side .ledger-btn>.ico{display:none}
  .side .nl,.side kbd,.side .nav-sec,.side .online,.side .sp{display:none}
  .side .nav button{justify-content:center;padding:0;gap:0;height:46px;position:relative}
  .side .nav button .badge{position:absolute;top:4px;right:6px;height:18px;padding:0 5px;font-size:10.5px}
  .side .side-cta{gap:8px}
  .side .side-cta .btn{padding:0;gap:0;height:46px;border-radius:16px}
  .side .people{justify-content:center;padding:8px 0;background:none}
  .side .people .stack-ava>*+*{display:none}
  .mtop,.tabbar{display:none!important}
  .content{padding:24px 24px 56px 20px}
  .toast{bottom:28px}
}
/* phones keep the floating tab bar */
@media (max-width:767px){.side{display:none}}

/* reveal-more row under long lists */
.morerow{display:flex;justify-content:center;padding:14px 0 6px}

/* dialogs take focus as a whole without drawing a ring around the sheet */
.sheet:focus,.sheet:focus-visible{outline:none}

/* transaction rows: one transparent button per row for keyboard and screen readers, checkbox above it */
.tx-hit{position:absolute;inset:0;z-index:0;border:0;margin:0;padding:0;background:transparent;border-radius:inherit;cursor:pointer}
.tx-hit:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.thead .tx-ck,.tx.wide .tx-ck{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:40px;margin:-8px -5px;cursor:pointer}
.tx.wide:has(.tx-hit:focus-visible) input[type=checkbox]{opacity:1}
/* selection mark used inside row buttons on phones */
.cbx{width:20px;height:20px;border-radius:6px;border:1.6px solid var(--ink-4);display:inline-grid;place-items:center;background:var(--surface);transition:background .12s,border-color .12s}
.cbx.on{background:var(--brand);border-color:var(--brand)}
.cbx.on::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.card-h h2.h3{font-size:16px}

/* page head kicker sits on the colour field, so it uses the stronger ink */
.phead .ttl small{color:var(--ink-2)}

/* amounts never break inside a number: JS shrinks them to fit (fitNums); units scale with the number */
.hero,.big:not(tr),.kv b{white-space:nowrap;overflow-wrap:normal;min-width:0;max-width:100%}
.hero small{font-size:.46em}.big small{font-size:.57em}
/* cards answer to their own width, not the window's */
/* cards size their insides by their own width; a card is never shrink-wrapped (size containment would collapse it) */
.card{container-type:inline-size}
.content>.card,.subpage>.card{align-self:stretch}
@container (max-width:470px){.donut-wrap{grid-template-columns:minmax(0,1fr)!important;justify-items:center}.donut-wrap .cat-list{justify-self:stretch}}

/* account ledger on phones: two-line rows instead of a sideways table */
.lglist{display:flex;flex-direction:column;margin:0 -4px}
.lgrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:12px 4px;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;cursor:pointer;border-radius:0}
.lgrow:hover{background:var(--surface-2)}
.lgrow .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lgrow .t b{font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgrow .t small,.lgrow .v small{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgrow .v{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-variant-numeric:tabular-nums}
.lgrow .v b{font-size:15px;font-weight:700;white-space:nowrap}
.card-h .lbl{white-space:nowrap}

/* checkbox labels are comfortable tap targets */
label:has(> input[type=checkbox]){min-height:32px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}

/* net worth sparkline grows into the card's spare height instead of leaving a gap */
.nw-spark{flex:1 1 56px;min-height:56px;max-height:220px;margin:0 -6px;position:relative}
.nw-spark svg{position:absolute;inset:0;width:100%;height:100%!important}

/* the shortcut hint inside the primary button follows the button ink in both themes */
.btn.pri kbd{background:color-mix(in srgb,var(--brand-ink) 16%,transparent);border-color:color-mix(in srgb,var(--brand-ink) 26%,transparent);color:inherit}

/* phone tables: tighter first column so the change column stays on screen */
@media (max-width:640px){table.fin td:first-child{min-width:108px}table.fin th,table.fin td{padding:10px 6px}table.fin .share{min-width:90px}}

/* card tiles: room for their shadows, a lighter selection ring */
.ctiles{padding:10px 16px 22px;margin:-10px -16px -12px;scroll-padding:0 16px}
.ctile.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--ink) 55%,transparent),0 16px 30px -14px rgba(10,14,30,.5)}

/* days that have not happened yet are outlined, not drawn as low spending */
.heat i.fut{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}

/* phones: the floating tab bar hides while a sheet is open (no ghosted icons through the glass),
   content fades out under the tab bar, and the top bar softens into the page instead of ending in a hard line */
@media (max-width:767px){
  .app:has(.ov) .tabbar,.app:has(.ai-panel) .tabbar{visibility:hidden}
  .app::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(96px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg-fade,#eef1f6) 35%,transparent);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);-webkit-mask-image:linear-gradient(to top,#000 45%,transparent);mask-image:linear-gradient(to top,#000 45%,transparent);pointer-events:none;z-index:39}
  .mtop{-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .sh-f{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:767px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .app{--bg-fade:#07080c}}
@media (max-width:767px){:root[data-theme="dark"] .app{--bg-fade:#07080c}}

/* short tab sets share the row evenly on phones so every tab stays visible */
@media (max-width:640px){.tabs.fit{gap:0}.tabs.fit button{flex:1 0 auto;padding-left:4px;padding-right:4px;font-size:14px}}

/* every row ends its last number at the same edge as the rounded total row */
table.fin th:last-child,table.fin td:last-child{padding-right:12px}
@media (max-width:400px){table.fin th,table.fin td{padding-left:4px;padding-right:4px}table.fin th:last-child,table.fin td:last-child{padding-right:6px}table.fin td:first-child{min-width:96px}table.fin tr.big td:first-child{padding-left:8px}table.fin tr.big td:last-child{padding-right:8px}}

.cat .v small.cat-d{display:flex;justify-content:flex-end;align-items:center;gap:1px}

/* text boxes inside sheets are solid so the page behind never shows through */
.sheet textarea{background:var(--surface)}

/* touch screens have no hover: a tapped row or suggestion must not stay highlighted */
@media (hover:none){
  .prompts button:hover{border-color:var(--line);background:var(--surface);color:var(--ink-2)}
  .tx:hover,button.lrow:hover,.lrow:hover,.cat:hover,.lgrow:hover{background:none}
  .ctile:hover{transform:none}
  .tx.sel:hover{background:var(--brand-soft)}
  kbd{display:none}
}

/* budget group subtotals line up with the 사용, 예산, 남은 금액 columns */
.bgrp{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(120px,2fr) 110px 130px 110px;gap:16px;align-items:end}
.bgrp .gt{grid-column:1 / span 2}.bgrp .ga,.bgrp .gb,.bgrp .gl{text-align:right}
@media (max-width:1099px){.bgrp{display:flex;gap:10px}.bgrp .gt{flex:1}.bgrp .gb:not(:empty)::before{content:"/ "}.bgrp .gl{display:none}}

/* long shared notes show their first lines; tapping one opens the full text for editing */
.note p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
@media (max-width:767px){.note p{-webkit-line-clamp:4}}
.note.open p{display:block;-webkit-line-clamp:unset;overflow:visible}

@media (max-width:560px){.kv.kv2m{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* card headers wrap their controls under the title instead of squeezing the title onto two lines */
.card-h{flex-wrap:wrap;row-gap:8px}
.card-h>.lbl{white-space:nowrap}

.brow .bn{min-height:32px;display:inline-flex;align-items:center}

/* phone settings pages: one page title in the same style as every screen; the first card does not repeat it */
.subhead .ttl{gap:2px;margin-left:-8px;align-items:center}
.subpage{display:flex;flex-direction:column;gap:18px}
.subpage>.card:first-child>.card-h>h2{display:none}
.subpage>.card:first-child>.card-h{justify-content:flex-end;min-height:8px}

@media (max-width:1099px){:root{--cp:18px}}
/* small section label inside a list card (지출 / 수입) */
.lgh-l{padding:12px var(--cp) 2px;font-size:12.5px;font-weight:800;color:var(--ink-3);letter-spacing:.02em}
/* home: the right column ends on the same line as the card beside it */
.home-side{display:flex;flex-direction:column;gap:20px}
.home-side>.card:last-child{flex:1}
/* budget bar: the today marker carries its own small label */
.barwrap{position:relative;padding-bottom:16px}
.mk-lab{position:absolute;top:11px;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.nw{white-space:nowrap}
/* sheet: the handle and title bar can be pulled down on phones */
@media (max-width:767px){.sh-drag{touch-action:none}}
/* phone number pad for amounts */
.numpad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.numpad button{height:48px;border:0;border-radius:12px;background:var(--surface-2);font-size:20px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;display:grid;place-items:center}
.numpad button:active{background:var(--surface-3)}
.numpad button.op{font-size:17px;color:var(--ink-2)}
.numpad button.go{background:var(--brand-btn);color:var(--brand-ink);font-size:16px;font-weight:750}
/* touch screens have no keyboard shortcuts to show */
@media (hover:none){.cmd .it .k{display:none}}
.btn.ghost.on,.btn.ghost[aria-pressed="true"]{background:var(--surface-2);color:var(--ink)}
/* dark mode: the selected segment stands clear of the track */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .seg button[aria-pressed="true"]{background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* text boxes in sheets always show their edge */
.sheet textarea{border:1px solid var(--line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sheet textarea{background:rgba(255,255,255,.05)}}
:root[data-theme="dark"] .sheet textarea{background:rgba(255,255,255,.05)}
/* touch: every control is at least 44px to the finger, even when it looks smaller */
@media (pointer:coarse){
  .btn.sm{min-height:36px}
  .seg button{min-height:36px}
  .quick-amt button{height:36px}
  .btn.sm,.chip,.quick-amt button,.drag-h,.ibtn,.more,.lnk{position:relative}
  .btn.sm::after,.chip::after,.quick-amt button::after,.drag-h::after,.ibtn::after,.more::after,.lnk::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  /* a button inside a chip (the x that removes it) sits above the chip's own touch area, with a finger-sized target */
  .chip .x{position:relative;z-index:1}
  .chip .x::after{content:"";position:absolute;inset:-12px -10px}
}
@media (max-width:400px){table.fin tr.kid td:first-child{padding-left:32px}}
/* list rows that start with a checkbox keep their three columns */
.lrow:has(> input[type=checkbox]){display:grid}
/* phone sheets: buttons fill the footer, the main one twice as wide */
@media (max-width:767px){.sh-f>.btn{flex:1 1 0;justify-content:center}.sh-f>.btn.pri{flex:2 1 0}.sh-f>.sp{display:none}}
/* touch: segments are finger sized; the keyboard highlight in the command list only follows the keyboard */
@media (pointer:coarse){.seg button{min-height:40px}}
@media (hover:none){.cmd .it.act{background:none}}
/* muted summary row for items the hide checkbox folded away */
table.fin tr.hidrow td{color:var(--ink-3);font-size:13px}
table.fin tr.hidrow td:first-child{font-style:normal}
.heat i.on{outline:2px solid var(--ink);outline-offset:1px}
.heat-pick{margin-right:auto;font-size:12px;color:var(--ink)}
/* the period row under a report title keeps one height whichever controls it holds */
@media (max-width:1099px){.phead .pp{min-height:46px;align-items:center}}
.phead .pp{min-height:46px;align-items:center}
/* the main action of a long form inside a sheet stays in reach while the form scrolls */
.stick-foot{position:sticky;bottom:-24px;z-index:2;margin:0 -24px -24px;padding:12px 24px 18px;background:var(--surface);border-top:1px solid var(--line-2)}
@media (max-width:759px){.stick-foot{bottom:calc(-20px - env(safe-area-inset-bottom,0px));margin:0 -18px calc(-20px - env(safe-area-inset-bottom,0px));padding:10px 18px calc(14px + env(safe-area-inset-bottom,0px))}}

/* author badges with no real name yet draw a person icon instead of a letter */
.glyph .who .ico,.ava .ico{color:#fff;stroke:currentColor;flex:none}
.glyph .who .ico{width:11px;height:11px}

/* bars and panels that carry a title must not let the page read through them: blur alone fails wherever a parent becomes the backdrop root */
:root{--glass-strong:linear-gradient(180deg,rgba(255,255,255,.97),rgba(250,251,253,.95))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--glass-strong:linear-gradient(180deg,rgba(30,33,41,.97),rgba(22,24,31,.96))}}
:root[data-theme="dark"]{--glass-strong:linear-gradient(180deg,rgba(30,33,41,.97),rgba(22,24,31,.96))}
.ov{background:rgba(12,16,26,.30);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
@media (max-width:1099px){
  .mtop{background:linear-gradient(180deg,rgba(238,241,246,.99),rgba(238,241,246,.97))}
  :root[data-theme="dark"] .mtop{background:linear-gradient(180deg,rgba(7,8,12,.99),rgba(7,8,12,.97))}
}
@media (max-width:1099px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mtop{background:linear-gradient(180deg,rgba(7,8,12,.99),rgba(7,8,12,.97))}}
@media (max-width:759px){.ai-panel{background:var(--surface)}}

/* first run: no empty sidebar, compact form, the create button always on screen, selected choices on an opaque tint */
.app:has(.welcome){grid-template-columns:minmax(0,1fr)}
.app:has(.welcome) .side,.app:has(.welcome)::after{display:none}
.welcome{margin:4vh auto 0;gap:18px}
.welcome .choice{padding:14px 16px}
.choice.on{background:color-mix(in srgb,var(--brand) 8%,#ffffff);border-color:var(--brand)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .choice.on{background:color-mix(in srgb,var(--brand) 18%,#1a1d24)}}
:root[data-theme="dark"] .choice.on{background:color-mix(in srgb,var(--brand) 18%,#1a1d24)}
.welcome .wl-foot{position:sticky;bottom:0;z-index:3;margin:2px -22px -22px;padding:14px 22px 18px;background:var(--surface);border-top:1px solid var(--line-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.welcome .wl-foot .btn{flex:1 1 auto}
@media (max-width:1099px){.welcome .wl-foot{margin:2px -18px -18px;padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));border-radius:0 0 26px 26px}}

/* a fixed cost paid in full is done, not an alarm */
.bar.done i{background:var(--good)}

/* settings: the open section is marked like the sidebar's current item; no keyboard shortcuts row on touch screens */
.card .lrow[aria-current="page"]{margin:0 8px;width:calc(100% - 16px);padding-left:14px;padding-right:14px;border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(20,28,58,.06),0 6px 16px -6px rgba(20,28,58,.18)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card .lrow[aria-current="page"]{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}}
:root[data-theme="dark"] .card .lrow[aria-current="page"]{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
@media (hover:none){.kbdhelp{display:none}}
.kbdhelp kbd{white-space:nowrap}

/* the colour field no longer drifts: every glass layer re-blurred it on every frame for a change too slow to see; on phones cards skip the blur (the field behind them is smooth gradients), bars and sheets keep it */
body::before{animation:none}
@media (max-width:1099px){.card{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* polish: phone chip row fades at the edge instead of cutting a label; command palette shortcuts drawn as keycaps; disabled selects look disabled */
@media (max-width:1099px){.chips.scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}}
.cmd .it .k{font-size:11.5px;font-weight:700;letter-spacing:0;padding:0 6px;line-height:18px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);color:var(--ink-3)}
select:disabled{opacity:.55;background-image:none;cursor:not-allowed}

/* the monthly total shows the effective amount in normal ink even when it is the sum of item budgets */
#b-total::placeholder{color:var(--ink);opacity:1}

/* phone report tabs: same material as the top bar instead of a flat pre-glass band; the period select matches the glass month pill */
@media (max-width:1099px){
  .sticky-tabs{background:linear-gradient(180deg,rgba(238,241,246,.99),rgba(238,241,246,.97))}
  :root[data-theme="dark"] .sticky-tabs{background:linear-gradient(180deg,rgba(7,8,12,.99),rgba(7,8,12,.97))}
}
@media (max-width:1099px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sticky-tabs{background:linear-gradient(180deg,rgba(7,8,12,.99),rgba(7,8,12,.97))}}
.pp-sel{border-radius:999px;border:1px solid var(--glass-edge);background-color:rgba(255,255,255,.72)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pp-sel{background-color:rgba(255,255,255,.08)}}
:root[data-theme="dark"] .pp-sel{background-color:rgba(255,255,255,.08)}
/* with sticky tabs right under the top bar, the bar's faded bottom edge left a see-through strip between them */
@media (max-width:1099px){.app:has(.sticky-tabs) .mtop{-webkit-mask-image:none;mask-image:none}}

/* cards that hold a short list or a chart size to their content instead of stretching to the row height */
@media (min-width:1100px){.card.fit{align-self:start}}
.qi.qi-sm{gap:8px}
.qi.qi-sm li{font-size:13.5px;color:var(--ink-2);align-items:center}
.qi.qi-sm .qi-ic{width:22px;height:22px;border-radius:50%;margin-top:0}
/* the overflow fade masked the sticky tab row's own background too, so the page showed through at its right edge; the cut-off last tab already signals the scroll */
@media (max-width:1099px){.tabs.sticky-tabs[data-fl],.tabs.sticky-tabs[data-fr]{-webkit-mask-image:none;mask-image:none}}

/* visual QA (wave 3): placeholders read as hints, not typed text */
.cmd .in input::placeholder{font-weight:400}
.amt input::placeholder{color:var(--ink-4)}
/* the current tab is a raised lens tinted with the brand colour */
@media (max-width:1099px){.tabbar button[aria-current="page"]{color:var(--brand-t);background:rgba(255,255,255,.92);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(20,28,58,.08),0 6px 14px -6px rgba(20,28,58,.24)}}
@media (max-width:1099px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tabbar button[aria-current="page"]{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}}
@media (max-width:1099px){:root[data-theme="dark"] .tabbar button[aria-current="page"]{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}}
/* a disabled main button is a quiet pill instead of a faded slab */
.btn.pri:disabled{opacity:1;background:var(--surface-3);color:var(--ink-4);border-color:transparent;box-shadow:none}
.btn.pri:disabled .ico{opacity:.7}
/* phones: the import sheet's main action spans the row */
@media (max-width:759px){#imp-text~.row .btn.pri{flex:1 0 100%;justify-content:center}}
/* empty states wrap in balanced lines */
.empty>span:not(.art){text-wrap:balance;max-width:34em}

/* card bills over a longer period: one row per monthly bill (payment day, usage window, billed, paid, still due) */
.bills{display:flex;flex-direction:column;margin-top:10px}
.billh,.billrow{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:4px 12px;align-items:center;padding:11px var(--cp)}
.billh{font-size:12.5px;font-weight:650;color:var(--ink-3);padding-top:4px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.billh .r,.billrow .tnum{text-align:right}
.billrow{width:100%;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:0}
button.billrow:hover{background:var(--surface-2)}
.billrow .bm{display:flex;flex-direction:column;gap:2px;min-width:0}
.billrow .bm b{font-size:14.5px;font-weight:700}
.billrow .bm small{font-size:12.5px;color:var(--ink-3)}
.billrow .ba{font-weight:700;font-size:15px}
.billrow .bp,.billrow .bd{font-size:14px}
.billrow .bd.neg{color:var(--bad)}
.billrow em{font-style:normal;display:none}
.billrow.tot{cursor:default;border-bottom:0}
.billrow.tot .bp,.billrow.tot .bd{font-weight:700}
@media (max-width:1099px){
  .billrow{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .billrow .bm{grid-row:span 3}
  .billrow .bp,.billrow .bd{font-size:12.5px;color:var(--ink-3)}
  .billrow em{display:inline}
}

/* ===== side menu with statement pages: the list scrolls in a short window while 거래 입력 and the footer stay put ===== */
.side-navw{position:relative;flex:1 1 auto;min-height:96px;display:flex;flex-direction:column}
.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin:0 -6px;padding:0 6px}
/* the scrollbar stays hidden like the rest of the column: a small chevron under the list says there is more */
.nav-more{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:30px;height:20px;padding:0;border:0;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-3);visibility:hidden;opacity:0;transition:opacity .15s}
.nav-more:hover{color:var(--ink)}
.side-nav[data-fb]+.nav-more{visibility:visible;opacity:1}
@media (min-width:1280px){.nav-more{left:auto;right:6px;transform:none}}
.side-nav::-webkit-scrollbar{display:none}
.side-nav[data-ft],.side-nav[data-fb]{--ft:0px;--fb:0px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent);mask-image:linear-gradient(180deg,transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent)}
.side-nav[data-ft]{--ft:26px}.side-nav[data-fb]{--fb:26px}
/* fourteen screens share the column: rows and gaps are a little tighter than elsewhere */
.side{gap:4px;padding-top:14px;padding-bottom:12px}
.side .brand{padding-bottom:8px}
.side .ledger-btn{padding-top:7px;padding-bottom:7px;margin-bottom:4px}
.side .nav{gap:1px}
.side .nav button{height:32px;border-radius:11px}
.side-nav .nav+.nav{margin-top:6px}
.side .nav-sec{padding:8px 12px 2px;font-size:11px;line-height:14px}
.side-cta,.side-foot{flex:none}
.side-cta{margin-top:6px;gap:6px}
.side-cta .btn{height:38px}
.side-foot{padding-top:6px;gap:6px}
.side .people{padding:7px 10px}
@media (min-width:768px) and (max-width:1279px){
  .side .nav-sec{display:block;height:1px;padding:0;margin:6px 14px;font-size:0;background:var(--line)}
  .side-nav .nav+.nav{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
  .side .nav button{height:40px;border-radius:14px}
  .side .side-cta .btn{height:42px}
  .side .people{padding:8px 0}
}
/* statement tables: 전부 펼치기 and 전부 접기 sit with the table's other controls */
.fold-btns{display:inline-flex;gap:4px;flex-wrap:wrap}
.fold-row{justify-content:flex-end;margin-bottom:-8px}
.cf-g .caret{margin:0 2px 0 -4px;vertical-align:-3px}
.lrow.cf-kid{padding-left:44px}
/* 자산: a group header is a row of its own while folded */
button.lrow.lgh{cursor:pointer;padding-bottom:13px}
button.lrow.lgh .t b{font-size:15px;color:var(--ink);font-weight:700}
button.lrow.lgh .v{font-size:15px}
button.lrow.lgh .caret{margin:0 2px 0 -4px;vertical-align:-3px}
.agrp+.agrp>.lrow.lgh::before,.agrp+.lrow::before,.lrow+.agrp>.lrow.lgh::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--line-2)}
@media (max-width:1099px){.agrp+.agrp>.lrow.lgh::before,.agrp+.lrow::before,.lrow+.agrp>.lrow.lgh::before{left:18px;right:18px}}
.lrow.cf-kid .t b{font-weight:600;color:var(--ink-2)}
@media (max-width:1099px){.lrow.cf-kid{padding-left:40px}}