/* common.css - 855hi TV · Premium Broadcast v5 (glassmorphism + gradient) */
*,::before,::after{margin:0;padding:0;box-sizing:border-box}

/* ═══ Theme variables ═══ */
:root{
  --bg:#eef1f6;
  --bg-grad:linear-gradient(180deg,#f5f7fb 0%,#e7ecf4 100%);
  --surface:#ffffff;
  --surface-2:#f4f7fc;
  --text:#1a2233;
  --text-dim:#56607a;
  --text-muted:#8b94a6;
  --accent:#4f46e5;
  --accent-2:#06b6d4;
  --grad:linear-gradient(135deg,#6366f1 0%,#06b6d4 100%);
  --grad-soft:linear-gradient(135deg,rgba(99,102,241,.14),rgba(6,182,212,.10));
  --accent-soft:rgba(79,70,229,.10);
  --glow:rgba(99,102,241,.30);
  --live:#ef4444;
  --border:#e4e9f2;
  --border-strong:#d3dbe8;
  --shadow:0 8px 26px rgba(28,40,68,.08);
  --shadow-hover:0 22px 52px rgba(28,40,68,.18);
  --radius:16px;
  --radius-sm:12px;
}
html[data-theme="dark"]{
  --bg:#0b0e15;
  --bg-grad:linear-gradient(180deg,#0e1320 0%,#080b12 100%);
  --surface:#161b27;
  --surface-2:#1d2330;
  --text:#e9ecf4;
  --text-dim:#9aa3b8;
  --text-muted:#6b7385;
  --accent:#818cf8;
  --accent-2:#22d3ee;
  --grad:linear-gradient(135deg,#818cf8 0%,#22d3ee 100%);
  --grad-soft:linear-gradient(135deg,rgba(129,140,248,.18),rgba(34,211,238,.12));
  --accent-soft:rgba(129,140,248,.16);
  --glow:rgba(129,140,248,.38);
  --live:#ff5a4d;
  --border:#252c3a;
  --border-strong:#323b4b;
  --shadow:0 8px 28px rgba(0,0,0,.42);
  --shadow-hover:0 24px 56px rgba(0,0,0,.58);
}

/* Smooth theme transition on key surfaces (excludes transform for 60fps hover) */
body,.header,.sidebar,.cat-link,.pagination a,.feature-card,
.channel-card,.rec-card,.vote-btn,.surf .sbtn,.watch-topbar,.watch-info,
.player-wrap,.back-top,.footer{
  transition:background-color .4s ease,border-color .4s ease,color .35s ease,box-shadow .35s ease;
}

body{
  font-family:"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  background-image:var(--bg-grad);
  background-attachment:fixed;
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a{color:var(--accent);text-decoration:none}

/* ═══ Header (glassmorphism) ═══ */
.header{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 24px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:none;
  box-shadow:0 4px 24px rgba(28,40,68,.07);
  flex-wrap:wrap;
  overflow:visible;
}
html[data-theme="dark"] .header{background:rgba(18,23,33,.72)}
.header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--grad);opacity:.65;
}
.header-left{display:flex;align-items:center;gap:11px}
.header-left .logo-icon{font-size:25px;filter:drop-shadow(0 4px 10px var(--glow));transition:transform .3s}
.header-left:hover .logo-icon{transform:rotate(-8deg) scale(1.08)}
.header-left h1{font-size:20px;font-weight:800;letter-spacing:.3px;color:var(--text)}
.header-right{display:flex;align-items:center;gap:10px}

/* Language pill */
.lang-switcher{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:22px;padding:3px;gap:2px;font-size:12px}
.lang-switcher .lang-link,.lang-switcher .lang-active{display:inline-block;padding:5px 13px;border-radius:18px;transition:all .2s;white-space:nowrap;font-weight:500}
.lang-switcher .lang-link{color:var(--text-dim)}
.lang-switcher .lang-link:hover{color:var(--text);background:var(--accent-soft)}
.lang-switcher .lang-active{color:#fff;font-weight:700;background:var(--accent)}

/* Theme toggle */
.theme-toggle{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:22px;padding:3px;gap:1px}
.theme-toggle button{
  width:30px;height:30px;border:none;background:transparent;cursor:pointer;border-radius:18px;
  font-size:14px;color:var(--text-dim);display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.theme-toggle button:hover{background:var(--accent-soft);color:var(--text)}
.theme-toggle button.active{background:var(--accent);color:#fff;box-shadow:0 3px 10px var(--glow)}

/* ═══ Layout: sidebar + main ═══ */
.layout{display:grid;grid-template-columns:236px 1fr;gap:22px;max-width:1480px;margin:22px auto 0;padding:0 22px 22px}
.sidebar{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 106px);overflow-y:auto;background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
html[data-theme="dark"] .sidebar{background:rgba(22,27,39,.7)}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px}
.sidebar-title{font-size:12px;font-weight:700;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;padding:8px 10px 6px}
.cat-link{
  display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--text-dim);font-size:14px;font-weight:500;transition:all .18s;white-space:nowrap;
}
.cat-link:hover{background:var(--accent-soft);color:var(--text);transform:translateX(2px)}
.cat-link.active{background:var(--grad);color:#fff;font-weight:700;box-shadow:0 6px 18px var(--glow)}
.cat-link.active .cnt{background:rgba(255,255,255,.28);color:#fff}
.cat-link .flag{font-size:17px;line-height:1;flex:0 0 auto}
.cat-link .nm{flex:1;overflow:hidden;text-overflow:ellipsis}
.cat-link .cnt{font-size:11px;background:var(--surface-2);color:var(--text-muted);padding:1px 9px;border-radius:10px;flex:0 0 auto}

.main{min-width:0}

/* ═══ Live dot (shared) ═══ */
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:ring 1.6s infinite;flex:0 0 auto}

/* ═══ Featured strip ═══ */
.featured{margin-bottom:22px}
.section-title{display:flex;align-items:center;gap:9px;margin:0 2px 13px;font-size:16px;font-weight:800;color:var(--text)}
.featured-track{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 14px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.featured-track::-webkit-scrollbar{height:6px}
.featured-track::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px}
.feature-card{position:relative;flex:0 0 244px;text-decoration:none;color:inherit;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s,border-color .28s}
.feature-card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:var(--shadow-hover),0 0 0 1px rgba(99,102,241,.4),0 0 32px var(--glow)}
.feature-card .fc-thumb{position:relative;width:100%;height:138px;background:var(--surface-2);overflow:hidden}
.feature-card .fc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.feature-card:hover .fc-thumb img{transform:scale(1.07)}
.feature-card .fc-thumb .fc-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px;opacity:.12}
.feature-card .live-badge{position:absolute;top:8px;left:8px;background:var(--live);color:#fff;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.5px;z-index:2}
.feature-card .fc-body{padding:11px 13px}
.feature-card .fc-body h4{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.feature-card .fc-body .fc-meta{font-size:11px;color:var(--text-muted);margin-top:4px;display:flex;gap:10px}

/* ═══ Stats bar ═══ */
.stats-bar{display:flex;gap:20px;margin:0 4px 16px;font-size:13px;color:var(--text-muted);flex-wrap:wrap}
.stats-bar span{display:flex;align-items:center;gap:5px}

/* ═══ Channel grid ═══ */
.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.channel-card{
  display:block;position:relative;text-decoration:none;color:inherit;
  background:var(--surface);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s,border-color .28s;
  opacity:0;transform:translateY(16px);
}
.channel-card.reveal{opacity:1;transform:translateY(0)}
.channel-card:hover{transform:translateY(-9px);border-color:transparent;
  box-shadow:var(--shadow-hover),0 0 0 1px rgba(99,102,241,.45),0 0 34px var(--glow)}
.channel-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.card-thumb{position:relative;width:100%;padding-top:56.25%;background:var(--surface-2);overflow:hidden}
.card-thumb .thumb-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px;opacity:.12;pointer-events:none}
.card-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.channel-card:hover .card-thumb img{transform:scale(1.08)}
.card-thumb img.lazy{opacity:0}
.card-thumb img.lazy.loaded{opacity:1;transition:opacity .4s}
.card-thumb .live-badge{position:absolute;top:8px;left:8px;background:var(--live);color:#fff;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.5px;z-index:2}
.card-thumb .cat-label{position:absolute;top:8px;right:8px;background:rgba(20,28,40,.8);color:#fff;padding:3px 9px;border-radius:8px;font-size:10px;font-weight:600;z-index:2}
.card-thumb .flag{position:absolute;bottom:8px;left:8px;font-size:16px;background:rgba(255,255,255,.92);border-radius:6px;padding:1px 5px;z-index:2;line-height:1.3;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.card-thumb .play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(to top,rgba(10,14,22,.62),rgba(10,14,22,.06));opacity:0;transition:opacity .28s;z-index:1}
.channel-card:hover .play-overlay{opacity:1}
.card-thumb .play-overlay::before{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);transition:left .65s ease}
.channel-card:hover .play-overlay::before{left:130%}
.play-circle{width:56px;height:56px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px var(--glow);transition:transform .28s}
.channel-card:hover .play-circle{transform:scale(1.12)}
.play-circle::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.card-info{padding:11px 13px 13px}
.card-info h3{font-size:14px;color:var(--text);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.card-info .card-desc{font-size:11px;color:var(--text-dim);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;min-height:30px}
.card-info .card-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}

/* ═══ Pagination ═══ */
.pagination{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:30px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border-radius:11px;text-decoration:none;font-size:13px;font-weight:600;transition:all .2s}
.pagination a{background:var(--surface);color:var(--text-dim);border:1px solid var(--border)}
.pagination a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 20px var(--glow)}
.pagination .current{background:var(--grad);color:#fff;border:1px solid transparent;box-shadow:0 6px 18px var(--glow)}
.pagination .gap{color:var(--text-muted);padding:0 4px;background:none;border:none}

/* ═══ Empty state ═══ */
.empty-state{text-align:center;padding:70px 20px;color:var(--text-muted)}
.empty-state .icon{font-size:56px;margin-bottom:14px}
.empty-state p{font-size:14px}
.empty-state a{color:var(--accent)}

/* ═══ Back to top ═══ */
.back-top{position:fixed;bottom:26px;right:26px;width:48px;height:48px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:var(--shadow-hover),0 0 26px var(--glow);opacity:0;visibility:hidden;transform:translateY(12px);transition:all .3s;border:none;z-index:150}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-top:hover{transform:translateY(-3px) scale(1.06)}

/* ═══ Footer ═══ */
.footer{text-align:center;padding:28px 20px;color:var(--text-muted);font-size:12px;border-top:1px solid var(--border);margin-top:30px}

/* ═══ Animations ═══ */
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.channel-card{opacity:1;transform:none}}

/* ═══ Responsive ═══ */
@media(max-width:900px){
  .layout{grid-template-columns:1fr;gap:14px;padding:0 14px 14px}
  .sidebar{position:static;max-height:none;display:flex;gap:8px;overflow-x:auto;padding:8px;scrollbar-width:none}
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar-title{display:none}
  .cat-link{flex:0 0 auto;padding:8px 13px}
  .cat-link .cnt{display:none}
  .channel-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}
@media(max-width:560px){
  .header{padding:10px 14px;gap:10px}
  .layout{padding:0 12px 12px}
  .feature-card{flex-basis:200px}
  .channel-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* ═══ Watch page (shared) ═══ */
.watch-topbar{display:flex;align-items:center;gap:12px;padding:11px 22px;background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  position:sticky;top:0;z-index:200;border-bottom:none;box-shadow:0 4px 22px rgba(28,40,68,.07);flex-wrap:wrap;overflow:visible}
html[data-theme="dark"] .watch-topbar{background:rgba(18,23,33,.72)}
.watch-topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);opacity:.6}
.watch-topbar .brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;color:var(--text)}
.watch-topbar .brand a{text-decoration:none;color:inherit}
.watch-topbar .spacer{margin-left:auto}
.live-pill{display:inline-flex;align-items:center;gap:5px;background:var(--live);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.live-pill .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.watch-stage{max-width:920px;margin:20px auto;padding:0 16px}
.player-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-hover),0 0 40px var(--glow);border:1px solid var(--border)}
.player-wrap video,.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;background:#000;display:block}
.err-msg{position:absolute;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,14,22,.92);color:#fff;text-align:center;padding:20px;z-index:9}
.err-msg .e-icon{font-size:42px;margin-bottom:12px}
.err-msg .e-title{font-size:17px;font-weight:700;margin-bottom:8px}
.err-msg .e-sub{font-size:13px;color:#aab;margin-bottom:18px;max-width:90%;line-height:1.6}
.err-msg .e-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.err-msg .e-btn{border:none;cursor:pointer;font-size:14px;font-weight:600;padding:11px 20px;border-radius:11px;transition:transform .2s,box-shadow .2s;color:#fff}
.err-msg .e-btn.primary{background:var(--accent)}
.err-msg .e-btn.ghost{background:rgba(255,255,255,.14)}
.err-msg .e-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.err-msg .e-btn.reported{background:var(--accent-2)}

.mute-hint{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;font-size:12px;padding:6px 14px;border-radius:20px;z-index:7;display:none}
.play-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.35),rgba(0,0,0,.7));z-index:8;cursor:pointer}
.play-overlay .big{width:90px;height:90px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px var(--glow);transition:transform .2s}
.play-overlay .big::after{content:"";border-left:30px solid #fff;border-top:18px solid transparent;border-bottom:18px solid transparent;margin-left:6px}
.play-overlay:hover .big{transform:scale(1.08)}
.play-overlay .hint{position:absolute;bottom:18%;color:#fff;font-size:13px;opacity:.85}

.ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);z-index:8;opacity:0;transition:opacity .3s;pointer-events:none}
.player-wrap:hover .ctrl,.player-wrap.show-ctrl .ctrl{opacity:1;pointer-events:auto}
.ctrl button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;width:38px;height:38px;border-radius:10px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.ctrl button:hover{background:var(--accent);border-color:transparent;transform:translateY(-2px)}
.ctrl .np{flex:1;min-width:0;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.ctrl .sp{width:auto;padding:0 10px;font-size:12px}

.surf{max-width:920px;margin:16px auto 0;padding:0 16px;display:flex;align-items:center;gap:12px}
.surf .sbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:var(--shadow)}
.surf .sbtn:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 8px 22px var(--glow)}
.surf .sbtn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.surf .snow{flex:2;text-align:center;color:var(--text);font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}

