:root{
  --bg:#0b1020; --panel:#111a2e; --border:#1f2a44; --fg:#e8f0ff; --muted:#93a4c4; --acc:#00bcd4; --chip:#203252;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto; color:var(--fg);
  background:radial-gradient(1000px 600px at 10% -10%, #16234a, transparent), var(--bg);
}
.wrap{max-width:1000px; margin:0 auto; padding:18px}
h1{margin:0 0 8px; font-size:clamp(20px,3.2vw,28px)}
.muted{color:var(--muted)}
.controls{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0}
.input{flex:1; min-width:240px; background:var(--panel); border:1px solid var(--border); color:var(--fg); border-radius:10px; padding:10px 12px}
select{background:var(--panel); border:1px solid var(--border); color:var(--fg); border-radius:10px; padding:10px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 16px}
.chip{background:var(--chip); border:1px solid var(--border); color:#bfe9ff; padding:6px 10px; border-radius:999px; cursor:pointer; font-size:12px}
.chip.active{outline:2px solid var(--acc)}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.thumb{aspect-ratio:16/9; background:#0e172a; display:flex; align-items:center; justify-content:center; color:#7dd3fc; font-size:32px}
.pad{padding:12px}
.title{font-weight:800; margin:0 0 6px}
.desc{color:var(--muted); font-size:14px; line-height:1.5}
.row{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px}
.btn{appearance:none; border:none; padding:9px 12px; border-radius:10px; cursor:pointer}
.play{background:linear-gradient(180deg,#7ee0f5,#00bcd4); color:#02232a; font-weight:800; text-decoration:none; display:inline-block}
.ghost{background:#1a2540; color:#b9cff7}
.tag{font-size:12px; color:#8ac7ff}
footer{color:#6f81a8; font-size:12px; text-align:center; margin:18px 0}