:root{
  --bg:#0b0616;--card:#140b2b;--accent:#7c4dff;
  --text:#efeaff;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Inter,system-ui;color:var(--text);
  background:linear-gradient(180deg,#070310,#0b0616);
}
a{text-decoration:none;color:inherit}
header{background:#0d0620;border-bottom:1px solid #2b1972}
.nav{max-width:1200px;margin:auto;display:flex;gap:10px;padding:14px}
.logo{font-weight:800}
.search{flex:1;display:flex;gap:8px}
.search input{flex:1;padding:12px;border-radius:10px;border:1px solid #2b1972;background:#0f0830;color:#fff}
.search button{background:var(--accent);border:0;color:#fff;padding:12px 16px;border-radius:10px}
.container{max-width:1200px;margin:20px auto;padding:0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:#140b2b;border-radius:14px;overflow:hidden}
.thumb{position:relative}
.thumb img{width:100%}
.badge{position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:999px;font-size:12px}
.badge.HD{background:#00d1ff}
.badge.HOT{background:#ff7a00}
.badge._18{background:#ff2d55}
.meta{position:absolute;right:8px;top:8px;background:#0008;padding:4px 6px;border-radius:6px}
.duration{position:absolute;right:8px;bottom:8px;background:#0008;padding:4px 6px;border-radius:6px}
.card h3{font-size:14px;margin:10px}
.player video{width:100%;border-radius:14px}
.dashboard{max-width:500px;margin:40px auto;background:#140b2b;padding:20px;border-radius:14px}
.dashboard input{width:100%;padding:12px;margin-bottom:10px;border-radius:10px;border:1px solid #2b1972;background:#0f0830;color:#fff}
.dashboard button{width:100%;padding:12px;background:var(--accent);border:0;border-radius:10px;color:#fff}
.pagination{text-align:center;margin:20px}
.pagination button{margin:0 4px;padding:8px 12px}