:root{
  --font:-apple-system,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#F1F3F8; --surface:#FFFFFF; --surface-2:#ECEEF4; --raise:#FFFFFF;
  --border:#E4E7EE; --border-strong:#D3D8E2;
  --ink:#12151C; --text:#1A1D25; --text-dim:#6B7180; --text-faint:#9AA0AD;
  --accent:#0A84FF; --accent-ink:#0A5AD6; --accent-soft:#E5F0FF;
  --gold:#F0982A; --gold-soft:#FCEBD4;
  --wa:#1FA855; --wa-soft:#DDF0E2;
  --danger:#E5484D; --danger-soft:#FBE4E5;
  --pos:#2FA84F; --neg:#E5484D;
  --track:#E3E6EC;
  --shadow:none;
  --shadow-float:0 4px 16px -6px rgba(16,22,34,.16);
  --r:16px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0B0D12; --surface:#15181F; --surface-2:#1D212A; --raise:#232833;
  --border:#252A34; --border-strong:#353C48;
  --ink:#F2F4F8; --text:#EAEDF3; --text-dim:#9AA0AD; --text-faint:#6B7180;
  --accent:#0A84FF; --accent-ink:#7FB6FF; --accent-soft:rgba(10,132,255,.16);
  --gold:#F0982A; --gold-soft:rgba(240,152,42,.16);
  --wa:#2BBE63; --wa-soft:rgba(43,190,99,.16);
  --danger:#FF5A60; --danger-soft:rgba(255,90,96,.16);
  --pos:#34C264; --neg:#FF5A60;
  --track:#3A3F49;
  --shadow:none;
  --shadow-float:0 6px 22px -8px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#0B0D12; --surface:#15181F; --surface-2:#1D212A; --raise:#232833;
  --border:#252A34; --border-strong:#353C48;
  --ink:#F2F4F8; --text:#EAEDF3; --text-dim:#9AA0AD; --text-faint:#6B7180;
  --accent:#0A84FF; --accent-ink:#7FB6FF; --accent-soft:rgba(10,132,255,.16);
  --gold:#F0982A; --gold-soft:rgba(240,152,42,.16);
  --wa:#2BBE63; --wa-soft:rgba(43,190,99,.16);
  --danger:#FF5A60; --danger-soft:rgba(255,90,96,.16);
  --pos:#34C264; --neg:#FF5A60;
  --track:#3A3F49;
  --shadow:none;
  --shadow-float:0 6px 22px -8px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.45;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;}
#app{max-width:560px; margin:0 auto; padding:0 16px calc(96px + env(safe-area-inset-bottom)); min-height:100vh;}
.screen{animation:fade .26s ease both}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
svg{flex-shrink:0}

/* ---------- splash (animated logo → flies to top-left) ---------- */
#splash{position:fixed; inset:0; z-index:1000; background:var(--accent); overflow:hidden;
  transition:opacity .5s ease .2s, visibility .5s .2s;}
#splash.hide{opacity:0; visibility:hidden;}
.splashvid{position:fixed; top:0; left:0; width:100vw; height:100vh; object-fit:cover; background:var(--accent);
  transition:top .7s cubic-bezier(.5,.05,.2,1), left .7s cubic-bezier(.5,.05,.2,1), width .7s cubic-bezier(.5,.05,.2,1), height .7s cubic-bezier(.5,.05,.2,1), border-radius .5s ease;}
.splashvid.toCorner{top:30px; left:34px; width:40px; height:40px; border-radius:11px;}

/* small brand icon in the home top bar */
.brandmark{width:30px; height:30px; flex-shrink:0; border-radius:8px; object-fit:cover; display:block;}

