/* Layout: phone-first single column app shell, bottom tab bar on mobile, top tabs on desktop */
:root{
  --bg:#f3f5f4; --surface:#ffffff; --ink:#15211d; --muted:#5d6b66; --line:#dbe2df;
  --accent:#1f6b52; --accent-ink:#ffffff; --accent-soft:#e1efe9;
  --owe:#b4442f; --owe-soft:#f8e6e1; --ok:#1f6b52;
  --s-household:#1f6b52; --s-bills:#3a6db3; --s-car:#c4862a; --s-coaching:#8a4fb0;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1513; --surface:#18201d; --ink:#e6eeea; --muted:#9aa9a3; --line:#2a3531;
  --accent:#5cc49c; --accent-ink:#0b1310; --accent-soft:#1d2f28;
  --owe:#f08a72; --owe-soft:#3a221c; --ok:#5cc49c;
  --s-household:#5cc49c; --s-bills:#7aa7ec; --s-car:#e2a952; --s-coaching:#c08ae0; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1513; --surface:#18201d; --ink:#e6eeea; --muted:#9aa9a3; --line:#2a3531;
  --accent:#5cc49c; --accent-ink:#0b1310; --accent-soft:#1d2f28;
  --owe:#f08a72; --owe-soft:#3a221c; --ok:#5cc49c;
  --s-household:#5cc49c; --s-bills:#7aa7ec; --s-car:#e2a952; --s-coaching:#c08ae0; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
.wrap{max-width:960px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 110px;display:flex;flex-direction:column;gap:20px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
h1{font-family:var(--display);font-size:1.6rem;margin:0;letter-spacing:-.01em}
h2{font-family:var(--display);font-size:1.15rem;margin:0;text-wrap:balance}
.sample{font-size:.8rem;background:var(--accent-soft);color:var(--ink);padding:6px 10px;border-radius:6px}
nav.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px}
nav.tabs a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font-weight:500;padding:8px 6px;border-radius:7px;white-space:nowrap}
nav.tabs a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
nav.tabs a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){
  nav.tabs{position:fixed;left:0;right:0;bottom:0;border-radius:0;border-width:1px 0 0;z-index:5;gap:2px;
    padding:6px max(6px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-right,0px))}
  nav.tabs a{font-size:.78rem;padding:8px 2px}
}
.view{display:flex;flex-direction:column;gap:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.balance{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.who{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.balance .big{font-family:var(--display);font-size:2.2rem;line-height:1.1}
.amt{font-family:var(--num);font-weight:500}
.owes{color:var(--owe)} .even{color:var(--ok)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:.78rem;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.chip.unsettled{background:var(--owe-soft);border-color:transparent;color:var(--owe)}
.chip.settled{background:var(--accent-soft);border-color:transparent;color:var(--ok)}
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px 14px;font-weight:500}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.ghost{border-color:transparent;color:var(--muted);padding:2px 8px;background:transparent}
button:disabled{opacity:.45;cursor:default}
.row-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.list{display:flex;flex-direction:column}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.date{font-family:var(--num);font-size:.8rem;color:var(--muted);width:52px}
.item .name{font-weight:600}
.item .meta{font-size:.82rem;color:var(--muted)}
.money{font-family:var(--num);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
form.add{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1/-1}
label,.label{font-size:.82rem;font-weight:600;color:var(--muted)}
input,select{font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
select.compact{width:auto;padding:7px 10px}
input.amount{font-family:var(--num);font-size:1.4rem}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{flex:1;text-align:center;padding:9px 6px;cursor:pointer;color:var(--ink);font-weight:500;font-size:.9rem}
.seg input:checked+label{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:-2px}
.hint{font-size:.85rem;color:var(--muted)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:500;z-index:9}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-size:.86rem}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
td{font-family:var(--num)}
th:first-child,td:first-child{text-align:left;font-family:var(--body);position:sticky;left:0;background:var(--surface)}
td.empty{color:var(--line)}
tr.total td{font-weight:600;border-bottom:0}
td.tot{color:var(--accent)}
td.sel,th.sel{background:var(--accent-soft)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .v{font-family:var(--num);font-size:1.25rem}
.kpis{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi .v{font-family:var(--num);font-size:1.3rem;font-variant-numeric:tabular-nums}
.kpi.total{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.kpi.total .who{color:var(--accent-ink);opacity:.85}
.kpi.total .v{font-size:1.8rem}
.kpi .delta{font-size:.78rem;color:var(--muted)}
.kpi.total .delta{color:var(--accent-ink);opacity:.85}
.dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
svg.chart{width:100%;height:auto;display:block}
svg.chart text{fill:var(--muted);font-family:var(--body);font-size:11px}
svg.chart .grid{stroke:var(--line);stroke-width:1}
svg.chart .bar{cursor:pointer}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hbar{display:grid;grid-template-columns:minmax(0,9rem) 1fr auto;gap:10px;align-items:center;font-size:.88rem}
.hbar .track{height:10px;border-radius:3px;background:var(--bg);overflow:hidden}
.hbar .fill{height:100%;border-radius:3px}
.hbar .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbars{display:flex;flex-direction:column;gap:9px}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi.total{grid-column:1/-1}.two{grid-template-columns:1fr}}
@media (max-width:520px){form.add{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}
.item[data-kind]{cursor:pointer;border-radius:6px}
.item[data-kind]:hover{background:var(--bg)}
.item[data-kind]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);color:var(--ink);width:100%;max-width:520px;border-radius:14px 14px 0 0;padding:20px max(16px,env(safe-area-inset-left,0px)) calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;max-height:90vh;overflow:auto}
@media (min-width:641px){.scrim{align-items:center}.sheet{border-radius:14px}}
.sheet .actions{display:flex;gap:8px;flex-wrap:wrap}
.sheet .actions .spacer{flex:1}
button.danger{color:var(--owe);border-color:var(--owe)}
button.danger.solid{background:var(--owe);color:var(--surface)}
.confirm{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--owe-soft);padding:10px 12px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* App-only additions */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.login form{width:100%;max-width:380px}
.err{color:var(--owe);font-size:.88rem}
.headbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.headbtns button{padding:6px 12px;font-size:.85rem}
.loading{color:var(--muted);padding:40px 0;text-align:center}