/* Cash7 admin panel — design from design/app.html (approved mockup) */
:root{--r:22px;--r2:14px;--ease:cubic-bezier(.2,.8,.2,1)}
/* ===== themes: dominant + accent + neutrals ===== */
[data-theme=royal][data-mode=dark]{--bg:#0b0a1f;--bg2:radial-gradient(120% 60% at 90% -10%,#33288a 0,#0b0a1f 60%);--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.1);--tx:#f3f1ff;--mu:#a9a4d4;--ac:#ffcf6b;--ac2:#8b6cff;--onac:#1a1440;--ok:#4be3a5;--warn:#ffb547;--bad:#ff6b7f;--nav:rgba(16,14,40,.82)}
[data-theme=royal][data-mode=light]{--bg:#f4f2ff;--bg2:radial-gradient(120% 60% at 90% -10%,#ddd6ff 0,#f4f2ff 60%);--card:#fff;--line:#e4e0f7;--tx:#17123d;--mu:#5d5891;--ac:#5b3fe0;--ac2:#b8860b;--onac:#fff;--ok:#0d8a5c;--warn:#a55d00;--bad:#c62842;--nav:rgba(255,255,255,.9)}
[data-theme=emerald][data-mode=dark]{--bg:#06110e;--bg2:radial-gradient(120% 60% at 90% -10%,#0f4a37 0,#06110e 60%);--card:rgba(120,255,200,.05);--line:rgba(120,255,200,.12);--tx:#e8fff6;--mu:#8fbfae;--ac:#3ee6a4;--ac2:#c7f36b;--onac:#03140d;--ok:#3ee6a4;--warn:#ffc35a;--bad:#ff7a8a;--nav:rgba(6,20,16,.85)}
[data-theme=emerald][data-mode=light]{--bg:#effaf5;--bg2:radial-gradient(120% 60% at 90% -10%,#c9f2df 0,#effaf5 60%);--card:#fff;--line:#d3ece1;--tx:#0b2a20;--mu:#4c7466;--ac:#0b8a5f;--ac2:#5d7d00;--onac:#fff;--ok:#0b8a5f;--warn:#9a5b00;--bad:#c42a3e;--nav:rgba(255,255,255,.9)}
[data-theme=ink][data-mode=dark]{--bg:#121214;--bg2:radial-gradient(120% 60% at 90% -10%,#3a1a12 0,#121214 55%);--card:#1c1c20;--line:#2b2b31;--tx:#f6f4ef;--mu:#a3a09a;--ac:#ff6a45;--ac2:#ffd2c4;--onac:#fff;--ok:#43d39e;--warn:#ffb347;--bad:#ff6b6b;--nav:rgba(22,22,25,.88)}
[data-theme=ink][data-mode=light]{--bg:#f6f4ef;--bg2:radial-gradient(120% 60% at 90% -10%,#ffe1d6 0,#f6f4ef 55%);--card:#fff;--line:#e8e4dc;--tx:#15151a;--mu:#5f5c56;--ac:#d9441f;--ac2:#15151a;--onac:#fff;--ok:#0e8a5f;--warn:#9a5600;--bad:#c22b2b;--nav:rgba(255,255,255,.92)}
[data-theme=ocean][data-mode=dark]{--bg:#06121f;--bg2:radial-gradient(120% 60% at 90% -10%,#0d3a5c 0,#06121f 60%);--card:rgba(120,200,255,.06);--line:rgba(120,200,255,.13);--tx:#eaf6ff;--mu:#93b4cc;--ac:#4cc3ff;--ac2:#ffd166;--onac:#04223a;--ok:#46e0a8;--warn:#ffc15a;--bad:#ff7a85;--nav:rgba(7,22,38,.86)}
[data-theme=ocean][data-mode=light]{--bg:#eff6fc;--bg2:radial-gradient(120% 60% at 90% -10%,#cfe8fb 0,#eff6fc 60%);--card:#fff;--line:#d6e6f3;--tx:#0a2236;--mu:#4b6a82;--ac:#0369a1;--ac2:#b07800;--onac:#fff;--ok:#0b8a5f;--warn:#9a5b00;--bad:#c42a3e;--nav:rgba(255,255,255,.9)}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg)}
body{font-family:Alexandria,system-ui,sans-serif;color:var(--tx);background:var(--bg2);background-attachment:fixed;min-height:100vh;font-size:15px;line-height:1.5;transition:background .3s}
body.lock{overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0}
.app{max-width:760px;margin:auto;padding:16px 16px 112px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* appearance */
.thm{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}
@media(min-width:600px){.thm{grid-template-columns:repeat(4,1fr)}}
.thm button{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:10px;cursor:pointer;text-align:start;font-size:13px;font-weight:600;min-height:44px;transition:border-color .2s var(--ease)}
.thm button.on{border-color:var(--ac)}
.thm .sw{display:flex;height:40px;border-radius:10px;overflow:hidden;margin-bottom:8px}
.thm .sw i{flex:1}.thm .sw i:first-child{flex:2}
.seg{display:flex;gap:4px;padding:4px;margin:0 12px 12px;border-radius:14px;background:color-mix(in srgb,var(--tx) 5%,transparent)}
.seg button{flex:1;border:0;background:none;border-radius:10px;min-height:44px;font-size:13px;color:var(--mu);cursor:pointer}
.seg button.on{background:var(--card);color:var(--tx);font-weight:600;box-shadow:0 2px 8px -4px #0006}

/* header */
.hd{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.hd-t{flex:1;min-width:0}
.logo{width:48px;height:48px;border-radius:16px;flex:none;background:linear-gradient(135deg,var(--ac),var(--ac2));display:grid;place-items:center;color:var(--onac);font-weight:800;font-size:20px;box-shadow:0 8px 24px -8px var(--ac)}
.hd h1{font-size:20px;font-weight:800;line-height:1.2}
.hd .sub{font-size:12px;color:var(--mu);display:flex;align-items:center;gap:6px}
.hd .acts{display:flex;gap:8px;flex:none}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2s infinite}
.dot.off{background:var(--bad);animation:none}
.dot.idle{background:var(--mu);animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}}
.ib{width:44px;height:44px;flex:none;border-radius:14px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;position:relative}
.ib .bd{position:absolute;top:6px;left:6px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center}
.ib.busy svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;backdrop-filter:blur(14px)}
.sec{margin-top:24px}
.sec>h3{font-size:15px;font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.sec>h3 a,.lnk{font-size:12px;color:var(--ac);font-weight:400;text-decoration:none;cursor:pointer;min-height:44px;margin:-10px 0;padding:0 4px;display:inline-flex;align-items:center}
.mu{color:var(--mu);font-size:12px}
.hint{color:var(--mu);font-size:12px;margin-top:8px;padding:0 4px}

/* hero */
.hero{position:relative;overflow:hidden;padding:20px}
.hero:before{content:"";position:absolute;inset:auto -40px -80px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(var(--ac2),transparent 70%);opacity:.25;pointer-events:none}
.hero .lbl{font-size:13px;color:var(--mu)}
.hero .big{font-size:44px;font-weight:300;letter-spacing:-1px;line-height:1.1;margin:4px 0}
.hero .big b{font-weight:800;color:var(--ac)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);font-weight:600}
.chip.down{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.chart{display:flex;align-items:flex-end;gap:8px;height:96px;margin-top:20px}
.chart div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0}
.chart i{width:100%;border-radius:8px 8px 4px 4px;background:color-mix(in srgb,var(--ac) 30%,transparent);transition:height .5s var(--ease)}
.chart div:last-child i{background:linear-gradient(var(--ac),var(--ac2))}
.chart span{font-size:10px;color:var(--mu);white-space:nowrap}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.kpi{padding:14px;text-align:start;cursor:pointer;width:100%;transition:transform .15s var(--ease)}
.kpi:active{transform:scale(.98)}
.kpi .v{font-size:24px;font-weight:800;margin-top:4px}
.kpi .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--ac)) 16%,transparent);color:var(--c,var(--ac))}
@media(min-width:640px){.kpis{grid-template-columns:repeat(4,1fr)}}

.live{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 16px}
.live .pk{width:40px;height:40px;border-radius:12px;flex:none;background:#e3262f;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.live .mid{flex:1;min-width:0}
.live b{font-size:14px}.live .mu{display:block}
.tg{margin-inline-start:auto;width:48px;height:28px;border-radius:99px;background:var(--ok);position:relative;flex:none;border:0;cursor:pointer;transition:background .2s var(--ease)}
.tg:before{content:"";position:absolute;inset:-8px -4px}
.tg:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s var(--ease)}
.tg.off{background:var(--line)}.tg.off:after{left:23px}

.alert{display:flex;gap:12px;align-items:center;margin-top:12px;padding:12px 16px;width:100%;text-align:start;cursor:pointer;min-height:56px;border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,var(--card))}
.alert.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 9%,var(--card))}
.alert.bad>svg{color:var(--bad)}
.alert>svg{color:var(--warn);flex:none}
.alert b{font-size:13px}
.alert .mid{flex:1;min-width:0}

/* rows */
.list{display:flex;flex-direction:column;gap:8px}
.tx{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;transition:transform .15s var(--ease);min-height:68px}
.tx:active{transform:scale(.98)}
.av{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--onac);background:linear-gradient(135deg,var(--ac),var(--ac2))}
.tx .mid,.ord .mid{flex:1;min-width:0}
.nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph{font-size:12px;color:var(--mu)}
.tx .end,.ord .end{text-align:left;flex:none}
.amt{font-weight:800;font-size:16px}
.st{font-size:11px;padding:2px 8px;border-radius:99px;font-weight:600;display:inline-block;margin-top:2px;white-space:nowrap}
.s-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.s-wa{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.s-bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.s-new{background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac)}
.s-mu{background:color-mix(in srgb,var(--mu) 16%,transparent);color:var(--mu)}

