:root{--bg:#0f1012;--panel:#16181c;--panel-2:#1c1f25;--line:#2a2e36;--text:#e8eaee;--muted:#aab2bf;--accent:#67e8f9;--radius:14px;--shadow:0 12px 40px rgba(0,0,0,.35);--font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;color:var(--text);font:16px/1.45 var(--font);background:radial-gradient(1200px 800px at 50% 10%, #1a1d22, var(--bg) 70%);display:grid;grid-template-rows:auto 1fr auto}
.header{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:14px;padding:12px 16px;background:rgba(18,20,24,.85);border-bottom:1px solid var(--line);backdrop-filter: blur(4px);}
.player-left,.player-right{display:flex;align-items:center;gap:8px}.player-center{display:flex;flex-direction:column;align-items:center;gap:6px}
.now-title{font-weight:600;letter-spacing:.2px}.ticker{height:18px;font-size:13px;color:var(--muted);overflow:hidden;white-space:nowrap}
.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--line);padding:8px 12px;border-radius:10px;cursor:pointer;transition:transform .06s, box-shadow .15s, border-color .15s}
.btn:hover{box-shadow: inset 0 0 0 999px rgba(255,255,255,.03); border-color:#394150}.btn:active{transform: translateY(1px)}.btn.primary{background:linear-gradient(180deg,#1f8fa1,#167687); border-color:#1b7d8f}.btn.sm{padding:4px 8px; font-size:14px}
.hamburger{width:28px;height:20px;display:inline-flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer}.hamburger span{height:3px;background:var(--text);border-radius:2px}
.offcanvas{position:fixed;inset:0 0 0 auto;width:300px;transform:translateX(100%);background:var(--panel);border-left:1px solid var(--line);transition:transform .25s ease;z-index:30;padding:16px}.offcanvas.open{transform:translateX(0)}
.offcanvas-close{background:none;border:none;color:var(--text);font-size:28px;cursor:pointer}.offcanvas-nav{margin-top:12px;display:grid;gap:8px}.offcanvas-nav a{color:var(--text);text-decoration:none;padding:8px;border-radius:8px}.offcanvas-nav a.active,.offcanvas-nav a:hover{background:var(--panel-2)}
.stage{width:100%;max-width:1280px;margin-inline:auto;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.06);background:rgba(20,22,26,.55);box-shadow: var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.hero{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}.hero img{height:44px;width:auto;image-rendering:pixelated}.hero h1{margin:0;font-size:18px;font-weight:700}.hero span{opacity:.7}
.main{flex:1;display:flex;flex-direction:column;min-height:0}.tabs{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}.tab{background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}.tab.active,.tab:hover{background:linear-gradient(180deg,#242a32,#1c2027)}
.view{display:none;padding:16px;min-height:0;overflow:auto}.view.active{display:block}
.grid{--min:260px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(var(--min),1fr))}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 70%), var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:12px;grid-template-rows:auto auto 1fr auto;align-items:start;transition: transform .12s, border-color .15s, box-shadow .15s}
.card:hover{transform:translateY(-2px); border-color:#3a4252; box-shadow:0 10px 28px rgba(0,0,0,.35)}.card .icon{width:88px;height:88px;border-radius:16px;display:grid;place-items:center;background:#0f1115;border:1px solid #2a303a}.card .icon img{width:64px;height:64px;image-rendering:pixelated}
.card .meta h3{margin:0; font-size:18px}.card .meta p{margin:2px 0 0; font-size:13px; color:var(--muted)}.badges{display:flex; gap:6px; flex-wrap:wrap}.badge{background:#232a33;border:1px solid #2f3743;color:#dbe2ee;font-size:12px;padding:2px 6px;border-radius:999px}
.layout{display:grid;grid-template-columns:300px 1fr; gap:16px}.sidebar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:grid;gap:12px}.field{display:grid;gap:6px}.field input{background:#0f1216;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}.chip{background:#232833;color:var(--text);border:1px solid #303847;border-radius:999px;padding:6px 10px;cursor:pointer}.chip:hover,.chip.active{background:#2a3340}
.results{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px}.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.row{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;background:#12161b;border:1px solid var(--line);border-radius:10px;padding:8px}.row .cover{width:20px;height:20px;display:grid;place-items:center;color:var(--muted)}.row .meta strong{font-weight:600}.row .meta em{font-style:normal;opacity:.75;font-size:13px}
.footer{min-height:56px;display:grid;place-items:center;background:rgba(18,20,24,.85);border-top:1px solid var(--line)}.queue{width:100%;max-width:1280px;margin-inline:auto;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:6px 10px}.queue-title{font-weight:600}#queue-list{list-style:none;margin:0;padding:0;display:flex;gap:12px;overflow:auto}#queue-list li{white-space:nowrap;opacity:.9;cursor:pointer}.queue-actions{display:flex;gap:8px}
@media (max-width: 980px){.layout{grid-template-columns:1fr}.stage{aspect-ratio:auto}}