:root{--bg:#0b0d13;--bg2:#10131b;--panel:#141824;--panel2:#1a1f2e;--line:#262c3d;--text:#e8ebf3;--muted:#8d95ab;--accent:#3ddc97;--accent-ink:#04120b;--warn:#ffb454;--danger:#ff6b6b;--r:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,rgba(61,220,151,.07),transparent),var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
body.reduce *{animation:none!important;transition:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--bg2);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;font-weight:800;letter-spacing:.12em}
.brand span{display:flex;flex-direction:column;line-height:1.1}.brand small{font-size:.65rem;color:var(--accent);letter-spacing:.35em}
.nav-h{font-size:.68rem;letter-spacing:.14em;color:var(--muted);margin:18px 10px 6px;text-transform:uppercase}
nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#b9c0d3;transition:.15s}
nav a i{font-style:normal;width:20px;text-align:center;color:var(--muted)}
nav a:hover{background:var(--panel);color:#fff}
nav a.on{background:var(--panel2);color:#fff;box-shadow:inset 3px 0 var(--accent)}nav a.on i{color:var(--accent)}
.side-foot{margin-top:auto;font-size:.72rem;color:var(--muted);padding:14px 8px 0}
main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:16px 28px;border-bottom:1px solid var(--line);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5;background:rgba(11,13,19,.85)}
.top h1{font-size:1.15rem;margin:0;flex:1}
.menu{display:none}
.pill{font-size:.78rem;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--muted);white-space:nowrap}
.pill::before{content:"●";margin-right:6px;color:var(--warn)}.pill.ok::before{color:var(--accent)}
.view{padding:28px;max-width:1100px;width:100%;margin:0 auto;flex:1}
.foot{text-align:center;color:var(--muted);font-size:.7rem;letter-spacing:.18em;padding:24px}
h2{font-size:1.5rem;margin:0 0 4px}h3{margin:0 0 6px;font-size:1.05rem}
.sub{color:var(--muted);margin:0 0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.grid{display:grid;gap:16px}.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.hero{position:relative;overflow:hidden;text-align:center;padding:54px 20px 46px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,#171c2b,#0f1219 60%);margin-bottom:18px}
.hero::after{content:"";position:absolute;inset:auto -10% -60% -10%;height:70%;background:radial-gradient(closest-side,rgba(61,220,151,.18),transparent);pointer-events:none}
.hero .logo{filter:drop-shadow(0 0 22px rgba(61,220,151,.35));margin-bottom:8px}
.hero h2{font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.14em;font-weight:900;margin:6px 0 0}
.hero h2 span{color:var(--accent)}
.hero p{color:var(--muted);margin:8px auto 26px;max-width:480px}
.play{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;padding:18px 64px;font-size:1.35rem;font-weight:800;letter-spacing:.2em;border:0;border-radius:14px;background:var(--accent);color:var(--accent-ink);cursor:pointer;box-shadow:0 8px 34px rgba(61,220,151,.28);transition:.15s}
.play:hover{transform:translateY(-2px);filter:brightness(1.08)}
.hero-row{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.chip{padding:6px 12px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-size:.8rem;color:#c7cde0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.btn.sm{padding:6px 11px;font-size:.85rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.icon-btn{background:var(--panel);border:1px solid var(--line);border-radius:10px;width:40px;height:40px;cursor:pointer}
label.f{display:block;font-size:.8rem;color:var(--muted);margin:0 0 5px}
input[type=text],input[type=search],select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.form{display:grid;gap:12px;grid-template-columns:1fr 1fr auto;align-items:end;margin-bottom:18px}
.list{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.row .grow{flex:1;min-width:0}.row .grow b{display:block}.row .grow small{color:var(--muted);word-break:break-all}
.row .acts{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:.7rem;padding:3px 9px;border-radius:99px;font-weight:700;letter-spacing:.04em;border:1px solid}
.tag.compat{color:var(--accent);border-color:var(--accent)}.tag.demo{color:var(--warn);border-color:var(--warn)}
.banner{border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--panel);border-radius:10px;padding:14px 16px;margin-bottom:18px;color:#c7cde0;font-size:.9rem}
.banner.ok{border-left-color:var(--accent)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.tabs .btn.on{background:var(--panel2);border-color:var(--accent);color:var(--accent)}
.tabs input{max-width:240px;margin-left:auto}
.switch{position:relative;width:46px;height:26px;flex:none}
.switch input{opacity:0;position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:99px;background:#2a3042;transition:.15s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.switch input:checked+span{background:var(--accent)}.switch input:checked+span::after{transform:translateX(20px)}
.switch input:disabled{cursor:not-allowed}.switch input:disabled+span{opacity:.4}
.switch input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.setting{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.setting:last-child{border:0}.setting .grow{flex:1}.setting small{color:var(--muted);display:block}
.swatches{display:flex;gap:8px}.sw{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer}.sw.on{border-color:#fff}
.empty{text-align:center;color:var(--muted);padding:34px 10px;border:1px dashed var(--line);border-radius:12px}
.stat b{display:block;font-size:1.8rem;color:var(--accent)}.stat span{color:var(--muted);font-size:.85rem}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px;margin:10px 0}
.checks label{display:flex;gap:8px;align-items:center;font-size:.9rem}
#toasts{position:fixed;bottom:18px;right:18px;display:grid;gap:8px;z-index:60}
.toast{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);padding:11px 16px;border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,.45);animation:in .2s}
@keyframes in{from{transform:translateY(8px);opacity:0}}
.modal-bg{position:fixed;inset:0;background:rgba(4,6,10,.75);display:grid;place-items:center;padding:16px;z-index:50}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:460px;width:100%;padding:26px}
.modal p{color:#c7cde0}.modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.game{position:fixed;inset:0;background:#000;z-index:40;display:flex;flex-direction:column}
.game .bar{display:flex;gap:8px;align-items:center;padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--line)}
.game .bar b{flex:1}.game iframe{flex:1;border:0;width:100%;background:#000}
.scrim{display:none}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:30;transform:translateX(-100%);transition:.2s}
  .side.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:25}
  .menu{display:block}.top{padding:12px 16px}.view{padding:18px 14px}
  .form{grid-template-columns:1fr}.play{padding:16px 44px}.tabs input{max-width:none;margin:0;flex:1 1 100%}
  .row{flex-wrap:wrap}.row .acts{width:100%}
}