:root{--bg:#0a0c12;--bg2:#0e1118;--panel:rgba(22,26,37,.72);--panel2:#1b2030;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--text:#eceef5;--mute:#8d95aa;
--acc:#ff4b6e;--acc2:#7c8cff;--grad:linear-gradient(135deg,#ff4b6e,#ff8a4b);--grad2:linear-gradient(135deg,#7c8cff,#36d1dc);--ok:#3ecf8e;--warn:#f5b84b;--bad:#ff5d6c;--r:14px;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;
background:radial-gradient(900px 500px at 85% -10%,rgba(124,140,255,.16),transparent 60%),radial-gradient(700px 500px at -10% 110%,rgba(255,75,110,.12),transparent 60%),var(--bg);background-attachment:fixed}
a{color:var(--acc2);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{margin:.2em 0 .5em;letter-spacing:-.01em}h1{font-size:1.75rem;font-weight:750}h2{font-size:1.15rem;font-weight:650}
h3{font-size:.78rem;color:var(--mute);font-weight:650;text-transform:uppercase;letter-spacing:.09em}
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:rgba(12,15,22,.72);backdrop-filter:blur(18px);border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:3px}
.brand{font-weight:800;font-size:1.2rem;padding:4px 12px 18px;letter-spacing:-.02em}.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.side a.nav{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:11px;color:#c9cee0;text-decoration:none;transition:.15s}.side a.nav i{font-style:normal;width:20px;text-align:center;opacity:.8}
.side a.nav:hover{background:rgba(255,255,255,.05);color:#fff}.side a.nav.on{background:linear-gradient(90deg,rgba(255,75,110,.18),rgba(255,75,110,.02));color:#fff;box-shadow:inset 3px 0 var(--acc)}
.side .grow{flex:1}.who{padding:10px 12px;border-top:1px solid var(--line);margin-top:8px}.who b{display:block;font-size:.9rem}
.main{padding:30px 38px 60px;max-width:1280px;width:100%;animation:fade .25s ease}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap}
.card{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.grid .card{margin:0;transition:.18s}.grid .card:hover{transform:translateY(-2px);border-color:var(--line2)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{flex:1}.mute{color:var(--mute)}.small{font-size:.85rem}
.stat{position:relative;overflow:hidden}.stat b{font-size:2rem;display:block;font-weight:780;background:var(--grad2);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}
.stat.hot b{background:var(--grad);-webkit-background-clip:text;background-clip:text}
button,.btn{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 15px;cursor:pointer;font:inherit;font-weight:520;transition:.15s}
button:hover{border-color:var(--acc2);background:rgba(124,140,255,.12)}button.pri{background:var(--grad);border:0;color:#fff;font-weight:650;box-shadow:0 6px 18px rgba(255,75,110,.28)}
button.pri:hover{filter:brightness(1.08);transform:translateY(-1px)}button.ghost{background:transparent}button.danger{color:var(--bad)}button:disabled{opacity:.5;cursor:wait;transform:none}
input,select,textarea{background:rgba(8,10,16,.7);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;width:100%;transition:.15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc2);box-shadow:0 0 0 3px rgba(124,140,255,.2)}
textarea{min-height:90px;resize:vertical}label{display:block;margin:11px 0 5px;color:var(--mute);font-size:.82rem;font-weight:550}input[type=checkbox],input[type=radio]{width:auto;margin-right:7px}input[type=range]{padding:0}
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;padding:5px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:13px;width:fit-content;max-width:100%}
.tabs button{border:0;background:transparent;color:var(--mute);padding:7px 15px}.tabs button.on{background:var(--panel2);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 9px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--mute);font-weight:650;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em}
tr.click:hover{background:rgba(255,255,255,.04);cursor:pointer}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.74rem;background:rgba(255,255,255,.06);border:1px solid var(--line);white-space:nowrap}
.b-ok{color:var(--ok);border-color:rgba(62,207,142,.4);background:rgba(62,207,142,.08)}.b-warn{color:var(--warn);border-color:rgba(245,184,75,.4);background:rgba(245,184,75,.08)}
.b-bad{color:var(--bad);border-color:rgba(255,93,108,.4);background:rgba(255,93,108,.08)}.b-acc{color:var(--acc2);border-color:rgba(124,140,255,.4);background:rgba(124,140,255,.08)}
.chip{display:inline-block;margin:2px 4px 2px 0;padding:1px 9px;border-radius:99px;background:rgba(255,255,255,.06);font-size:.74rem;color:var(--mute)}
.bar{height:6px;background:rgba(255,255,255,.07);border-radius:9px;overflow:hidden;margin:3px 0 7px}.bar i{display:block;height:100%;background:var(--grad2);border-radius:9px}
.warnbox{border:1px solid rgba(245,184,75,.45);background:rgba(245,184,75,.08);border-radius:11px;padding:10px 13px;margin:8px 0;font-size:.88rem}
.auth{max-width:420px;margin:9vh auto;padding:0 16px}.auth .card{padding:28px}
.log{background:#07090d;border:1px solid var(--line);border-radius:10px;padding:11px;font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;max-height:210px;overflow:auto;white-space:pre-wrap;color:#b9c0d4}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px;margin-right:7px}@keyframes s{to{transform:rotate(360deg)}}
.skel{height:18px;border-radius:8px;margin:10px 0;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.10),rgba(255,255,255,.04));background-size:200% 100%;animation:sh 1.2s infinite}@keyframes sh{to{background-position:-200% 0}}
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:60}
.toast{background:#1a1f2e;border:1px solid var(--line2);border-left:4px solid var(--ok);padding:11px 15px;border-radius:11px;max-width:430px;box-shadow:var(--shadow);animation:fade .2s}.toast.err{border-left-color:var(--bad)}
.modal{position:fixed;inset:0;background:rgba(3,5,9,.7);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal .box{background:#131723;border:1px solid var(--line2);border-radius:18px;padding:24px;width:min(680px,100%);max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:fade .2s}
video{width:100%;max-height:560px;background:#000;border-radius:12px}video.v{max-width:310px}audio{width:100%;height:38px}.scene img{max-width:230px;border-radius:12px;margin-top:9px;display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.steps li{margin:8px 0}.done{color:var(--ok)}
.chart{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px}.chart div{flex:1;background:var(--grad2);border-radius:4px 4px 0 0;min-height:2px;position:relative;opacity:.9}.chart div:hover{opacity:1;filter:brightness(1.2)}
.pill{display:inline-flex;gap:6px;align-items:center;padding:3px 11px;border-radius:99px;border:1px solid var(--line2);font-size:.8rem;cursor:pointer;user-select:none}.pill.on{background:var(--grad);border-color:transparent;color:#fff}
.hero{padding:22px;border-radius:var(--r);background:linear-gradient(120deg,rgba(255,75,110,.16),rgba(124,140,255,.14));border:1px solid var(--line2);margin-bottom:18px}
@media(max-width:860px){.shell{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:10px}.main{padding:18px}.two,.three{grid-template-columns:1fr}.brand{padding-bottom:6px}}