:root{
  --bg:#0f0f14; --bg2:#17171f; --card:#1c1c26; --text:#f1f1f4; --muted:#a7a7b3;
  --accent:#ff2d55; --accent2:#7c3aed; --border:#2a2a38; --ad-bg:#14141c;
}
[data-theme="light"]{
  --bg:#f6f6f9; --bg2:#ffffff; --card:#ffffff; --text:#16161c; --muted:#5d5d6b;
  --border:#e4e4ec; --ad-bg:#eef0f6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Hind Siliguri',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* Header */
header{position:sticky;top:0;z-index:50;background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:14px}
.logo{font-size:22px;font-weight:800;white-space:nowrap}
.logo span{color:var(--accent)}
.search{flex:1;max-width:520px;display:flex}
.search input{flex:1;padding:9px 14px;border:1px solid var(--border);border-right:none;border-radius:20px 0 0 20px;background:var(--bg);color:var(--text);font-size:15px;outline:none}
.search button{padding:9px 18px;border:1px solid var(--border);border-radius:0 20px 20px 0;background:var(--card);color:var(--text);cursor:pointer;font-size:15px}
.hdr-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn{padding:8px 16px;border-radius:20px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:14px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.icon-btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:17px}

/* Category pills */
.cats{display:flex;gap:10px;overflow-x:auto;padding:14px 16px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;padding:8px 18px;border-radius:20px;background:var(--card);border:1px solid var(--border);cursor:pointer;font-size:14px;color:var(--muted)}
.cat.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* Ad slots */
.ad-slot{background:var(--ad-bg);border:1px dashed var(--border);border-radius:10px;margin:14px 16px;min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:10px}
.ad-slot.in-feed{margin:6px 0;min-height:110px}
.ad-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.7}

/* Video grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;padding:6px 16px 30px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.thumb{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dur{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;padding:2px 7px;border-radius:5px}
.card-body{padding:10px 12px}
.card-title{font-size:14.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.card-meta{font-size:12.5px;color:var(--muted);margin-top:6px;display:flex;gap:12px}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0;font-size:16px}

/* Watch page */
.watch-wrap{max-width:1180px;margin:0 auto;padding:18px 16px;display:grid;grid-template-columns:1fr 340px;gap:22px}
.player-col video{width:100%;border-radius:12px;background:#000;max-height:70vh}
.watch-title{font-size:19px;font-weight:700;margin:12px 0 6px}
.watch-meta{color:var(--muted);font-size:13.5px;display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.watch-actions{display:flex;gap:10px;margin-bottom:6px}
.rel-item{display:flex;gap:10px;margin-bottom:14px;cursor:pointer}
.rel-item .thumb{width:150px;flex:0 0 150px;border-radius:8px}
.rel-item .card-title{font-size:13.5px;min-height:0}
.rel-item .card-meta{font-size:12px}
.sec-title{font-size:16px;font-weight:700;margin:4px 0 14px}

footer{border-top:1px solid var(--border);padding:22px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7;margin-top:10px}

@media(max-width:900px){
  .watch-wrap{grid-template-columns:1fr}
  .search input{font-size:13px}
  .logo{font-size:18px}
  .hdr-actions .btn{display:none}
}