.watch-info{max-width:920px;margin:20px auto;padding:0 16px}
.watch-info-head{display:flex;gap:16px;align-items:flex-start}
.watch-info-head img{width:176px;height:99px;border-radius:12px;object-fit:cover;background:var(--surface-2);flex-shrink:0;border:1px solid var(--border)}
.watch-info-head h2{font-size:22px;color:var(--text);margin-bottom:8px;background:linear-gradient(90deg,var(--text),var(--text));-webkit-background-clip:text;background-clip:text}
.watch-info-head .meta{display:flex;gap:14px;color:var(--text-dim);font-size:13px;flex-wrap:wrap;margin-bottom:8px}
.watch-info-head .desc{color:var(--text-dim);font-size:14px;line-height:1.6}
.vote-bar{display:flex;gap:14px;margin-top:14px}
.vote-btn{display:flex;align-items:center;gap:6px;padding:8px 18px;border:2px solid var(--border-strong);border-radius:24px;background:transparent;color:var(--text-dim);font-size:15px;cursor:pointer;transition:all .2s;user-select:none}
.vote-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.vote-btn.liked{border-color:var(--accent-2);color:var(--accent-2);background:rgba(6,182,212,.12)}
.vote-btn.disliked{border-color:var(--live);color:var(--live);background:rgba(239,68,68,.1)}

