/* =========================================================
   NEXUS TV+ — Red Cinema Edition
   Deep black / charcoal surfaces, vivid crimson accent,
   restrained dark-red and neutral gray support.
   Typography: Satoshi (already loaded) + system fallbacks.
   ========================================================= */

:root{
  /* Surfaces — deep black to charcoal */
  --bg:#0a090b;            /* page background */
  --bg-raise:#100e11;      /* raised sections */
  --card:#151316;          /* channel card */
  --card2:#1c181c;         /* card hover / nested surface */
  --line:#292429;          /* hairline borders */
  --line-soft:#211d21;

  /* Ink */
  --txt:#f3eff1;
  --mut:#a49ba3;
  --faint:#6f676e;

  /* Accent — vivid crimson */
  --acc:#e11d3c;
  --acc-strong:#f5314f;
  --acc-deep:#a3122a;      /* restrained dark red */
  --acc-soft:rgba(225,29,60,.12);
  --acc-line:rgba(225,29,60,.38);

  /* Semantic */
  --ok:#3ecf8e; --ok-soft:rgba(62,207,142,.12);
  --bad:#ff5c6b; --bad-soft:rgba(255,92,107,.12);
  --warn:#e6b13f; --warn-soft:rgba(230,177,63,.12);
  --fav:#e8c34a;
  --info:#7aa2f7;

  /* Type */
  --font:'Satoshi','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Elevation */
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 8px 28px rgba(0,0,0,.45);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);

  --r-sm:8px; --r-md:12px; --r-lg:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font); font-size:14px; line-height:1.5;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{color:var(--acc-strong)}
::selection{background:rgba(225,29,60,.35)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2b262b;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#3a333a}

:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}

/* ===== HEADER ===== */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,9,11,.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.header-top{
  display:flex; align-items:center; gap:14px;
  padding:12px 22px; flex-wrap:wrap;
}
.brand{
  font-weight:800; font-size:19px; letter-spacing:.4px;
  color:var(--txt); white-space:nowrap; flex-shrink:0;
  display:flex; align-items:center; gap:9px;
}
.brand .brand-plus{color:var(--acc)}
.brand-logo{width:26px;height:26px;flex-shrink:0}

input,button,select{font-family:inherit;font-size:13px}