.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:8px 14px;min-height:44px;font-size:13px;cursor:pointer;transition:background .15s var(--ease)}
.chips button.on{background:var(--tx);color:var(--bg);border-color:transparent;font-weight:600}
.search{display:flex;align-items:center;gap:8px;padding:0 14px;height:48px;margin-bottom:12px;color:var(--mu)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:14px;color:var(--tx);-webkit-appearance:none;appearance:none}
.search input::-webkit-search-cancel-button{display:none}
.search input::placeholder{color:var(--mu)}

/* orders page */
.pg-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pg-h h2{font-size:18px;font-weight:800}
.ord .top{display:flex;align-items:center;gap:12px}
.ord .note{font-size:12px;margin-top:10px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--tx) 5%,transparent)}

/* stock */
.stock{display:flex;align-items:center;gap:14px;padding:14px}
.ring{--p:50;width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--c,var(--ac)) calc(var(--p)*1%),var(--line) 0)}
.ring span{width:44px;height:44px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-weight:800;font-size:14px}
.stock .mid{flex:1;min-width:0}
.stock b{font-size:15px}
.btn{border:0;border-radius:14px;min-height:48px;padding:0 18px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s var(--ease),opacity .15s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;pointer-events:none}
.btn.p{background:var(--ac);color:var(--onac);box-shadow:0 10px 24px -10px var(--ac)}
.btn.g{background:var(--card);border:1px solid var(--line)}
.btn.danger{background:var(--bad);color:#fff}
.btn.bad{color:var(--bad)}
.btn.full{width:100%}
.btn.sm{min-height:44px;padding:0 12px;font-size:13px;flex:none}
textarea,.in{width:100%;background:color-mix(in srgb,var(--tx) 4%,transparent);border:1px solid var(--line);border-radius:14px;padding:12px 14px;outline:0;font-size:14px;min-height:48px}
textarea{resize:vertical;line-height:1.7}
textarea:focus,.in:focus{border-color:var(--ac)}
textarea::placeholder,.in::placeholder{color:var(--mu)}
.in.num{text-align:right}

/* settings */
.set{padding:0;overflow:hidden}
.si{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:60px;border-bottom:1px solid var(--line)}
.si:last-child{border:0}
.si.tap{cursor:pointer}
.si .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac);flex:none;font-weight:800;font-size:14px}
.si .mid{flex:1;min-width:0}.si b{font-size:14px;font-weight:600;display:block}
.si .mid .mu{display:block}
.price{font-weight:800;color:var(--ac);flex:none;white-space:nowrap}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tags span{font-size:12px;padding:2px 8px;border-radius:8px;background:color-mix(in srgb,var(--tx) 6%,transparent)}
.row{display:flex;gap:8px;align-items:center}
.row.between{justify-content:space-between}
.li{margin-bottom:8px}

