:root{
  --navy:#071133;
  --accent:#2da1ff;
  --card:#0d1b3a;
  --muted:#bfc8d9;
  --danger:#ff4d4f;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,var(--navy),#021025 220px);
  color:var(--muted);
  min-height:100vh;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 28px;
  background:rgba(0,0,0,0.12);
  position:sticky; top:0; z-index:20;
}
.topbar h1{margin:0;color:var(--accent); font-size:24px}
.searchwrap input{
  padding:10px 12px;border-radius:8px;border:0;min-width:260px;background:#081a33;color:#fff;
}
.container{padding:22px;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:18px;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border-radius:8px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.card:hover{transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.6)}
.thumb{position:relative;height:240px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.badge{
  position:absolute; top:8px; right:8px; background:#ffcc00; color:#111;
  font-weight:700; padding:6px 8px; border-radius:6px; font-size:12px;
}
.playbtn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.55); color:#fff; padding:10px 14px; border-radius:999px;
  display:flex; align-items:center; gap:8px; text-decoration:none; opacity:0; transition:opacity .12s;
}
.card:hover .playbtn{opacity:1}
.title{font-size:14px; padding:10px 12px; margin:0; color:white; height:44px; overflow:hidden}

/* Player page */
.playerpage{display:flex; gap:20px; padding:18px 22px}
.sidebar{width:300px; background:var(--card); padding:16px; border-radius:8px}
.poster{width:100%; border-radius:6px; display:block; margin-bottom:12px}
.btn{display:inline-block; margin-top:12px; padding:10px 14px; background:var(--accent); color:#022; text-decoration:none; border-radius:6px; font-weight:700}
.playerwrap{flex:1}
.embedwrap{background:#000; border-radius:8px; padding:14px; border:6px solid rgba(0,0,0,0.6)}
.embedwrap iframe{width:100%; height:62vh; border:0; border-radius:6px}

/* small UI for meta row */
.meta-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px}
.meta-pill{background:#071d37; color:var(--muted); padding:6px 10px; border-radius:6px; font-size:13px}

/* watch/download row */
.action-row{margin-top:14px; display:flex; gap:12px; flex-wrap:wrap}
.action-row a{padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:700}
.action-watch{background:#1db954;color:#fff}
.action-redirect{background:#2da1ff;color:#012}
.action-download{background:var(--danger); color:#fff}

/* overlay trailer modal (used when clicking Play) */
.modal {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:60;
  background:rgba(2,8,20,0.7);
}
.modal .inner{width:90%; max-width:1100px; background:#071428; padding:14px; border-radius:10px}
.modal.active{display:flex}

/* responsive */
@media(max-width:980px){
  .playerpage{flex-direction:column;padding:14px}
  .sidebar{width:100%}
  .embedwrap iframe{height:48vh}
}