:root{
  --bg:#f6f1f2;--bg2:#fbf8f8;--card:#fff;--text:#201418;--muted:#7b6a70;--line:#eadfe2;
  --acc:#a1213b;--acc2:#7d1630;--accfg:#fff;--ok:#12803c;--okbg:#e3f5e9;--bad:#b3261e;--badbg:#fbe6e4;--warn:#9a6400;--warnbg:#fff1d6;
  --chip:#fff;--shadow:0 1px 2px rgba(60,20,30,.06),0 6px 20px rgba(60,20,30,.05);--r:16px;
}
[data-theme=dark]{--bg:#0f0d0e;--bg2:#161214;--card:#1c1719;--text:#f3eaec;--muted:#9a8b90;--line:#2d2427;--acc:#d6334f;--acc2:#a1213b;--ok:#46c274;--okbg:#12281a;--bad:#ff7a70;--badbg:#341614;--warn:#f0b24a;--warnbg:#33260c;--chip:#1c1719;--shadow:none}
[data-theme=light]{--bg:#f2f4f7;--bg2:#fafbfc;--card:#fff;--text:#14181f;--muted:#69737f;--line:#e3e7ec;--acc:#2455d6;--acc2:#1a3fa3;--chip:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:linear-gradient(180deg,var(--bg2),var(--bg));min-height:100%;color:var(--text);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.wrap{max-width:720px;margin:0 auto;padding:16px 16px 90px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.avatar{width:46px;height:46px;border-radius:50%;border:2px solid var(--acc);display:grid;place-items:center;font-weight:700;color:var(--acc);background:var(--card)}
.top .who{flex:1;min-width:0}.top .who b{display:block;font-size:18px}.top .who span{color:var(--muted);font-size:13px}
.iconbtn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center}
.tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px;margin-bottom:14px}
.tabs button{flex:1;border:0;background:none;padding:10px;border-radius:10px;font-weight:600;color:var(--muted)}
.tabs button.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--accfg)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.stat .l{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px}
.stat .v{font-size:24px;font-weight:700;margin-top:4px}.stat .v small{font-size:14px;color:var(--muted);font-weight:500}
.stat .s{color:var(--muted);font-size:12px;margin-top:2px}
.bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:var(--acc);border-radius:4px}
.search{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);margin-bottom:10px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.chip{white-space:nowrap;border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:7px 14px;font-weight:600;color:var(--muted)}
.chip.on{border-color:var(--acc);color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--card))}
.btn{width:100%;border:0;border-radius:12px;padding:13px;font-weight:700;background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--accfg)}
.btn.ghost{background:var(--card);color:var(--text);border:1px solid var(--line);font-weight:600}
.btn.danger{background:var(--badbg);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent)}
.btn.warn{background:var(--warnbg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.btn:disabled{opacity:.55}
.row{display:flex;gap:8px}.row>*{flex:1}
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:12px}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.item:last-child{border:0}.item:active{background:var(--bg)}
.ico{width:40px;height:40px;border-radius:12px;background:var(--bg);display:grid;place-items:center;flex:none;color:var(--muted)}
.item .m{flex:1;min-width:0}.item .n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.item .d{color:var(--muted);font-size:13px;margin-top:2px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--bg);color:var(--muted)}
.badge.ok{background:var(--okbg);color:var(--ok)}.badge.bad{background:var(--badbg);color:var(--bad)}.badge.warn{background:var(--warnbg);color:var(--warn)}
.dev{margin-top:6px;display:inline-block;border:1px solid var(--line);border-radius:10px;padding:2px 8px;font-size:12px;font-weight:600;color:var(--muted)}
.dev.full{border-color:var(--bad);color:var(--bad);background:var(--badbg)}
.sheet-bg{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(--bg2);width:100%;max-width:720px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.sheet h2{margin:2px 0 12px;font-size:20px;display:flex;align-items:center;gap:8px}
.sheet .x{margin-left:auto;border:0;background:var(--card);width:36px;height:36px;border-radius:50%;border:1px solid var(--line)}
label{display:block;color:var(--muted);font-size:13px;margin:12px 0 5px}
input.f,select.f{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.sec{margin-top:12px}.sec h3{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.drow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.drow:last-child{border:0}
.drow .t{flex:1;min-width:0}.drow .t b{display:block}.drow .t span{font-size:12px;color:var(--muted)}
.mini{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:6px 10px;font-weight:600;color:var(--bad)}
.chart{display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:10px}
.chart i{flex:1;background:var(--acc);border-radius:3px 3px 0 0;min-height:2px;opacity:.9}
.chart i.z{background:repeating-linear-gradient(45deg,var(--line) 0 3px,transparent 3px 6px);min-height:6px}
.top5 .t5{margin:10px 0}.top5 .t5 div{display:flex;justify-content:space-between;font-weight:600}
.login{max-width:380px;margin:12vh auto 0;padding:0 16px}
.login h1{font-size:26px;margin:0 0 4px}.login p{color:var(--muted);margin:0 0 18px}
.err{color:var(--bad);margin:10px 0;font-size:14px}
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));width:min(688px,calc(100% - 32px));z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.2)}
#toast{position:fixed;left:50%;top:14px;transform:translate(-50%,-80px);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:12px;z-index:50;transition:transform .25s;max-width:90%;font-weight:600}
#toast.show{transform:translate(-50%,0)}
.muted{color:var(--muted)}.center{text-align:center}.mt{margin-top:12px}

.back{border:0;background:none;color:var(--acc);font-weight:700;font-size:16px;padding:6px 4px}
select.f{appearance:auto}