:root{
  --bg:#0b0d12; --panel:#141821; --panel-2:#1b212d; --line:#262d3a;
  --text:#eef1f6; --muted:#9aa6b8; --accent:#e8467c; --accent-2:#3a8dff;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:inherit; text-decoration:none}
img{max-width:100%}

/* ===== Top bar ===== */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:0 18px; height:58px;
  background:rgba(11,13,18,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-icon{height:34px; width:34px; border-radius:50%}
.brand-name{font-size:1.1rem; font-weight:600; letter-spacing:.3px; white-space:nowrap}
.brand-name b{color:var(--accent); font-weight:800}
.topnav{display:flex; gap:18px; flex:1; min-width:0; overflow:hidden}
.topnav a{color:var(--muted); font-size:14px; white-space:nowrap; transition:.15s}
.topnav a:hover{color:#fff}
.play-badge{display:inline-flex; align-items:center; gap:9px; background:#000; border:1px solid #3a3f4a; color:#fff; padding:6px 14px; border-radius:10px; transition:.15s}
.play-badge:hover{border-color:#6b7280}
.play-badge span{display:flex; flex-direction:column; line-height:1.05; font-weight:600; font-size:14px}
.play-badge small{font-size:8.5px; letter-spacing:1px; opacity:.8; font-weight:500}

/* ===== App-download bar ===== */
.app-bar{display:flex; align-items:center; gap:12px; padding:8px 18px; font-size:13px; color:#fff;
  background:linear-gradient(90deg,#e8467c,#b5179e); border-bottom:1px solid rgba(255,255,255,.12)}
.app-bar.hide{display:none}
.app-bar-text{flex:1; min-width:0}
.app-bar-text b{font-weight:800}
.app-bar-cta{flex:0 0 auto; background:#000; color:#fff; font-weight:700; padding:6px 14px; border-radius:8px; font-size:12.5px; border:1px solid rgba(255,255,255,.25)}
.app-bar-cta:hover{background:#111}
.app-bar-close{flex:0 0 auto; background:transparent; border:0; color:#fff; opacity:.85; font-size:14px; cursor:pointer; padding:4px 6px}
.app-bar-close:hover{opacity:1}

/* ===== Layout shell ===== */
.container{max-width:1240px; margin:0 auto; padding:18px}
.breadcrumb{font-size:13px; color:var(--muted); margin:2px 0 16px}
.breadcrumb a{color:var(--accent-2)}
.breadcrumb a:hover{text-decoration:underline}

/* ===== Player ===== */
.player-frame{position:relative; aspect-ratio:16/9; width:100%; background:#000;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:0 10px 40px rgba(0,0,0,.45)}
#player{position:absolute; inset:0; width:100%; height:100%}
#player iframe,#player video{width:100%!important; height:100%!important}
.now-playing{display:flex; align-items:center; gap:12px; margin-top:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px}
.np-number{font-weight:700; color:#fff; background:var(--accent); min-width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 8px}
.np-name{font-size:1.15rem; margin:0; font-weight:700; flex:1; min-width:0}
.np-name a:hover{color:var(--accent)}
.live-dot{font-size:11px; font-weight:800; color:#fff; background:#e23b3b; padding:3px 9px; border-radius:20px; vertical-align:middle; margin-left:6px}

/* ===== Channel meta row ===== */
.channel-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; font-size:13px; color:var(--muted)}
.channel-meta>*{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:5px 12px}
.meta-cat{color:#fff!important}
.meta-cat:hover{border-color:var(--accent-2)}
.meta-views b,.meta-watching b{color:#fff}

/* ===== Channel page layout ===== */
.channel-layout{display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start}
.channel-main{min-width:0}
.channel-side{min-width:0}
.side-title,.cat-head h2,.channel-about h2,.home-about h2{font-size:1.15rem; margin:0 0 12px}
.channel-about{margin-top:20px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.channel-about p{color:#d4dae5; margin:0 0 10px}
.watch-cta a,.home-about a,.channel-about a{color:var(--accent-2)}
.watch-cta a:hover,.home-about a:hover{text-decoration:underline}

/* ===== Install card / promo ===== */
.install-card{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:18px; padding:18px 22px; border-radius:var(--radius);
  background:linear-gradient(120deg,#241324,#1a1f2b); border:1px solid var(--line)}
.install-card h3{margin:0 0 4px}
.install-card p{margin:0; color:var(--muted); font-size:14px}
.install-btn,.promo-cta{flex:0 0 auto; background:var(--accent); color:#fff; font-weight:700; padding:11px 20px; border-radius:10px; transition:.15s}
.install-btn:hover,.promo-cta:hover{background:#f25b91}
.see-all{display:inline-block; margin:12px 2px; color:var(--accent-2); font-size:14px}
.see-all:hover{text-decoration:underline}

/* ===== Channel grid (flowing, responsive) ===== */
.channel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:12px; margin:4px 0}
.side-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.channel{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:9px;
  text-align:center; transition:.15s; display:flex; flex-direction:column; align-items:center; gap:7px}
.channel:hover{border-color:var(--accent-2); transform:translateY(-2px)}
.channel .logo{width:100%; aspect-ratio:1/1; border-radius:8px; background:#fff; object-fit:contain; padding:6px}
.channel .cname{font-size:12px; color:var(--muted); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.channel:hover .cname{color:#fff}

/* ===== Homepage ===== */
.hero{display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:center; margin-bottom:18px}
.hero-copy h1{font-size:1.8rem; margin:0 0 10px; line-height:1.2}
.hero-copy p{color:var(--muted); margin:0 0 16px}
.hero-copy a{color:var(--accent-2)}
.search-wrap{margin-top:4px}
#search{width:100%; padding:12px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); font-size:15px; outline:none}
#search:focus{border-color:var(--accent-2)}
.cat-section{margin:26px 0}
.cat-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; border-bottom:1px solid var(--line); padding-bottom:8px}
.cat-head h2{margin:0}
.cat-head h2 a:hover{color:var(--accent)}
.cat-more{color:var(--accent-2); font-size:13px; white-space:nowrap}
.cat-more:hover{text-decoration:underline}
.home-about,.cat-hero{margin:30px 0 10px; color:var(--muted)}
.home-about p{max-width:80ch}
.cat-hero h1{margin:0 0 6px; color:var(--text)}

/* ===== Ad slots ===== */
.ad-slot{position:relative; border:1px dashed #39414f; border-radius:12px;
  background:repeating-linear-gradient(45deg,#11151d,#11151d 12px,#0f131a 12px,#0f131a 24px);
  display:flex; align-items:center; justify-content:center; color:#5c6678; font-size:12px; overflow:hidden; margin:16px 0}
.ad-tag{position:absolute; top:6px; left:10px; font-size:9px; color:#4a5365; letter-spacing:.6px}
.ad-leaderboard{min-height:clamp(90px,12vh,120px)}
.ad-rect{min-height:250px; margin-top:14px}
.ad-desktop{display:block}
@media (max-width:900px){ .ad-desktop{display:none} }

/* ===== Promo band + footer ===== */
.promo{background:var(--panel); border-top:1px solid var(--line); margin-top:30px}
.promo-inner{max-width:1240px; margin:0 auto; padding:26px 18px; display:flex; gap:18px; align-items:center}
.promo-logo{width:56px; height:56px; border-radius:12px; flex:0 0 auto}
.promo-text h2{margin:0 0 6px}
.promo-text p{margin:0 0 12px; color:var(--muted); max-width:70ch}
.footer{border-top:1px solid var(--line); background:#0c0e14; padding:20px 18px}
.footer-cats{max-width:1240px; margin:0 auto 14px; display:flex; flex-wrap:wrap; gap:8px 16px}
.footer-cats a{color:var(--muted); font-size:13px}
.footer-cats a:hover{color:#fff}
.disclaimer{max-width:1240px; margin:0 auto 8px; font-size:11px; line-height:1.5; color:var(--muted)}
.disclaimer b{color:#ffb4cd}
.copy{max-width:1240px; margin:0 auto; font-size:11.5px; color:#5c6678}
.copy a{color:var(--accent-2)}

/* ===== 404 ===== */
.notfound{text-align:center; padding:60px 20px}
.notfound a{color:var(--accent-2)}

/* ===== Responsive ===== */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .channel-layout{grid-template-columns:1fr}
  .topnav{display:none}
}
@media (max-width:560px){
  .container{padding:14px}
  .hero-copy h1{font-size:1.45rem}
  .play-badge span{display:none}
  .channel-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .install-card{flex-direction:column; align-items:flex-start}
}