/* bottom nav */
.nav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:520px;display:flex;justify-content:space-around;padding:8px;border-radius:24px;background:var(--nav);backdrop-filter:blur(20px);border:1px solid var(--line);z-index:5;box-shadow:0 16px 40px -16px #0008;margin-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;min-width:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--mu);min-height:52px;justify-content:center;border-radius:16px;cursor:pointer;transition:.2s var(--ease);white-space:nowrap}
.nav button.on{color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);font-weight:600}

.pg{display:none;animation:in .25s var(--ease)}.pg.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}}

/* loading / empty */
.sk{height:68px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(90deg,var(--card) 30%,color-mix(in srgb,var(--tx) 7%,var(--card)) 50%,var(--card) 70%);background-size:300% 100%;animation:sh 1.3s linear infinite}
.sk.tall{height:180px}
@keyframes sh{from{background-position:100% 0}to{background-position:0 0}}
.empty{text-align:center;padding:32px 16px;color:var(--mu);font-size:13px}
.empty b{display:block;color:var(--tx);font-size:15px;margin-bottom:4px}
.more{margin-top:12px}

/* sheet */
.ov{position:fixed;inset:0;background:#0009;opacity:0;pointer-events:none;transition:.25s;z-index:9}
.ov.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:760px;margin:auto;max-height:90vh;overflow:auto;overscroll-behavior:contain;background:var(--bg);border-radius:28px 28px 0 0;padding:0 16px calc(24px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s var(--ease),visibility .3s;visibility:hidden;z-index:10;border-top:1px solid var(--line)}
.sheet.on{transform:none;visibility:visible}
.grab{display:block;width:100%;height:32px;cursor:pointer;position:relative;margin-bottom:4px}
.grab:after{content:"";position:absolute;top:12px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:9px;background:var(--line)}
.sheet h3.t{font-size:17px;font-weight:800;margin-bottom:4px}
.sh-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sh-h .mid{flex:1;min-width:0}
.sh-h .amt{font-size:24px;color:var(--ac)}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px;min-height:44px}
.kv>span:first-child{color:var(--mu);flex:none}
.kv>span:last-child{text-align:left;min-width:0;overflow-wrap:anywhere}
.kv.tap{cursor:pointer}
.kv.tap>span:last-child{color:var(--ac);font-weight:600}
.raw{font-size:13px;line-height:1.7;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--tx) 5%,transparent);border-inline-start:3px solid var(--ac);white-space:pre-wrap;overflow-wrap:anywhere}
.steps{display:flex;flex-direction:column;gap:0;margin-top:8px}
.step{display:flex;gap:12px;font-size:13px;padding-bottom:14px;position:relative}
.step:before{content:"";position:absolute;right:11px;top:24px;bottom:0;width:2px;background:var(--line)}
.step:last-child:before{display:none}
.step i{width:24px;height:24px;border-radius:50%;flex:none;background:var(--ok);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
.step i.i-wa{background:var(--warn)}.step i.i-bad{background:var(--bad)}.step i.i-ac{background:var(--ac);color:var(--onac)}.step i.i-mu{background:var(--mu)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;min-height:56px;margin-bottom:8px}
.opt .mid{flex:1;min-width:0}
.res{margin-top:12px;padding:12px 14px;border-radius:14px;font-size:14px;background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.bal{text-align:center;padding:20px}
.bal .big{font-size:36px;font-weight:800;margin-top:4px}
.fld{display:block;font-size:13px;color:var(--mu);margin:12px 0 6px}

/* toast + dialog */
.toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,16px);opacity:0;z-index:40;background:var(--tx);color:var(--bg);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;width:max-content;max-width:calc(100% - 32px);text-align:center;box-shadow:0 12px 32px -12px #000a;transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad);color:#fff}
.dlg-ov{position:fixed;inset:0;z-index:30;background:#000a;display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .2s}
.dlg-ov.on{opacity:1;pointer-events:auto}
.dlg{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px;width:100%;max-width:400px;transform:scale(.96);transition:transform .2s var(--ease)}
.dlg-ov.on .dlg{transform:none}
.dlg p{font-size:15px;line-height:1.8;margin-bottom:16px}
.dlg .grid2{margin-top:0}

/* auth gate */
.auth{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:24px;text-align:center;background:var(--bg2),var(--bg)}
.auth .box{max-width:360px}
.auth .logo{margin:0 auto 20px;width:72px;height:72px;font-size:28px;border-radius:24px}
.auth h2{font-size:20px;font-weight:800;margin-bottom:8px}
.auth p{color:var(--mu);font-size:15px;line-height:1.8;margin-bottom:24px}
body.noauth .auth{display:grid}
body.noauth .app,body.noauth .nav{display:none}


/* ===================== v2: tabs, home, stats, more ===================== */
.nav{max-width:560px;padding:6px}
.nav button{position:relative;min-height:56px;font-size:11px;gap:4px}
.nav button svg{width:22px;height:22px}
.nbd{position:absolute;top:4px;inset-inline-end:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center}
.nav button:active{transform:scale(.96)}
.app{padding-bottom:120px}

/* home */
.hero-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.hero-sub>.mu{font-size:13px}
.ch-mini{margin-top:16px}
.hero-more{display:flex;align-items:center;justify-content:center;gap:4px;width:calc(100% + 40px);margin:12px -20px -20px;min-height:48px;border-top:1px solid var(--line);color:var(--ac);font-size:13px;font-weight:600;cursor:pointer;position:relative}
.hero-more svg{color:var(--ac)!important}
.kpi .mu{font-size:12px;line-height:1.4;margin-top:2px}
.kpi.sm{padding:12px 14px}
.kpi.sm .v{font-size:22px;margin-top:0;line-height:1.3}
.kpi .kd{margin-top:6px;font-size:11px;color:var(--mu)}
.kpi .kd .chip{font-size:11px;padding:2px 8px}
.att{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:14px 16px;text-align:start;cursor:pointer;min-height:72px;border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 9%,var(--card));transition:transform .15s var(--ease)}
.att:active{transform:scale(.98)}
.att.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 8%,var(--card))}
.att .att-n{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;font-weight:800;font-size:18px;background:var(--warn);color:#fff}
.att.bad .att-n{background:var(--bad)}
.att.calm{cursor:default;border-color:var(--line);background:var(--card)}
.att.calm .att-n{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.att .mid{flex:1;min-width:0}.att b{font-size:15px}
.devline{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:0 16px;min-height:48px;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:13px;color:var(--mu);text-align:start;cursor:pointer}
.devline .mid{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bad-t,.t-bad{color:var(--bad)}.t-warn{color:var(--warn)}.t-ok{color:var(--ok)}
.aitem{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.aitem:last-child{border:0}
.aitem .ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.aitem.bad .ic{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.aitem .mid{flex:1;min-width:0}.aitem b{display:block;font-size:14px;font-weight:600}.aitem .mu{display:block}

/* ops / students */
.seg.top{margin:0 0 12px}
.seg .cnt{display:inline-block;min-width:18px;padding:0 5px;border-radius:99px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;line-height:18px;margin-inline-start:4px}
.stsum{margin:-4px 4px 12px;min-height:18px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.trio>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:14px;background:color-mix(in srgb,var(--tx) 4%,transparent);text-align:center}
.trio b{font-size:16px;font-weight:800}
.trio .mu{font-size:11px;line-height:1.35}

/* stats */
.pbar{position:sticky;top:0;z-index:4;display:flex;gap:4px;padding:4px;margin:0 0 16px;border-radius:16px;background:var(--nav);backdrop-filter:blur(20px);border:1px solid var(--line)}
.pbar button{flex:1;min-height:44px;border-radius:12px;font-size:13px;color:var(--mu);cursor:pointer;transition:background .2s var(--ease),color .2s}
.pbar button.on{background:var(--ac);color:var(--onac);font-weight:600}
.hero.sh .big{font-size:40px}
.k4{margin-top:12px}
.note-c{display:flex;gap:12px;align-items:flex-start;margin-top:12px;padding:14px 16px}
.note-c>svg{color:var(--ac);margin-top:2px}.note-c .mid{flex:1}.note-c b{font-size:14px}
.seg.segm{margin:0 0 12px;padding:3px}
.seg.segm button{min-height:40px;font-size:12px}
.cap{margin-top:8px;line-height:1.6}
.ch{position:relative;user-select:none;-webkit-user-select:none}
.chs{display:block;width:100%;height:auto;overflow:visible;direction:ltr;stroke:none}
.chs *{stroke:none}
.chs .gl{stroke:var(--line)!important;stroke-width:1;stroke-dasharray:2 4}
.chs .bl{stroke:var(--line)!important;stroke-width:1}
.chs .yl,.chs .xl{fill:var(--mu);font-size:10px;font-family:inherit}
.chs .vl{fill:var(--tx);font-size:11px;font-weight:600;font-family:inherit}
.chs .bar{fill:color-mix(in srgb,var(--ac) 42%,transparent);transition:fill .15s}
.chs .bar.hi{fill:var(--ac)}
.ch.hov .bar{fill:color-mix(in srgb,var(--ac) 30%,transparent)}
.ch.hov .bar.act{fill:var(--ac)}
.chs .hit{fill:transparent;cursor:pointer}
.ch .tip{position:absolute;top:0;z-index:2;pointer-events:none;background:var(--tx);color:var(--bg);border-radius:10px;padding:6px 10px;font-size:12px;line-height:1.5;white-space:nowrap;box-shadow:0 8px 20px -8px #0008}
.ch .tip b{display:block;font-weight:600}
.ch-empty{position:absolute;inset:0 0 24px;display:grid;place-items:center;color:var(--mu);font-size:13px;text-align:center;padding:0 16px}
.ch-mini .ch-empty{inset:0}
.conv{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}
.cv{font-size:32px;font-weight:800;color:var(--ac);line-height:1.1;text-align:right}
.cv small{font-size:15px;font-weight:400;color:var(--mu)}
.hb{display:flex;flex-direction:column;gap:12px}
.hbr{display:block;width:100%;text-align:start;padding:0}
.hbr.tap{cursor:pointer;min-height:44px;border-radius:10px}
.hbr.tap:active{opacity:.8}
.hbt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;margin-bottom:6px}
.hbl{min-width:0;font-weight:600}
.hbv{flex:none;font-weight:600}
.hbr>.mu{margin-top:4px;font-size:11px}
.trk{height:8px;border-radius:99px;background:color-mix(in srgb,var(--tx) 7%,transparent);overflow:hidden}
.trk i{display:block;height:100%;border-radius:99px;background:var(--ac);transition:width .3s var(--ease)}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.minis.g3{margin-top:0}
.minis.g4{grid-template-columns:repeat(2,1fr);margin-top:0}
@media(min-width:600px){.minis.g4{grid-template-columns:repeat(4,1fr)}}
.minis.g1{grid-template-columns:1fr;margin-top:0}.minis.g2{grid-template-columns:1fr 1fr;margin-top:0}
.mini{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:64px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--tx) 3%,transparent);text-align:start;cursor:pointer;min-width:0}
div.mini{cursor:default}
.mini b{font-size:20px;font-weight:800;line-height:1.3}
.mini span{font-size:12px;color:var(--mu)}
.mini em{font-style:normal;font-size:11px;color:var(--mu);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mini.warn b{color:var(--warn)}.mini.bad b{color:var(--bad)}.mini.ac b{color:var(--ac)}.mini.ok b{color:var(--ok)}
.mini.warn{border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}.mini.bad{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.mini.z b{color:var(--mu);font-weight:600}
.live-l{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;padding-top:4px;border-top:1px dashed var(--line)}
.live-l .lnk{margin:0;font-size:13px}
.trio.t3{margin-top:0}
.trio.t3 b{font-size:15px}
.split{display:flex;gap:2px;height:12px;margin-top:16px;border-radius:99px;overflow:hidden}
.split i{background:var(--ac);min-width:0}
.split i.m{background:var(--mu)}
.lg{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:12px;align-items:center}
.lg>span{display:inline-flex;align-items:center;gap:6px}
.lg i{width:10px;height:10px;border-radius:3px;background:var(--ac);flex:none}
.lg i.m{background:var(--mu)}
.lg .ramp{width:96px;height:8px;border-radius:99px;background:linear-gradient(to left,color-mix(in srgb,var(--ac) 15%,transparent),var(--ac))}
.row-l{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:44px;border-top:1px dashed var(--line);font-size:14px;text-align:start;cursor:pointer}
.stk{align-items:center}
.stk .trk{margin:8px 0 6px}
.fw{font-weight:800;flex:none}
.heat{display:grid;grid-template-columns:36px repeat(24,minmax(0,1fr));gap:2px;align-items:center;direction:ltr}
.heat i{aspect-ratio:1;border-radius:3px;background:color-mix(in srgb,var(--ac) calc(var(--o)*100%),color-mix(in srgb,var(--tx) 5%,transparent))}
.heat .hdl{font-size:10px;color:var(--mu);text-align:right;padding-inline-end:4px;direction:rtl}
.heat .hx{font-size:9px;color:var(--mu);white-space:nowrap;overflow:visible;height:14px}
.empty.sm{padding:16px 8px}
.hd .sub{min-width:0}.hd .sub>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.si .mu b,.si .row b+span{display:inline;font-size:inherit}
.si .mu b{font-weight:700}
.stk .row b{font-size:15px}
.stk .fw{white-space:nowrap}
.stk .fw .mu{display:inline}
.mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chs .xl,.chs .vl{unicode-bidi:plaintext}

/* more / devices / about */
.me{display:flex;align-items:center;gap:12px;padding:14px 16px}
.me .mid{flex:1;min-width:0}.me b{display:block;font-size:16px}
.mi{width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}
.mi .ic svg{width:18px;height:18px}
.dev{padding:14px 16px}
.dev .mid{flex:1;min-width:0}.dev b{font-size:15px}
.ic-b{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.ic-b.off{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.dev .row{margin-bottom:4px}
.about{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:24px 16px}
.about .logo{width:64px;height:64px;font-size:24px;border-radius:20px;margin-bottom:8px}
.about b{font-size:16px}

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