.rec{max-width:920px;margin:28px auto;padding:0 16px}
.rec h3{color:var(--text);font-size:16px;margin-bottom:14px;font-weight:800}
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.rec-card{background:var(--surface);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .28s;border:1px solid var(--border);text-decoration:none;display:block;box-shadow:var(--shadow)}
.rec-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover),0 0 26px var(--glow);border-color:transparent}
.rec-card .thumb{position:relative;width:100%;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.rec-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.rec-card:hover .thumb img{transform:scale(1.06)}
.rec-card .info{padding:9px 11px}
.rec-card .info h4{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-card .info span{font-size:11px;color:var(--text-muted)}

.watch-footer{text-align:center;padding:30px;color:var(--text-muted);font-size:12px;margin-top:36px}

@media(max-width:600px){
  .watch-topbar{padding:8px 12px;gap:8px}
  .watch-info-head{flex-direction:column}
  .watch-info-head img{width:100%;height:auto}
  .ctrl button{width:34px;height:34px}
  .surf{flex-wrap:wrap}
  .surf .sbtn,.surf .snow{flex:1 1 100%}
}

/* ═══ Split layout: list + inline player ═══ */
.tv-split{display:flex;gap:20px;align-items:stretch;max-width:1480px;margin:14px auto 0;padding:0 22px 22px;min-height:calc(100vh - 64px)}
.ch-list-pane{flex:0 0 340px;max-width:340px;position:sticky;top:84px;max-height:calc(100vh - 110px);background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:background-color .4s ease,border-color .4s ease,box-shadow .35s ease}
html[data-theme="dark"] .ch-list-pane{background:rgba(22,27,39,.7)}
/* 分类标签（柬埔寨 / 中国 CCTV） */
.cat-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cat-tab{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);
  padding:8px 14px;border-radius:22px;cursor:pointer;transition:all .25s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.cat-tab:hover{color:var(--text);border-color:var(--accent);transform:translateY(-1px)}
.cat-tab.active{color:#fff;border-color:transparent;background:var(--grad);box-shadow:0 6px 18px var(--glow)}
html[data-theme="dark"] .cat-tab.active{color:#fff}
.pane-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--text);padding:2px 8px 12px;border-bottom:1px solid var(--border);margin-bottom:10px}
.pane-title .flag{font-size:18px}
.pane-title .pane-cnt{margin-left:auto;font-size:12px;color:var(--text-muted);font-weight:600;background:var(--surface-2);padding:2px 10px;border-radius:10px}
.ch-list{display:flex;flex-direction:column;gap:9px;overflow-y:auto;padding-right:4px}
.ch-list::-webkit-scrollbar{width:6px}
.ch-list::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px}
.ch-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);
  cursor:pointer;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}