/* home search + filter */
.searchbar{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:13px; padding:0 12px; margin:4px 0 12px;}
.searchbar svg{width:18px; height:18px; color:var(--text-faint); flex-shrink:0;}
.searchbar input{flex:1; border:none; background:transparent; color:var(--text); font-family:inherit; font-size:15px; padding:12px 0; outline:none;}
.searchbar .clr{background:none; border:none; color:var(--text-faint); font-size:18px; padding:4px;}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:14px 2px 12px; background:linear-gradient(var(--bg) 70%, rgba(0,0,0,0));}
.topbar .mark{font-weight:800; letter-spacing:.01em; font-size:17px; color:var(--text-dim);}
.topbar .mark b{color:var(--accent); font-weight:800;}
.topbar .ttl{font-weight:700; color:var(--ink); font-size:17px; letter-spacing:-.01em;}
.topbar .sp{flex:1}
.iconbtn{display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-dim); flex-shrink:0;}
.iconbtn:hover{color:var(--text); border-color:var(--border-strong)}
.backbtn{font-weight:600; font-size:15px; color:var(--accent); background:none; border:none; display:flex; align-items:center; gap:4px; padding:6px 4px;}
button{font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}

/* ---------- hero ---------- */
.hero{text-align:center; padding:22px 8px 8px;}
.wow{font-weight:800; font-size:clamp(56px,20vw,88px); line-height:.95; letter-spacing:-.03em; color:var(--ink); margin:0;}
.wow .o{color:var(--accent)}
.hero .rule{width:46px; height:3px; border-radius:2px; background:var(--accent); margin:14px auto 12px;}
.hero .sub{text-transform:uppercase; letter-spacing:.22em; font-size:12px; font-weight:700; color:var(--text-dim); margin:0; padding-left:.22em;}
.hero .lede{color:var(--text-dim); font-size:14.5px; max-width:30ch; margin:12px auto 0; text-wrap:balance;}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px; box-shadow:var(--shadow);}
.stack{display:flex; flex-direction:column; gap:14px;}
.sec-title{font-weight:700; font-size:20px; color:var(--ink); margin:22px 2px 2px; letter-spacing:-.02em;}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.muted{color:var(--text-faint); font-size:13px;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.hint{font-size:12.5px; color:var(--text-faint);}

/* ---------- balance banner ---------- */
.balance{text-align:center; padding:20px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r);}
.balance .lbl{font-size:12.5px; color:var(--text-dim); font-weight:600;}
.balance .big{font-family:var(--mono); font-size:34px; font-weight:600; margin:4px 0 0; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.balance.owed .big{color:var(--pos)} .balance.owe .big{color:var(--neg)}
.balance .note{font-size:12.5px; color:var(--text-faint); margin-top:4px;}

/* ---------- buttons (flat, no glow) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:13px; padding:13px 18px; font-size:15px; font-weight:600;}
.btn svg{width:19px;height:19px}
.btn-primary{background:var(--accent); color:#fff; width:100%;}
.btn-primary:active{opacity:.9}
.btn-line{background:var(--surface); border:1px solid var(--border-strong); color:var(--text);}
.btn-gold{background:var(--gold); color:#fff;}
.btn-sm{padding:8px 13px; font-size:13px; border-radius:10px; font-weight:600;}
.btn-block{width:100%;}
.btn-wa{background:var(--wa); color:#fff;}
.btn-wa.ghost{background:var(--wa-soft); color:var(--wa);}
.btn-danger-ghost{background:transparent; border:1px solid var(--danger); color:var(--danger);}
.dashed{width:100%; border:1.5px dashed var(--border-strong); background:transparent; color:var(--text-dim); border-radius:13px; padding:13px; font-size:14px; font-weight:600;}
.dashed:hover{border-color:var(--accent); color:var(--accent)}

.av{display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:700; flex-shrink:0; letter-spacing:.01em;}

/* ---------- list rows ---------- */
.lrow{display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--border);}
.lrow:last-child{border-bottom:none}
.lrow .grow{flex:1; min-width:0}
.lrow .name{font-weight:600; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lrow .subline{font-size:12.5px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tap{cursor:pointer; border-radius:12px; transition:background .12s;}
.tap:hover{background:var(--surface-2)}

.pill{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:999px;}
.pill-me{background:var(--gold-soft); color:var(--gold)} .pill-paid{background:var(--accent-soft); color:var(--accent-ink)}
.amt{font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums;}
.amt-pos{color:var(--pos)} .amt-neg{color:var(--neg)}

/* ---------- iOS switch ---------- */
.sw{width:44px; height:26px; border-radius:13px; background:var(--track); position:relative; border:0; padding:0; flex-shrink:0; cursor:pointer; transition:background .3s ease;}
.sw.on{background:var(--accent);}
.sw .knob{position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.26); transition:transform .34s cubic-bezier(.34,1.5,.5,1);}
.sw.on .knob{transform:translateX(18px);}
.sw.dim{opacity:.4;}
.set-card{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r);}
.set-card .grow{flex:1; min-width:0;}
.set-card .st-title{font-weight:600; font-size:15px;}
.set-card .st-sub{font-size:12.5px; color:var(--text-faint); margin-top:2px;}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.field>span{font-size:12.5px; color:var(--text-dim); font-weight:600;}
.inp{width:100%; padding:12px 13px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); color:var(--text); font-family:inherit; font-size:15px;}
.inp.mono{font-family:var(--mono)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
select.inp{appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7180' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;}
.add-row{display:flex; gap:8px;}
.money-input{position:relative; display:flex; align-items:center;}
.money-input .sym{position:absolute; left:13px; font-family:var(--mono); font-size:13px; color:var(--text-faint); text-transform:uppercase; pointer-events:none;}
.money-input input{padding-left:48px; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums;}

.chips{display:flex; flex-wrap:wrap; gap:8px;}
.schip{display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 6px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:14px; font-weight:600; color:var(--text-dim);}
.schip.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}

.item{border:1px solid var(--border); border-radius:13px; padding:12px; margin-bottom:10px; background:var(--surface-2);}
.item.warn{border-color:color-mix(in srgb,var(--danger) 45%,var(--border));}
.item-top{display:flex; gap:8px; margin-bottom:10px;}
.item-name{flex:1; min-width:0; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-family:inherit; font-size:15px; font-weight:500;}
.item-amt-wrap{position:relative; width:104px; flex-shrink:0;}
.item-amt-wrap .sym{position:absolute; left:9px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; pointer-events:none;}
.item-amt{width:100%; padding:9px 10px 9px 38px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-family:var(--mono); font-size:15px; text-align:right; font-variant-numeric:tabular-nums;}
.item-del{background:none; border:none; color:var(--text-faint); font-size:20px; align-self:center; padding:0 2px;}
.item-del:hover{color:var(--danger)}
.tagline-who{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.who-lab{font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em;}
.tbtn{border:1px solid var(--border); background:var(--surface); color:var(--text-dim); border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600;}
.tbtn.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.tbtn.every.on{background:var(--accent-ink); border-color:var(--accent-ink);}

details.calc{border-top:1px solid var(--border); margin:2px 0 12px; padding-top:12px;}
.calc summary{font-size:13px; color:var(--accent); font-weight:600; cursor:pointer; list-style:none; display:flex; gap:6px; align-items:center;}
.calc summary::-webkit-details-marker{display:none}
.calc summary::before{content:"+"; font-family:var(--mono);}
details[open].calc summary::before{content:"\2212"}
.pct-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.pct-grid .money-input input{padding-left:13px; padding-right:30px; font-size:14px;}
.pct-grid .sym{left:auto; right:12px;}
.pct-grid label span{font-size:11.5px; color:var(--text-dim);}
.calc-prev{margin-top:11px; padding:11px 12px; background:var(--accent-soft); border-radius:11px; white-space:pre; font-family:var(--mono); font-size:12.5px; color:var(--accent-ink); line-height:1.5; overflow-x:auto;}

.scale-note{font-family:var(--mono); font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; margin:2px 0 8px;}
.grand{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:2px solid var(--border-strong);}
.grand .gl{font-size:13.5px; color:var(--text-dim); font-weight:600; text-wrap:balance;}
.grand .gv{font-family:var(--mono); font-weight:600; font-size:22px; color:var(--accent); font-variant-numeric:tabular-nums;}
.empty{text-align:center; color:var(--text-faint); font-size:14px; padding:22px 10px;}
.settled{text-align:center; color:var(--pos); font-weight:600; padding:16px; font-size:14.5px; display:flex; gap:8px; align-items:center; justify-content:center;}

/* ---------- segmented ---------- */
.seg{display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:4px; gap:2px; margin:4px 0 14px;}
.seg button{flex:1; border:none; background:none; color:var(--text-dim); font-weight:600; font-size:12.5px; padding:9px 4px; border-radius:9px;}
.seg button.on{background:var(--surface); color:var(--accent);}

/* ---------- invite ---------- */
.invite{display:flex; align-items:center; gap:10px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%, var(--border)); border-radius:13px; padding:11px 13px;}
.invite .grow{flex:1; min-width:0;}
.invite code{font-family:var(--mono); font-size:12px; color:var(--accent-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;}

/* ---------- chat ---------- */
.chat-wrap{display:flex; flex-direction:column; gap:8px;}
.chat-scroll{display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto; padding:4px 2px;}
.msg{max-width:78%; padding:9px 12px; border-radius:16px; font-size:14.5px; line-height:1.35; word-wrap:break-word;}
.msg .who{font-size:11px; font-weight:700; color:var(--accent); margin-bottom:2px;}
.msg .time{font-size:10px; color:var(--text-faint); margin-top:3px; text-align:right; font-family:var(--mono);}
.msg.them{align-self:flex-start; background:var(--surface-2); border:1px solid var(--border);}
.msg.me{align-self:flex-end; background:var(--accent); color:#fff;}
.msg.me .who{color:rgba(255,255,255,.85)} .msg.me .time{color:rgba(255,255,255,.7)}
.composer{display:flex; gap:8px; align-items:flex-end;}
.composer textarea{flex:1; resize:none; min-height:44px; max-height:120px; padding:11px 13px; border:1px solid var(--border); border-radius:13px; background:var(--surface-2); color:var(--text); font-family:inherit; font-size:15px; line-height:1.3;}
.send{width:44px; height:44px; border-radius:13px; border:none; background:var(--accent); color:#fff; display:grid; place-items:center; flex-shrink:0;}

/* ---------- auth ---------- */
.auth{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:24px 20px calc(40px + env(safe-area-inset-bottom)); max-width:420px; margin:0 auto;}
.auth .wow{font-size:clamp(60px,24vw,96px)}

/* ---------- tab bar + fab ---------- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:center; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:linear-gradient(rgba(0,0,0,0), var(--bg) 34%);}
.tabbar-inner{display:flex; width:100%; max-width:520px; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-float); padding:5px;}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border:none; background:none; color:var(--text-faint); font-size:10.5px; font-weight:600; letter-spacing:.02em; border-radius:13px;}
.tab.on{color:var(--accent); background:var(--accent-soft);}
.tab svg{width:22px; height:22px;}
.fab{position:fixed; right:calc(50% - 260px + 14px); bottom:calc(78px + env(safe-area-inset-bottom)); z-index:31; display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; border:none; padding:14px 20px; border-radius:999px; font-weight:600; font-size:14.5px; box-shadow:var(--shadow-float);}
.fab:active{opacity:.92}
@media(max-width:552px){ .fab{right:18px} }

#toast{position:fixed; left:50%; bottom:calc(150px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(12px); background:var(--ink); color:var(--bg); padding:11px 16px; border-radius:13px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50; max-width:88%; text-align:center; box-shadow:var(--shadow-float);}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
a.plainlink{color:inherit; text-decoration:none;}
@media(prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} #splash .swm span{opacity:1; transform:none} }