/* Layout: one-column phone app — sticky header, scrolling cards, fixed bottom tab bar; bottom sheets for input */
:root{
  --bg:#F2F5F3; --surface:#FFFFFF; --surface2:#E7EEEA; --ink:#13201A; --muted:#5B6A63; --line:#D5DED9;
  --accent:#0D6B51; --accent-soft:#D6EBE3; --on-accent:#FFFFFF;
  --out:#B2402A; --out-soft:#F6E1DB; --in:#1D7F47; --in-soft:#DCF0E3; --gold:#9A6A06; --gold-soft:#F4E8CC;
  --shadow:0 1px 2px rgba(19,32,26,.06),0 4px 14px rgba(19,32,26,.06);
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1412; --surface:#16201C; --surface2:#1E2A25; --ink:#E5EEE9; --muted:#93A39B; --line:#2A3832;
  --accent:#3DBE93; --accent-soft:#173A2F; --on-accent:#07140F;
  --out:#F08068; --out-soft:#3A1F19; --in:#5CCF8C; --in-soft:#173322; --gold:#E2B443; --gold-soft:#3A2F12;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1412; --surface:#16201C; --surface2:#1E2A25; --ink:#E5EEE9; --muted:#93A39B; --line:#2A3832;
  --accent:#3DBE93; --accent-soft:#173A2F; --on-accent:#07140F;
  --out:#F08068; --out-soft:#3A1F19; --in:#5CCF8C; --in-soft:#173322; --gold:#E2B443; --gold-soft:#3A2F12;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink);font:15px/1.45 var(--f-body);-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:8px;min-height:56px;padding-block:8px}
header.top h1{font-size:19px;font-weight:700;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.iconbtn{border:0;background:var(--surface2);border-radius:10px;height:38px;min-width:38px;padding:0 10px;font-weight:600;cursor:pointer}
.iconbtn:focus-visible,.btn:focus-visible,.tab:focus-visible,.chipbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
main .wrap{display:flex;flex-direction:column;gap:14px;padding-block:14px}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding-block:6px}
.tab{border:0;background:none;border-radius:10px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.tab svg{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;min-width:0}
.hero{background:var(--accent);color:var(--on-accent);border-radius:18px;padding:16px;display:grid;gap:12px}
.hero .lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;font-weight:600}
.hero .big{font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.hero .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hero .row3 div{background:rgba(255,255,255,.14);border-radius:10px;padding:8px}
.hero .row3 b{display:block;font-size:16px}
.hero .row3 span{font-size:11.5px;opacity:.9}
.datebar{display:flex;align-items:center;gap:8px}
.datebar input{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:10px;height:40px;padding:0 10px;font-weight:600}
.sect{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.sect h2{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:700}
.sect .aside{font-size:13px;color:var(--muted)}
.group{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.ghead{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ghead .name{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghead .tot{font-weight:700}
.item{padding:12px 14px;display:grid;gap:8px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .l1{display:flex;align-items:flex-start;gap:8px}
.item .t{flex:1;min-width:0}
.item .t b{display:block;font-weight:600;overflow-wrap:anywhere}
.item .t small{color:var(--muted);font-size:12.5px}
.amt{font-weight:700;font-size:17px;text-align:right;white-space:nowrap}
.amt small{display:block;font-weight:500;font-size:11.5px;color:var(--muted)}
.out{color:var(--out)} .in{color:var(--in)} .gold{color:var(--gold)} .muted{color:var(--muted)}
.l2{display:flex;gap:8px;align-items:center}
.bid{flex:1;min-width:0;display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--bg);height:42px;padding:0 10px;gap:6px}
.bid span{font-size:12px;color:var(--muted);white-space:nowrap}
.bid input{border:0;background:none;outline:0;width:100%;min-width:0;font-weight:700;font-size:16px;text-align:right}
.bid:focus-within{border-color:var(--accent)}
.btn{border:0;border-radius:10px;height:42px;padding:0 14px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn.pri{background:var(--accent);color:var(--on-accent)}
.btn.sec{background:var(--surface2);color:var(--ink)}
.btn.hot{background:var(--gold-soft);color:var(--gold)}
.btn.danger{background:var(--out-soft);color:var(--out)}
.btn.block{width:100%}
.btn.sm{height:34px;padding:0 10px;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;white-space:nowrap}
.chip.done{background:var(--in-soft);color:var(--in)}
.chip.hot{background:var(--gold-soft);color:var(--gold)}
.chip.live{background:var(--accent-soft);color:var(--accent)}
.chip.dead{background:var(--surface2);color:var(--muted)}
.chip.end{background:var(--surface2);color:var(--muted)}
.chip.est{background:var(--surface2);color:var(--muted);font-weight:600}
.chipbtn{border:0;cursor:pointer}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:12px;min-width:0}
.stat .k{font-size:12px;color:var(--muted);font-weight:600}
.stat .v{font-size:20px;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.stat .s{font-size:12px;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:10px}
.lcard{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:13px 14px;display:grid;gap:8px;border:0;text-align:left;cursor:pointer;width:100%}
.lcard .top{display:flex;gap:8px;align-items:flex-start}
.lcard .top .t{flex:1;min-width:0}
.lcard .top .t b{display:block;font-weight:700;overflow-wrap:anywhere}
.lcard .top .t small{color:var(--muted);font-size:12.5px}
.bar{height:6px;background:var(--surface2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:12px;color:var(--muted)}
.kv b{display:block;font-size:14.5px;color:var(--ink)}
.seg{display:flex;background:var(--surface2);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;border-radius:8px;height:34px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.empty{text-align:center;padding:28px 16px;color:var(--muted);display:grid;gap:10px;justify-items:center}
.empty b{color:var(--ink);font-size:16px}
.tablewrap{overflow-x:auto;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;background:var(--surface2)}
th:first-child,td:first-child{text-align:left}
tr.clk{cursor:pointer}
tfoot td{font-weight:700;border-bottom:0}
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:15;border:0;background:var(--accent);color:var(--on-accent);height:52px;border-radius:16px;padding:0 18px;font-weight:700;box-shadow:0 6px 20px rgba(13,107,81,.35);cursor:pointer;display:flex;align-items:center;gap:6px}
.banner{border-radius:12px;padding:10px 12px;font-size:13px;background:var(--gold-soft);color:var(--gold);font-weight:600}
.note{font-size:12.5px;color:var(--muted)}
.calc{display:grid;gap:8px;background:var(--gold-soft);border-radius:12px;padding:12px}
.calc .r{display:flex;align-items:center;gap:8px;justify-content:space-between}
.calc .r b{font-size:20px;color:var(--gold)}
/* sheet */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet-back{position:absolute;inset:0;background:rgba(5,12,9,.45)}
.sheet-panel{position:relative;background:var(--surface);width:100%;max-width:560px;max-height:92%;border-radius:20px 20px 0 0;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet-head{display:flex;align-items:center;gap:8px;padding:14px max(16px,env(safe-area-inset-left,0px)) 10px;border-bottom:1px solid var(--line)}
.sheet-head h3{margin:0;font-size:17px;flex:1;min-width:0}
.sheet-body{overflow-y:auto;padding:14px 16px;display:grid;gap:12px}
.sheet-foot{display:flex;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--line)}
.sheet-foot .btn{flex:1}
.field{display:grid;gap:5px;min-width:0}
.field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--bg);border-radius:10px;height:44px;padding:0 12px;width:100%;min-width:0;font-size:16px}
.field textarea{height:72px;padding:10px 12px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.field .hint{font-size:12px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:10px;padding:10px 12px;font-weight:600;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;font-size:14px;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.hostinfo{display:grid;gap:6px}
.hostinfo .row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.hostinfo .row span{color:var(--muted);font-size:13px}
.hostinfo .row b{overflow-wrap:anywhere;text-align:right}
@media (prefers-reduced-motion:no-preference){.sheet-panel{animation:up .18s ease-out}@keyframes up{from{transform:translateY(24px);opacity:.6}}}

/* ---- self-hosted additions ---- */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding-block:24px}
.login form{width:100%;max-width:380px;display:grid;gap:14px}
.login .brand{display:grid;gap:4px;margin-bottom:6px}
.login .brand h1{margin:0;font-size:30px;letter-spacing:-.02em}
.login .brand p{margin:0;color:var(--muted)}
.login .mark{width:52px;height:52px;border-radius:16px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;font-size:22px}
.err{color:var(--out);font-weight:600;font-size:13.5px;min-height:1.2em}
.ro .needw{display:none!important}
.userrow{display:flex;align-items:center;gap:10px}
.userrow .t{flex:1;min-width:0}
.userrow .t b{display:block}
.userrow .t small{color:var(--muted)}
.by{font-size:11px;color:var(--muted);font-weight:500}
.sync{width:8px;height:8px;border-radius:50%;background:var(--in);display:inline-block}
.sync.off{background:var(--out)}