.ch-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);transform:scaleY(0);transition:transform .25s}
.ch-row:hover{transform:translateX(3px);border-color:transparent;box-shadow:var(--shadow),0 0 0 1px rgba(99,102,241,.4),0 0 22px var(--glow)}
.ch-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ch-row.active{background:var(--grad-soft);border-color:rgba(99,102,241,.5)}
.ch-row.active::before{transform:scaleY(1)}
.ch-idx{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--text-muted);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s}
.ch-row.active .ch-idx{background:var(--accent);color:#fff}
.ch-name{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-right{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted)}
.mini-live{color:#fff;background:var(--live);padding:2px 8px;border-radius:10px;font-weight:700;font-size:9px;letter-spacing:.5px;animation:ring 1.6s infinite}
.ch-views{white-space:nowrap}
.player-pane{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.now-info{display:flex;gap:16px;background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:background-color .4s ease,border-color .4s ease,color .35s ease}
html[data-theme="dark"] .now-info{background:rgba(22,27,39,.7)}
.now-info img{width:168px;height:95px;border-radius:10px;object-fit:cover;background:var(--surface-2);flex:0 0 auto;border:1px solid var(--border)}
.now-text{flex:1;min-width:0}
.now-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.now-head h2{font-size:20px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-live{display:none;align-items:center;gap:5px;background:var(--live);color:#fff;font-size:10px;font-weight:700;padding:2px 9px;border-radius:10px}
.now-meta{font-size:13px;color:var(--text-dim);margin-bottom:7px}
.now-desc{font-size:13px;color:var(--text-dim);line-height:1.6}
.player-actions{display:flex;flex-direction:column;gap:14px}
.player-pane .surf{max-width:none;margin:0}
.player-pane .vote-bar{margin-top:0}
.player-pane .vote-bar .vote-btn{flex:0 0 auto}
.player-pane .surf .sbtn{flex:1}

/* Responsive: stack on narrow screens (player on top) */
@media(max-width:980px){
  .tv-split{flex-direction:column;padding:0 14px 14px;gap:14px}
  .ch-list-pane{flex:1 1 auto;max-width:none;width:auto;position:static;max-height:none}
  .ch-list{max-height:320px}
  .player-pane{order:-1}
}
@media(max-width:560px){
  .now-info{flex-direction:column}
  .now-info img{width:100%;height:auto}
}