:root { --bg:#0b0d12; --card:#121621; --text:#e9eefc; --muted:#aab3cf; --accent:#6ea8fe; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Arial; background:var(--bg); color:var(--text); }
header{
  position: sticky; top:0; z-index:5;
  display:flex; gap:12px; align-items:center;
  padding:14px 16px; background:rgba(11,13,18,.9); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{ font-weight:800; letter-spacing:.3px; }
.search{
  flex:1; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:var(--card); color:var(--text);
}
select{
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:var(--card); color:var(--text);
}
main{ padding:16px; max-width:1100px; margin:0 auto; }
.grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.10);
  border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .12s ease, border-color .12s ease;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(110,168,254,.35); }
.poster{ width:100%; aspect-ratio: 2/3; object-fit: cover; background:#0f1320; }
.body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.title{ font-weight:800; line-height:1.2; }
.meta{ color:var(--muted); font-size:13px; display:flex; gap:8px; flex-wrap:wrap; }
button{
  margin-top:auto;
  background:var(--accent); color:#06101f; border:none;
  padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:800;
}
.muted{ color:var(--muted); }
.player{
  margin-top:18px; padding:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(18,22,33,.8); border-radius:18px;
}
.hidden{ display:none; }
.player-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.close{
  background:transparent; color:var(--text);
  border:1px solid rgba(255,255,255,.16);
}
.video-wrap{
  margin-top:10px; width:100%; aspect-ratio: 16/9;
  border-radius:14px; overflow:hidden; background:#000;
}
iframe{ width:100%; height:100%; border:0; }