/* Global search */
.search-wrap{flex:1 1 220px; max-width:480px; position:relative; min-width:150px}
input[type=search]{
  background:var(--bg-raise); color:var(--txt);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 60px 9px 34px; outline:none; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
input[type=search]::placeholder{color:var(--faint)}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration{display:none}
input[type=search]:focus{
  border-color:var(--acc-line);
  box-shadow:0 0 0 3px var(--acc-soft);
}
.search-wrap .search-icon{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; opacity:.45; pointer-events:none;
}
.search-clear{
  position:absolute; right:34px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; border:none;
  background:rgba(255,255,255,.07); color:var(--mut);
  cursor:pointer; font-size:11px; display:none;
  align-items:center; justify-content:center; padding:0; transition:.2s;
}
.search-clear.show{display:flex}
.search-clear:hover{background:var(--acc-soft); color:var(--acc-strong)}
.search-kbd{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:10px; color:var(--faint); border:1px solid var(--line);
  border-radius:4px; padding:1px 5px; pointer-events:none; user-select:none;
}

/* Header tools */
.header-tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tool{display:flex; align-items:center; gap:6px}
.tool > span{font-size:11px; color:var(--faint); font-weight:600; text-transform:uppercase; letter-spacing:.5px}
select.tool-select{
  background:var(--bg-raise); color:var(--txt);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:7px 8px; outline:none; cursor:pointer;
  transition:border-color .2s;
}
select.tool-select:hover{border-color:#3a333a}
select.tool-select:focus{border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft)}

.scan-indicator{
  display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.3px;
  padding:6px 12px; border-radius:999px;
  background:var(--ok-soft); border:1px solid rgba(62,207,142,.28);
  color:var(--ok); white-space:nowrap; flex-shrink:0;
  cursor:default; user-select:none;
}
.scan-indicator .pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 8px var(--ok);
  animation:softPulse 1.6s infinite;
}
@keyframes softPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ===== TABS ===== */
.tabs-container{
  position:relative; border-top:1px solid var(--line-soft);
  background:rgba(10,9,11,.55);
}
.tabs-scroll{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth; cursor:grab; user-select:none; position:relative;
}
.tabs-scroll::-webkit-scrollbar{display:none}
.tabs-scroll.dragging{cursor:grabbing; scroll-behavior:auto}
.tabs{display:flex; gap:7px; padding:10px 52px; min-width:max-content}
.tab{
  background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:7px 15px;
  font-size:12.5px; font-weight:600; color:var(--mut);
  cursor:pointer; white-space:nowrap;
  transition:border-color .2s, color .2s, background .2s;
  display:flex; align-items:center; gap:6px; font-family:inherit;
  flex-shrink:0;
}
.tab:hover{color:var(--txt); border-color:#3d363d}
.tab.on{
  background:var(--acc); color:#fff; border-color:var(--acc); font-weight:700;
}
.tab.popular{border-color:rgba(232,195,74,.3); color:var(--fav)}
.tab.popular.on{background:var(--fav); color:#171308; border-color:var(--fav)}
.tab.region-us{border-color:rgba(122,162,247,.3)}
.tab.region-us.on{background:var(--info); color:#0b1220; border-color:var(--info)}
.tab.region-uk{border-color:var(--acc-line)}
.tab.region-uk.on{background:var(--acc-deep); color:#fff; border-color:var(--acc-deep)}
.tab.fav-tab{border-color:rgba(232,195,74,.3); color:var(--fav)}
.tab.fav-tab.on{background:var(--fav); color:#171308; border-color:var(--fav)}
.tab.online-tab{border-color:rgba(62,207,142,.3); color:var(--ok)}
.tab.online-tab.on{background:var(--ok); color:#03130b; border-color:var(--ok)}
.tab .count{
  font-size:10px; padding:1px 6px; border-radius:999px;
  background:rgba(255,255,255,.07); font-weight:700;
}
.tab.on .count{background:rgba(0,0,0,.22); color:inherit}

.tab-arrow{
  position:absolute; top:0; bottom:0; width:38px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg, var(--bg) 35%, transparent);
  border:none; color:var(--mut); cursor:pointer;
  z-index:10; transition:.2s; font-size:18px; font-weight:800;
}
.tab-arrow:hover{color:var(--acc-strong)}
.tab-arrow.left{left:0; background:linear-gradient(90deg, rgba(10,9,11,.97) 40%, transparent)}
.tab-arrow.right{right:0; background:linear-gradient(-90deg, rgba(10,9,11,.97) 40%, transparent)}
.tab-arrow.hidden{opacity:0; pointer-events:none}

/* ===== STATS BAR ===== */
.stats-bar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:8px 22px; font-size:11.5px; color:var(--mut); font-weight:600;
  border-top:1px solid var(--line-soft); background:rgba(0,0,0,.18);
}
.stat-item{display:flex; align-items:center; gap:5px}
.stat-item b{color:var(--txt); font-weight:800}
.stat-item.ok b{color:var(--ok)}
.stat-item.us b{color:var(--info)}
.stat-item.uk b{color:var(--acc-strong)}

/* ===== MAIN ===== */
main{padding:20px 22px 8px; max-width:1600px; margin:0 auto}

/* ===== HERO — featured channel ===== */
.hero{
  position:relative; display:none; align-items:center; gap:26px;
  background:
    radial-gradient(1100px 480px at 88% -10%, rgba(163,18,42,.22), transparent 62%),
    radial-gradient(700px 420px at -6% 110%, rgba(225,29,60,.10), transparent 60%),
    var(--bg-raise);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 28px; margin-bottom:22px; overflow:hidden;
}
.hero.show{display:flex}
.hero-media{
  width:210px; max-width:38%; aspect-ratio:16/10; flex-shrink:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.hero-media img{max-width:78%; max-height:78%; object-fit:contain}
.hero-media .hero-initial{
  font-size:44px; font-weight:800; color:var(--acc);
  opacity:.9; letter-spacing:1px;
}
.hero-body{flex:1; min-width:0}
.hero-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--acc-strong); margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hero-eyebrow .hero-prov, .hero-eyebrow .hero-region{
  font-size:10px; letter-spacing:.6px; color:var(--mut);
  border:1px solid var(--line); border-radius:999px; padding:2px 8px;
}
.hero-title{
  font-size:clamp(24px, 3.2vw, 34px); font-weight:800; line-height:1.12;
  margin:0 0 8px; letter-spacing:-.3px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.hero-meta{font-size:13px; color:var(--mut); margin-bottom:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}
.btn-primary{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--acc); color:#fff; border:1px solid var(--acc);
  font-weight:700; font-size:13.5px; padding:11px 22px;
  border-radius:var(--r-sm); cursor:pointer; font-family:inherit;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.btn-primary:hover{background:var(--acc-strong); box-shadow:0 6px 22px rgba(225,29,60,.28); transform:translateY(-1px)}
.btn-primary svg{width:15px;height:15px;fill:currentColor}
.btn-ghost{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; color:var(--txt);
  border:1px solid var(--line); font-weight:600; font-size:13px;
  padding:11px 18px; border-radius:var(--r-sm); cursor:pointer; font-family:inherit;
  transition:border-color .2s, background .2s;
}
.btn-ghost:hover{border-color:#3d363d; background:var(--bg-raise)}
.hero .fav-star{
  background:none; border:1px solid var(--line); color:var(--faint);
  border-radius:var(--r-sm); padding:10px 13px; cursor:pointer; font-size:16px;
  transition:.2s;
}
.hero .fav-star:hover{color:var(--fav); border-color:rgba(232,195,74,.4)}
.hero .fav-star.on{color:var(--fav)}

/* ===== HORIZONTAL ROWS ===== */
.row{margin-bottom:22px}
.row-head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
}
.row-title{font-size:16px; font-weight:800; letter-spacing:.2px}
.row-count{font-size:11.5px; color:var(--mut); font-weight:600}
.row-track{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin;
}
.row-track::-webkit-scrollbar{height:6px}
.row-card{
  flex:0 0 150px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px; cursor:pointer; position:relative;
  transition:border-color .2s, background .2s, transform .2s;
  display:flex; flex-direction:column; gap:8px;
}
.row-card:hover{background:var(--card2); border-color:#3d363d; transform:translateY(-2px)}
.row-card .row-logo{
  width:100%; aspect-ratio:16/10; border-radius:var(--r-sm);
  background:var(--bg-raise); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.row-card .row-logo img{max-width:80%; max-height:80%; object-fit:contain}
.row-card .row-logo .row-initial{font-size:22px; font-weight:800; color:var(--acc); opacity:.85}
.row-card .row-name{
  font-size:12px; font-weight:700; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.row-card .row-meta{font-size:10px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ===== CHANNEL GRID ===== */
.grid-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:6px 0 14px; flex-wrap:wrap;
}
.grid-title{font-size:16px; font-weight:800}
#grid{
  display:grid; gap:13px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px; cursor:pointer; position:relative;
  transition:border-color .2s, background .2s, transform .2s, box-shadow .2s;
  display:flex; flex-direction:column; gap:8px; overflow:hidden;
}
.card:hover, .card:focus-visible{
  background:var(--card2); border-color:#403840;
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.card.region-UK{border-left:3px solid var(--acc-deep)}
.card.region-US{border-left:3px solid rgba(122,162,247,.75)}
.logo{
  width:100%; aspect-ratio:16/10; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  background:var(--bg-raise); border:1px solid var(--line-soft);
}
.logo img{
  max-width:80%; max-height:80%; object-fit:contain;
  position:absolute; inset:0; margin:auto;
  opacity:0; transition:opacity .3s;
}
.logo img.loaded{opacity:1}
.logo .initial{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; letter-spacing:1px; color:var(--acc);
  opacity:.85; transition:opacity .3s;
}
.logo.initial-only .initial{opacity:.85}
.logo:not(.initial-only) .initial{opacity:.15}
.logo .nexus-mark{
  position:absolute; inset:0; margin:auto; width:70%; height:70%; object-fit:contain;
  opacity:0; transition:opacity .3s;
}
.logo .nexus-mark.loaded{opacity:1}
.logo.initial-only:has(.nexus-mark) .initial{opacity:0}
.name{
  font-size:12.5px; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.meta{font-size:10.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.badge{
  position:absolute; top:8px; right:8px; font-size:9.5px; padding:2px 7px;
  border-radius:999px; background:rgba(10,9,11,.82);
  border:1px solid var(--line); font-weight:700; z-index:4;
  letter-spacing:.4px;
}
.badge.ok{color:var(--ok); border-color:rgba(62,207,142,.5); background:var(--ok-soft)}
.card .badge.verified{top:32px;max-width:calc(100% - 16px);font-size:9px;letter-spacing:0;white-space:normal;text-align:center}
.card .badge.server{top:32px;max-width:calc(100% - 16px);font-size:9px;letter-spacing:0;white-space:normal;text-align:center}
.live-badge.verified{color:var(--ok);border-color:rgba(62,207,142,.5);background:var(--ok-soft)}
.badge.bad{color:var(--bad); border-color:rgba(255,92,107,.5); background:var(--bad-soft)}
.badge.scan{color:var(--warn); border-color:rgba(230,177,63,.5); background:var(--warn-soft)}
.stream-badge{
  position:absolute; bottom:64px; right:8px; font-size:9px;
  background:rgba(10,9,11,.82); border:1px solid var(--acc-line);
  color:var(--acc-strong); padding:1px 6px; border-radius:999px;
  font-weight:700; z-index:4;
}
.region-badge{
  position:absolute; top:8px; left:34px; font-size:9px;
  padding:2px 6px; border-radius:999px; font-weight:800; z-index:4;
  background:rgba(10,9,11,.82);
}
.region-badge.US{color:var(--info); border:1px solid rgba(122,162,247,.5)}
.region-badge.UK{color:var(--acc-strong); border:1px solid var(--acc-line)}
.fav{
  position:absolute; top:7px; left:9px; font-size:15px; opacity:.28;
  cursor:pointer; user-select:none; z-index:5;
  transition:opacity .2s, color .2s, transform .15s;
  background:none; border:none; padding:2px; color:var(--faint); font-family:inherit;
}
.fav:hover{transform:scale(1.18); opacity:1}
.fav.on{opacity:1; color:var(--fav)}

#more{
  display:none; margin:22px auto; width:240px;
  background:var(--card); color:var(--txt); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 16px; cursor:pointer; font-weight:700;
  font-family:inherit; transition:.2s;
}
#more:hover{background:var(--card2); border-color:#3d363d; transform:translateY(-2px)}
#empty{display:none; text-align:center; padding:64px 20px; color:var(--mut)}
#empty.show{display:block}
#empty .icon{font-size:44px; opacity:.35; margin-bottom:12px}
#empty .txt{font-size:14px; font-weight:600}
#empty .sub{font-size:12.5px; color:var(--mut); margin-top:6px}

footer{padding:26px 22px 48px; color:var(--faint); font-size:11px; line-height:1.9; text-align:center; max-width:760px; margin:0 auto}

/* ===== PLAYER ===== */
#player{
  position:fixed; inset:0; z-index:300;
  background:#000; display:none; flex-direction:column;
}
#player.on{display:flex}
#phead{
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  background:rgba(10,9,11,.95); border-bottom:1px solid var(--line);
  position:absolute; top:0; left:0; right:0; z-index:20;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .3s;
}
#phead.hidden{transform:translateY(-100%); opacity:0}
#ptitle{
  font-weight:800; font-size:15px; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:10px;
}
#ptitle::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 10px var(--acc);
  animation:softPulse 1.5s infinite; flex-shrink:0;
}
#phead button{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#fff; padding:8px 14px; border-radius:var(--r-sm); font-size:12.5px;
  cursor:pointer; font-weight:600; transition:.2s; font-family:inherit;
}
#phead button:hover{background:var(--acc-soft); border-color:var(--acc-line)}
#pbody{
  flex:1; position:relative; display:flex; align-items:center;
  justify-content:center; overflow:hidden; background:#000;
}
.video-wrap{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
video{width:100%; height:100%; max-height:100vh; background:#000; outline:none; object-fit:contain}

.loading-overlay{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center;
  background:radial-gradient(circle at center, rgba(16,8,11,.88), rgba(0,0,0,.96));
  z-index:5; transition:opacity .4s; pointer-events:none;
}
.loading-overlay.hide{opacity:0}

/* Ad-break overlay — local promo video over provider ad breaks */
.ad-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at center, #150a0e 0%, #050304 78%);
  z-index:6; transition:opacity .4s; pointer-events:none; opacity:0;
}
.ad-overlay.show{opacity:1}
.ad-overlay .signal-player-inner h2{font-size:22px; letter-spacing:2px; margin:14px 0 4px}
.ad-overlay .ad-note{font-size:12px; color:var(--mut); letter-spacing:1px}
.ad-overlay .signal-wave{margin-top:18px}
.ad-overlay #adVideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:#050304; opacity:1; transition:opacity .4s;
}
.ad-overlay.intro-done #adVideo{opacity:0}
.ad-overlay .ad-end{position:relative; z-index:1}

/* Big play button (autoplay-blocked fallback) */
.big-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.9);
  width:84px; height:84px; border-radius:50%;
  background:var(--acc);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10; opacity:0;
  transition:opacity .3s, transform .3s;
  box-shadow:0 10px 38px rgba(225,29,60,.4);
  border:none; padding:0; color:#fff;
}
.big-play svg{width:34px; height:34px; margin-left:5px; fill:currentColor}
.big-play.show{opacity:1; transform:translate(-50%,-50%) scale(1)}
.big-play:hover{background:var(--acc-strong); transform:translate(-50%,-50%) scale(1.06)}

/* Controls */
.controls{
  position:absolute; left:0; right:0; bottom:0;
  padding:52px 22px 18px;
  background:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 55%, transparent 100%);
  z-index:15; transition:opacity .35s, transform .35s;
}
.controls.hidden{opacity:0; transform:translateY(20px); pointer-events:none}
.progress{
  position:relative; height:6px; border-radius:3px;
  background:rgba(255,255,255,.14); cursor:pointer;
  margin-bottom:14px; transition:height .2s;
}
.progress:hover{height:8px}
.progress-buffer{position:absolute; top:0; left:0; height:100%; background:rgba(255,255,255,.22); border-radius:3px; transition:width .3s}
.progress-played{
  position:absolute; top:0; left:0; height:100%;
  background:var(--acc); border-radius:3px;
}
.progress-handle{
  position:absolute; top:50%; width:14px; height:14px;
  border-radius:50%; background:#fff;
  transform:translate(-50%,-50%) scale(0);
  box-shadow:0 0 10px rgba(225,29,60,.8);
  transition:transform .2s; pointer-events:none;
}
.progress:hover .progress-handle,
.progress.dragging .progress-handle{transform:translate(-50%,-50%) scale(1)}
.ctrl-row{display:flex; align-items:center; gap:14px}
.ctrl-btn{
  background:transparent; border:none; color:#fff;
  padding:8px; cursor:pointer; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  transition:.2s; min-width:36px;
}
.ctrl-btn:hover{background:var(--acc-soft); color:var(--acc-strong)}
.ctrl-btn svg{width:20px; height:20px; fill:currentColor}
.spacer{flex:1}
.vol-slider{
  -webkit-appearance:none; appearance:none;
  width:80px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.2); outline:none; cursor:pointer;
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%;
  background:var(--acc); cursor:pointer;
}
.vol-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--acc);border:none;cursor:pointer}
.live-badge{
  display:flex; align-items:center; gap:5px;
  font-size:11px; font-weight:800; letter-spacing:.8px;
  color:var(--acc-strong); padding:3px 9px;
  background:var(--acc-soft); border:1px solid var(--acc-line);
  border-radius:5px;
}
.live-badge::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--acc-strong); animation:softPulse 1.2s infinite;
}
.live-badge.verified::before{background:var(--ok)}
.error-overlay{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  gap:16px; padding:30px; background:rgba(0,0,0,.86); z-index:8; text-align:center;
}
.error-overlay.show{display:flex}
.error-overlay .icon{font-size:48px; opacity:.5}
.error-overlay .msg{font-size:15px; color:var(--txt); font-weight:600; max-width:500px}
.error-overlay .sub{font-size:13px; color:var(--mut); max-width:500px}
#pmsg{
  position:absolute; left:50%; top:80px; transform:translateX(-50%);
  background:rgba(18,14,17,.95); border:1px solid var(--line);
  padding:11px 22px; border-radius:var(--r-sm); font-size:13px;
  display:none; max-width:90%; font-weight:600; z-index:25;
  backdrop-filter:blur(8px); box-shadow:var(--shadow-md);
}
#toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--card); border:1px solid var(--line); padding:12px 22px;
  border-radius:var(--r-sm); font-size:13px; z-index:999; display:none;
  box-shadow:var(--shadow-lg); max-width:90%; font-weight:600;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .hero{padding:20px; gap:18px}
  .hero-media{width:170px}
}
@media (max-width:640px){
  main{padding:14px 12px 8px}
  .header-top{padding:10px 12px; gap:8px}
  .search-wrap{order:3; flex-basis:100%; max-width:none}
  .search-kbd{display:none}
  .tool > span{display:none}
  .tabs{padding:8px 44px}
  .stats-bar{padding:6px 12px; gap:10px; font-size:11px}
  .hero{flex-direction:column; align-items:flex-start; padding:18px}
  .hero-media{width:100%; max-width:220px}
  .vol-slider{width:55px}
  .ctrl-row{gap:8px}
  .ctrl-btn{min-width:32px; padding:6px}
  .ctrl-btn svg{width:17px; height:17px}
  .big-play{width:68px; height:68px}
  .big-play svg{width:26px; height:26px}
  .brand{font-size:16px}
  .row-card{flex-basis:128px}
  #grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}