:root{
  --bg:#0b0e14; --bg2:#121722; --card:#171d2b; --card-hover:#1f2739;
  --text:#e8ecf3; --muted:#8b94a7; --accent:#e50914; --accent2:#ff7847;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
a{color:var(--accent2)}
header{padding:20px 16px 8px;text-align:center;background:linear-gradient(180deg,#141a29,var(--bg))}
.brand{font-size:34px;font-weight:800;letter-spacing:.5px}
.brand span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);margin-top:2px;font-size:14px}
.search-box{margin:16px auto 6px;max-width:560px}
.search-box input{width:100%;padding:12px 16px;border-radius:999px;border:1px solid #2a3348;background:var(--bg2);color:var(--text);font-size:15px;outline:none}
.search-box input:focus{border-color:var(--accent)}
main{max-width:1200px;margin:0 auto;padding:8px 16px 24px}
.hidden{display:none!important}

/* Player */
#player-wrap{margin:14px 0 20px}
.player-box{background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;box-shadow:0 10px 40px rgba(0,0,0,.55)}
.player-box video{width:100%;height:100%;display:block;background:#000}
.now-playing{display:flex;align-items:center;gap:12px;margin-top:12px}
.now-playing img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
#np-name{font-size:18px;font-weight:700}
.muted{color:var(--muted);font-size:13px}
#btn-close-player{margin-left:auto;background:var(--card);color:var(--text);border:1px solid #2a3348;border-radius:8px;padding:8px 12px;cursor:pointer}
#btn-close-player:hover{background:var(--card-hover)}
.player-msg{margin-top:10px;padding:10px 14px;border-radius:10px;background:#3a1420;border:1px solid #6e1f2e;color:#ffb3ba;font-size:14px}
.official-box{margin-top:12px;padding:16px;border-radius:var(--radius);background:var(--bg2);border:1px solid #2a3348;text-align:center}
.official-box p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.5}
.official-btn{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.official-btn:hover{opacity:.88}
.official-try{display:block;margin:12px auto 0;background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline}
.official-try:hover{color:var(--text)}
.badge.lock{background:#3d2b12;color:#ffcf7d}

/* Chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.chip{padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid #2a3348;color:var(--text);cursor:pointer;font-size:13.5px}
.chip:hover{background:var(--card-hover)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

.status{color:var(--muted);font-size:14px;margin:8px 0 14px}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{background:var(--card);border:1px solid #232b3f;border-radius:var(--radius);padding:14px 10px 12px;cursor:pointer;text-align:center;transition:transform .12s,background .12s}
.card:hover{background:var(--card-hover);transform:translateY(-2px)}
.card.playing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card .logo{height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.card .logo img{max-height:56px;max-width:100%;object-fit:contain;background:#fff;border-radius:8px;padding:4px}
.card .logo .fallback{font-size:26px;font-weight:800;color:var(--muted);background:var(--bg2);border-radius:8px;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.card .name{font-size:14px;font-weight:600;line-height:1.3;min-height:36px;display:flex;align-items:center;justify-content:center}
.card .group{font-size:11.5px;color:var(--muted);margin-top:4px}
.badge{display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:999px;background:#2a3348;color:var(--muted);margin-top:6px}
.badge.warn{background:#4a3413;color:#ffcf7d}

footer{max-width:1200px;margin:0 auto;padding:10px 16px 34px;color:var(--muted);font-size:13px;line-height:1.55}
@media (max-width:560px){
  .brand{font-size:27px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}
  .card .name{font-size:12.5px;min-height:32px}
}