/* Manrope variable (200-800), self-hosted subsets vi+latin. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(manrope-vi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#131517;--surface:#1C1F22;--surface2:#22262A;--border:#26292D;--ink:#ECEFF1;--muted:#9AA3AA;--accent:#3ED598;--on-accent:#131517;--error:#FF7B72;--radius:16px}
html{color-scheme:dark}
html,body{background:var(--bg)}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45}
button{font-family:inherit;border:0;cursor:pointer;background:none;color:inherit}
button:active{transform:scale(.97)}
input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.hidden{display:none!important}
.page{padding:8px 16px 32px;max-width:560px;margin:0 auto}
.ic{display:inline-flex;flex:none;align-items:center;justify-content:center}
.ic svg{width:100%;height:100%;display:block}

/* Header */
.hdr-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.hdr h1{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share{height:48px;padding:0 16px;border-radius:999px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;white-space:nowrap;flex:none}
.hdr-row{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.stack{display:flex;align-items:center;flex:none}
.avatar{width:28px;height:28px;border-radius:999px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;box-shadow:0 0 0 2px var(--bg)}
.avatar+.avatar{margin-left:-8px}
.avatar.first{border-color:var(--accent);color:var(--accent)}
.hdr-sub{font-size:13px;font-weight:600}
.chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:999px;background:rgba(62,213,152,.13);color:var(--accent);font-size:11px;font-weight:700;white-space:nowrap}
.sync-line{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;font-weight:600;color:var(--muted);min-height:16px}
.sync-dot{width:8px;height:8px;border-radius:999px;background:var(--muted);flex:none}
.sync-dot.ok{background:var(--accent)}
.sync-dot.err{background:var(--error)}

/* Tabs */
.tabs{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px;gap:4px;margin-top:12px}
.tab{flex:1;height:48px;border-radius:999px;font-size:14px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;white-space:nowrap}
.tab.active{background:var(--accent);color:var(--on-accent);font-weight:800}

/* Section labels */
.slabel{margin:16px 0 8px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.slabel h2{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.slabel span{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}

/* Keo header card */
.keo-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:8px;width:100%;text-align:left;min-height:56px}
.keo-card .keo-info{flex:1;min-width:0}
.keo-title{font-size:16px;font-weight:800;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keo-meta{font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.keo-status{flex:none;font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;background:rgba(62,213,152,.13);color:var(--accent);white-space:nowrap}
.keo-status.closed{background:var(--surface2);color:var(--muted)}

/* Settle stacked cards */
.settle-stack{display:flex;flex-direction:column;gap:8px}
.settle-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:72px}
.settle-left{min-width:0;flex:1}
.settle-names{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:700;flex-wrap:wrap}
.settle-names .ic{color:var(--accent)}
.settle-amt{font-size:14px;font-weight:800;color:var(--accent);margin-top:2px;white-space:nowrap}
.settle-btns{display:flex;align-items:center;gap:8px;flex:none}
.btn-qr{width:48px;height:48px;border-radius:999px;background:transparent;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none}
.btn-paid{display:flex;align-items:center;gap:4px;height:48px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:800;white-space:nowrap;flex:none}
.settled-note{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;font-size:14px;font-weight:700}
.settled-note p{font-size:12px;font-weight:600;color:var(--muted);margin-top:4px}

/* Total band */
.band{margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;gap:16px}
.band-col{flex:1;min-width:0}
.band-col+.band-col{border-left:1px solid var(--border);padding-left:16px}
.band-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.band-amount{font-size:22px;font-weight:800;line-height:1.25;margin-top:2px}
.band-keo{font-size:13px;font-weight:700;line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.band-date{font-size:12px;font-weight:600;color:var(--muted)}

/* Balances table */
.table{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:4px 12px}
.trow{display:grid;grid-template-columns:minmax(48px,64px) minmax(76px,1fr) minmax(64px,.9fr) minmax(80px,1.1fr);gap:6px;align-items:center}
.trow.head{min-height:28px}
.trow.head span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.trow.body{min-height:48px;border-top:1px solid var(--border);padding:6px 0}
.t-name{font-size:13px;font-weight:700;line-height:1.25;overflow-wrap:break-word}
.t-amt{font-size:12px;font-weight:600;white-space:nowrap}
.t-status span{display:block;font-size:10px;font-weight:600;color:var(--muted);line-height:1.25}
.t-status b{font-size:12px;font-weight:800;line-height:1.3;white-space:nowrap}

/* Cards / rows */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.exp{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:8px 14px;width:100%;text-align:left}
.exp+.exp{border-top:1px solid var(--border)}
.exp-top{display:flex;align-items:center;gap:8px}
.exp-top .ic{color:var(--accent)}
.exp-name{font-size:14px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-amt{font-size:14px;font-weight:800;white-space:nowrap}
.exp-meta{font-size:12px;font-weight:600;color:var(--muted);margin-left:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-row{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 14px}
.pay-row+.pay-row{border-top:1px solid var(--border)}
.pay-text{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.35}
.pay-text small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.icon-btn{width:48px;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--muted)}
.icon-btn.danger{color:var(--error)}
.member-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 14px;width:100%;text-align:left}
.member-row+.member-row{border-top:1px solid var(--border)}
.member-avatar{width:40px;height:40px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;flex:none}
.member-info{flex:1;min-width:0}
.member-name{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-bank{font-size:12px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keo-row{border-top:1px solid var(--border)}
.keo-row:first-child{border-top:0}
.keo-row.active-row{box-shadow:inset 3px 0 0 var(--accent)}
.keo-row-main{display:flex;align-items:center;gap:8px;min-height:64px;padding:10px 14px;width:100%;text-align:left}
.keo-row-actions{display:flex;border-top:1px solid var(--border)}
.keo-row-actions button{flex:1;height:48px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.keo-row-actions button+button{border-left:1px solid var(--border)}
.keo-row-actions button.danger{color:var(--error)}

/* CTA + buttons */
.cta{margin-top:16px;width:100%;height:52px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 28px rgba(62,213,152,.25)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:999px;font-size:15px;font-weight:800;padding:0 20px;width:100%}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--ink)}
.btn-danger{background:transparent;border:1px solid var(--error);color:var(--error)}
.btn-row{display:flex;gap:8px;margin-top:16px}
.btn-row.btn-col{flex-direction:column}
.btn-row .btn{flex:1}
.footer{margin-top:16px;text-align:center;font-size:12px;font-weight:600;color:var(--muted)}
.readonly-banner{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;font-size:13px;font-weight:600;color:var(--muted);margin-top:16px;display:flex;gap:8px;align-items:flex-start}
.readonly-banner .ic{color:var(--accent);margin-top:1px}

/* Empty states */
.empty{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:24px 16px;text-align:center}
.empty .ic{color:var(--accent);margin:0 auto 8px}
.empty h3{font-size:15px;font-weight:800}
.empty p{font-size:13px;font-weight:600;color:var(--muted);margin-top:4px}
.empty .btn{margin-top:16px}

/* Forms */
.field{margin-top:16px}
.field label{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.input,select.input{width:100%;height:52px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--ink);font-size:16px;font-weight:600;padding:0 16px;appearance:none}
.input::placeholder{color:var(--muted);font-weight:400}
select.input{background-image:none;padding-right:40px}
.select-wrap{position:relative}
.select-wrap .ic{position:absolute;right:14px;top:50%;transform:translateY(-50%) rotate(90deg);pointer-events:none;color:var(--muted)}
.field-err{font-size:12px;font-weight:600;color:var(--error);margin-top:6px;min-height:16px}
.field-err:empty{display:none}
.check-list{display:flex;flex-direction:column;gap:8px}
.check-row{display:flex;align-items:center;gap:12px;min-height:52px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px 12px;width:100%;text-align:left}
.check-row .member-avatar{width:32px;height:32px;font-size:13px}
.check-row .check-name{flex:1;min-width:0;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check-box{width:24px;height:24px;border-radius:8px;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center;flex:none;color:var(--on-accent)}
.check-row.checked .check-box{background:var(--accent);border-color:var(--accent)}
.check-row.checked{border-color:var(--accent)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.switch-row .switch-label{font-size:14px;font-weight:700}
.switch-row .switch-label small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.switch{width:56px;height:48px;position:relative;flex:none;padding:0;background:transparent;border:0}
.switch::before{content:"";position:absolute;left:2px;top:8px;width:52px;height:32px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);transition:background .2s ease}
.switch::after{content:"";position:absolute;top:11px;left:5px;width:26px;height:26px;border-radius:999px;background:var(--muted);transition:transform .2s ease,background .2s ease}
.switch[aria-checked="true"]::before{background:var(--accent);border-color:var(--accent)}
.switch[aria-checked="true"]::after{transform:translateX(20px);background:var(--on-accent)}
.split-amt{display:flex;align-items:center;gap:8px;margin-top:8px}
.split-amt .check-name{flex:1}
.split-amt .input{height:48px;flex:none;width:150px;text-align:right}
.remain-line{font-size:13px;font-weight:700;margin-top:8px}
.remain-line.ok{color:var(--accent)}
.remain-line.bad{color:var(--error)}

/* Dialogs */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.overlay.center{align-items:center;padding:16px}
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.sheet{position:relative;width:100%;max-width:560px;max-height:88dvh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-bottom:0;border-radius:24px 24px 0 0;padding:8px 16px 24px;animation:sheet-up .24s ease-out}
.modal-card{position:relative;width:100%;max-width:420px;max-height:88dvh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:20px 16px;animation:fade-in .18s ease-out}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fade-in{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
.grab{width:40px;height:4px;border-radius:999px;background:var(--border);margin:4px auto 12px}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.dialog-head h3{font-size:17px;font-weight:800}
.dialog-body{font-size:14px;font-weight:600;color:var(--muted);line-height:1.55}
.dialog-body b{color:var(--ink)}
.qr-img-wrap{background:#fff;border-radius:16px;padding:12px;margin-top:16px;display:flex;justify-content:center}
.qr-img-wrap img{width:100%;max-width:280px;height:auto;display:block;border-radius:8px}
.qr-fallback{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:16px;margin-top:16px;text-align:center;font-size:13px;font-weight:600}
.qr-lines{margin-top:16px;display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.qr-lines .qr-line{display:flex;justify-content:space-between;gap:12px}
.qr-lines .qr-line span:first-child{color:var(--muted)}
.qr-lines .qr-line span:last-child{text-align:right;overflow-wrap:break-word}
.qr-warn{display:flex;gap:8px;margin-top:12px;font-size:12px;font-weight:600;color:var(--muted);line-height:1.5}
.qr-warn .ic{color:var(--accent);flex:none;margin-top:1px}

/* Toast + update banner */
#toast-root{position:fixed;left:0;right:0;bottom:24px;z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:12px 20px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:100%}
.toast .ic{color:var(--accent)}
.update-banner{margin-top:12px;background:rgba(62,213,152,.13);border:1px solid var(--accent);border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.update-banner[hidden]{display:none}
.update-banner .ic{color:var(--accent);flex:none}
.update-banner button{margin-left:auto;flex:none;height:48px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:800;white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}