:root{
  --bg:#0f172a;          /* slate-900 */
  --card:#111827;        /* gray-900  */
  --text:#e5e7eb;        /* gray-200  */
  --muted:#94a3b8;       /* slate-400 */
  --accent:#22d3ee;      /* cyan-400  */
  --accent-2:#38bdf8;    /* sky-400   */
  --ring:rgba(56,189,248,.4);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:linear-gradient(180deg,#0b1023, #0f172a 35%, #0b1023);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  display:flex;flex-direction:column;min-height:100%;
}

header{padding:24px 20px 8px; text-align:center}
h1{margin:0;font-weight:800;letter-spacing:.2px}
.subtitle{color:var(--muted);margin-top:6px}

.container{width:min(1200px,92vw);margin:20px auto 60px;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:18px;
}

.card{
  background:linear-gradient(180deg, #0b132a, #0d1324);
  border:1px solid rgba(148,163,184,.15);
  border-radius:var(--radius);
  overflow:hidden; position:relative;
  box-shadow:0 10px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:focus-within, .card:hover{
  transform:translateY(-2px);
  border-color:rgba(56,189,248,.5);
  box-shadow:0 14px 28px rgba(0,0,0,.35), 0 0 0 6px var(--ring);
}

.thumb{
  aspect-ratio:16/9; width:100%; display:block;
  background:#111; object-fit:cover;
}
.card-body{padding:12px 12px 14px}
.title{font-weight:700; font-size:15px; margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.meta{font-size:12px;color:var(--muted); margin-bottom:10px}
.actions{display:flex; gap:8px}

.btn{
  appearance:none; border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(180deg,#0b1326,#0c1a34); color:var(--text);
  padding:8px 10px; border-radius:10px; font-weight:600; cursor:pointer;
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{border-color:rgba(56,189,248,.6); box-shadow:0 0 0 4px var(--ring)}
.btn:active{transform:translateY(1px)}
.btn.primary{border-color:transparent; background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#03111a}
.btn.ghost{background:transparent}

footer{color:var(--muted); text-align:center; padding:24px 16px 40px}

/* MODAL */
.modal{
  position:fixed; inset:0; display:none; place-items:center; z-index:9999;
  background:rgba(2,6,23,.7); backdrop-filter:blur(6px);
}
.modal[open]{display:grid}
.sheet{
  width:min(1100px, 94vw);
  background:linear-gradient(180deg,#0b1326,#0a1124);
  border:1px solid rgba(148,163,184,.25);
  border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:pop .18s ease-out;
}
@keyframes pop{from{transform:translateY(8px) scale(.98); opacity:0} to{transform:none; opacity:1}}

.sheet-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.15)
}
.sheet-title{font-weight:800;margin:0;font-size:16px}

.sheet-body{padding:14px}
.player-wrap{
  position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden;
  border:1px solid rgba(148,163,184,.2)
}
iframe{width:100%; height:100%; border:0; display:block}

.sheet-footer{
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding:12px 14px; border-top:1px solid rgba(148,163,184,.15)
}

.nav{display:flex; gap:8px}
.kbd{font:12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono","Courier New",monospace; color:var(--muted)}
.link{
  color:var(--accent); text-decoration:none;
  border-bottom:1px dashed rgba(34,211,238,.5); padding-bottom:1px
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}