:root{--ac:#ff4d2e;--bg:#0f0f14;--card:#1a1a23;--tx:#f2f2f6;--mut:#9a9aad;--bd:#2a2a36;--r:12px;--sh:0 6px 20px rgba(0,0,0,.35)}
[data-theme=light]{--bg:#f4f4f8;--card:#fff;--tx:#17171d;--mut:#666678;--bd:#e2e2ea;--sh:0 6px 20px rgba(0,0,0,.08)}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Poppins','Hind Siliguri',system-ui,sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.wrap{max-width:1400px;margin:0 auto;padding:0 12px}
header{background:var(--card);border-bottom:1px solid var(--bd)}
.hd{display:flex;align-items:center;gap:10px;padding:10px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.2rem;text-decoration:none;color:inherit}
.brand img{width:36px;height:36px}.brand b{color:var(--ac)}
.search{flex:1 1 100%;order:3}
.search input{width:100%;padding:11px 16px;border-radius:99px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font:inherit;min-height:44px}
.tools{margin-left:auto;display:flex;gap:8px}
.btn{min-height:44px;min-width:44px;padding:0 14px;border-radius:10px;background:var(--bg);border:1px solid var(--bd);transition:.2s}
.btn:hover{border-color:var(--ac)}
.ad{display:flex;align-items:center;justify-content:center;min-height:60px;margin:10px 0;border:1px dashed var(--bd);border-radius:var(--r);color:var(--mut);font-size:.75rem;overflow:hidden}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:6px 0 10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 16px;border-radius:99px;background:var(--card);border:1px solid var(--bd);font-size:.85rem;transition:.2s}
.chip:hover{border-color:var(--ac)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
.main{display:block}
.pwrap{position:sticky;top:0;z-index:20;background:var(--bg);padding-top:env(safe-area-inset-top)}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.player video{width:100%;height:100%;display:block;background:#000}
.ov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;padding:12px;background:rgba(0,0,0,.78);color:#fff;font-size:.9rem}
.ov.show{display:flex}
#pre{background:#000;padding:0}
#pre img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
#pre .tag{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.6);padding:2px 8px;border-radius:6px;font-size:.7rem;z-index:1}
#skip{position:absolute;right:8px;bottom:8px;z-index:1;background:rgba(0,0,0,.7);color:#fff;padding:8px 14px;border-radius:8px;min-height:40px}
#skip:disabled{opacity:.7;cursor:default}
.spin{width:30px;height:30px;border:3px solid #fff4;border-top-color:var(--ac);border-radius:50%;animation:s 1s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
.ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:2px;padding:4px 6px;background:linear-gradient(transparent,rgba(0,0,0,.8));opacity:0;transition:.2s}
.player:hover .ctl,.player:focus-within .ctl,.player.touch .ctl{opacity:1}
.ctl button{min-width:40px;min-height:40px;color:#fff;font-size:1.05rem}
.ctl input{width:80px;accent-color:var(--ac)}
.ctl .sp{flex:1}
.live{background:#e11;color:#fff;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:.04em}
.info{padding:14px 2px}
.info h1{font-size:1.15rem;display:flex;align-items:center;gap:8px}
.info p{color:var(--mut);font-size:.85rem;margin:4px 0 10px}
.srv{display:flex;gap:8px;flex-wrap:wrap}
.srv .btn.on{background:var(--ac);border-color:var(--ac);color:#fff}
.bdix{width:100%;margin-top:8px;background:linear-gradient(90deg,#ff4d2e,#ffb02e);color:#fff;font-weight:700;letter-spacing:.06em;border:0}
.note{margin-top:10px;font-size:.78rem;color:var(--mut);background:var(--card);padding:8px 12px;border-radius:10px;border-left:3px solid var(--ac)}
.side h2{font-size:.95rem;margin:6px 0}
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:12px}
.ch{position:relative;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.72rem;transition:.2s;min-height:96px;width:100%}
.ch:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.ch.on{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac)}
.ch img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.ch .nm{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;max-width:100%}
.ch .live{position:absolute;top:6px;left:6px}
.fav{position:absolute;top:2px;right:2px;min-width:32px;min-height:32px;color:var(--mut);font-size:1rem}
.fav.on{color:#ffc02e}
.sk{height:96px;border-radius:var(--r);background:linear-gradient(90deg,var(--card) 25%,var(--bd) 50%,var(--card) 75%);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
.empty,.loadmsg{grid-column:1/-1;text-align:center;color:var(--mut);padding:20px;font-size:.9rem}
footer{margin-top:20px;padding:18px 0 90px;border-top:1px solid var(--bd);color:var(--mut);font-size:.8rem;text-align:center}
footer a{color:var(--ac)}
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:50;transition:.2s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px;fill:#fff}
@media(min-width:768px){.search{flex:1 1 300px;order:0;max-width:520px;margin:0 auto}.list{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){
 .main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
 .pwrap{position:static;padding:0}
 .side{position:sticky;top:10px;max-height:calc(100vh - 20px);overflow-y:auto}
 .list{grid-template-columns:1fr;gap:8px}
 .ch{flex-direction:row;text-align:left;min-height:60px;padding:8px 40px 8px 10px;font-size:.88rem}
 .ch img{width:42px;height:42px}
 .ch .live{position:static;order:3;margin-left:auto}
 .fav{top:50%;transform:translateY(-50%)}
 .bdix{width:auto;padding:0 28px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}