* { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg:#000000; --surface:#0a0a0a; --surface2:#111111; --surface3:#1a1a1a;
  --accent:#FF0000; --accent2:#ff3333;
  --accent-bg:rgba(255,0,0,0.08); --accent-border:rgba(255,0,0,0.28); --accent-glow:#110000;
  /* Global dark-red button palette (matches the "Play Fullscreen" button). */
  --btn-dark-red:rgba(58,0,10,0.96); --btn-dark-red-hover:rgba(100,4,18,0.98); --btn-red-border:rgba(227,25,55,0.92);
  --fs-meta-shadow:drop-shadow(0 2px 18px rgba(0,0,0,0.95)) drop-shadow(0 0 48px rgba(0,0,0,0.65));
  --text:#ffffff; --text2:#cccccc; --text3:#888888;
  --border:rgba(255,255,255,0.14); --border2:rgba(255,255,255,0.24);
  --radius:14px;
  --control-radius:10px;
  --sidebar:480px;
  --epg-channel-col:260px;
  --epg-row-height:108px;
  /* Tesla 17" optimised — everything big and tappable */
  --fs-xs:16px; --fs-sm:19px; --fs-md:22px; --fs-lg:26px; --fs-xl:32px;
  --btn-h:64px; --input-h:64px; --icon-size:56px;
  --ch-h:84px; --media-h:90px;
}
html.light-mode {
  --bg:#f4f5f7; --surface:#ffffff; --surface2:#eceef3; --surface3:#e1e4eb;
  --accent:#e31937; --accent2:#c4152e;
  /* Light-mode action buttons: solid brand-red fill (replaces the dark-red + red-outline look). */
  --btn-dark-red:#e31937; --btn-dark-red-hover:#c4152e; --btn-red-border:#e31937;
  --accent-bg:rgba(227,25,55,0.08); --accent-border:rgba(227,25,55,0.26); --accent-glow:#fff0f2;
  --text:#0f1117; --text2:#3d4356; --text3:#7b8399;
  --border:rgba(0,0,0,0.1); --border2:rgba(0,0,0,0.18);
}
/* Light mode: structural backgrounds (elements with hardcoded #000) */
html.light-mode .app-header { background:var(--surface); box-shadow:0 1px 0 var(--border); }
html.light-mode .sidebar { background:var(--surface); box-shadow:1px 0 0 var(--border); }
html.light-mode .streams-sidebar { background:var(--surface); box-shadow:1px 0 0 var(--border); }
html.light-mode .streams-panel { background:var(--bg); }
html.light-mode .player-area { background:var(--surface2); }
html.light-mode .video-wrap { background:var(--surface3); }
/* Fullscreen player: keep the video frame + letterbox black in light mode
   (the windowed light-grey surfaces must not bleed onto the fullscreen edges). */
html.light-mode .tv-expanded .player-area,
html.light-mode .tv-expanded .video-wrap { background:#000; }
/* EPG channel column */
html.light-mode .epg-row-ch { background:var(--surface); box-shadow:1px 0 0 var(--border); }
html.light-mode .epg-row-ch:hover { background:var(--surface2); }
html.light-mode .epg-row-ch.active { background:var(--accent-bg); border-color:transparent; box-shadow:inset 0 0 0 2px rgba(227,25,55,0.92),4px 0 16px rgba(0,0,0,0.12); }
html.light-mode .epg-row-ch.active .epg-row-ch-name { color:var(--text); }
html.light-mode .epg-row-ch-name { color:var(--text2); }
html.light-mode .epg-pip { background:var(--surface2); }
/* Floating-PIP stand-in: light surfaces in light mode so the programme-data
   panel fade reveals light, not the dark video bg bleeding across the text. */
html.light-mode .epg-pip-placeholder { background:var(--surface2); }
html.light-mode .epg-pip-ph-slot { background:var(--surface3); color:var(--text2); }
html.light-mode .epg-pip-channel { color:var(--text3); }
html.light-mode .epg-pip-title { color:var(--text); }
html.light-mode .epg-pip-time { color:var(--text2); }
html.light-mode .epg-pip-desc { color:var(--text3); }
/* Light mode: override hardcoded rgba(255,255,255,...) icon/border colors */
html.light-mode .hdr-icon-btn { color:rgba(0,0,0,0.45); }
html.light-mode .hdr-icon-btn:hover { color:var(--text); background:rgba(0,0,0,0.07); }
html.light-mode .hdr-profile-btn { color:rgba(0,0,0,0.45); }
html.light-mode .hdr-profile-btn:hover { color:var(--text); background:rgba(0,0,0,0.07); }
html.light-mode .hdr-profile-dropdown { border-color:rgba(0,0,0,0.12); box-shadow:0 16px 48px rgba(0,0,0,0.14); }
html.light-mode .hdr-profile-divider { background:rgba(0,0,0,0.08); }
html.light-mode .hdr-profile-item:hover { background:rgba(0,0,0,0.05); }
html.light-mode .hdr-btn { background:rgba(0,0,0,0.06); color:var(--text2); }
html.light-mode .hdr-btn:hover { background:rgba(0,0,0,0.1); color:var(--text); }
html.light-mode .hdr-btn.active { background:rgba(0,0,0,0.08); color:var(--text); }
html.light-mode .hdr-btn.active .ci-icon { color:var(--text); }
html.light-mode .tab-btn.active { color:var(--accent); }
html.light-mode .tab-btn.active span { border-bottom-color:var(--accent); }
html.light-mode .search-wrap input { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.1); }
html.light-mode .search-wrap input:focus { background:rgba(0,0,0,0.07); }
html.light-mode .hdr-search-bar input { background:var(--surface2); border-color:rgba(0,0,0,0.12); }
html.light-mode .hdr-search-clear { color:rgba(0,0,0,0.3); }
html.light-mode .hdr-search-clear:hover { color:var(--text); }
html.light-mode .sidebar-search-wrap input { background:var(--surface2); border-color:rgba(0,0,0,0.12); }
html.light-mode .sidebar-search-star { color:rgba(0,0,0,0.35); }
html.light-mode .sidebar-search-star:hover { color:var(--text); }
html.light-mode .sidebar-search-star-divider { background:rgba(0,0,0,0.12); }
html.light-mode .touch-select-trigger { background:var(--surface2); border-color:rgba(0,0,0,0.12); }
html.light-mode .touch-select-trigger:hover { background:var(--surface3); }
html.light-mode .touch-select-trigger .ts-inline-chevron { color:rgba(0,0,0,0.4); }
html.light-mode .touch-select-trigger .ts-action-divider { background:rgba(0,0,0,0.12); }
html.light-mode .touch-select-trigger .ts-inline-add { color:rgba(0,0,0,0.4); }
html.light-mode .touch-select-sheet { background:var(--surface); border-color:rgba(0,0,0,0.1); box-shadow:0 24px 80px rgba(0,0,0,0.18); }
html.light-mode .touch-select-sheet-head { box-shadow:0 1px 0 rgba(0,0,0,0.08); }
html.light-mode .touch-select-sheet-close { border-color:rgba(0,0,0,0.12); background:rgba(0,0,0,0.05); color:var(--text2); }
html.light-mode .touch-select-option { background:var(--surface2); border-color:rgba(0,0,0,0.08); }
html.light-mode .touch-select-option:hover { background:var(--surface3); }
html.light-mode .touch-select-overlay { background:rgba(0,0,0,0.4); }
html.light-mode .category-item { border-left-color:transparent; color:rgba(0,0,0,0.7); }
html.light-mode .category-item:hover { background:rgba(0,0,0,0.05); color:#000; }
html.light-mode .category-item.active { background:rgba(0,0,0,0.07); color:var(--accent); font-weight:600; }
html.light-mode .category-item.active::before { background:var(--accent); }
html.light-mode .sidebar-section-icon-btn { background:rgba(0,0,0,0.06); color:var(--text2); }
html.light-mode .sidebar-section-icon-btn:hover { background:rgba(0,0,0,0.1); color:var(--text); }
html.light-mode .category-item.search-hit { background:rgba(14,116,144,0.14); color:var(--text); box-shadow:0 0 0 1px rgba(14,116,144,0.20), 0 0 18px rgba(14,116,144,0.12); }
html.light-mode .streams-detail-back { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.18); color:var(--text); }
html.light-mode .streams-detail-back:hover { background:rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.26); }
html.light-mode .channel-item:hover { background:rgba(0,0,0,0.05); }
html.light-mode .channel-item.active { background:rgba(227,25,55,0.12); }
html.light-mode .channel-logo { background:var(--surface3); }
html.light-mode .epg-row-ch-logo,
html.light-mode .epg-pip-channel-logo { border:1px solid var(--border); box-sizing:border-box; }
html.light-mode .fav-btn { color:#fff; }
/* Spin ring */
html.light-mode .spin-ring { border-color:rgba(0,0,0,0.1); border-top-color:var(--accent); }
/* Settings */
html.light-mode .settings-overlay { background:var(--bg); }
html.light-mode .settings-shell { background:var(--bg); border-color:rgba(0,0,0,0.1); box-shadow:0 24px 80px rgba(0,0,0,0.2); }
html.light-mode .settings-tab-nav { background:rgba(0,0,0,0.05); }
html.light-mode .settings-tab-btn.active { background:rgba(0,0,0,0.08); }
/* Toast */
html.light-mode .toast { border-color:rgba(0,0,0,0.1); box-shadow:0 8px 32px rgba(0,0,0,0.14); }
/* Streams sidebar */
html.light-mode .streams-search-wrap input { border-color:rgba(0,0,0,0.1); }
html.light-mode .stream-codecs { color:var(--text2); }
html.light-mode .stream-format-pill { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.12); color:var(--text2); }
html.light-mode .stream-item:hover { border-color:rgba(0,0,0,0.16); }
html.light-mode .movie-library-header { box-shadow:0 1px 0 rgba(0,0,0,0.08); }
html.light-mode .movie-card-poster { border-color:rgba(0,0,0,0.1); }
html.light-mode .ep-item:hover { border-color:rgba(0,0,0,0.12); }
/* Detail panel */
html.light-mode .detail-poster-ph { background:var(--surface2); border-color:rgba(0,0,0,0.1); color:var(--text3); }
html.light-mode .streams-detail:not(.detail-hero-active) .detail-kicker { color:var(--text3); }
html.light-mode .streams-detail:not(.detail-hero-active) .detail-genre-pill { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.12); color:var(--text2); }
html.light-mode .streams-detail:not(.detail-hero-active) .detail-meta { color:var(--text2); }
html.light-mode .streams-detail:not(.detail-hero-active) .detail-progress-text { color:var(--text3); }
html.light-mode .streams-detail:not(.detail-hero-active) .detail-overview { color:var(--text2); }
/* Audio pills */
html.light-mode .audio-label,html.light-mode .sp-audio-label,html.light-mode .sp-subtitle-label { color:var(--text2); }
html.light-mode .audio-pill { background:rgba(0,0,0,0.07); border-color:rgba(0,0,0,0.2); color:var(--text2); }
html.light-mode .audio-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }
html.light-mode .sp-close-btn { background:rgba(0,0,0,0.12); color:var(--text); }
html.light-mode .sp-time { color:var(--text3); }
/* Fullscreen players always sit on dark video — keep titles white in light mode */
html.light-mode #sp-title,
html.light-mode #sp-controls-title { color:#fff !important; }
html.light-mode #sp-controls-desc { color:rgba(255,255,255,0.92) !important; }
/* Landing */
html.light-mode .landing-hero { background:radial-gradient(ellipse at 50% -20%,rgba(212,0,0,0.1) 0%,transparent 65%); }
html.light-mode .login-divider::before { background:linear-gradient(90deg,transparent,rgba(0,0,0,0.15),transparent); }
html.light-mode .login-divider span { background:var(--surface); color:var(--text3); }
html.light-mode .login-qr-panel { background:rgba(0,0,0,0.03); }
html.light-mode .auth-secondary-divider { background:linear-gradient(180deg,transparent,rgba(0,0,0,0.15),transparent); }
html.light-mode .epg-pip-video-slot::after { background:rgba(0,0,0,0.12); }
html.light-mode .landing-footer-links a { color:rgba(0,0,0,0.35); }
html.light-mode .landing-footer-links a:hover { color:rgba(0,0,0,0.65); }
/* EPG grid */
html.light-mode .epg-panel { background:var(--bg); }
html.light-mode .epg-time-header { box-shadow:0 1px 0 rgba(0,0,0,0.08); }
html.light-mode .epg-time-header-pad,
html.light-mode .epg-time-slot { background:var(--surface); }
html.light-mode .epg-row { box-shadow:0 1px 0 rgba(0,0,0,0.06); }
html.light-mode .epg-row-ch { box-shadow:1px 0 0 rgba(0,0,0,0.08),4px 0 16px rgba(0,0,0,0.06); }
html.light-mode .epg-row-ch:hover { background:var(--surface2); }
html.light-mode .epg-prog { box-shadow:1px 0 0 rgba(0,0,0,0.06); }
html.light-mode .epg-prog:hover { background:rgba(0,0,0,0.04); }
html.light-mode .epg-pip-fav { background:rgba(0,0,0,0.05); border:none; color:var(--text2); }
html.light-mode .epg-pip-fav.faved { color:var(--accent); }
html.light-mode .password-policy { background:rgba(255,255,255,0.98); border-color:rgba(0,0,0,0.12); box-shadow:0 10px 28px rgba(0,0,0,0.12); }
html.light-mode .landing-signin-cta {
  background:rgba(255,255,255,0.72);
  border:2px solid rgba(14,116,144,0.34);
  color:var(--text);
  box-shadow:0 4px 18px rgba(15,23,42,0.12);
}
html.light-mode .landing-signin-cta:hover {
  border-color:rgba(14,116,144,0.48);
  background:rgba(255,255,255,0.92);
  box-shadow:0 6px 22px rgba(15,23,42,0.16);
  filter:none;
}
html.light-mode .sidebar-section-edit { background:rgba(0,0,0,0.06); color:var(--text2); }
html.light-mode .sidebar-section-edit:hover { background:rgba(0,0,0,0.1); color:var(--text); }
html.light-mode .epg-pip-play,
html.light-mode .epg-pip-expand-text,
html.light-mode #category-edit-save-btn {
  box-shadow:0 0 0 1px rgba(14,116,144,0.18), 0 0 34px rgba(14,116,144,0.16), 0 10px 24px rgba(15,23,42,0.12);
}
html.light-mode .epg-pip-expand-text:hover {
  box-shadow:0 0 0 1px rgba(14,116,144,0.24), 0 0 42px rgba(14,116,144,0.20), 0 12px 28px rgba(15,23,42,0.16);
}
/* Live TV loading skeletons — dark mode uses white shimmer blocks; mirror for light surfaces */
html.light-mode .epg-skeleton-block { background:rgba(0,0,0,0.07); }
html.light-mode .epg-skeleton-block::after { background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,0.09) 48%,transparent 100%); }
html.light-mode .category-skeleton-list { padding-right:6px; }
html.light-mode .epg-skeleton-row .epg-row-ch { background:var(--surface); }
html.light-mode .epg-skeleton-row .epg-row-ch:hover { background:var(--surface); }
html.light-mode .epg-skeleton-programme { border-right-color:var(--border); }
html.light-mode .epg-pip-meta.loading .epg-pip-channel-logo { background:transparent; }
/* Header logo bloom (light only) — soft brand tint, contained to the logo corner.
   On a white header a heavy red radial reads as a stain (you can't bloom light
   onto white), so we keep a faint, fast-fading wash and let the logo stay crisp. */
html.light-mode .app-header { overflow:hidden; }
html.light-mode .app-header::before {
  top:0; left:-28px; bottom:0; width:min(300px,32vw); height:100%;
  background:radial-gradient(ellipse at 18% 100%,rgba(227,25,55,0.10) 0%,rgba(227,25,55,0.045) 44%,rgba(227,25,55,0.015) 62%,transparent 76%);
}
html.light-mode .header-logo img {
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.10));
}
html.light-mode .header-logo > span:last-child { color:rgba(0,0,0,0.38) !important; }
/* ── Light-mode: category search modal close button (visible dark glyph on the white modal) ── */
html.light-mode #category-search-close { background:rgba(0,0,0,0.05) !important; border-color:rgba(0,0,0,0.12) !important; color:var(--text2) !important; }
html.light-mode #category-search-close:hover { background:rgba(0,0,0,0.09) !important; }
/* ── Light-mode: expanded category grid — white cards with dark labels (not grey-on-grey) ── */
html.light-mode .m3u-picker-grid.categories-expanded-grid .m3u-picker-item {
  background:var(--surface); border-color:rgba(0,0,0,0.18);
  box-shadow:0 1px 2px rgba(15,17,23,0.04), 0 6px 16px rgba(15,17,23,0.06);
}
@media (hover:hover){
  html.light-mode .m3u-picker-grid.categories-expanded-grid .m3u-picker-item:hover {
    background:var(--surface); border-color:rgba(0,0,0,0.28);
    box-shadow:0 2px 6px rgba(227,25,55,0.12), 0 10px 24px rgba(15,17,23,0.10);
  }
}
html.light-mode .m3u-picker-grid.categories-expanded-grid .m3u-picker-item.active {
  background:var(--btn-dark-red); border-color:rgba(0,0,0,0.28); color:#fff;
  box-shadow:0 1px 2px rgba(15,17,23,0.04), 0 6px 16px rgba(15,17,23,0.06);
}
html.light-mode .m3u-picker-grid.categories-expanded-grid .m3u-picker-item.active .m3u-picker-name { color:#fff; }
html.light-mode .m3u-picker-grid.categories-expanded-grid .m3u-picker-item .m3u-picker-name { color:var(--text); }
/* Expanded category view title — dark, readable on the light background (white clashed). */
html.light-mode .categories-expanded-title { color:var(--text); }
/* ── Light-mode: Add Playlist dropdown modal (shell was hard-coded near-black) ── */
html.light-mode #playlist-editor-overlay .stream-url-shell { background:rgba(255,255,255,0.98); border-color:var(--border); }
html.light-mode .playlist-editor-logo-bloom { background:radial-gradient(ellipse at 50% 40%,rgba(227,25,55,0.10) 0%,rgba(227,25,55,0.045) 44%,rgba(227,25,55,0.015) 62%,transparent 76%); }
html.light-mode .playlist-editor-logo-bloom img { filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.10)); }
html.light-mode .playlist-editor-logo-tm { color:rgba(0,0,0,0.32) !important; }
html.light-mode .playlist-editor-close:hover { border-color:var(--accent); }
/* ── Light-mode: Play Trailer button. Over a backdrop hero keep the dark glassy
      chip but force a white glyph (var(--text) is dark in light mode and vanished);
      with no backdrop use a light chip on the light page. ── */
html.light-mode .streams-detail.detail-hero-active .detail-action-btn { color:#fff; }
html.light-mode .streams-detail:not(.detail-hero-active) .detail-action-btn { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.14); color:var(--text); }
html.light-mode .streams-detail:not(.detail-hero-active) .detail-action-btn:hover { background:rgba(0,0,0,0.09); border-color:rgba(0,0,0,0.24); }
html { font-size:20px; }
body { background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; height:100vh; overflow:hidden; display:flex; flex-direction:column; font-size:var(--fs-md); }

/* ── SITE GATE ── */

/* ── LOGIN / LANDING ── */
#login-screen { flex:1; display:none; flex-direction:column; align-items:stretch; background:var(--bg); overflow:hidden; position:relative; min-height:0; }
.landing-scroll-body { flex:1; min-height:0; width:100%; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; display:flex; flex-direction:column; align-items:center; -webkit-overflow-scrolling:touch; }
.landing-scroll-body::-webkit-scrollbar { display:none; }
#login-screen .landing-main-content { width:100%; display:flex; flex-direction:column; align-items:center; transform:translateY(30px); }
.landing-si-track { position:absolute; right:3px; top:6px; bottom:6px; width:3px; background:rgba(255,255,255,0.07); border-radius:3px; z-index:10; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.landing-si-track.si-visible { opacity:1; }
.landing-si-thumb { position:absolute; left:0; right:0; top:0; background:var(--accent); border-radius:3px; min-height:20px; opacity:0.65; transition:opacity 0.15s; }
.landing-si-track.si-scrolling .landing-si-thumb { opacity:1; }
html.light-mode .landing-si-track { background:rgba(0,0,0,0.08); }

/* Hero */
.landing-hero { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 40px 60px; background:radial-gradient(ellipse at 50% -10%,rgba(227,25,55,0.20) 0%,rgba(227,25,55,0.05) 40%,transparent 70%); position:relative; }
.landing-hero::after { display:none; }
.landing-top-actions { position:absolute; top:24px; right:24px; z-index:3; display:flex; align-items:center; gap:12px; max-width:calc(100% - 48px); }
.landing-login-btn { background:var(--accent); border:none; border-radius:14px; color:#fff; font-size:22px; font-weight:700; padding:0 30px; height:60px; cursor:pointer; transition:background 0.2s,transform 0.1s; }
.landing-login-btn:hover { background:var(--accent2); }
.landing-login-btn:active { transform:scale(0.98); }
#landing-tap-spinner { position:fixed; inset:0; z-index:29; display:none; background:rgba(5,5,5,0.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); align-items:flex-start; justify-content:center; padding-top:25vh; }
#landing-tap-spinner.show { display:flex; }
#signing-in-overlay { position:fixed; inset:0; z-index:190; display:none; background:var(--bg); flex-direction:column; align-items:center; justify-content:center; gap:24px; }
#signing-in-overlay .signing-in-text { font-size:var(--fs-lg); font-weight:700; color:var(--text2); letter-spacing:0.3px; }
.landing-language-wrap { position:relative; display:flex; align-items:center; flex:0 0 auto; }
.landing-language-btn { min-width:220px; background:rgba(20,20,20,0.98); border:1px solid rgba(255,255,255,0.18); border-radius:14px; color:var(--text); font-size:20px; font-weight:700; height:64px; padding:0 52px 0 20px; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,0.22); display:flex; align-items:center; justify-content:flex-start; gap:14px; position:relative; }
.landing-language-btn:hover { border-color:rgba(255,255,255,0.32); }
.landing-language-btn:active { transform:scale(0.98); }
.landing-language-wrap::after { content:''; position:absolute; right:18px; width:10px; height:10px; border-right:2px solid rgba(255,255,255,0.6); border-bottom:2px solid rgba(255,255,255,0.6); transform:translateY(-3px) rotate(45deg); pointer-events:none; }
.landing-language-flag,
.landing-language-option-flag { width:32px; height:24px; border-radius:4px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,0.16); background-repeat:no-repeat; background-position:center; background-size:100% 100%; flex:0 0 auto; }
.landing-language-flag { pointer-events:none; }
.landing-language-menu { position:absolute; top:calc(100% + 10px); left:0; right:0; max-height:min(620px,calc(100vh - 130px)); overflow-y:auto; display:none; flex-direction:column; gap:6px; padding:8px; background:rgba(12,12,12,0.98); border:1px solid rgba(255,255,255,0.14); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,0.35); }
.landing-language-menu.open { display:flex; }
.landing-language-option { border:none; background:transparent; color:var(--text); border-radius:12px; min-height:60px; padding:0 16px; display:flex; align-items:center; gap:14px; cursor:pointer; font-size:20px; font-weight:700; text-align:left; }
.landing-language-option:hover, .landing-language-option.active { background:rgba(255,255,255,0.08); }
.landing-language-option-flag { box-shadow:0 0 0 1px rgba(255,255,255,0.12); }
.ci-icon { width:1em; height:1em; display:inline-block; flex-shrink:0; fill:currentColor; }
.ci-icon.sm { width:18px; height:18px; }
.ci-icon.md { width:20px; height:20px; }
.ci-icon.lg { width:24px; height:24px; }
.with-icon { display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.with-icon .ci-icon { width:20px; height:20px; }
.landing-hero img { height:94px; margin-bottom:36px; }
.landing-tagline { font-size:76px; font-weight:800; letter-spacing:-1.7px; line-height:1.1; margin-bottom:22px; color:var(--text); }
.landing-subtitle { font-size:40px; color:var(--text3); max-width:920px; line-height:1.5; overflow-wrap:anywhere; text-wrap:balance; flex-shrink:0; }

/* How-it-works */
.landing-how { width:100%; max-width:1140px; padding:26px 40px 64px; text-align:center; }
.landing-section-title { font-size:48px; font-weight:800; margin-bottom:14px; letter-spacing:-0.6px; }
.landing-section-sub { font-size:24px; color:var(--text3); margin-bottom:42px; line-height:1.5; }
.landing-product { width:100%; max-width:960px; padding:0 40px 48px; text-align:center; }
.landing-product-copy { font-size:22px; color:var(--text2); line-height:1.65; max-width:860px; margin:0 auto; }
.landing-pricing { width:100%; max-width:960px; padding:0 40px 56px; text-align:center; }
.landing-pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:28px; }
.landing-price-card { border:1px solid var(--border2); border-radius:22px; padding:28px 24px; background:rgba(255,255,255,0.02); text-align:left; display:flex; flex-direction:column; gap:12px; }
.landing-price-card.premium { border-color:rgba(227,25,55,0.38); background:linear-gradient(150deg,rgba(227,25,55,0.08) 0%,rgba(255,255,255,0.015) 100%); }
.landing-price-card h3 { font-size:28px; font-weight:800; margin:0; }
.landing-price-card .price-line { font-size:34px; font-weight:900; color:var(--text); line-height:1.1; }
.landing-price-card .price-sub { font-size:18px; color:var(--text3); }
.landing-price-card ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin:8px 0 0; padding:0; }
.landing-price-card li { font-size:18px; color:var(--text2); display:flex; gap:10px; align-items:flex-start; }
.landing-price-card li::before { content:'\2713'; color:#32d74b; font-weight:900; flex-shrink:0; }
.landing-legal-note { width:100%; max-width:960px; padding:0 40px 24px; text-align:center; font-size:17px; color:var(--text3); line-height:1.6; }
.landing-business-footer { width:100%; max-width:960px; padding:0 40px 12px; text-align:center; font-size:16px; color:var(--text3); line-height:1.6; }
.how-steps { display:flex; gap:48px; justify-content:center; }
.how-step { flex:1; max-width:320px; text-align:center; }
.step-num { width:76px; height:76px; border-radius:50%; background:var(--accent-bg); border:2px solid var(--accent-border); color:var(--accent2); font-size:33px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-bottom:20px; }
.step-label { font-size:30px; font-weight:700; margin-bottom:12px; color:var(--text); }
.step-desc { font-size:23px; color:var(--text3); line-height:1.55; }

/* Connect card */
.landing-connect { position:fixed; inset:0; z-index:30; display:none; align-items:flex-start; justify-content:center; padding:20px 24px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-x:none; background:rgba(5,5,5,0.72); }
.landing-connect.open { display:flex; }
.onboarding-overlay { z-index:220; align-items:flex-start !important; padding-top:20px !important; }
.onboarding-overlay.open { display:flex; }
.onboarding-shell { width:620px; max-height:calc(100dvh - 40px); overflow-y:auto; }
.onboarding-title { font-size:var(--fs-xl); font-weight:800; margin-bottom:10px; }
.onboarding-progress { display:flex; gap:10px; margin:18px 0 14px; }
.onboarding-progress-step { flex:1; height:8px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; }
.onboarding-progress-step.active { background:rgba(227,25,55,0.22); }
.onboarding-progress-step.done { background:rgba(34,197,94,0.22); }
.onboarding-progress-step span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center; background:var(--accent); }
.onboarding-progress-step.active span, .onboarding-progress-step.done span { transform:scaleX(1); }
.onboarding-stage-label { color:var(--text2); font-size:var(--fs-xs); font-weight:800; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px; }
.onboarding-panel { border:2px solid var(--border2); border-radius:22px; padding:18px; background:rgba(255,255,255,0.03); }
.onboarding-panel h3 { margin:0 0 12px; font-size:var(--fs-xl); font-weight:800; }
.onboarding-panel p { margin:0 0 14px; color:var(--text3); line-height:1.5; }
.onboarding-checklist { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
.onboarding-check { padding:14px 16px; border-radius:16px; border:1px solid var(--border2); background:rgba(255,255,255,0.03); }
.onboarding-check strong { display:block; font-size:var(--fs-sm); margin-bottom:6px; }
.onboarding-check span { color:var(--text3); font-size:var(--fs-xs); line-height:1.5; }
.onboarding-actions { position:sticky; bottom:0; display:flex; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; background:linear-gradient(180deg,rgba(9,12,17,0),rgba(9,12,17,0.94) 34%); flex-wrap:wrap; }
.onboarding-main-actions { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width: 700px) {
  .onboarding-shell { width:100%; }
  .landing-top-actions { position:static; margin-bottom:24px; flex-wrap:wrap; justify-content:center; }
  .landing-hero { padding-top:36px; }
  .landing-language-btn, .landing-login-btn { width:min(100%,320px); }
  .landing-pricing-grid { grid-template-columns:1fr; }
  .landing-product, .landing-pricing, .landing-legal-note, .landing-business-footer { padding-left:22px; padding-right:22px; }
}
.login-card { background:rgba(22,22,22,0.96); border:1px solid var(--border2); border-radius:18px; padding:24px 24px 18px; width:100%; box-shadow:0 22px 50px rgba(0,0,0,0.38); backdrop-filter:blur(16px); max-height:calc(100dvh - 40px); overflow-y:auto; position:relative; }

/* ── Login dropdown (replaces modal overlay) ── */
#login-backdrop { display:none; }
#login-card { position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000; display:block !important; padding:0 !important; background:transparent; transform:translateY(-110%); transition:transform 0.38s cubic-bezier(0.4,0,0.2,1); pointer-events:none; }
#login-card.open { transform:translateY(0); pointer-events:auto; background:rgba(0,0,0,0.55); }
/* Panel area gets the dark glass background */
.login-dropdown-inner { width:100%; padding:28px 60px 36px; position:relative; background:rgba(10,10,12,0.97); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); border-bottom:1px solid rgba(255,255,255,0.1); box-shadow:0 24px 64px rgba(0,0,0,0.65); box-sizing:border-box; }
/* Logo row — centered */
.login-drop-logo-row { display:flex; justify-content:center; align-items:center; margin-bottom:24px; }
.login-drop-logo-bloom {
  display:flex; align-items:center; justify-content:center;
  width:min(420px,72%); height:110px; margin:0;
  background:radial-gradient(ellipse at 50% 55%,rgba(227,25,55,0.26) 0%,rgba(227,25,55,0.11) 40%,rgba(227,25,55,0.035) 62%,transparent 78%);
}
.login-drop-logo-img { height:64px; width:auto; display:block; object-fit:contain; filter:drop-shadow(0 0 14px rgba(227,25,55,0.28)) drop-shadow(0 8px 22px rgba(0,0,0,0.55)); }
html.light-mode .login-drop-logo-bloom {
  background:radial-gradient(ellipse at 50% 55%,rgba(227,25,55,0.14) 0%,rgba(227,25,55,0.06) 44%,rgba(227,25,55,0.02) 62%,transparent 76%);
}
html.light-mode .login-drop-logo-img { filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.10)); }
/* Close button — positioned relative to #login-card (position:fixed full-width) → sits at true right edge */
/* Standard dark-red modal close button (dark red bg + red border) */
.modal-close-red { width:40px; height:40px; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; line-height:1; flex-shrink:0; transition:background 0.15s,border-color 0.15s; }
.modal-close-red:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
/* Trial-ending reminder modal */
#trial-reminder-modal { position:fixed; inset:0; z-index:2200; display:none; align-items:center; justify-content:center; padding:24px; }
#trial-reminder-modal.open { display:flex; }
#trial-reminder-modal .trial-reminder-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(4px); }
#trial-reminder-modal .trial-reminder-card { position:relative; z-index:1; width:min(460px,100%); background:var(--surface,#161616); border:1px solid var(--border2); border-radius:22px; padding:40px 32px 32px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,0.6); box-sizing:border-box; }
#trial-reminder-modal .trial-reminder-close { position:absolute; top:16px; right:16px; }
#trial-reminder-modal .trial-reminder-logo img { height:40px; margin-bottom:22px; }
#trial-reminder-modal h2 { font-size:30px; font-weight:800; letter-spacing:-0.02em; margin:0 0 10px; color:var(--text); }
#trial-reminder-modal p { font-size:17px; color:var(--text2); margin:0 0 28px; }
#trial-reminder-modal .trial-reminder-actions { display:flex; gap:12px; }
#trial-reminder-modal .trial-reminder-actions button { flex:1; height:58px; border-radius:14px; font-size:16px; font-weight:800; cursor:pointer; transition:background 0.15s,border-color 0.15s; box-sizing:border-box; }
#trial-reminder-modal .trial-reminder-continue { background:transparent; border:1.5px solid var(--border2); color:var(--text); }
#trial-reminder-modal .trial-reminder-continue:hover { border-color:var(--accent); }
#trial-reminder-modal .trial-reminder-premium { background:var(--accent); border:1.5px solid var(--accent); color:#fff; }
#trial-reminder-modal .trial-reminder-premium:hover { background:var(--accent2); border-color:var(--accent2); }
#trial-expired-panel .tx-playlists-note { font-weight:700; color:var(--text); }
.login-dropdown-close { position:absolute; top:20px; right:24px; width:68px; height:68px; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); border-radius:14px; color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s,border-color 0.15s; padding:0; line-height:1; flex-shrink:0; z-index:1; }
.login-dropdown-close:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
/* 3-column grid: form | QR | secondary */
#login-card .login-layout { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; align-items:center; margin-top:0; }
#login-card:not(.auth-qr-enabled) .login-layout { grid-template-columns:1fr 1fr; }
#login-card .login-form-panel { display:flex; flex-direction:column; align-items:stretch; padding:0 40px 0 0; flex:none; }
/* Form heading & labels — larger */
#login-card .login-form-sub { max-width:none; margin-bottom:20px; font-size:34px; font-weight:800; }
#login-card .field label { font-size:var(--fs-md); letter-spacing:0.03em; }
/* Taller inputs */
#login-card .field input { height:var(--input-h); font-size:var(--fs-md); padding:0 18px; max-width:none; border-radius:12px; }
/* Fields stacked vertically in the left column */
.login-fields-col { display:flex; flex-direction:column; gap:16px; }
.login-fields-col .field { margin-bottom:0; max-width:none; width:100%; }
/* Submit button — extra top gap to separate from fields */
#login-card .login-drop-submit { width:230px; min-width:230px; height:66px; border-radius:12px; margin:8px auto 0; align-self:center; padding:0 36px; font-size:22px; }
/* Center slot — always in DOM; inner panels show/hide via JS */
.login-qr-slot { position:relative; display:none; align-items:center; justify-content:center; border-left:1px solid rgba(255,255,255,0.1); border-right:1px solid rgba(255,255,255,0.1); padding:0 32px; min-height:200px; }
#login-card.auth-qr-enabled .login-qr-slot { display:flex; }
.login-auth-or { position:absolute; left:0; top:50%; transform:translate(-50%,-50%); z-index:2; padding:10px 0; background:rgba(22,22,22,0.98); color:rgba(255,255,255,0.55); font-size:15px; font-weight:800; letter-spacing:0.08em; line-height:1; pointer-events:none; }
html.light-mode .login-auth-or { background:#f4f4f5; color:rgba(0,0,0,0.45); }
.login-qr-slot .auth-secondary-panel { flex-direction:column; align-items:center; width:100%; }
/* QR canvas containers — sized to fill the white image-wrap */
#login-qr-canvas, #signup-qr-canvas { width:220px; height:220px; display:flex; align-items:center; justify-content:center; }
#login-qr-canvas canvas,
#login-qr-canvas img,
#login-qr-canvas table,
#signup-qr-canvas canvas,
#signup-qr-canvas img,
#signup-qr-canvas table { width:220px !important; height:220px !important; display:block; border-radius:4px; }
/* Right slot */
.login-right-slot { display:flex; align-items:center; justify-content:center; padding:0 32px; }
.login-right-slot .auth-secondary-panel { flex-direction:column; align-items:center; }
.login-right-slot .auth-secondary-content { flex-direction:column; }
/* Override the old #login-card .login-card max-height rule */
#login-card .login-card { max-height:none; }
html.auth-scroll-lock,
body.auth-scroll-lock { overflow:hidden !important; overscroll-behavior:none !important; width:100%; height:100%; }
@media (max-width: 1023px) {
  #login-card.open { overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-x:none !important; overscroll-behavior-y:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
  #login-card .login-dropdown-inner { max-width:100%; overflow-x:hidden; padding-left:20px; padding-right:20px; box-sizing:border-box; }
  #login-card .login-layout { display:flex !important; flex-direction:column !important; grid-template-columns:unset !important; align-items:stretch; width:100%; min-width:0; }
  #login-card .login-form-panel { padding:0 !important; width:100%; min-width:0; }
  #login-card .login-qr-slot { border-left:none; border-right:none; border-top:1px solid rgba(255,255,255,0.1); padding:24px 0; width:100%; min-width:0; box-sizing:border-box; }
  #login-card .login-auth-or { left:50%; top:0; transform:translate(-50%,-50%); padding:0 14px; }
  #login-card .login-right-slot { padding:0; width:100%; min-width:0; }
  #login-card .auth-secondary-content { flex-direction:column !important; width:100%; gap:16px; }
  #login-card .login-fields-col,
  #login-card .field,
  #login-card .login-drop-submit,
  #auth-secondary-btn,
  #auth-already-signin-btn { max-width:100%; width:100%; min-width:0 !important; box-sizing:border-box; }
  #login-card .login-qr-copy,
  #login-card .auth-secondary-copy { max-width:100%; overflow-wrap:anywhere; }
  #login-card .login-qr-image-wrap { width:min(244px,100%); max-width:100%; box-sizing:border-box; }
  #auth-password-field .password-policy { left:0; right:auto; top:auto; bottom:calc(100% + 8px); width:100%; min-width:0; max-width:none; white-space:normal; }
  #auth-password-field .policy-item { white-space:normal; }
  #email-verify-modal.open,
  #email-verified-modal.open { overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-x:none !important; overscroll-behavior-y:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; align-items:flex-start; padding:20px 16px; box-sizing:border-box; width:100%; max-width:100vw; }
  #email-verify-modal .auth-flow-modal-card,
  #email-verified-modal .auth-flow-modal-card,
  #email-verify-modal .login-card,
  #email-verified-modal .login-card { width:100%; max-width:100%; overflow-x:hidden; box-sizing:border-box; }
  #email-verify-modal .auth-flow-modal-card { padding:40px 24px 32px; }
  #email-verify-modal .auth-flow-modal-email { white-space:normal; overflow:visible; text-overflow:unset; word-break:break-word; }
}
#email-verify-modal,#email-verified-modal { z-index:2100; }
#email-verify-modal.open,#email-verified-modal.open { display:flex; }
#transcode-premium-modal { z-index:100002; }
#transcode-premium-modal.open { display:flex; }
#stripe-checkout-panel { position:absolute; inset:0; z-index:11; overflow:hidden; background:var(--bg,#090c11); display:none; flex-direction:column; align-items:stretch; border-radius:20px; padding:0; box-sizing:border-box; }
#stripe-checkout-panel.open { display:flex; }
#stripe-checkout-panel.checkout-over-gate { position:fixed; inset:0; z-index:100001; border-radius:0; }
/* Cookie consent — fixed at bottom of main content */
#cookie-consent-banner { position:fixed; bottom:0; left:0; right:0; z-index:1900; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:rgba(14,14,14,0.97); border-top:1px solid var(--border2); box-shadow:0 -8px 32px rgba(0,0,0,0.45); backdrop-filter:blur(12px); box-sizing:border-box; }
#cookie-consent-banner.hidden { display:none; }
#cookie-consent-banner .cookie-consent-text { flex:1; min-width:0; font-size:var(--fs-sm); line-height:1.5; color:var(--text2); }
#cookie-consent-banner .cookie-consent-text a { color:var(--text); text-decoration:underline; }
#cookie-consent-banner .cookie-consent-actions { flex-shrink:0; display:flex; align-items:center; gap:10px; }
#cookie-consent-banner .cookie-consent-ok { height:var(--btn-h); min-width:96px; padding:0 28px; background:var(--accent); border:none; border-radius:var(--radius); color:#fff; font-size:var(--fs-md); font-weight:700; cursor:pointer; transition:background 0.15s; }
#cookie-consent-banner .cookie-consent-ok:hover { background:var(--accent2); }
#cookie-consent-banner .cookie-consent-reject { height:var(--btn-h); min-width:96px; padding:0 20px; background:transparent; border:1px solid var(--border2); border-radius:var(--radius); color:var(--text2); font-size:var(--fs-md); font-weight:700; cursor:pointer; transition:background 0.15s,border-color 0.15s,color 0.15s; }
#cookie-consent-banner .cookie-consent-reject:hover { background:rgba(255,255,255,0.06); border-color:var(--border); color:var(--text); }
html.desktop-mode #cookie-consent-banner .cookie-consent-reject { height:48px; min-width:88px; padding:0 18px; font-size:var(--fs-sm); }
html.desktop-mode #cookie-consent-banner { padding:12px 24px; gap:20px; }
html.desktop-mode #cookie-consent-banner .cookie-consent-text { font-size:var(--fs-sm); }
html.desktop-mode #cookie-consent-banner .cookie-consent-ok { height:48px; min-width:88px; padding:0 22px; font-size:var(--fs-sm); }
html.light-mode #cookie-consent-banner { background:rgba(245,245,247,0.97); }
/* In-place info pages: Learn More / footer links replace the landing content in
   the same scroll area (not a modal / not full screen). */
.info-page-hidden-sibling { display:none !important; }
.landing-scroll-body.info-page-active,
.app-landing-scroll.info-page-active { overflow:hidden; align-items:stretch; }
.info-page-inline-frame { flex:1 1 auto; align-self:stretch; width:100%; min-height:100%; height:100%; border:0; display:none; background:var(--bg,#090c11); }
.info-page-inline-frame.is-open { display:block; }
body.checkout-over-trial-gate #trial-expired-panel.open { display:none !important; }
body.checkout-over-trial-gate.trial-locked { overflow:auto; }
html.light-mode #stripe-checkout-panel { background:var(--bg,#f5f5f7); }
.scp-embed-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 28px 14px; flex-shrink:0; border-bottom:1px solid var(--border2); }
html.light-mode .scp-embed-header h1 { color:var(--text,#111); }
.scp-embed-header h1 { font-size:28px; font-weight:800; margin:0; line-height:1.2; }
.scp-test-badge { font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#fbbf24; border:1px solid rgba(251,191,36,0.35); border-radius:999px; padding:4px 10px; }
.scp-skip { min-height:46px; background:transparent; border:1px solid var(--border2); color:var(--text2); font-size:16px; font-weight:700; cursor:pointer; border-radius:12px; padding:8px 18px; }
.scp-skip:hover { border-color:var(--text2); color:var(--text); }
.scp-embed-body { flex:1; min-height:0; overflow-y:auto; padding:20px 28px 32px; display:flex; flex-direction:column; align-items:stretch; }
#stripe-checkout-panel:not(.phone-handoff-only) .scp-embed-body { padding-bottom:calc(max(55dvh,420px) + var(--scp-keyboard-overlap,0px)); scroll-padding-top:max(24px,8dvh); scroll-padding-bottom:calc(55dvh + var(--scp-keyboard-overlap,0px)); }
#stripe-checkout-panel.keyboard-open .scp-embed-body { scroll-behavior:smooth; }
.scp-trial-note { width:min(720px,100%); margin:0 0 14px; padding:12px 14px; border-radius:12px; background:rgba(227,25,55,0.10); border:1px solid rgba(227,25,55,0.28); color:var(--text2); font-size:14px; font-weight:600; line-height:1.45; text-align:left; box-sizing:border-box; }
html.light-mode .scp-trial-note { background:rgba(227,25,55,0.08); border-color:rgba(227,25,55,0.22); color:var(--text); }
#stripe-embedded-checkout { width:100%; max-width:none; min-height:620px; flex:1; }
#stripe-embedded-checkout { scroll-margin-top:max(24px,8dvh); }
#stripe-embedded-checkout iframe { width:100% !important; min-height:620px; }
#stripe-checkout-panel.phone-handoff-only #stripe-embedded-checkout { display:none; }
.scp-loading { color:var(--text2); font-size:18px; padding:48px 0; text-align:center; }
.scp-error { color:#fca5a5; font-size:17px; padding:20px; text-align:center; max-width:760px; margin:0 auto; }
.scp-phone-handoff { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:32px; margin:0 0 22px; padding:26px 30px; border:1px solid rgba(227,25,55,.38); border-radius:22px; background:linear-gradient(145deg,rgba(227,25,55,.12),rgba(255,255,255,.025)); box-sizing:border-box; }
.scp-phone-handoff[hidden] { display:none; }
.scp-phone-handoff-copy { text-align:left; }
.scp-phone-handoff h2 { margin:0 0 10px; color:var(--text); font-size:34px; line-height:1.15; }
.scp-phone-handoff p { margin:0 0 16px; max-width:680px; color:var(--text2); font-size:18px; line-height:1.55; }
.scp-phone-handoff-status { color:var(--text2); font-size:16px; font-weight:700; line-height:1.45; }
.scp-phone-handoff-status.success { color:#4caf82; }
.scp-phone-handoff-status.error { color:#fca5a5; }
.scp-phone-qr-shell { width:min(316px,100%); padding:12px; border-radius:20px; background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.34); box-sizing:border-box; }
#scp-phone-qr { width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
#scp-phone-qr canvas,#scp-phone-qr img { display:block; max-width:100%; width:100% !important; height:auto !important; }
@media (max-width:900px) {
  .scp-embed-header { padding:16px 18px 12px; }
  .scp-embed-header h1 { font-size:23px; }
  .scp-embed-body { padding:16px 14px 26px; }
  .scp-phone-handoff { grid-template-columns:1fr; justify-items:center; padding:24px 18px; text-align:center; }
  .scp-phone-handoff-copy { text-align:center; }
  .scp-phone-handoff h2 { font-size:30px; }
  .scp-phone-handoff p { font-size:17px; }
}
#settings-panel-account.show-cancel-view { display:flex; flex-direction:column; padding:0; background:var(--bg,#090c11); overflow:hidden; }
html.light-mode #settings-panel-account.show-cancel-view { background:var(--bg,#f5f5f7); }
#settings-account-cancel-view { display:none; flex:1; min-height:0; flex-direction:column; width:100%; }
#settings-panel-account.show-cancel-view #settings-account-main-view { display:none !important; }
#settings-panel-account.show-cancel-view #settings-account-cancel-view { display:flex; }
.settings-billing-shell { flex:1; min-height:0; display:flex; flex-direction:column; width:100%; }
.settings-billing-body { width:100%; max-width:720px; align-items:stretch !important; }
.sbp-card { background:var(--surface,#161616); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:24px 22px; margin-bottom:20px; }
html.light-mode .sbp-card { background:#fff; border-color:rgba(0,0,0,0.08); }
.sbp-email { font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; word-break:break-all; }
.sbp-plan { font-size:22px; font-weight:800; color:var(--text); margin:0 0 8px; }
.sbp-renewal { font-size:14px; color:var(--text2); line-height:1.5; margin:0 0 4px; }
.sbp-status { font-size:13px; font-weight:700; color:#fbbf24; margin-top:8px; }
.sbp-copy { font-size:15px; line-height:1.6; color:var(--text2); margin:0 0 20px; text-align:center; max-width:560px; }
.sbp-actions { display:flex; flex-direction:column; gap:12px; width:100%; max-width:420px; margin:0 auto; }
.sbp-cancel-btn { width:100%; height:58px; background:var(--btn-dark-red,#b3122a); border:2px solid var(--btn-red-border,#e31937); border-radius:14px; color:#fff; font-size:17px; font-weight:800; cursor:pointer; }
.sbp-cancel-btn:hover { background:var(--btn-dark-red-hover,#cc1530); }
.sbp-cancel-btn:disabled { opacity:.6; cursor:default; }
.sbp-keep-btn { width:100%; height:48px; }
.sbp-secondary { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px; padding-top:20px; border-top:1px solid var(--border2); width:100%; max-width:720px; }
.sbp-link-btn { background:transparent; border:1px solid var(--border2); color:var(--text2); font-size:14px; font-weight:600; cursor:pointer; border-radius:10px; padding:10px 16px; }
.sbp-link-btn:hover { color:var(--text); border-color:var(--text2); }
.sbp-guest-copy { font-size:15px; color:var(--text2); line-height:1.6; margin:0 0 24px; text-align:center; max-width:480px; }
#stripe-embedded-portal { width:100%; max-width:720px; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.auth-flow-modal-card { max-width:480px; width:calc(100% - 40px); padding:32px 28px 24px; text-align:center; }
.auth-flow-modal-card h2 { font-size:26px; font-weight:800; margin:0 0 12px; }
.auth-flow-modal-card p { color:var(--text2); font-size:15px; line-height:1.55; margin:0 0 22px; }
.auth-flow-modal-email { font-weight:700; color:var(--text); word-break:break-all; }
.auth-flow-modal-actions { display:flex; flex-direction:column; gap:10px; }
.auth-flow-modal-actions .connect-btn { width:100%; margin:0; }
.auth-flow-modal-ghost { background:transparent; border:1px solid var(--border2); color:var(--text2); border-radius:12px; padding:12px 18px; font-size:15px; font-weight:600; cursor:pointer; }
.auth-flow-modal-ghost:hover { border-color:var(--text2); color:var(--text); }
.auth-email-modal-card { max-width:560px; text-align:center; padding:40px 40px 36px; }
/* Verify-email modal: vertically centered, sized to match the app's other modals */
#email-verify-modal { align-items:center; padding:20px 24px; }
#email-verified-modal { align-items:center; padding:20px 24px; }
/* margin:auto keeps the card vertically centered but still scrollable if it overflows */
#email-verified-modal .auth-flow-modal-card { margin:auto; }
#email-verify-modal .auth-flow-modal-card { max-width:640px; padding:64px 44px 56px; }
#email-verify-modal .login-form-logo { margin-bottom:22px; }
#email-verify-modal .login-form-logo img { height:72px; }
#email-verify-modal h2 { font-size:var(--fs-xl); margin:0 0 18px; }
#email-verify-modal p { font-size:var(--fs-md); line-height:1.6; margin:0 0 30px; }
/* Customer email on its own line so it always shows on one line */
#email-verify-modal .auth-flow-modal-email { display:block; margin:10px auto; word-break:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#email-verify-modal .auth-flow-modal-ghost { font-size:var(--fs-md); font-weight:700; color:#fff; padding:18px 26px; border-radius:14px; background:var(--btn-dark-red,#b3122a); border:2px solid var(--btn-red-border,#e31937); }
#email-verify-modal .auth-flow-modal-ghost:hover { background:var(--btn-dark-red-hover,#cc1530); border-color:var(--accent); color:#fff; }
#email-verify-modal .auth-flow-modal-ghost:disabled { opacity:.55; cursor:default; }
html.desktop-mode #email-verify-modal .login-form-logo img { height:56px; }
/* Waiting-for-verification spinner (hidden once the user is verified) */
.verify-wait-spinner { display:flex; align-items:center; justify-content:center; margin:0 0 24px; }
.verify-wait-spinner.hidden { display:none; }
.verify-wait-ring { width:46px; height:46px; border:5px solid rgba(227,25,55,0.18); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
.premium-modal-copy { font-size:var(--fs-sm); color:var(--text3); line-height:1.6; margin-bottom:24px; text-align:center; }
.premium-modal-actions { display:flex; justify-content:center; gap:12px; }
.premium-modal-actions .connect-btn,
.premium-modal-actions .signup-btn { min-width:160px; }
.login-card-top { position:absolute; top:24px; right:24px; z-index:1; }
.login-close-btn { background:transparent; border:1px solid var(--border2); border-radius:12px; color:#fff; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:border-color 0.2s,color 0.2s,background 0.2s; }
.login-close-btn svg { width:20px; height:20px; }
@media (max-width:600px) {
  .login-close-btn { width:54px; height:54px; border-radius:14px; }
  .login-close-btn svg { width:26px; height:26px; }
}
.login-close-btn:hover { border-color:var(--accent); color:var(--text); background:var(--accent-bg); }
.login-form-logo { display:flex; align-items:center; justify-content:center; margin-bottom:10px; margin-top:12px; }
.login-form-logo img { height:52px; width:auto; display:block; object-fit:contain; }
.login-form-sub { font-size:22px; color:var(--text); text-align:left; margin-bottom:16px; font-weight:700; letter-spacing:-0.3px; width:100%; max-width:360px; }
.login-layout { display:flex; gap:0; align-items:stretch; margin-top:14px; }
.login-form-panel { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; padding:0 16px; }
.login-form-actions { display:flex; flex-direction:column; gap:12px; margin-top:8px; align-items:center; width:100%; max-width:360px; }
.login-form-actions .connect-btn,
.login-form-actions .signup-btn { margin-top:0; width:100%; max-width:360px; }
.login-divider { position:relative; margin:6px 0 2px; padding-top:18px; text-align:center; }
.login-divider::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); }
.login-divider span { display:inline-block; padding:0 12px; background:rgba(22,22,22,0.96); color:var(--text3); font-size:12px; font-weight:800; letter-spacing:1.4px; }
.field { margin-bottom:16px; width:100%; max-width:360px; }
.field label { display:block; font-size:15px; color:var(--text2); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.6px; font-weight:600; }
.field input { width:100%; max-width:360px; background:var(--surface2); border:1px solid var(--border2); border-radius:10px; color:var(--text); font-size:18px; padding:12px 14px; height:auto; outline:none; transition:border-color 0.2s; }
.field input:focus { border-color:var(--accent); }
.field input::placeholder { color:var(--text3); }
.login-qr-panel { flex:1 1 0; min-width:0; padding:18px; border:1px solid var(--border2); border-radius:18px; background:rgba(255,255,255,0.03); text-align:center; }
.login-qr-title { font-size:22px; font-weight:800; color:var(--text); margin-bottom:18px; }
.login-qr-copy { font-size:25px; line-height:1.42; color:var(--text3); margin:0 auto 14px; max-width:none; width:100%; text-align:center; }
.login-qr-image-wrap { position:relative; width:244px; height:244px; margin:18px auto 12px; border-radius:18px; padding:12px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,0.16); }
.qr-scanned-overlay { display:none; position:absolute; inset:0; border-radius:18px; background:rgba(255,255,255,0.82); align-items:center; justify-content:center; z-index:3; }
.qr-scanned-overlay.show { display:flex; }
.qr-scanned-ring { width:78px; height:78px; border:8px solid rgba(227,25,55,0.18); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
.login-qr-image { width:100%; height:100%; object-fit:contain; display:block; }
.login-qr-status { font-size:12px; color:var(--text3); min-height:18px; }
.login-qr-refresh-btn { height:44px; min-width:132px; padding:0 18px; border-radius:10px; border:1px solid var(--border2); background:rgba(255,255,255,0.06); color:var(--text2); font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; transition:background 0.15s,color 0.15s,border-color 0.15s; }
.login-qr-refresh-btn:hover { background:var(--accent-bg); border-color:var(--accent-border); color:var(--text); }
.login-qr-refresh-btn .ci-icon { width:16px; height:16px; }
.auth-secondary-panel { display:none; flex:1 1 0; min-width:0; flex-direction:row; }
.auth-secondary-panel.visible { display:flex; }
.auth-secondary-divider { width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,0.18),transparent); margin:0 28px; flex-shrink:0; }
.auth-secondary-content { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; flex:1 1 0; min-width:0; text-align:center; }
.auth-secondary-copy { font-size:30px; font-weight:800; color:var(--text); text-align:center; letter-spacing:-0.3px; }
.auth-secondary-content .connect-btn { margin-top:0; width:auto; min-width:160px; }
#auth-secondary-btn,
#auth-already-signin-btn { width:230px; min-width:230px; height:66px; padding:0 36px; font-size:22px; border-radius:12px; }
.connect-btn { width:100%; background:var(--accent); border:none; border-radius:10px; color:white; font-size:18px; font-weight:600; padding:14px; height:auto; cursor:pointer; margin-top:8px; transition:background 0.2s,transform 0.1s; }
.connect-btn:hover { background:var(--accent2); }
.connect-btn:active { transform:scale(0.98); }
.connect-btn:disabled { background:var(--surface3); color:var(--text3); cursor:default; }
.connect-btn.btn-error { background:#c0182e; }
.signup-btn { flex:1; background:transparent; border:1px solid var(--border2); border-radius:10px; color:var(--text); font-size:18px; font-weight:600; padding:14px; cursor:pointer; transition:border-color 0.2s,background 0.2s,transform 0.1s; }
.signup-btn:hover { border-color:var(--accent); background:var(--accent-bg); }
.signup-btn:active { transform:scale(0.98); }
.error-msg { display:none; color:#ff5f73; font-size:15px; font-weight:700; line-height:1.4; text-align:center; margin-top:14px; min-height:22px; }
.field.field-error label { color:#ff3333; }
.field.field-error input { border-color:#ff3333; }
#auth-password-field { position:relative; z-index:2; }
.password-policy { position:absolute; z-index:30; left:calc(100% + 16px); top:38px; width:max-content; min-width:220px; max-width:260px; margin:0; background:rgba(18,18,20,0.98); border:1px solid var(--border2); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; pointer-events:none; box-shadow:0 12px 32px rgba(0,0,0,0.42); }
#login-card .login-form-panel,
#login-card .login-fields-col { overflow:visible; }
.policy-item { display:flex; align-items:center; gap:8px; font-size:16px; color:var(--text3); transition:color 0.2s; white-space:nowrap; }
.policy-item.met { color:#4caf82; }
.policy-icon { width:18px; height:18px; flex-shrink:0; transition:opacity 0.2s; }
@media (max-width: 820px) {
  .login-layout { flex-direction:column; align-items:stretch; }
  .login-form-panel { width:100%; }
  .login-qr-panel { width:100%; flex:1 1 auto; }
  .auth-secondary-panel.visible { flex-direction:column; align-items:center; margin-top:16px; }
  .auth-secondary-divider { width:80%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent); margin:0 0 16px; }
  .auth-secondary-content { width:100%; flex-direction:row; gap:12px; align-items:center; }
}
@media (max-width: 700px) {
  #login-screen .landing-main-content { transform:translateY(18px); }
}

/* CTA */
.landing-cta { width:100%; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; padding:64px 40px 62px; }
.add-playlist-btn { background:var(--accent); border:none; border-radius:14px; color:white; font-size:24px; font-weight:700; padding:0 52px; height:72px; cursor:pointer; transition:background 0.2s,transform 0.1s,opacity 0.3s; letter-spacing:-0.3px; }
#app-add-playlist-btn, #app-landing-signin-cta { transition:background 0.2s,transform 0.1s,opacity 0.3s,border-color 0.2s,box-shadow 0.2s,filter 0.2s; }
.add-playlist-btn:hover { background:var(--accent2); }
.add-playlist-btn:active { transform:scale(0.97); }
.landing-signin-cta { background:rgba(255,255,255,0.10); border:2px solid rgba(255,255,255,0.46); border-radius:14px; color:#fff; font-size:22px; font-weight:700; padding:0 40px; height:68px; cursor:pointer; transition:border-color 0.2s,background 0.2s,transform 0.1s,box-shadow 0.2s; letter-spacing:-0.3px; box-shadow:0 6px 22px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08); box-sizing:border-box; }
.landing-signin-cta:hover { border-color:rgba(255,255,255,0.62); background:rgba(255,255,255,0.15); box-shadow:0 8px 26px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10); }
.landing-signin-cta:active { transform:scale(0.97); }
/* Landing CTAs: subtle 3px corner radius (Sign In, Learn more, Free trial). */
#app-landing-panel .landing-cta .add-playlist-btn,
#app-landing-panel .landing-cta .landing-learn-more-btn,
#app-landing-panel .app-landing-signin-top,
#app-landing-panel .landing-signin-cta { border-radius:10px; }

/* Footer */
.landing-divider-line{width:80%;height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);margin:64px auto;}
.landing-footer { width:100%; text-align:center; padding:64px 40px 42px; font-size:27px; color:var(--text3); opacity:0.7; line-height:1.6; }
.landing-footer-links { display:flex; justify-content:center; gap:28px; margin-top:20px; padding-bottom:40px; flex-wrap:wrap; }
.landing-footer-links a { color:rgba(255,255,255,0.35); font-size:19px; text-decoration:none; transition:color 0.15s; }
.landing-footer-links a:hover { color:rgba(255,255,255,0.7); }

/* ── APP SHELL ── */
#app { display:flex; flex:1; flex-direction:column; overflow:hidden; }

/* ── HEADER ── */
.app-header { background:#000; border-bottom:1px solid var(--border); padding:0 28px; height:110px; display:flex; align-items:center; gap:0; flex-shrink:0; z-index:500; overflow:visible; position:relative; min-width:0; }
.app-header::before { content:''; position:absolute; top:-80px; left:-60px; width:480px; height:320px; background:radial-gradient(ellipse at 38% 32%,rgba(227,25,55,0.20) 0%,rgba(227,25,55,0.05) 40%,transparent 70%); pointer-events:none; z-index:0; }
.app-header > * { position:relative; z-index:1; }
.header-logo { margin-right:32px; }
.app-header .header-actions { gap:10px; }
.header-logo { display:flex; align-items:center; flex-shrink:0; cursor:pointer; }
.header-logo:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:8px; }
.header-logo img { height:58px; width:auto; display:block; object-fit:contain; }

/* Tab nav */
.tab-nav { display:flex; gap:0; background:none; border-radius:0; padding:0; flex:0 1 auto; min-width:0; max-width:100%; height:102px; align-items:stretch; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.tab-nav::-webkit-scrollbar { display:none; }
.tab-btn { background:none; border:none; border-radius:0; color:var(--text3); font-size:33px; font-weight:400; padding:0 26px; cursor:pointer; transition:color 0.15s; white-space:nowrap; height:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; text-transform:uppercase; flex:0 0 auto; min-width:max-content; }
.tab-btn:hover { color:var(--text2); }
.tab-btn.active { color:var(--accent); }
.tab-btn span { padding-bottom:4px; border-bottom:3px solid transparent; transition:border-color 0.15s; letter-spacing:0.06em; margin-right:-0.06em; }
.tab-btn.active span { border-bottom-color:var(--accent); }
.tab-btn .ci-icon { display:none; }
.tab-beta { display:inline-flex; font-size:9px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; background:var(--accent); color:#fff; border-radius:5px; padding:2px 6px !important; margin-left:4px; align-self:center; margin-bottom:7px; line-height:1.4; border-bottom:none !important; }

/* Search */
.search-wrap { flex:1; max-width:440px; position:relative; }
.search-wrap input { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:32px; color:var(--text); font-size:var(--fs-md); padding:0 22px 0 54px; height:56px; outline:none; transition:border-color 0.15s,background 0.15s; }
.search-wrap input:focus { border-color:var(--accent); background:rgba(255,255,255,0.08); }
.search-wrap input::placeholder { color:var(--text3); }
.search-icon { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:20px; }

.now-playing-badge { background:var(--accent-bg); border:1px solid var(--accent-border); border-radius:12px; color:var(--accent2); font-size:var(--fs-sm); padding:10px 18px; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:none; font-weight:700; }
.header-actions { display:flex; gap:10px; margin-left:10px; min-width:0; flex-shrink:0; align-items:center; }
.header-language-wrap { position:relative; display:flex; flex:0 0 auto; }
.header-language-btn { width:64px; height:64px; padding:0 !important; }
.header-language-flag { width:34px; height:25px; display:block; border-radius:4px; background-repeat:no-repeat; background-position:center; background-size:100% 100%; box-shadow:0 0 0 1px rgba(255,255,255,.22); }
.header-language-menu { position:absolute; top:calc(100% + 10px); right:0; z-index:650; width:300px; display:none; flex-direction:column; padding:0; border:1px solid rgba(255,255,255,.15); border-radius:16px; background:rgba(12,12,12,.98); box-shadow:0 20px 48px rgba(0,0,0,.48); overflow:hidden; }
.header-language-menu.open { display:flex; }
.header-language-menu-scroll { max-height:min(640px,calc(100vh - 140px)); overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:10px; scrollbar-width:none; }
.header-language-menu-scroll::-webkit-scrollbar { display:none; }
.header-language-option { min-height:60px; display:flex; align-items:center; gap:14px; padding:0 16px; border:0; border-radius:11px; background:transparent; color:var(--text); font-size:19px; font-weight:750; text-align:left; cursor:pointer; }
.header-language-option:hover,.header-language-option.active { background:rgba(255,255,255,.09); }
.header-language-option-flag { width:34px; height:25px; flex:0 0 auto; border-radius:4px; background-repeat:no-repeat; background-position:center; background-size:100% 100%; box-shadow:0 0 0 1px rgba(255,255,255,.16); }
html.light-mode .header-language-menu { background:rgba(250,250,252,.99); border-color:rgba(0,0,0,.12); }
html.light-mode .header-language-option:hover,html.light-mode .header-language-option.active { background:rgba(0,0,0,.07); }
.hdr-btn { background:rgba(255,255,255,0.06); border:none; border-radius:12px; color:var(--text2); font-size:var(--fs-md); font-weight:700; padding:0 18px; height:64px; cursor:pointer; transition:color 0.2s,background 0.2s; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:10px; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.hdr-btn:hover { color:var(--text); background:rgba(255,255,255,0.1); }
.hdr-btn.active { color:var(--text); background:rgba(255,255,255,0.1); }
.hdr-btn .ci-icon { color:var(--accent); }
.hdr-btn.active .ci-icon { color:var(--text); }
.hdr-icon-btn { background:none; border:none; color:rgba(255,255,255,0.55); padding:12px; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color 0.15s,background 0.15s; flex-shrink:0; line-height:0; }
.hdr-icon-btn .ci-icon { width:40px; height:40px; display:block; }
.hdr-icon-btn:hover { color:var(--text); background:rgba(255,255,255,0.08); }
/* Permanent chrome on language + settings — same grey as category search/edit/fullscreen */
#settings-header-btn,
.header-language-btn {
  color:var(--text2);
  background:rgba(255,255,255,0.16);
}
#settings-header-btn:hover,
.header-language-btn:hover {
  color:var(--text);
  background:rgba(255,255,255,0.1);
}
html.light-mode #settings-header-btn,
html.light-mode .header-language-btn {
  color:var(--text2);
  background:rgba(0,0,0,0.06);
}
html.light-mode #settings-header-btn:hover,
html.light-mode .header-language-btn:hover {
  color:var(--text);
  background:rgba(0,0,0,0.1);
}
/* Match settings→edge inset to search→language gap (header-actions margin-left: 10px; header padding-right: 28px) */
#settings-header-btn { margin-right:-18px; }
.hdr-profile-wrap { position:relative; flex-shrink:0; }
.hdr-profile-btn { background:none; border:none; color:rgba(255,255,255,0.55); width:66px; height:66px; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color 0.15s,background 0.15s; }
.hdr-profile-btn .ci-icon { width:40px; height:40px; }
.hdr-profile-btn:hover { color:var(--text); background:rgba(255,255,255,0.08); }
.hdr-profile-dropdown { display:none; position:absolute; top:calc(100% + 10px); right:0; min-width:260px; background:var(--surface); border:1px solid rgba(255,255,255,0.1); border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,0.5); overflow:hidden; z-index:1000; }
.hdr-profile-dropdown.open { display:block; }
.hdr-profile-email { padding:14px 16px 10px; font-size:var(--fs-xs); color:var(--text3); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdr-profile-divider { height:1px; background:rgba(255,255,255,0.07); margin:0; }
.hdr-profile-item { width:100%; background:none; border:none; color:var(--text2); font-size:var(--fs-sm); font-weight:500; padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:background 0.15s,color 0.15s; text-align:left; }
.hdr-profile-item:hover { background:rgba(255,255,255,0.07); color:var(--text); }
.hdr-profile-item .ci-icon { width:18px; height:18px; color:var(--text3); flex-shrink:0; }
.hdr-profile-item.auth-cta { min-height:68px; font-size:23px; font-weight:700; padding:18px 18px; gap:14px; }
.hdr-profile-item.auth-cta .ci-icon { width:24px; height:24px; color:var(--accent); }
/* Header search bar */
.hdr-search-bar { position:relative; display:flex; align-items:center; width:min(360px,24vw); min-width:240px; flex-shrink:1; margin-left:auto; }
.hdr-search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text3); pointer-events:none; display:flex; align-items:center; }
.hdr-search-icon .ci-icon { width:28px; height:28px; }
.hdr-search-bar input { width:100%; background:var(--surface2); border:1px solid rgba(255,255,255,0.12); border-radius:12px; color:var(--text); font-size:var(--fs-lg); padding:0 46px 0 52px; height:74px; outline:none; box-sizing:border-box; font-family:inherit; transition:box-shadow 0.15s; }
.hdr-search-bar input:focus { box-shadow:0 0 0 2px var(--accent); }
.hdr-search-bar input::placeholder { color:var(--text3); }
.hdr-search-clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:rgba(255,255,255,0.35); cursor:pointer; display:none; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; transition:color 0.15s; padding:0; }
.hdr-search-clear.visible { display:flex; }
.hdr-search-clear:hover { color:var(--text); }
.hdr-search-clear .ci-icon { width:16px; height:16px; }

/* ── GLOBAL SEARCH PAGE ── */
#global-search-page { display:none; position:fixed; top:110px; left:0; right:0; bottom:0; z-index:150; background:var(--bg); flex-direction:column; overflow:hidden; }
#global-search-page.open { display:flex; }
.gsearch-head { flex-shrink:0; padding:22px 36px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:16px; }
/* Back matches the movie-details back button: dark red, red border, 76px,
   chevron + text via .detail-back-inner (same sizes as #streams-detail-back) */
.gsearch-head .streams-detail-back { background:var(--btn-dark-red); border:2px solid var(--btn-red-border); color:#fff; height:76px; border-radius:16px; padding:0; gap:0; }
.gsearch-head .streams-detail-back:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
.gsearch-head-label { flex:1; font-size:var(--fs-lg); font-weight:700; color:var(--text2); line-height:1.1; }
.gsearch-head-label strong { color:var(--text); }
.gsearch-body { flex:1; min-height:0; overflow-y:auto; padding:28px 36px 40px; display:flex; flex-direction:column; gap:36px; -webkit-overflow-scrolling:touch; }
.gsearch-section-title { font-size:var(--fs-lg); font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:18px; display:flex; align-items:center; gap:14px; }
.gsearch-section-title .ci-icon { width:30px; height:30px; }
.gsearch-section-title .ci-icon { color:var(--accent); width:20px; height:20px; }
/* Channel results: horizontally scrolling grid whose cells match the expanded
   EPG category grid (4 per screen width, same chrome + type scale). */
.gsearch-channels-grid { display:grid; grid-auto-flow:column; grid-template-rows:auto auto; grid-auto-columns:calc((100% - 54px)/4); gap:18px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gsearch-channels-grid::-webkit-scrollbar { display:none; }
.gsearch-channel-item { display:flex; align-items:center; gap:18px; min-height:118px; padding:22px 26px; border-radius:18px; cursor:pointer; background:var(--surface3); border:2px solid rgba(255,255,255,0.22); transition:background 0.12s,border-color 0.12s; box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.gsearch-channel-item:hover { background:var(--surface2); border-color:rgba(255,255,255,0.34); }
.gsearch-channel-logo { width:56px; height:56px; border-radius:10px; background:var(--surface2); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:var(--text3); }
.gsearch-channel-logo img { width:100%; height:100%; object-fit:contain; padding:5px; box-sizing:border-box; }
.gsearch-channel-name { font-size:28px; font-weight:700; color:var(--text); letter-spacing:0.2px; line-height:1.3; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gsearch-channel-cat { font-size:var(--fs-xs); color:var(--text3); margin-top:5px; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
/* Red horizontal scroll indicator under the movies / TV shows / channels rows */
.gsearch-hscroll-track { position:relative; height:4px; border-radius:999px; background:rgba(255,255,255,0.09); margin:12px 2px 0; overflow:hidden; }
html.light-mode .gsearch-hscroll-track { background:rgba(0,0,0,0.1); }
.gsearch-hscroll-track.hidden { display:none; }
.gsearch-hscroll-thumb { position:absolute; top:0; bottom:0; left:0; width:0; border-radius:999px; background:var(--accent); transition:width 0.1s linear; }
.gsearch-playlist-pill { display:inline-flex; align-items:center; height:46px; padding:0 20px; border-radius:99px; border:1px solid rgba(255,255,255,0.12); background:transparent; color:var(--text2); font-size:var(--fs-sm); font-weight:700; cursor:pointer; white-space:nowrap; transition:background 0.12s,color 0.12s,border-color 0.12s; }
.gsearch-playlist-pill:hover { background:rgba(255,255,255,0.06); color:var(--text); }
.gsearch-playlist-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.gsearch-section-pills-host { display:flex; gap:10px; overflow-x:auto; margin:-4px 0 18px; padding-bottom:2px; scrollbar-width:none; }
.gsearch-section-pills-host::-webkit-scrollbar { display:none; }
.gsearch-section-pills-host:empty { display:none; }
.gsearch-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.gsearch-media-row { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gsearch-media-row::-webkit-scrollbar { display:none; }
.gsearch-media-card { cursor:pointer; border-radius:14px; overflow:hidden; background:var(--surface2); border:1px solid rgba(255,255,255,0.06); transition:transform 0.12s,border-color 0.12s; }
.gsearch-media-card:hover { transform:scale(1.03); border-color:rgba(255,255,255,0.14); }
.gsearch-media-row .gsearch-media-card { flex:0 0 240px; width:240px; }
.gsearch-media-poster { aspect-ratio:2/3; width:100%; object-fit:cover; display:block; background:var(--surface3); }
.gsearch-media-poster-ph { aspect-ratio:2/3; width:100%; display:flex; align-items:center; justify-content:center; background:var(--surface3); color:var(--text3); font-size:32px; }
.gsearch-media-card-skeleton { flex:0 0 240px; width:240px; min-width:0; }
.gsearch-media-grid .gsearch-media-card-skeleton { flex:initial; width:auto; }
/* Chained with .epg-skeleton-block so its later border-radius:0 doesn't win */
.gsearch-media-poster-skel.epg-skeleton-block { aspect-ratio:2/3; width:100%; border-radius:14px; }
.gsearch-media-title-skel.epg-skeleton-block { height:16px; width:76%; border-radius:6px; margin-top:10px; }
.gsearch-media-meta-skel.epg-skeleton-block { height:13px; width:48%; border-radius:6px; margin-top:8px; }
.gsearch-media-info { padding:10px 12px 12px; }
.gsearch-media-title { font-size:var(--fs-sm); font-weight:700; color:var(--text); line-height:1.3; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gsearch-media-meta { font-size:13px; color:var(--text3); margin-top:3px; }
.gsearch-empty { color:var(--text3); font-size:var(--fs-sm); padding:8px 0; }
.gsearch-skel-item { pointer-events:none; cursor:default; }
.gsearch-loading { display:flex; align-items:center; gap:12px; color:var(--text3); font-size:var(--fs-sm); }
/* ── BODY ── */
.app-body { display:flex; flex:1; overflow:hidden; min-height:0; --sidebar-row-height:84px; }
.compat-page { flex:1; display:none; background:linear-gradient(180deg,#080b11 0%,#121821 100%); overflow:auto; }
.compat-page-inner { max-width:1180px; margin:0 auto; padding:36px 28px 52px; }
.compat-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; margin-bottom:28px; }
.compat-kicker { color:var(--accent); font-size:var(--fs-xs); font-weight:800; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:12px; }
.compat-title { font-size:clamp(34px,4vw,52px); font-weight:800; line-height:1.04; margin:0; }
.compat-copy { max-width:760px; color:var(--text2); font-size:var(--fs-md); line-height:1.6; margin-top:14px; }
.compat-note { max-width:760px; margin-top:18px; padding:16px 18px; border-radius:18px; background:rgba(227,25,55,0.08); border:1px solid rgba(227,25,55,0.2); color:var(--text2); font-size:var(--fs-sm); line-height:1.55; }
.compat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.compat-card { background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.07); border-radius:22px; padding:22px; display:flex; flex-direction:column; gap:16px; min-height:240px; box-shadow:0 18px 50px rgba(0,0,0,0.22); }
.compat-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.compat-pill { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; border-radius:999px; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent2); font-size:var(--fs-xs); font-weight:800; letter-spacing:0.04em; text-transform:uppercase; }
.compat-card-title { font-size:var(--fs-lg); font-weight:800; color:var(--text); line-height:1.15; }
.compat-card-desc { color:var(--text2); font-size:var(--fs-sm); line-height:1.6; min-height:74px; }
.compat-card-url { color:var(--text3); font-size:12px; line-height:1.55; word-break:break-word; }
.compat-card-actions { margin-top:auto; display:flex; gap:12px; flex-wrap:wrap; }
.compat-card-btn { min-width:150px; height:52px; padding:0 18px; border-radius:14px; border:2px solid var(--border2); background:var(--surface2); color:var(--text); font-size:var(--fs-sm); font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:background 0.15s,border-color 0.15s,color 0.15s; }
.compat-card-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.compat-card-btn:hover { border-color:var(--accent); color:var(--text); }
.compat-card-btn.primary:hover { background:var(--accent2); border-color:var(--accent2); color:#fff; }
.compat-media-list { display:flex; flex-direction:column; gap:12px; margin-top:2px; }
.compat-media-item { background:rgba(255,255,255,0.03); border:1px solid var(--border2); border-radius:16px; padding:14px; }
.compat-media-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.compat-media-name { font-size:var(--fs-sm); font-weight:700; color:var(--text); }
.compat-media-size { color:var(--text3); font-size:12px; }
.compat-media-player { width:100%; height:40px; }
.compat-media-player.video { height:220px; background:#000; border-radius:12px; }
.compat-media-link { margin-top:10px; display:inline-flex; align-items:center; gap:8px; color:var(--accent2); font-size:12px; font-weight:700; text-decoration:none; }
.compat-media-link:hover { color:var(--text); }

/* ── LIVE SIDEBAR ── */
.sidebar { width:var(--sidebar); flex-shrink:0; background:#000; display:flex; flex-direction:column; overflow:hidden; min-height:0; border-right:1px solid var(--border); padding:14px 8px; gap:4px; }
/* ── SIDEBAR RESIZE HANDLE ── */
#sidebar-drag-handle { display:none; flex:0 0 0px; width:0; overflow:visible; position:relative; z-index:20; align-self:stretch; cursor:col-resize; touch-action:none; }
.sdh-pill { position:absolute; left:-17px; top:50%; transform:translateY(-50%); width:38px; height:72px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:14px; background:var(--surface3); border:1px solid rgba(255,255,255,0.22); cursor:col-resize; transition:background 0.15s,border-color 0.15s,box-shadow 0.15s; box-shadow:0 2px 12px rgba(0,0,0,0.45); }
.sdh-bar { width:3px; height:32px; background:rgba(255,255,255,0.45); border-radius:2px; flex-shrink:0; transition:background 0.15s; }
.sdh-chevron { width:0; height:0; flex-shrink:0; border-top:7px solid transparent; border-bottom:7px solid transparent; pointer-events:none; transition:border-color 0.15s; }
.sdh-chevron-left { border-right:8px solid rgba(255,255,255,0.7); }
.sdh-chevron-right { border-left:8px solid rgba(255,255,255,0.7); }
#sidebar-drag-handle:hover .sdh-chevron-left,#sidebar-drag-handle.dragging .sdh-chevron-left { border-right-color:#fff; }
#sidebar-drag-handle:hover .sdh-chevron-right,#sidebar-drag-handle.dragging .sdh-chevron-right { border-left-color:#fff; }
#sidebar-drag-handle:hover .sdh-pill,#sidebar-drag-handle.dragging .sdh-pill { background:var(--accent); border-color:rgba(255,255,255,0.35); box-shadow:0 4px 18px rgba(0,0,0,0.55); }
#sidebar-drag-handle:hover .sdh-bar,#sidebar-drag-handle.dragging .sdh-bar { background:#fff; }
html.light-mode .sdh-pill { background:var(--surface3); border-color:rgba(0,0,0,0.18); box-shadow:0 2px 10px rgba(0,0,0,0.15); }
html.light-mode .sdh-bar { background:rgba(0,0,0,0.35); }
html.light-mode .sdh-chevron-left { border-right-color:rgba(0,0,0,0.45); }
html.light-mode .sdh-chevron-right { border-left-color:rgba(0,0,0,0.45); }
html.light-mode #sidebar-drag-handle:hover .sdh-bar,html.light-mode #sidebar-drag-handle.dragging .sdh-bar { background:rgba(0,0,0,0.55); }
html.light-mode #sidebar-drag-handle:hover .sdh-chevron-left,html.light-mode #sidebar-drag-handle.dragging .sdh-chevron-left { border-right-color:rgba(0,0,0,0.65); }
html.light-mode #sidebar-drag-handle:hover .sdh-chevron-right,html.light-mode #sidebar-drag-handle.dragging .sdh-chevron-right { border-left-color:rgba(0,0,0,0.65); }
.sidebar-search-wrap { flex-shrink:0; position:relative; margin-top:10px; }
.sidebar-search-wrap label { display:block; padding:0 4px 8px; font-size:var(--fs-xs); color:var(--text3); font-weight:400; text-transform:uppercase; letter-spacing:0.06em; }
.sidebar-search-wrap .search-icon { display:flex; position:absolute; left:14px; top:50%; transform:translateY(-50%); align-items:center; color:var(--text3); pointer-events:none; z-index:1; }
.sidebar-search-wrap .search-icon svg { width:18px; height:18px; }
.sidebar-search-wrap input { width:100%; background:var(--surface2); border:1px solid rgba(255,255,255,0.12); border-radius:12px; color:var(--text); font-size:var(--fs-sm); padding:0 0 0 42px; height:60px; outline:none; box-sizing:border-box; }
.sidebar-search-wrap input:focus { box-shadow:0 0 0 2px var(--accent); }
.sidebar-search-wrap input::placeholder { color:var(--text3); }
.sidebar-search-inner { position:relative; display:flex; align-items:center; }
.sidebar-search-star-divider { position:absolute; right:48px; top:50%; transform:translateY(-50%); width:1px; height:32px; background:rgba(255,255,255,0.12); pointer-events:none; }
.sidebar-search-star { position:absolute; right:0; top:0; height:60px; width:48px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:rgba(255,255,255,0.45); cursor:pointer; flex-shrink:0; border-radius:0 12px 12px 0; transition:color 0.15s; }
.sidebar-search-star .ci-icon { width:18px; height:18px; }
.sidebar-search-star:hover { color:var(--text); }
.sidebar-search-star.faved, .sidebar-search-star.active { color:#facc15; }
.playlist-switch-wrap { flex-shrink:0; }
.playlist-switch-wrap label { display:block; padding:0 4px 8px; font-size:var(--fs-lg); color:var(--text3); font-weight:400; text-transform:uppercase; letter-spacing:0.06em; }
#live-sidebar:not(.sidebar-ui-ready) .playlist-switch-wrap label,
#live-sidebar:not(.sidebar-ui-ready) .sidebar-section-title { visibility:hidden; }
.sidebar-inline-row { display:flex; align-items:center; gap:8px; }
.sidebar-inline-row input,
.sidebar-inline-row select { flex:1; min-width:0; }
.playlist-switch-control { position:relative; flex:1; min-width:0; }
.playlist-switch-wrap select { width:100%; background:var(--surface2); border:none; border-radius:12px; color:var(--text); font-size:var(--fs-sm); font-weight:700; padding:0 46px 0 16px; height:var(--sidebar-row-height,84px); outline:none; appearance:none; -webkit-appearance:none; box-sizing:border-box; }
.playlist-switch-wrap select:focus { box-shadow:0 0 0 2px var(--accent); }
.playlist-switch-wrap select:disabled { color:var(--text3); opacity:0.75; }
.touch-select-native { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; border:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; opacity:0 !important; pointer-events:none !important; }
.touch-select-shell { width:100%; }
.touch-select-trigger { width:100%; background:var(--surface2); border:1px solid rgba(255,255,255,0.12); border-radius:12px; color:var(--text); height:60px; padding:0 0 0 16px; display:inline-flex; align-items:center; gap:0; cursor:pointer; font-size:var(--fs-sm); font-weight:700; box-sizing:border-box; transition:background 0.15s; overflow:hidden; }
.touch-select-trigger:hover { background:var(--surface3); }
.touch-select-trigger:focus-visible { box-shadow:0 0 0 2px var(--accent); outline:none; }
.touch-select-trigger:disabled { color:var(--text3); opacity:0.75; cursor:default; }
.touch-select-trigger .touch-select-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.touch-select-value { display:inline-flex; align-items:center; gap:12px; min-width:0; max-width:100%; }
.touch-select-value-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.touch-select-flag { width:24px; height:18px; border-radius:4px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,0.14); background-repeat:no-repeat; background-position:center; background-size:100% 100%; flex:0 0 auto; }
.touch-select-trigger .ci-icon { color:var(--text3); width:18px; height:18px; flex-shrink:0; }
.touch-select-trigger .ts-inline-chevron { display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; flex-shrink:0; color:rgba(255,255,255,0.45); }
.touch-select-trigger .ts-chevron { width:18px; height:18px; color:currentColor; flex-shrink:0; }
.touch-select-trigger .ts-action-divider { width:1px; height:32px; background:rgba(255,255,255,0.12); flex-shrink:0; margin:0; }
.touch-select-trigger .ts-inline-add { display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; flex-shrink:0; color:rgba(255,255,255,0.45); border-radius:12px; transition:color 0.15s,background 0.15s; }
.touch-select-trigger .ts-inline-add .ci-icon { width:30px; height:30px; color:currentColor; }
.touch-select-trigger .ts-inline-add:hover { color:rgba(255,255,255,0.8); background:rgba(255,255,255,0.06); }
.touch-select-shell { display:flex; align-items:center; }
.settings-field-select { max-width:440px; }
.settings-field-select .touch-select-trigger { height:60px; font-size:var(--fs-sm); padding:0 18px; }
#settings-panel-general .settings-field-select .touch-select-trigger { height:74px; font-size:var(--fs-lg); padding:0 18px; border-radius:12px; }
#settings-panel-general .settings-field-select .touch-select-trigger .ts-inline-chevron { width:74px; height:74px; }
#settings-panel-general .settings-field-select .touch-select-trigger .ts-chevron { width:24px; height:24px; }
.playlist-switch-wrap .touch-select-trigger { height:var(--sidebar-row-height,84px); border-radius:14px; font-size:var(--fs-lg); font-weight:600; }
.playlist-switch-wrap .touch-select-trigger .ts-inline-chevron { width:var(--sidebar-row-height,84px); height:var(--sidebar-row-height,84px); }
.playlist-switch-wrap .touch-select-trigger .ts-chevron { width:24px; height:24px; }
.playlist-switch-wrap .touch-select-trigger .ts-inline-add { width:var(--sidebar-row-height,84px); height:var(--sidebar-row-height,84px); border-radius:12px; }
.playlist-switch-wrap .touch-select-trigger .ts-inline-add .ci-icon { width:38px; height:38px; }
.touch-select-overlay { display:none; position:fixed; inset:0; z-index:260; background:rgba(0,0,0,0.76); align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
.touch-select-overlay.open { display:flex; }
.touch-select-overlay.playlist-type-select { z-index:2100; }
.touch-select-sheet { width:min(640px,100%); max-height:min(78vh,760px); background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-radius:26px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 80px rgba(0,0,0,0.6); }
.touch-select-overlay.playlist-select .touch-select-sheet { height:min(82vh,820px); max-height:min(82vh,820px); position:relative; }
.touch-select-overlay.playlist-select .touch-select-sheet::before { content:''; position:absolute; right:10px; top:102px; bottom:118px; width:4px; border-radius:999px; background:rgba(255,255,255,0.07); opacity:var(--playlist-scroll-opacity,0); pointer-events:none; z-index:2; }
.touch-select-overlay.playlist-select .touch-select-sheet::after { content:''; position:absolute; right:10px; top:calc(102px + var(--playlist-scroll-top,0px)); width:4px; height:var(--playlist-scroll-thumb,0px); border-radius:999px; background:var(--accent); opacity:var(--playlist-scroll-opacity,0); pointer-events:none; z-index:3; }
.touch-select-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px 18px; box-shadow:0 1px 0 rgba(255,255,255,0.06); }
.touch-select-sheet-title { font-size:var(--fs-lg); font-weight:800; color:var(--text); }
.touch-select-sheet-close { width:48px; height:48px; border-radius:12px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.06); color:var(--text2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.touch-select-overlay.playlist-select .touch-select-sheet-title { font-size:calc(var(--fs-xl) + 4px); }
.touch-select-overlay.playlist-select .touch-select-sheet-close { width:64px; height:64px; border-radius:16px; }
.touch-select-overlay.playlist-select .touch-select-sheet-close .ci-icon { width:26px; height:26px; }
.touch-select-sheet-head-right { display:flex; align-items:center; gap:10px; }
.touch-select-add-playlist { display:none; }
.touch-select-overlay.playlist-select .touch-select-add-playlist { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius); font-size:var(--fs-lg); font-weight:700; padding:0 40px; min-width:180px; height:64px; box-sizing:border-box; cursor:pointer; transition:background 0.15s; white-space:nowrap; }
.touch-select-overlay.playlist-select .touch-select-add-playlist:hover { background:var(--accent); }
.touch-select-playlist-add-row { display:none; }
.touch-select-overlay.playlist-select .touch-select-playlist-add-row { display:flex; justify-content:center; padding:4px 0 22px; }
.touch-select-sheet-body { padding:14px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; scrollbar-width:none; }
.touch-select-sheet-body::-webkit-scrollbar { display:none; }
.touch-select-overlay.playlist-select .touch-select-sheet-body { position:relative; flex:1; min-height:0; padding-right:22px; }
.touch-select-sheet-actions { display:none; flex-shrink:0; position:relative; z-index:4; padding:28px 24px 24px; background:var(--surface); box-shadow:0 -1px 0 rgba(255,255,255,0.06); }
.touch-select-overlay.playlist-select .touch-select-sheet-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.touch-select-cancel-btn { min-width:180px; height:64px; box-sizing:border-box; background:var(--surface2); border:2px solid var(--border2); border-radius:var(--radius); color:var(--text2); font-size:var(--fs-lg); font-weight:700; cursor:pointer; padding:0 40px; transition:border-color 0.15s,color 0.15s; }
.touch-select-cancel-btn:hover { border-color:rgba(255,255,255,0.35); color:var(--text); }
.touch-select-save-btn { min-width:180px; height:64px; box-sizing:border-box; border:none; border-radius:var(--radius); background:var(--accent); color:#fff; font-size:var(--fs-lg); font-weight:800; cursor:pointer; }
.touch-select-save-btn:hover { background:var(--accent2); }
.touch-select-option { width:100%; min-height:58px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); background:var(--surface2); color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; cursor:pointer; font-size:var(--fs-sm); font-weight:700; text-align:left; transition:background 0.15s,border-color 0.15s; }
.touch-select-option:hover { background:rgba(255,255,255,0.06); }
.touch-select-option.active { border-color:var(--accent-border); background:var(--accent-bg); }
.touch-select-option:disabled { opacity:0.5; cursor:default; }
/* Subtitle picker modal — playlist-modal styling, but layered above the fullscreen players (z-index 999) */
#subtitle-modal { z-index:1200; }
#subtitle-modal .touch-select-sheet { width:min(560px,100%); }
#subtitle-modal .touch-select-option { min-height:76px; padding:20px 22px; font-size:var(--fs-lg); }
#subtitle-modal .touch-select-option.active { border-color:var(--accent-border); background:var(--accent-bg); }
#subtitle-modal .touch-select-sheet-title { font-size:calc(var(--fs-xl) + 6px); }
#subtitle-modal .touch-select-sheet-body { flex:1; min-height:0; }
#subtitle-modal .touch-select-sheet-actions { display:flex; justify-content:center; gap:12px; }
#subtitle-modal .touch-select-sheet-close { width:64px; height:64px; border-radius:16px; }
#subtitle-modal .touch-select-sheet-close .ci-icon { width:26px; height:26px; }
.touch-select-option-main { display:inline-flex; align-items:center; gap:12px; min-width:0; flex:1; }
.touch-select-option-label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.touch-select-option .ci-icon { width:20px; height:20px; color:var(--accent); flex-shrink:0; }
.touch-select-overlay.playlist-select .touch-select-option { min-height:84px; height:84px; padding:12px 22px; font-size:var(--fs-lg); box-sizing:border-box; }
.touch-select-overlay.playlist-select .touch-select-option .ci-icon { width:30px; height:30px; }
.touch-select-overlay.playlist-select .touch-select-option.active .ci-icon { color:#32d74b; }
.touch-select-row-actions { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; }
.touch-select-row-actions-spacer { visibility:hidden; pointer-events:none; }
.touch-select-overlay.playlist-confirm { z-index:280; }
.touch-select-overlay.playlist-confirm .touch-select-sheet { width:min(560px,100%); height:auto; max-height:min(78vh,760px); }
.touch-select-overlay.playlist-confirm .touch-select-sheet-title { font-size:calc(var(--fs-xl) + 4px); }
.touch-select-overlay.playlist-confirm .touch-select-sheet-close { width:64px; height:64px; border-radius:16px; }
.touch-select-overlay.playlist-confirm .touch-select-sheet-close .ci-icon { width:26px; height:26px; }
.touch-select-overlay.playlist-confirm .touch-select-sheet-body { align-items:center; justify-content:center; padding:32px 28px; }
.touch-select-overlay.playlist-confirm .touch-select-sheet-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.playlist-confirm-message { margin:0; font-size:var(--fs-lg); font-weight:600; color:var(--text); text-align:center; line-height:1.45; }
/* Settings pickers (Appearance, Language) — large modal sizing */
.touch-select-overlay.settings-select .touch-select-sheet { width:min(640px,100%); height:min(72vh,780px); max-height:min(72vh,780px); }
.touch-select-overlay.settings-select .touch-select-sheet-title { font-size:calc(var(--fs-xl) + 8px); }
.touch-select-overlay.settings-select .touch-select-sheet-close { width:72px; height:72px; border-radius:18px; }
.touch-select-overlay.settings-select .touch-select-sheet-close .ci-icon { width:30px; height:30px; }
.touch-select-overlay.settings-select .touch-select-option { min-height:84px; padding:22px 24px; font-size:var(--fs-xl); }
.touch-select-overlay.settings-select .touch-select-option .ci-icon { width:34px; height:34px; }
.touch-select-overlay.settings-select .touch-select-sheet-body { flex:1; min-height:0; padding:18px; gap:14px; }
.touch-select-overlay.settings-select .touch-select-sheet-head { padding:26px 28px 20px; }
.touch-select-row-actions { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; }
.touch-select-delete-btn, .touch-select-edit-btn { width:64px; height:64px; flex-shrink:0; border-radius:16px; border:2px solid var(--border2); background:var(--surface2); color:var(--text2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.touch-select-delete-btn svg, .touch-select-edit-btn svg { width:26px; height:26px; }
.sidebar-action-btn { width:44px; height:44px; flex:0 0 44px; background:var(--accent); border:none; border-radius:10px; color:#fff; cursor:pointer; transition:background 0.15s; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.sidebar-action-btn .ci-icon { width:20px; height:20px; }
.sidebar-action-btn.green { background:#1d8f47; }
.sidebar-action-btn.green:hover { background:#25a154; }
.sidebar-playlist-btn-wrap { flex-shrink:0; }
.sidebar-playlist-btn { width:100%; background:var(--accent); border:none; border-radius:12px; color:#fff; font-size:var(--fs-sm); font-weight:700; height:52px; cursor:pointer; transition:background 0.15s; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.sidebar-playlist-btn:hover { background:var(--accent2); }
.sidebar-playlist-btn.active { background:var(--accent2); }
.sidebar-action-btn:hover { background:var(--accent2); }
.sidebar-action-btn.active { background:var(--accent2); }
.sidebar-section { flex:1; min-height:0; display:flex; flex-direction:column; }
.sidebar-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 4px 8px; }
.sidebar-section-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.sidebar-section-title { font-size:var(--fs-lg); color:var(--text3); font-weight:400; text-transform:uppercase; letter-spacing:0.06em; }
.sidebar-load-error { min-height:100%; box-sizing:border-box; padding:24px 14px; margin:0; border:none; border-radius:0; background:transparent; color:#fff; font-size:var(--fs-sm); font-weight:700; line-height:1.45; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; }
.sidebar-load-error-help { background:var(--accent); border:none; border-radius:12px; color:#fff; font-size:var(--fs-sm); font-weight:800; padding:0 28px; height:52px; cursor:pointer; flex-shrink:0; transition:background 0.15s; }
.sidebar-load-error-help:active { background:var(--accent2); }
.help-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.78); z-index:9000; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; }
.help-modal-overlay.open { display:flex; }
.help-modal-shell { background:var(--surface); border:1px solid var(--border2); border-radius:22px; padding:44px 36px 36px; width:min(460px,100%); display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.help-modal-title { font-size:var(--fs-lg); font-weight:800; color:var(--text); }
.help-modal-body { font-size:var(--fs-sm); color:var(--text2); line-height:1.6; }
.help-modal-email { font-size:var(--fs-md); font-weight:700; color:var(--text); }
.help-modal-ok { height:var(--btn-h); padding:0 52px; background:var(--accent); border:none; border-radius:var(--radius); color:#fff; font-size:var(--fs-md); font-weight:800; cursor:pointer; margin-top:6px; transition:background 0.15s; }
.help-modal-ok:active { background:var(--accent2); }
.sidebar-section-edit { width:76px; height:76px; border:none; border-radius:16px; background:rgba(255,255,255,0.16); color:var(--text2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s,color 0.15s,transform 0.1s; padding:0; flex-shrink:0; }
.sidebar-section-edit .ci-icon { width:38px; height:38px; }
.sidebar-section-edit:hover { background:rgba(255,255,255,0.1); color:var(--text); }
.sidebar-section-edit:active { transform:scale(0.97); }
.sidebar-section-edit.active { background:rgba(255,255,255,0.1); color:var(--text); }
/* Full-page expanded category browser */
#categories-expanded-panel { position:absolute; inset:0; z-index:11; display:none; flex-direction:column; overflow:hidden; border-radius:inherit; }
/* Open the browser as an absolute OVERLAY of .player-area (not an in-flow child).
   .player-area's only in-flow child is .video-wrap (flex:1); when the live player
   keeps running as the floating PIP, .video-wrap stays full-height and would
   squeeze an in-flow panel off-screen — leaving just the topbar + first row with
   nothing to scroll. Absolute+inset:0 takes the panel out of flow so it always
   fills the area. Grid rows (auto topbar + minmax(0,1fr) body) give the scroll
   region a deterministic fill height, which the Tesla browser resolves more
   reliably than flex:1 + min-height:0. */
#categories-expanded-panel.open { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
#categories-expanded-panel.open.cat-expanded-mounted { position:fixed; z-index:400; display:flex; flex-direction:column; overflow:hidden; min-height:0; box-sizing:border-box; border-radius:0; }
@supports (grid-template-rows: minmax(0, 1fr)) {
  #categories-expanded-panel.open.cat-expanded-mounted { display:grid; grid-template-rows:auto minmax(0,1fr); grid-template-columns:minmax(0,1fr); }
  #categories-expanded-panel.open.cat-expanded-mounted .categories-expanded-topbar { grid-row:1; min-width:0; }
  #categories-expanded-panel.open.cat-expanded-mounted .categories-expanded-body { grid-row:2; min-height:0; height:auto; overflow-y:auto; }
}
.categories-expanded-topbar { flex-shrink:0; padding:12px 28px 10px; display:flex; flex-direction:column; gap:12px; }
#categories-expanded-back { align-self:flex-start; height:76px; min-width:0; padding:0; gap:0; border-radius:16px; display:inline-flex; justify-content:center; align-items:center; box-sizing:border-box; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); color:#fff; cursor:pointer; line-height:1; transition:background 0.15s,border-color 0.15s; }
#categories-expanded-back:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
#categories-expanded-back .detail-back-inner { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 28px; height:100%; box-sizing:border-box; }
#categories-expanded-back .back-chevron { width:38px; height:38px; flex-shrink:0; }
.detail-back-inner { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:0 30px; box-sizing:border-box; line-height:1; }
.detail-back-inner .back-chevron { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0; }
.detail-back-inner .back-chevron .ci-icon { width:38px; height:38px; display:block; }
#categories-expanded-back-text,
#streams-detail-back-text { font-size:var(--fs-lg); font-weight:700; line-height:1; }
.categories-expanded-header { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:20px; row-gap:6px; align-items:end; }
.categories-expanded-title { font-size:46px; font-weight:800; color:#fff; line-height:1; margin:0; grid-column:1; grid-row:2; align-self:center; }
.categories-expanded-controls { display:flex; align-items:center; gap:14px; flex:none; min-width:0; grid-column:2; grid-row:1 / span 2; }
.cat-expanded-action-btn { height:76px; padding:0 30px; border-radius:16px; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); color:#fff; font-size:var(--fs-md); font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:12px; cursor:pointer; box-sizing:border-box; transition:background 0.15s,border-color 0.15s,transform 0.1s; }
.cat-expanded-action-btn:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
.cat-expanded-action-btn:active { transform:scale(0.97); }
.cat-expanded-action-btn .ci-icon { width:26px; height:26px; flex-shrink:0; }
.categories-expanded-body { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:4px 28px 28px; scrollbar-width:none; box-sizing:border-box; }
.categories-expanded-body::-webkit-scrollbar { display:none; }
/* Red scroll indicator pinned to the far right edge of the expanded panel. */
.cat-expanded-scroll-track { position:absolute; right:8px; width:5px; border-radius:999px; background:rgba(255,255,255,0.08); opacity:0; transition:opacity 0.2s; pointer-events:none; z-index:6; }
.cat-expanded-scroll-track.visible { opacity:1; }
.cat-expanded-scroll-thumb { position:absolute; left:0; width:100%; border-radius:999px; background:var(--accent); }
/* Higher-specificity compound selectors so these win over the generic
   .m3u-picker / .m3u-picker-grid rules that appear later in the stylesheet. */
.m3u-picker.categories-expanded-grid { padding:8px 0 0; }
.m3u-picker-grid.categories-expanded-grid .m3u-picker-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.m3u-picker-grid.categories-expanded-grid .m3u-picker-item {
  position:relative; overflow:hidden;
  min-height:118px; padding:22px 26px;
  flex-direction:row; align-items:center; justify-content:flex-start; text-align:left;
  border-radius:10px;
  border:2px solid rgba(255,255,255,0.22);
  background:var(--surface3);
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  /* NOTE: do not add backface-visibility:hidden / transform / will-change here.
     Each grid cell is inside a scroll container layered over the blurred
     carbon-fibre backdrop. Promoting every cell to its own GPU layer exhausts the
     Tesla browser's compositor, so cells render blank and go transparent on
     scroll. The sidebar category list paints fine precisely because its items are
     not layer-promoted — keep these cells the same. */
}
@media (hover:hover){
  .m3u-picker-grid.categories-expanded-grid .m3u-picker-item { transition:background 0.18s ease,border-color 0.18s ease; }
  .m3u-picker-grid.categories-expanded-grid .m3u-picker-item:hover { border-color:rgba(255,255,255,0.34); background:var(--surface2); }
  .m3u-picker-grid.categories-expanded-grid .m3u-picker-item:active { transform:scale(0.99); }
}
.m3u-picker-grid.categories-expanded-grid .m3u-picker-item::before { display:none; }
.m3u-picker-grid.categories-expanded-grid .m3u-picker-item.active {
  border-color:rgba(255,255,255,0.34);
  background:var(--btn-dark-red);
  color:#fff;
}
.m3u-picker-grid.categories-expanded-grid .m3u-picker-name {
  font-size:28px; font-weight:700; color:#fff; letter-spacing:0.2px; line-height:1.3; width:100%; max-width:100%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.m3u-picker-grid.categories-expanded-grid .m3u-picker-item.favourites-cat .m3u-picker-name { display:flex; align-items:center; justify-content:flex-start; gap:10px; }
body.categories-expanded #live-sidebar .sidebar-section,
body.categories-expanded #live-sidebar .ch-count,
body.categories-expanded #live-sidebar #channel-list,
body.categories-expanded #sidebar-drag-handle { display:none !important; }
body.categories-expanded #live-sidebar { width:0 !important; min-width:0 !important; padding:0 !important; border-right:none !important; overflow:visible !important; flex:0 0 0 !important; }
body.categories-expanded #app-landing-panel { display:none !important; }
body.categories-expanded #epg-panel { display:none !important; }
html.desktop-mode #categories-expanded-back { height:44px; border-radius:12px; }
html.desktop-mode #categories-expanded-back .detail-back-inner { padding:0 18px; gap:10px; }
html.desktop-mode #categories-expanded-back .back-chevron { width:22px; height:22px; }
html.desktop-mode .detail-back-inner { gap:10px; padding:0 18px; }
html.desktop-mode .detail-back-inner .back-chevron .ci-icon { width:22px; height:22px; }
html.desktop-mode #categories-expanded-back-text,
html.desktop-mode #streams-detail-back-text { font-size:15px; }
html.desktop-mode .categories-expanded-title { font-size:32px; }
html.desktop-mode .cat-expanded-action-btn { height:44px; padding:0 20px; border-radius:12px; font-size:15px; gap:10px; }
html.desktop-mode .cat-expanded-action-btn .ci-icon { width:18px; height:18px; }
html.desktop-mode .m3u-picker-grid.categories-expanded-grid .m3u-picker-name { font-size:17px; }
.sidebar-section-icon-btn { width:76px; height:76px; border:none; border-radius:16px; background:rgba(255,255,255,0.16); color:var(--text2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s, color 0.15s, transform 0.1s; padding:0; }
.sidebar-section-icon-btn .ci-icon { width:38px; height:38px; }
.sidebar-section-icon-btn:hover { background:rgba(255,255,255,0.1); color:var(--text); }
.sidebar-section-icon-btn:active { transform:scale(0.97); }
/* Shared subdued carbon fibre panel background */
.carbon-fibre-bg,
.category-list-panel,
.epg-pip-meta { position:relative; isolation:isolate; overflow:hidden; }
#categories-expanded-panel { isolation:isolate; overflow:hidden; }
.carbon-fibre-bg::before,
.epg-pip-meta::before,
#categories-expanded-panel::before,
.category-list-panel::before { content:''; position:absolute; inset:-14px; background-color:#070707; background-image:url('assets/carbonfibre.png'); background-position:center; background-size:cover; background-repeat:no-repeat; filter:blur(5px) brightness(0.92) saturate(0.9); transform:scale(1.08); transform-origin:center top; opacity:0.78; z-index:0; pointer-events:none; }
.carbon-fibre-bg::after,
.category-list-panel::after,
.epg-pip-meta::after,
#categories-expanded-panel::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.48); z-index:0; pointer-events:none; }
html.light-mode .carbon-fibre-bg::after,
html.light-mode .category-list-panel::after,
html.light-mode .epg-pip-meta::after,
html.light-mode #categories-expanded-panel::after { background:rgba(255,255,255,0.7); }
html.no-carbon-theme .carbon-fibre-bg::before,
html.no-carbon-theme .category-list-panel::before,
html.no-carbon-theme .epg-pip-meta::before,
html.no-carbon-theme #categories-expanded-panel::before { content:none; display:none; }
html.no-carbon-theme .category-list-panel::after,
html.no-carbon-theme .epg-pip-meta::after,
html.no-carbon-theme #categories-expanded-panel::after { background:var(--surface2); }
html.light-mode.no-carbon-theme .category-list-panel::after,
html.light-mode.no-carbon-theme .epg-pip-meta::after,
html.light-mode.no-carbon-theme #categories-expanded-panel::after { background:var(--surface); }
.epg-pip-meta.loading::before,
.epg-pip-meta.loading::after { content:none; display:none; }
.epg-pip-meta.loading { background:linear-gradient(90deg,rgba(0,0,0,0.2),rgba(0,0,0,0.62)); }
html.light-mode .epg-pip-meta.loading { background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.96)); }
.epg-pip-meta > *,
#categories-expanded-panel > * { position:relative; z-index:1; }
#categories-expanded-panel > .cat-expanded-scroll-track { z-index:6; }
.category-list { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:0 6px 0 0; scrollbar-width:none; background:transparent; border-radius:0; position:relative; }
.category-list-panel.category-loading::before,
.category-list-panel.category-loading::after { content:none; display:none; }
.category-list-panel.category-loading { background:var(--surface2); }
html.light-mode .category-list-panel.category-loading { background:var(--surface); }
.category-list-panel { border-radius:12px; overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,0.55),0 2px 10px rgba(0,0,0,0.38),inset 0 1px 0 rgba(255,255,255,0.06); }
.category-list-panel > .category-list,
.category-list-panel > .media-category-list { z-index:1; background:transparent; }
.category-list-panel > .scroll-track { z-index:2; }
html.light-mode .category-list-panel { box-shadow:0 10px 24px rgba(0,0,0,0.14),0 2px 8px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.65); }
.category-list-panel .category-item.active { background:var(--surface3); }
html.light-mode .category-list-panel .category-item.active { background:var(--surface2); color:var(--accent); font-weight:600; }
.category-list::-webkit-scrollbar { display:none; }
.category-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px 0 19px; height:var(--sidebar-row-height,84px); min-height:var(--sidebar-row-height,84px); max-height:var(--sidebar-row-height,84px); border-radius:8px; cursor:pointer; font-size:var(--fs-lg); font-weight:500; color:rgba(255,255,255,0.75); background:transparent; border:none; position:relative; transition:background 0.12s,color 0.12s; margin-bottom:2px; box-sizing:border-box; }
.category-item:hover { background:rgba(255,255,255,0.06); color:#fff; }
.category-item.active { background:rgba(255,255,255,0.1); color:#fff; font-weight:600; }
.category-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); border-radius:0; }
.category-item.favourites .ci-icon { color:var(--accent); }
.category-list.cat-selection-locked { pointer-events:none; opacity:0.55; transition:opacity 0.2s; }
.category-item.search-hit { background:rgba(227,25,55,0.16); color:#fff; box-shadow:0 0 0 1px rgba(227,25,55,0.24), 0 0 18px rgba(227,25,55,0.16); }
.category-item.search-hit::after { content:''; position:absolute; inset:0; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); pointer-events:none; }
.category-name { display:block; flex:1; min-width:0; overflow:hidden; overflow-wrap:anywhere; white-space:normal; line-height:1.25; color:inherit; }
.category-skeleton-list { display:flex; flex-direction:column; gap:2px; padding-right:6px; min-height:100%; }
.category-skeleton-item { display:flex; align-items:center; height:80px; min-height:80px; padding:0 18px 0 18px; }
.category-skeleton-text { height:22px; width:calc(100% - 6px); max-width:none; }
.category-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ios-toggle { position:relative; display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; }
.ios-toggle input { position:absolute; opacity:0; width:0; height:0; }
.ios-toggle-track { width:51px; height:31px; background:rgba(255,255,255,0.15); border-radius:999px; transition:background 0.2s; position:relative; }
.ios-toggle input:checked + .ios-toggle-track { background:var(--accent); }
.ios-toggle.is-checked .ios-toggle-track { background:var(--accent); }
.ios-toggle-thumb { position:absolute; top:2px; left:2px; width:27px; height:27px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.3); transition:transform 0.2s; }
.ios-toggle input:checked + .ios-toggle-track .ios-toggle-thumb { transform:translateX(20px); }
.ios-toggle.is-checked .ios-toggle-thumb { transform:translateX(20px); }
.category-hide-btn { background:transparent; border:1px solid var(--border2); border-radius:10px; color:var(--text3); font-size:12px; font-weight:700; padding:0 10px; height:30px; cursor:pointer; }
.category-hide-btn:hover { border-color:var(--accent); color:var(--text); background:var(--accent-bg); }

.ch-count, .channel-list { display:none; }

/* Channel row */
.channel-item { display:flex; align-items:flex-start; gap:16px; padding:14px 14px 0; height:var(--ch-h); border-radius:10px; cursor:pointer; transition:background 0.15s; position:relative; overflow:hidden; }
.channel-item:hover { background:rgba(255,255,255,0.05); }
.channel-item.active { background:rgba(227,25,55,0.12); }
.channel-item.active::before { content:''; position:absolute; left:0; top:0; height:100%; width:4px; background:var(--accent); border-radius:0; }
.channel-list.reorder-mode .channel-item { animation:channelReorderJiggle 0.16s ease-in-out infinite alternate; cursor:grab; }
.channel-list.reorder-mode .fav-btn { pointer-events:none; opacity:0.6; }
.channel-item.reorder-dragging { opacity:0.32; }
.channel-item.reorder-placeholder { background:rgba(227,25,55,0.18); box-shadow:inset 0 0 0 1px rgba(227,25,55,0.28); }
.channel-list.reorder-mode .channel-item,
.channel-list.reorder-mode .channel-item * { user-select:none; -webkit-user-select:none; }
.channel-reorder-ghost { position:fixed; left:0; top:0; width:min(420px,calc(100vw - 32px)); pointer-events:none; z-index:1200; opacity:0.96; transform-origin:center center; box-shadow:0 18px 42px rgba(0,0,0,0.42); background:rgba(17,20,26,0.98); border:1px solid rgba(255,255,255,0.12); border-radius:12px; }
.channel-reorder-ghost .fav-btn { display:none; }
@keyframes channelReorderJiggle {
  from { transform:rotate(-1.15deg); }
  to { transform:rotate(1.15deg); }
}
.channel-logo { width:52px; height:52px; border-radius:10px; background:var(--surface3); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text3); font-weight:700; margin-top:1px; }
.channel-logo img { width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; }
.channel-info { flex:1; min-width:0; padding-top:2px; }
.channel-name { font-size:var(--fs-sm); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.channel-epg { font-size:var(--fs-xs); color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:5px; }
.fav-btn { background:var(--accent); border:none; border-radius:12px; color:#fff; cursor:pointer; padding:0; flex-shrink:0; opacity:1; transition:background 0.15s,transform 0.1s; width:46px; height:46px; display:flex; align-items:center; justify-content:center; }
.fav-btn .ci-icon { width:22px; height:22px; }
.fav-btn:hover { background:var(--accent2); }
.fav-btn:active { transform:scale(0.9); }
.fav-empty-inline-btn { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; margin:0 8px; vertical-align:middle; border-radius:12px; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); color:#fff; box-sizing:border-box; }
.fav-empty-inline-btn .ci-icon { width:22px; height:22px; }

/* ── APP LANDING PANEL ── */
#app-landing-panel { position:absolute; inset:0; z-index:12; background:var(--bg,#090c11); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; overflow:hidden; box-sizing:border-box; min-height:100%; padding:0; }
#app-landing-panel.hidden { display:none; }
#app-landing-panel.landing-fade-in { animation:appLandingFadeIn 0.8s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes appLandingFadeIn { from{opacity:0;transform:translateY(28px) scale(0.985)} to{opacity:1;transform:translateY(0) scale(1)} }
.app-landing-scroll { flex:1; min-height:0; width:100%; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; display:flex; flex-direction:column; align-items:stretch; -webkit-overflow-scrolling:touch; }
.app-landing-scroll::-webkit-scrollbar { display:none; }
#app-landing-panel .landing-hero { flex:0 0 auto; min-height:100%; padding:32px 24px 28px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
#app-landing-panel .app-hero-main { flex:1 0 auto; width:100%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
/* When signed in, hide only the trial CTA — keep "Learn more" visible. */
#app-landing-panel.user-logged-in .landing-cta .add-playlist-btn { display:none; }
/* Large red category-loading spinner — sits between the hero text and the footer divider line */
.landing-cat-spinner { display:none; justify-content:center; align-items:center; margin-top:44px; }
#app-landing-panel.categories-loading .landing-cat-spinner { display:flex; }
.landing-cat-ring { width:110px; height:110px; border:9px solid var(--accent-bg); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
#app-landing-panel .landing-hero img { margin-bottom:52px; height:148px; }
#app-landing-panel .landing-tagline { margin-bottom:36px; font-size:84px; }
#app-landing-panel .landing-subtitle { margin-top:16px; margin-bottom:0; max-width:1100px; font-size:40px; }
#app-landing-panel .landing-cta { flex:0 0 auto; padding:36px 0 0; gap:24px; }
#app-landing-panel .landing-cta .add-playlist-btn { font-size:36px; height:84px; padding:0 64px; border-radius:10px; box-shadow:0 10px 32px rgba(227,25,55,0.38), 0 0 48px rgba(227,25,55,0.22); }
/* "Learn more": dark red with a red 2px border, same height as the trial button */
#app-landing-panel .landing-cta .landing-learn-more-btn { display:inline-flex; align-items:center; justify-content:center; font-size:36px; height:84px; padding:0 52px; border-radius:10px; border:2px solid var(--btn-red-border); background:var(--btn-dark-red); color:#fff; box-shadow:0 6px 22px rgba(0,0,0,0.30); box-sizing:border-box; }
#app-landing-panel .landing-cta .landing-learn-more-btn:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
/* Sign In + light-mode discovery pill — tight equal top/right inset; top-align so the
   shorter pill matches the right-edge gap (not vertically centered against Sign In). */
#app-landing-panel .app-landing-top-actions {
  position:absolute; top:12px; right:12px; z-index:12;
  display:flex; align-items:flex-start; justify-content:flex-end; gap:12px;
  flex-wrap:wrap; max-width:calc(100% - 24px);
}
#app-landing-panel .app-landing-signin-top {
  position:static; top:auto; right:auto;
  height:68px; padding:0 38px; font-size:36px; border-radius:10px;
  background:var(--btn-dark-red); border:2px solid var(--btn-red-border); color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,0.34);
}
#app-landing-panel .app-landing-signin-top:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
#app-landing-panel .landing-light-mode-pill {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 14px 0 16px; border-radius:10px; border:1.5px solid rgba(227,25,55,0.55);
  background:rgba(227,25,55,0.14); color:#fff; font-size:15px; font-weight:700;
  letter-spacing:-0.2px; cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,0.22); transition:background 0.15s,border-color 0.15s,transform 0.1s;
}
#app-landing-panel .landing-light-mode-pill .ci-icon {
  width:16px; height:16px; flex-shrink:0; display:block;
}
#app-landing-panel .landing-light-mode-pill:hover {
  background:rgba(227,25,55,0.24); border-color:rgba(227,25,55,0.85);
}
#app-landing-panel .landing-light-mode-pill:active { transform:scale(0.97); }
html.light-mode #app-landing-panel .landing-light-mode-pill {
  background:rgba(227,25,55,0.10); color:var(--text); border-color:rgba(227,25,55,0.45);
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}
#app-landing-panel .landing-footer-links { position:relative; z-index:1; }
#app-landing-panel .landing-hero::after { display:none; }
#app-landing-panel .landing-footer { padding:0; margin-top:48px; padding-top:48px; border-top:1px solid rgba(255,255,255,0.28); width:100%; max-width:1280px; font-size:22px; }
#app-landing-panel .landing-footer-links { margin-top:auto; padding:16px 24px 40px; }
#app-landing-panel .landing-footer-links a { font-size:22px; }
/* ── PLAYER ── */
.player-area { flex:1; display:flex; flex-direction:column; background:#0e0e0e; overflow:hidden; position:relative; padding:14px; }
/* ── Premium upsell panel ───────────────────────────────────────── */
/* Premium upsell panel */
#premium-upsell-panel { position:absolute; inset:0; z-index:8; overflow:hidden; background:var(--bg); display:none; flex-direction:column; align-items:stretch; border-radius:20px; }
#premium-upsell-panel.open { display:flex; }
#premium-upsell-panel .pu-back-btn { position:absolute; top:20px; left:20px; z-index:12; width:auto; height:76px; padding:0; gap:0; border-radius:16px; line-height:1; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); color:#fff; }
#premium-upsell-panel .pu-back-btn:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
#premium-upsell-panel .pu-back-btn .detail-back-inner { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 28px; height:100%; box-sizing:border-box; }
#premium-upsell-panel .pu-back-btn .back-chevron { width:38px; height:38px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
#premium-upsell-panel .pu-back-btn .back-chevron .ci-icon { width:38px; height:38px; }
#pu-back-btn-text { font-size:var(--fs-lg); font-weight:700; line-height:1; }
html.desktop-mode #premium-upsell-panel .pu-back-btn { top:16px; left:16px; height:44px; border-radius:12px; }
html.desktop-mode #premium-upsell-panel .pu-back-btn .detail-back-inner { padding:0 18px; gap:10px; }
html.desktop-mode #premium-upsell-panel .pu-back-btn .back-chevron,
html.desktop-mode #premium-upsell-panel .pu-back-btn .back-chevron .ci-icon { width:22px; height:22px; }
html.desktop-mode #pu-back-btn-text { font-size:15px; }
.pu-signin-btn {
  position:absolute; top:20px; right:20px; z-index:12;
  height:76px; padding:0 34px; border-radius:16px;
  background:var(--btn-dark-red); border:2px solid var(--btn-red-border); color:#fff;
  font-size:var(--fs-lg); font-weight:700; line-height:1; cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,0.30); transition:background 0.15s,border-color 0.15s;
}
.pu-signin-btn:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
.pu-signin-btn.hidden { display:none; }
html.desktop-mode .pu-signin-btn { top:16px; right:16px; height:44px; padding:0 22px; font-size:15px; border-radius:12px; }
.pu-scroll-body { flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; align-items:center; min-height:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pu-scroll-body::-webkit-scrollbar { display:none; }
.pu-si-track { position:absolute; right:3px; top:6px; bottom:6px; width:3px; background:rgba(255,255,255,0.07); border-radius:3px; z-index:10; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.pu-si-track.si-visible { opacity:1; }
.pu-si-thumb { position:absolute; left:0; right:0; top:0; background:var(--accent); border-radius:3px; min-height:20px; opacity:0.65; transition:opacity 0.15s; }
.pu-si-track.si-scrolling .pu-si-thumb { opacity:1; }
html.light-mode .pu-si-track { background:rgba(0,0,0,0.08); }
.pu-hero { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 40px 48px; background:radial-gradient(ellipse at 50% -10%,rgba(227,25,55,0.24) 0%,rgba(227,25,55,0.07) 48%,transparent 74%); position:relative; flex-shrink:0; }
.pu-hero img { height:72px; margin-bottom:48px; }
.pu-dismiss { position:absolute; top:20px; right:20px; background:transparent; border:1px solid var(--border2); border-radius:var(--radius); color:var(--text2); font-size:var(--fs-md); font-weight:700; height:var(--btn-h); padding:0 28px; cursor:pointer; transition:color 0.15s,border-color 0.15s; }
.pu-dismiss:hover { color:var(--text); border-color:rgba(255,255,255,0.4); }
.pu-headline { font-size:68px; font-weight:800; letter-spacing:-1.7px; line-height:1.1; }
.pu-trigger-msg { font-size:var(--fs-md); font-weight:600; color:var(--text2); margin-top:14px; max-width:820px; }
.pu-trigger-msg:empty { display:none; }
.pu-inner { width:100%; max-width:1320px; padding:30px 24px 72px; display:flex; flex-direction:column; gap:0; align-self:center; box-sizing:border-box; }
.pu-benefit-card { border:1px solid var(--border2); border-radius:24px; padding:36px 32px; background:rgba(255,255,255,0.02); display:flex; flex-direction:column; width:100%; box-sizing:border-box; }
.pu-benefit-card.premium-card { border-color:rgba(227,25,55,0.38); background:linear-gradient(150deg,rgba(227,25,55,0.09) 0%,rgba(255,255,255,0.015) 100%); }
.pu-benefit-card.pu-full-width { max-width:none; }
.pu-benefit-title { font-size:var(--fs-xl); font-weight:900; margin-bottom:20px; color:#fff; }
.pu-benefit-title.premium { color:#fff; }
.pu-benefit-list { list-style:none; display:flex; flex-direction:column; gap:20px; }
.pu-benefit-list.pu-benefit-list-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 32px; }
.pu-benefit-list li { display:flex; align-items:center; gap:14px; font-size:var(--fs-lg); line-height:1.4; color:var(--text2); white-space:normal; }
.pu-benefit-list li::before { content:'\2713'; color:#32d74b; font-weight:900; font-size:var(--fs-lg); flex-shrink:0; }
/* Price display in premium card */
.pu-premium-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; }
.pu-premium-header .pu-benefit-title { margin-bottom:0; }
.pu-price-display { text-align:right; flex-shrink:0; }
.pu-price-display .pu-price-annual { display:block; font-size:36px; font-weight:900; color:var(--text); line-height:1.05; }
.pu-price-display .pu-price-monthly { display:block; font-size:24px; font-weight:700; color:var(--text2); margin-top:4px; line-height:1.1; }
.pu-billing-toggle { display:inline-flex; align-self:center; gap:0; margin:4px auto 40px; padding:4px; border:1px solid var(--border2); border-radius:14px; background:rgba(255,255,255,0.03); }
.pu-billing-toggle[hidden] { display:none; }
.pu-billing-btn { height:48px; padding:0 22px; border:none; border-radius:11px; background:transparent; color:var(--text2); font-size:var(--fs-md); font-weight:800; cursor:pointer; }
.pu-billing-btn.active { background:rgba(227,25,55,0.92); color:#fff; }
.pu-billing-btn:hover:not(.active) { color:var(--text); }
.pu-cancel-note { margin-top:14px; font-size:var(--fs-sm); color:var(--text3); text-align:center; line-height:1.5; }
/* Annual / monthly toggle inside the embedded Stripe checkout view */
.scp-billing-toggle { display:flex; align-self:center; width:max-content; max-width:100%; gap:0; margin:0 0 18px; padding:4px; border:1px solid var(--border2); border-radius:14px; background:rgba(255,255,255,0.03); }
.scp-billing-btn { flex:0 1 auto; height:46px; padding:0 14px; border:none; border-radius:11px; background:transparent; color:var(--text2); font-size:var(--fs-sm); font-weight:800; cursor:pointer; white-space:nowrap; transition:background 0.15s,color 0.15s; }
.scp-billing-btn.active { background:rgba(227,25,55,0.92); color:#fff; }
.scp-billing-btn:hover:not(.active) { color:var(--text); }
/* Landing "Learn more" button */
.landing-learn-more-wrap { margin-top:20px; }
.landing-learn-more-btn { display:inline-flex; align-items:center; justify-content:center; height:var(--btn-h); padding:0 28px; border:2px solid var(--btn-red-border); border-radius:var(--radius); background:var(--btn-dark-red); color:#fff; font-size:var(--fs-md); font-weight:700; text-decoration:none; transition:background 0.15s,border-color 0.15s; }
.landing-learn-more-btn:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
/* Get Premium button inside Premium card */
.pu-card-cta-wrap { margin-top:auto; padding-top:56px; display:flex; flex-direction:row; justify-content:center; align-items:center; flex-wrap:wrap; gap:18px; }
.pu-card-cta { width:auto; min-width:0; height:var(--btn-h); padding:0 32px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); border:none; border-radius:var(--radius); color:#fff; font-size:var(--fs-lg); font-weight:700; cursor:pointer; transition:background 0.15s; }
.pu-card-cta:hover { background:var(--accent2); }
.pu-card-cta.pu-trial-cta { background:#15171c !important; border:2px solid rgba(180,184,194,.48) !important; color:#d5d7dc !important; box-shadow:none !important; }
.pu-card-cta.pu-trial-cta:hover { background:#20232a !important; border-color:rgba(210,213,220,.72) !important; color:#fff !important; }
.pu-card-cta.pu-get-premium-cta { background:var(--btn-dark-red) !important; border:2px solid var(--btn-red-border) !important; color:#fff !important; }
.pu-card-cta.pu-get-premium-cta:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent) !important; }
html.light-mode .pu-card-cta.pu-trial-cta { background:#eceef2 !important; border-color:rgba(80,85,96,.42) !important; color:#252832 !important; }
html.light-mode .pu-card-cta.pu-trial-cta:hover { background:#e2e5ea !important; border-color:rgba(50,55,66,.6) !important; color:#111 !important; }
/* "Continue using free" button in the Free card (trial-expired paywall only) */
.pu-free-cta-wrap { width:auto; }
.pu-card-cta.pu-free-cta { width:auto; height:var(--btn-h); padding:0 24px; background:#15171c !important; border:2px solid rgba(180,184,194,.48) !important; color:#d5d7dc; font-size:var(--fs-md); box-shadow:none; }
.pu-card-cta.pu-free-cta:hover { background:#20232a !important; border-color:rgba(210,213,220,.72) !important; color:#fff; }
#premium-upsell-panel.trial-expired-mode .pu-card-cta-wrap { flex-direction:row; justify-content:center; align-items:center; flex-wrap:nowrap; gap:18px; padding-top:48px; }
#premium-upsell-panel.trial-expired-mode .pu-card-cta { font-size:var(--fs-lg); }
#premium-upsell-panel.trial-expired-mode #pu-primary-cta { display:none; }
#premium-upsell-panel.trial-expired-mode #pu-get-premium-cta { box-shadow:0 10px 32px rgba(227,25,55,.38),0 0 48px rgba(227,25,55,.22); }
html.light-mode .pu-card-cta.pu-free-cta { background:#eceef2 !important; border-color:rgba(80,85,96,.42) !important; color:#252832; }
html.light-mode .pu-card-cta.pu-free-cta:hover { background:#e2e5ea !important; border-color:rgba(50,55,66,.6) !important; color:#111; }
#pu-offer-step,.pu-payment-step { width:100%; }
.pu-payment-step { position:relative; min-height:360px; border:1px solid rgba(227,25,55,0.34); border-radius:24px; padding:36px 32px; background:linear-gradient(150deg,rgba(227,25,55,0.09),rgba(255,255,255,0.015)); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; text-align:center; }
.pu-payment-step[hidden] { display:none; }
.pu-step-back { position:absolute; top:22px; left:24px; height:44px; padding:0 16px; border:1px solid var(--border2); border-radius:12px; background:rgba(255,255,255,0.035); color:var(--text2); font-size:var(--fs-sm); font-weight:700; cursor:pointer; }
.pu-step-back:hover { color:var(--text); border-color:rgba(255,255,255,0.38); }
.pu-payment-kicker { margin-top:4px; color:var(--accent); font-size:13px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.pu-payment-step h2 { margin:10px 0 8px; color:var(--text); font-size:34px; line-height:1.1; }
.pu-payment-step > p { max-width:620px; margin:0 0 28px; color:var(--text2); font-size:var(--fs-md); line-height:1.5; }
.pu-method-grid { width:100%; max-width:820px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pu-method-card { min-height:112px; display:flex; align-items:center; gap:18px; padding:20px 22px; border:1px solid var(--border2); border-radius:18px; background:rgba(255,255,255,0.045); color:var(--text); text-align:left; cursor:pointer; transition:transform .15s,border-color .15s,background .15s; }
.pu-method-card:hover { transform:translateY(-2px); border-color:rgba(227,25,55,.72); background:rgba(227,25,55,.09); }
.pu-method-card:disabled { opacity:.62; cursor:wait; transform:none; }
.pu-method-icons { width:64px; height:50px; display:flex; align-items:center; justify-content:center; gap:7px; flex-shrink:0; border-radius:12px; background:#fff; color:#050505; }
.pu-apple-mark { font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:27px; line-height:1; }
.pu-google-mark { font-family:Arial,sans-serif; font-size:23px; font-weight:800; color:#4285f4; }
.pu-card-mark { width:64px; height:50px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:12px; background:rgba(255,255,255,.1); color:var(--text); font-size:34px; line-height:1; }
.pu-method-copy { min-width:0; display:flex; flex:1; flex-direction:column; gap:7px; }
.pu-method-copy strong { font-size:var(--fs-md); line-height:1.2; }
.pu-method-copy small { color:var(--text2); font-size:var(--fs-sm); line-height:1.35; }
.pu-method-chevron { color:var(--text3); font-size:34px; }
.pu-payment-security { max-width:720px; margin-top:24px; color:var(--text3); font-size:13px; line-height:1.5; }
.pu-wallet-step > p { margin-bottom:20px; }
.pu-wallet-native-shell { width:min(420px,100%); display:flex; flex-direction:column; align-items:stretch; gap:14px; }
#pu-express-checkout-element { min-height:56px; }
.pu-wallet-qr-shell { position:relative; width:238px; height:238px; display:flex; align-items:center; justify-content:center; padding:13px; border-radius:22px; background:#fff; box-shadow:0 18px 44px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.12); box-sizing:border-box; }
#pu-wallet-qr-code { width:212px; height:212px; display:flex; align-items:center; justify-content:center; }
#pu-wallet-qr-code img,#pu-wallet-qr-code canvas { display:block; width:212px !important; height:212px !important; }
.pu-wallet-qr-loading { position:absolute; inset:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:12px; background:#fff; color:#555; font-size:13px; font-weight:700; }
.pu-wallet-qr-loading.hidden { display:none; }
.pu-wallet-spinner { width:30px; height:30px; border:3px solid #e5e5e5; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.pu-wallet-status { min-height:22px; margin-top:17px; color:var(--text2); font-size:var(--fs-sm); font-weight:650; }
.pu-wallet-status.success { color:#32d74b; }
.pu-wallet-status.error { color:#fca5a5; }
.pu-wallet-retry { margin-top:12px; min-height:44px; padding:0 20px; border:1px solid var(--accent); border-radius:12px; background:transparent; color:var(--text); font-size:var(--fs-sm); font-weight:800; cursor:pointer; }
/* Scroll hint */
#pu-scroll-hint { display:none; position:absolute; bottom:0; left:0; right:0; height:96px; background:linear-gradient(to bottom,transparent,var(--bg) 72%); align-items:flex-end; justify-content:center; padding-bottom:14px; pointer-events:none; transition:opacity 0.35s; z-index:2; }
#pu-scroll-hint.hidden { opacity:0; }
#pu-scroll-hint svg { width:30px; height:30px; color:var(--accent); animation:pu-bounce 1.5s ease-in-out infinite; }
@keyframes pu-bounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(8px);opacity:0.45} }
html.desktop-mode #premium-upsell-panel .pu-hero { padding:28px 40px 24px; }
html.desktop-mode #premium-upsell-panel .pu-hero img { height:68px; margin-bottom:22px; }
html.desktop-mode #premium-upsell-panel .pu-headline { font-size:48px; letter-spacing:-1.2px; }
html.desktop-mode #premium-upsell-panel .pu-trigger-msg { font-size:18px; margin-top:12px; }
html.desktop-mode #premium-upsell-panel .pu-inner { max-width:1320px; padding:10px 22px 40px; }
html.desktop-mode #premium-upsell-panel .pu-benefit-card { padding:32px 34px; }
html.desktop-mode #premium-upsell-panel .pu-benefit-title { font-size:34px; margin-bottom:16px; }
html.desktop-mode #premium-upsell-panel .pu-benefit-list.pu-benefit-list-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 28px; }
html.desktop-mode #premium-upsell-panel .pu-premium-header { margin-bottom:20px; }
html.desktop-mode #premium-upsell-panel .pu-benefit-list { gap:16px; }
html.desktop-mode #premium-upsell-panel .pu-benefit-list li { font-size:18px; }
html.desktop-mode #premium-upsell-panel .pu-benefit-list li::before { font-size:18px; }
html.desktop-mode #premium-upsell-panel .pu-billing-toggle { margin:6px auto 44px; }
html.desktop-mode #premium-upsell-panel .pu-billing-btn { height:48px; padding:0 22px; font-size:16px; }
html.desktop-mode #premium-upsell-panel .pu-price-display .pu-price-annual { font-size:36px; }
html.desktop-mode #premium-upsell-panel .pu-price-display .pu-price-monthly { font-size:22px; }
html.desktop-mode #premium-upsell-panel .pu-card-cta-wrap { padding-top:56px; }
html.desktop-mode #premium-upsell-panel .pu-card-cta { height:58px; font-size:18px; padding:0 34px; }
html.desktop-mode #premium-upsell-panel .pu-payment-step { padding:26px 28px; min-height:0; }
html.desktop-mode #premium-upsell-panel .pu-payment-step h2 { font-size:30px; }
html.desktop-mode #premium-upsell-panel .pu-payment-step > p { margin-bottom:18px; }
html.desktop-mode #premium-upsell-panel .pu-method-card { min-height:96px; padding:16px 18px; }
html.desktop-mode #premium-upsell-panel .pu-payment-security { margin-top:16px; }
html.desktop-mode #premium-upsell-panel .pu-wallet-qr-shell { width:212px; height:212px; }
html.desktop-mode #premium-upsell-panel #pu-wallet-qr-code,html.desktop-mode #premium-upsell-panel #pu-wallet-qr-code img,html.desktop-mode #premium-upsell-panel #pu-wallet-qr-code canvas { width:186px !important; height:186px !important; }
/* Desktop never shows the phone QR — native Apple/Google Pay only. */
html.desktop-mode #premium-upsell-panel #pu-wallet-qr-step #pu-wallet-qr-shell { display:none !important; }
@media (max-width:760px) {
  .pu-payment-step { padding:82px 18px 28px; }
  .pu-method-grid { grid-template-columns:1fr; }
  .pu-method-card { min-height:92px; }
  .pu-payment-step h2 { font-size:29px; }
  .pu-step-back { top:20px; left:18px; }
}
.video-wrap { position:relative; flex:1; background:#0e0e0e; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; border-radius:20px; }
#video { width:100%; height:100%; object-fit:contain; display:block; border-radius:20px; }
.idle-screen { position:absolute; inset:0; display:none; align-items:center; justify-content:center; }
.player-watermark { position:absolute; left:32px; bottom:30px; z-index:1; pointer-events:none; opacity:1; }
.player-watermark.hidden { display:none; }
.player-watermark img { display:block; width:380px; height:auto; object-fit:contain; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.72)); }
.tv-expanded .player-watermark img { width:560px; }
/* Free user fullscreen watermark — large and annoying */
#sp-watermark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; left:auto; bottom:auto; z-index:2; animation:watermark-drift 18s ease-in-out infinite; }
#sp-watermark.hidden { display:none; }
#sp-watermark img { width:55vw; max-width:700px; opacity:0.22; filter:drop-shadow(0 0 40px rgba(0,0,0,0.9)); }
@keyframes watermark-drift {
  0%   { transform:translate(0,0); }
  20%  { transform:translate(8vw,-6vh); }
  40%  { transform:translate(-6vw,8vh); }
  60%  { transform:translate(10vw,6vh); }
  80%  { transform:translate(-8vw,-8vh); }
  100% { transform:translate(0,0); }
}

/* Fullscreen player text blocks share one width before wrapping */
:root { --fs-player-text-width:60vw; }
.overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.65) 0%,transparent 35%,transparent 55%,rgba(0,0,0,0.85) 100%); opacity:0; transition:opacity 0.3s; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; padding:28px 34px 84px; }
.overlay.visible { opacity:1; pointer-events:all; }
.overlay-top { display:flex; align-items:center; gap:16px; max-width:var(--fs-player-text-width); }
.overlay-top .overlay-ch-name { min-width:0; flex:1 1 auto; }
.overlay-channel-logo { width:48px; height:48px; border-radius:10px; background:rgba(255,255,255,0.12); overflow:hidden; flex-shrink:0; display:none; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:900; box-shadow:0 8px 24px rgba(0,0,0,0.38); }
.overlay-channel-logo img { width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.overlay-ch-name { font-size:var(--fs-xl); font-weight:700; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.7); max-width:var(--fs-player-text-width); overflow-wrap:anywhere; line-height:1.15; }
.live-badge { background:var(--accent); color:#fff; border-radius:8px; font-size:16px; font-weight:800; padding:6px 14px; letter-spacing:1px; }
.live-badge.hidden { display:none; }
.overlay-bottom { display:flex; flex-direction:column; gap:16px; }
.live-meta-frost { display:flex; flex-direction:column; gap:16px; }
/* Fullscreen live metadata: text only over the video — no frosted panel */
.tv-expanded .live-meta-frost,
.tv-expanded .overlay-top {
  align-self:flex-start;
  max-width:var(--fs-player-text-width);
  padding:0;
  border-radius:0;
  background:none;
  border:none;
  box-shadow:none;
  filter:var(--fs-meta-shadow);
}
.tv-expanded .overlay-top { gap:10px; }
.tv-expanded .live-meta-frost { gap:0; }
.tv-expanded .overlay-epg-desc-wrap { margin-top:6px; }
.tv-expanded .live-up-next.visible { margin-top:10px; }
.tv-expanded .overlay-top .overlay-ch-name,
.tv-expanded .overlay-top .live-badge,
.tv-expanded .live-meta-frost .epg-now,
.tv-expanded .live-meta-frost .epg-now strong,
.tv-expanded .live-meta-frost .epg-now-time,
.tv-expanded .live-meta-frost .overlay-epg-desc,
.tv-expanded .live-meta-frost .live-up-next,
.tv-expanded .live-meta-frost .live-up-next strong { text-shadow:none; }
.tv-expanded .overlay-bottom .audio-track-row { filter:var(--fs-meta-shadow); }
.tv-expanded .overlay-bottom .audio-label { text-shadow:none; }
.live-up-next { display:none; color:rgba(255,255,255,0.88); font-size:24px; font-weight:700; line-height:1.25; text-shadow:none; pointer-events:none; max-width:var(--fs-player-text-width); overflow-wrap:anywhere; }
.live-up-next strong { color:var(--accent); font-weight:900; }
.epg-now { font-size:calc(var(--fs-lg) + 2px); color:rgba(255,255,255,0.85); max-width:var(--fs-player-text-width); overflow-wrap:anywhere; line-height:1.2; }
.epg-now strong { color:#fff; font-weight:700; }
.epg-now-time { display:inline-block; margin-left:12px; color:var(--accent); }
.overlay-epg-desc-wrap { max-width:var(--fs-player-text-width); cursor:pointer; }
.overlay-epg-desc { color:rgba(255,255,255,0.72); font-size:var(--fs-sm); line-height:1.45; max-height:84px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--accent) rgba(255,255,255,0.1); padding-right:8px; }
.overlay-epg-desc::-webkit-scrollbar { width:4px; }
.overlay-epg-desc::-webkit-scrollbar-track { background:rgba(255,255,255,0.1); border-radius:2px; }
.overlay-epg-desc::-webkit-scrollbar-thumb { background:var(--accent); border-radius:2px; }
.ctrl-row { display:flex; align-items:center; gap:16px; }
.ctrl-btn { background:rgba(255,255,255,0.2); border:none; border-radius:14px; color:white; font-size:28px; width:74px; height:74px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s; flex-shrink:0; }
.ctrl-btn:hover { background:rgba(255,255,255,0.32); }
.ctrl-btn:active { background:rgba(255,255,255,0.42); transform:scale(0.93); }
.fullscreen-btn { margin-left:auto; }

/* EPG Guide */
.epg-panel { display:none; position:absolute; inset:0; background:var(--bg); z-index:5; flex-direction:column; overflow:hidden; }
.epg-panel.open { display:flex; }
.epg-pip { position:relative; width:100%; height:480px; min-height:480px; max-height:480px; flex-shrink:0; overflow:hidden; background:#050505; z-index:6; display:none; margin:0; border-radius:0; }
.epg-pip.open { display:block; }
#epg-pip.epg-pip-playable { cursor:pointer; }
#epg-pip.epg-pip-playable .epg-pip-meta { cursor:pointer; }
/* Stand-in shown in the EPG panel while the live miniplayer is floated out into
   the picture-in-picture window, so the guide keeps its normal size instead of
   stretching up to fill the vacated space. The video area becomes a black
   "PIP active" box; the real programme-data panel is moved in beside it. */
.epg-pip-placeholder { position:relative; width:100%; height:480px; min-height:480px; max-height:480px; flex-shrink:0; overflow:hidden; background:#050505; z-index:6; display:none; }
.epg-pip-placeholder.open { display:block; }
.epg-pip-ph-slot { width:min(50%, 720px); height:100%; flex-shrink:0; background:#000; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 32px; box-sizing:border-box; color:rgba(255,255,255,0.6); font-size:24px; font-weight:700; letter-spacing:0.4px; }
#epg-pip.tab-floating{position:fixed;bottom:24px;right:24px;left:auto;top:auto;width:720px;z-index:200;display:block;border-radius:0;overflow:hidden;border:6px solid var(--btn-dark-red);box-shadow:0 8px 16px rgba(0,0,0,0.6),0 24px 64px rgba(0,0,0,0.75);touch-action:none;}
body.epg-expanded #epg-pip.tab-floating{z-index:500;}
body.pip-floating-drag-lock #epg-grid-wrap,
body.pip-floating-drag-lock #epg-grid-outer{touch-action:none;}
body.pip-floating-drag-lock #epg-grid-wrap{pointer-events:none;}
#epg-pip.tab-floating::before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:180px;height:4px;border-radius:999px;background:rgba(185,188,196,0.7);box-shadow:0 2px 10px rgba(0,0,0,0.34);z-index:3;pointer-events:none;}
#epg-pip.tab-floating .epg-pip-meta{display:none;}
#epg-pip.tab-floating .epg-pip-video-slot{width:100%;}
.epg-pip-close{display:none;position:absolute;top:16px;right:16px;z-index:4;background:var(--btn-dark-red);border:2px solid var(--btn-red-border);border-radius:14px;color:white;width:76px;height:76px;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s,border-color 0.15s;}
.epg-pip-close:hover{background:var(--btn-dark-red-hover);border-color:var(--accent);}
.epg-pip-close .ci-icon{width:36px;height:36px;}
#epg-pip.tab-floating .epg-pip-close{display:flex;}
.epg-pip-layout { display:flex; align-items:stretch; width:100%; height:480px; min-height:480px; max-height:480px; margin:0; padding:0; box-sizing:border-box; gap:0; }
.epg-pip-video-slot { width:min(50%, 720px); height:100%; background:#000; flex-shrink:0; align-self:stretch; cursor:pointer; position:relative; overflow:hidden; border-radius:0; }
.epg-pip-video-slot::after { content:''; position:absolute; top:0; right:0; bottom:0; width:1px; background:rgba(255,255,255,0.12); pointer-events:none; z-index:2; }
.epg-pip video { width:100%; height:100%; object-fit:cover; background:#000; pointer-events:none; }
#epg-pip-video-slot #spinner { pointer-events:none; }
.epg-pip-play,
.epg-pip-loading {
  position:absolute; left:min(25%,360px); top:50%; transform:translate(-50%,-50%); z-index:10;
}
.epg-pip-play {
  width:96px; height:96px; border:none; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 0 0 1px rgba(227,25,55,0.3), 0 0 90px 20px rgba(227,25,55,0.5), 0 10px 28px rgba(0,0,0,0.35); font-size:44px; padding-left:6px;
}
.epg-pip-play .ci-icon { width:48px; height:48px; }
.epg-pip-play.hidden { display:none; }
.epg-pip-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; width:min(50%,720px); max-width:100%; }
.epg-pip-loading.hidden { display:none; }
.epg-pip-loading-boot { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; width:min(340px,64%); }
.epg-pip-loading-spinner { display:flex; align-items:center; justify-content:center; }
.epg-pip-loading-progress-wrap { width:100%; display:flex; flex-direction:column; align-items:stretch; }
.epg-pip-loading-progress-wrap.hidden { display:none; }
.epg-pip-loading-progress-track { width:100%; height:12px; background:rgba(255,255,255,0.14); border-radius:0; overflow:hidden; }
.epg-pip-loading-progress-bar { height:100%; width:0%; background:var(--accent); border-radius:0; transition:width 0.45s ease; box-shadow:0 0 14px rgba(227,25,55,0.55); }
.epg-pip-loading-status { color:#fff; font-size:28px; font-weight:700; letter-spacing:0.3px; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,0.85); line-height:1.35; width:100%; }
.epg-pip-loading-status:empty { display:none; }
.epg-pip-play:hover { background:var(--accent2); }
.epg-pip-controls { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:16px; }
.epg-pip-mute { background:var(--btn-dark-red); border:2px solid var(--btn-red-border); border-radius:14px; color:white; width:76px; height:76px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s; padding:0; line-height:1; flex-shrink:0; }
.epg-pip-mute.hidden { display:none; }
/* Only react to a real pointer hover — never to a touch tap (which would
   otherwise leave a sticky :hover colour change after toggling mute). */
@media (hover:hover){ .epg-pip-mute:hover { background:var(--btn-dark-red-hover); } }
.epg-pip-mute .ci-icon { width:36px; height:36px; }
#mute-btn .ci-icon { width:64px; height:64px; }
.epg-pip-stop { background:var(--btn-dark-red); border:2px solid var(--btn-red-border); border-radius:14px; color:white; width:76px; height:76px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s; padding:0; line-height:1; flex-shrink:0; }
.epg-pip-stop.hidden { display:none; }
@media (hover:hover){ .epg-pip-stop:hover { background:var(--btn-dark-red-hover); } }
.epg-pip-stop .ci-icon { width:36px; height:36px; }
#stop-btn .ci-icon { width:64px; height:64px; }
.epg-pip-meta { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-start; gap:16px; padding:28px 32px 28px; box-sizing:border-box; background:transparent; border-radius:0; }
.epg-pip-kicker { display:flex; align-items:center; gap:14px; min-width:0; }
.epg-pip-live { position:absolute; top:14px; left:14px; z-index:5; background:var(--accent); color:#fff; border-radius:999px; padding:6px 14px; font-size:14px; font-weight:900; letter-spacing:1px; pointer-events:none; display:flex; align-items:center; gap:7px; }
.epg-pip-live.hidden { display:none; }
.epg-pip-live .ci-icon { width:16px; height:16px; flex-shrink:0; }
.epg-pip-channel-logo { width:56px; height:56px; border-radius:12px; background:rgba(255,255,255,0.1); overflow:hidden; flex-shrink:0; display:none; align-items:center; justify-content:center; color:#fff; font-size:24px; font-weight:900; }
.epg-pip-channel-logo img { width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.epg-pip-channel { color:rgba(255,255,255,0.78); font-size:28px; font-weight:400; text-transform:uppercase; letter-spacing:1.2px; white-space:normal; overflow-wrap:anywhere; line-height:1.25; min-width:0; flex:1; }
.epg-pip-fav { background:rgba(255,255,255,0.16); border:none; border-radius:14px; color:var(--text2); width:62px; height:62px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex-shrink:0; transition:background 0.15s,color 0.15s,transform 0.1s; box-shadow:0 4px 16px rgba(0,0,0,0.3); }
.epg-pip-fav .ci-icon { width:30px; height:30px; }
.epg-pip-fav:hover { background:rgba(255,255,255,0.1); color:var(--text); }
.epg-pip-fav.faved { color:var(--accent); }
.epg-pip-fav:active { transform:scale(0.92); }
.epg-pip-title { color:#fff; font-size:52px; font-weight:800; line-height:1.08; overflow-wrap:anywhere; flex-shrink:0; }
.epg-pip-time { color:rgba(255,255,255,0.86); font-size:28px; font-weight:700; flex-shrink:0; }
.epg-pip-desc-wrap { position:relative; flex:1 1 auto; overflow:hidden; padding-right:16px; min-height:0; --epg-desc-scroll-opacity:0; --epg-desc-scroll-thumb:0px; --epg-desc-scroll-top:0px; }
.epg-pip-prog-scroll { height:100%; overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; gap:16px; padding-right:8px; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.epg-pip-prog-scroll::-webkit-scrollbar { display:none; }
.epg-pip-desc { color:rgba(255,255,255,0.72); font-size:24px; line-height:1.5; flex-shrink:0; }
.epg-pip-desc::-webkit-scrollbar { display:none; }
.epg-pip-desc-wrap::before { content:''; position:absolute; right:4px; top:0; bottom:0; width:4px; border-radius:999px; background:rgba(227,25,55,0.28); opacity:var(--epg-desc-scroll-opacity,0); pointer-events:none; transition:opacity 0.2s; z-index:1; }
.epg-pip-desc-wrap::after { content:''; position:absolute; right:4px; top:var(--epg-desc-scroll-top,0px); width:4px; height:var(--epg-desc-scroll-thumb,0px); border-radius:999px; background:var(--accent); opacity:var(--epg-desc-scroll-opacity,0); pointer-events:none; transition:opacity 0.2s; z-index:2; }
.epg-pip-meta.loading { padding-right:64px; overflow:hidden; min-width:0; }
.epg-pip-meta.loading .epg-pip-channel-logo { display:flex; background:transparent; border-radius:0; }
.epg-pip-meta.loading .epg-pip-kicker { padding-right:16px; box-sizing:border-box; max-width:100%; min-width:0; overflow:hidden; }
.epg-pip-meta.loading .epg-pip-desc-wrap { padding-right:20px; box-sizing:border-box; max-width:100%; min-width:0; }
.epg-pip-meta.loading .epg-pip-prog-scroll { padding-right:20px; box-sizing:border-box; max-width:100%; min-width:0; overflow-x:hidden; }
.epg-pip-meta.loading .epg-pip-channel,
.epg-pip-meta.loading .epg-pip-title,
.epg-pip-meta.loading .epg-pip-time { overflow:hidden; max-width:100%; min-width:0; }
.epg-pip-skel-logo { width:56px; height:56px; border-radius:0; display:block; flex-shrink:0; }
.epg-pip-skel-channel { display:block; width:72%; max-width:min(340px,calc(100% - 16px)); height:28px; box-sizing:border-box; }
.epg-pip-skel-fav { width:30px; height:30px; border-radius:8px; display:block; }
.epg-pip-skel-title { display:block; width:100%; max-width:100%; height:52px; box-sizing:border-box; }
.epg-pip-skel-time { display:block; width:52%; max-width:min(260px,calc(100% - 16px)); height:28px; box-sizing:border-box; }
.epg-pip-desc.loading { display:flex !important; flex-direction:column; gap:10px; overflow:hidden; padding-right:12px; box-sizing:border-box; max-width:100%; min-width:0; }
.epg-pip-skel-desc-line { display:block; height:24px; max-width:calc(100% - 8px); box-sizing:border-box; }
.epg-pip-skel-desc-line:nth-child(1) { width:82%; }
.epg-pip-skel-desc-line:nth-child(2) { width:72%; }
.epg-pip-skel-desc-line:nth-child(3) { width:58%; }
.epg-pip-expand-text { margin-top:12px; align-self:center; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); border-radius:10px; color:#fff; padding:0 36px; height:72px; display:flex; align-items:center; justify-content:center; gap:16px; cursor:pointer; font-size:24px; font-weight:700; flex-shrink:0; box-shadow:0 10px 28px rgba(0,0,0,0.3); transition:background 0.15s,transform 0.1s,box-shadow 0.15s; }
.epg-pip-expand-text .ci-icon { width:34px; height:34px; flex-shrink:0; }
.epg-pip-expand-text.hidden { display:none; }
.epg-pip-expand-text:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); box-shadow:0 12px 30px rgba(0,0,0,0.34); }
.epg-pip-expand-text:active { transform:scale(0.97); }
/* Matches the movie/TV PiP fullscreen button (.sp-pip-btn): same dark-red
   fill, red border, 16px radius and 38px glyph. */
.epg-pip-expand { background:var(--btn-dark-red); border:2px solid var(--btn-red-border); border-radius:16px; color:#fff; width:76px; height:76px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; box-sizing:border-box; padding:0; transition:background 0.15s; }
.epg-pip-expand .ci-icon { width:38px; height:38px; }
.epg-pip-expand.hidden { display:none; }
.epg-pip-expand:hover { background:var(--btn-dark-red-hover); }
.epg-time-header-host { flex-shrink:0; position:relative; z-index:6; background:var(--surface); margin:0; overflow:visible; border-top:1px solid var(--border); }
.epg-grid-outer { flex:1; min-height:0; position:relative; overflow:hidden; }
.epg-panel.epg-holding-guide .epg-time-header-host,
.epg-panel.epg-holding-guide .epg-grid-outer { visibility:hidden; pointer-events:none; }
.epg-panel.epg-holding-guide .epg-guide-busy-overlay { display:none !important; }
.epg-guide-busy-overlay { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.52); pointer-events:auto; touch-action:none; }
.epg-guide-busy-overlay[hidden] { display:none !important; }
.epg-grid-wrap { width:100%; height:100%; overflow:auto; position:relative; scrollbar-width:none; }
.epg-grid-wrap:has(> .epg-loading:only-child) { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.epg-loading { display:flex; align-items:center; justify-content:center; width:100%; min-height:100%; box-sizing:border-box; }
.epg-grid-expand-overlay { position:absolute; inset:0; z-index:12; pointer-events:none; }
.epg-grid-expand-btn { position:absolute; bottom:20px; right:24px; pointer-events:auto; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); border-radius:16px; color:#fff; width:96px; height:96px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s; padding:0; line-height:1; flex-shrink:0; }
.epg-grid-expand-btn .ci-icon { width:48px; height:48px; }
@media (hover:hover){ .epg-grid-expand-btn:hover { background:var(--btn-dark-red-hover); } }
body.epg-expanded #epg-panel > .epg-pip,
body.epg-expanded #epg-panel > .epg-pip-placeholder { display:none !important; }
body.categories-expanded .epg-grid-expand-overlay,
#epg-panel.favs-empty .epg-grid-expand-overlay { display:none !important; }
body.categories-expanded #epg-pip.tab-floating { z-index:500; display:block !important; }
/* Favourites with nothing in them: hide the miniplayer + programme panel and
   show a plain black screen with a large "No favourites" message. */
#epg-panel.favs-empty .epg-pip { display:none; }
#epg-panel.favs-empty .epg-time-header-host { display:none; }
#epg-panel.favs-empty .epg-grid-outer { background:#000; }
.epg-favs-empty-msg { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; width:100%; height:100%; min-height:320px; padding:0 48px; text-align:center; }
.epg-favs-empty-title { color:var(--text2); font-size:calc(var(--fs-xl) + 8px); font-weight:700; letter-spacing:0; line-height:1.35; }
.epg-favs-empty-sub { color:var(--text2); font-size:calc(var(--fs-xl) + 8px); font-weight:700; line-height:1.35; max-width:760px; }
html.desktop-mode .epg-favs-empty-title { font-size:24px; }
html.desktop-mode .epg-favs-empty-sub { font-size:24px; max-width:560px; }
.epg-time-header { display:flex; position:relative; z-index:6; background:var(--surface); box-shadow:0 1px 0 var(--border); overflow:visible; }
.epg-time-header-pad { width:var(--epg-channel-col,260px); flex-shrink:0; background:var(--surface3); border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-right:1px solid var(--border); box-shadow:4px 0 16px rgba(0,0,0,0.22); box-sizing:border-box; display:flex; align-items:center; padding:14px 18px 14px 30px; font-size:26px; color:var(--text2); font-weight:800; letter-spacing:0.2px; white-space:nowrap; overflow:hidden; }
.epg-time-slots-clip { flex:1; min-width:0; overflow:hidden; position:relative; }
.epg-time-slots { display:flex; position:relative; }
.epg-time-slot { flex-shrink:0; padding:14px 18px; font-size:26px; color:var(--text2); font-weight:800; background:var(--surface3); border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-right:1px solid var(--border); box-sizing:border-box; text-align:left; }
.epg-row { display:flex; box-shadow:0 1px 0 var(--border); height:var(--epg-row-height,108px); min-height:var(--epg-row-height,108px); max-height:var(--epg-row-height,108px); position:relative; }
.epg-grid-wrap > .epg-row:first-child { border-top:1px solid var(--border); }
.epg-grid-wrap > .epg-row:first-child > .epg-row-ch:not(.active) { border-top:none; }
.epg-row-ch { width:var(--epg-channel-col,260px); min-width:var(--epg-channel-col,260px); max-width:var(--epg-channel-col,260px); flex:0 0 var(--epg-channel-col,260px); height:var(--epg-row-height,108px); min-height:var(--epg-row-height,108px); max-height:var(--epg-row-height,108px); display:flex; align-items:center; gap:14px; padding:14px 18px; box-sizing:border-box; background:var(--surface3); box-shadow:1px 0 0 var(--border),4px 0 16px rgba(0,0,0,0.22); border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:sticky; left:0; z-index:5; cursor:pointer; transition:background 0.15s,border-color 0.15s; border-left:3px solid transparent; }
.epg-row-ch:hover { background:rgba(255,255,255,0.12); }
.epg-row-ch-logo { width:52px; height:52px; border-radius:9px; background:var(--surface); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.epg-row-ch-logo img { width:100%; height:100%; object-fit:contain; padding:3px; }
.epg-v-track { position:absolute; right:3px; top:6px; bottom:14px; width:3px; background:rgba(255,255,255,0.07); border-radius:3px; z-index:6; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.epg-grid-outer.epg-si-scrollable .epg-v-track { opacity:1; }
.epg-v-thumb { position:absolute; left:0; right:0; background:var(--accent); border-radius:3px; min-height:20px; opacity:0.65; transition:opacity 0.15s; }
.epg-grid-outer.epg-si-scrolling .epg-v-thumb { opacity:1; }
.epg-h-track { position:absolute; left:8px; right:12px; bottom:4px; height:4px; background:rgba(255,255,255,0.07); border-radius:999px; z-index:6; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.epg-grid-outer.epg-h-scrollable .epg-h-track { opacity:1; }
.epg-h-thumb { position:absolute; top:0; bottom:0; left:0; background:var(--accent); border-radius:999px; min-width:28px; opacity:0.65; transition:opacity 0.15s; }
.epg-grid-outer.epg-si-scrolling .epg-h-thumb { opacity:1; }
.epg-row-ch-name { font-size:26px; font-weight:800; overflow:hidden; overflow-wrap:anywhere; white-space:normal; line-height:1.2; flex:1; min-width:0; color:rgba(255,255,255,0.7); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.epg-row-ch.active { background:linear-gradient(var(--accent-bg),var(--accent-bg)),var(--surface); border-color:transparent; box-shadow:inset 0 0 0 2px rgba(227,25,55,0.92),4px 0 16px rgba(0,0,0,0.22); z-index:6; }
.epg-row-ch.active .epg-row-ch-name { color:#fff; }
.epg-row-progs { display:flex; position:relative; align-items:stretch; flex:0 0 auto; min-width:max-content; z-index:1; }
.epg-prog { box-shadow:1px 0 0 var(--border); padding:12px 14px; height:var(--epg-row-height,108px); min-height:var(--epg-row-height,108px); max-height:var(--epg-row-height,108px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; cursor:pointer; transition:background 0.15s; flex-shrink:0; position:relative; box-sizing:border-box; min-width:0; }
.epg-prog:hover { background:rgba(255,255,255,0.05); }
.epg-prog.now::before { content:''; position:absolute; left:0; top:0; bottom:0; width:var(--epg-progress-px, 0px); background:rgba(227,25,55,0.18); pointer-events:none; }
.epg-prog.selected { border-radius:0 !important; }
.epg-prog > * { position:relative; z-index:1; }
.epg-prog-title { display:block; width:100%; max-width:100%; min-width:0; font-size:26px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.epg-prog-time { display:block; width:100%; max-width:100%; min-width:0; font-size:22px; color:var(--text3); font-weight:400; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.epg-prog.locked { background:var(--surface2); border-right:1px solid var(--border); cursor:pointer; }
.epg-prog.locked:hover { background:var(--surface3); }
.epg-now-line { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); z-index:4; pointer-events:none; }
.epg-now-dot { display:block; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:var(--accent); }
.epg-skeleton-block { position:relative; overflow:hidden; background:rgba(255,255,255,0.06); border-radius:0; }
.epg-skeleton-block::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.08) 48%,transparent 100%); transform:translateX(-100%); animation:epgSkeletonShimmer 2.05s ease-in-out infinite; }
.epg-skeleton-header .epg-time-header-pad,
.epg-skeleton-header .epg-time-slot { display:flex; align-items:center; border:none; }
.epg-skeleton-header .epg-time-header-pad .epg-skeleton-block { width:180px; height:24px; }
.epg-skeleton-header .epg-time-slot .epg-skeleton-block { width:92px; height:22px; }
.epg-skeleton-row .epg-row-ch { cursor:default; }
.epg-skeleton-row .epg-row-ch:hover { background:var(--surface3); }
.epg-skeleton-channel-main { display:flex; align-items:center; gap:14px; width:100%; min-width:0; }
.epg-skeleton-channel-logo { width:44px; height:44px; border-radius:0; flex-shrink:0; }
.epg-skeleton-channel-copy { flex:1; min-width:0; display:flex; flex-direction:column; }
.epg-skeleton-channel-name { width:100%; height:22px; border-radius:0; }
.epg-skeleton-programmes { display:flex; align-items:stretch; height:100%; min-width:max-content; }
.epg-skeleton-programme { padding:14px; box-sizing:border-box; height:var(--epg-row-height,108px); display:flex; flex-direction:column; justify-content:center; gap:10px; border-right:1px solid var(--border); }
.epg-skeleton-programme-title { width:78%; height:22px; border-radius:0; }
.epg-skeleton-programme-time { width:48%; height:16px; border-radius:0; }
@keyframes epgSkeletonShimmer { to { transform:translateX(100%); } }

/* Live ad overlay (free users) — the ad SDK renders into this; shown only while an ad plays */
.live-ad-container { position:absolute; inset:0; z-index:30; display:none; background:#000; }
.live-ad-container.active { display:block; }
/* Spinner */
.spinner { position:absolute; inset:0; display:none; flex-direction:column; gap:20px; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); }
.spin-label { color:#fff; font-size:24px; font-weight:700; letter-spacing:0.3px; text-shadow:0 2px 10px rgba(0,0,0,0.85); text-align:center; }
.spin-label:empty { display:none; }
#epg-pip-video-slot .spin-label { display:none; }
/* While the live stream is being server-transcoded, surface the conversion
   label under the miniplayer spinner (normally hidden in the miniplayer). */
#epg-pip-video-slot #spinner.transcoding .spin-label { display:block; }
.spinner.show { display:flex; }
.fs-player-clock { position:absolute; top:28px; right:32px; z-index:11; pointer-events:none; font-size:32px; font-weight:800; color:#fff; letter-spacing:0.5px; text-shadow:0 2px 10px rgba(0,0,0,0.85); font-variant-numeric:tabular-nums; display:none; }
#sp-overlay .fs-player-clock { top:28px; right:36px; width:auto; text-align:right; font-size:28px; }
#sp-overlay.sp-controls-on .fs-player-clock { top:24px; right:calc(36px + 118px + 14px); }
html.desktop-mode .fs-player-clock { font-size:22px; top:20px; right:24px; }
html.desktop-mode #sp-overlay .fs-player-clock { top:20px; right:24px; width:auto; font-size:18px; }
html.desktop-mode #sp-overlay.sp-controls-on .fs-player-clock { top:20px; right:calc(24px + 56px + 10px); }
.spin-ring { width:60px; height:60px; border:5px solid rgba(255,255,255,0.1); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
.tv-expanded #spinner .spin-ring { width:120px; height:120px; border-width:9px; }
/* Thinner spinner ring in the live TV mini-player */
#epg-pip-video-slot #spinner .spin-ring, #tab-pip-video-slot #spinner .spin-ring { width:40px; height:40px; border-width:2px; }
/* Tab mini-player PIP — same dimensions and layout as #epg-pip */
#tab-pip{display:none;position:fixed;bottom:0;left:0;right:0;width:100%;height:480px;z-index:200;background:rgba(8,8,10,0.82);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 -24px 60px rgba(0,0,0,0.72);border-top:1px solid rgba(255,255,255,0.1);flex-direction:row;}
#tab-pip-video-slot{width:min(50%,720px);flex-shrink:0;height:100%;background:#000;overflow:hidden;cursor:pointer;position:relative;align-self:stretch;}
#tab-pip-video-slot video,#tab-pip-video-slot .spinner{position:absolute;inset:0;width:100%;height:100%;}
.tab-pip-btn{position:absolute;z-index:2;width:62px;height:62px;background:rgba(0,0,0,0.55);border:2px solid rgba(255,255,255,0.2);border-radius:14px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s;}
.tab-pip-btn:hover{background:rgba(0,0,0,0.88);}
.tab-pip-btn .ci-icon{width:30px;height:30px;}
#tab-pip-mute-btn{bottom:16px;left:16px;}
#tab-pip-stop-btn{bottom:16px;left:88px;}
#tab-pip-meta{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-start;gap:16px;padding:28px 32px;background:linear-gradient(90deg,rgba(0,0,0,0.2),rgba(0,0,0,0.62));}
#tab-pip-ch{font-size:28px;color:rgba(255,255,255,0.78);font-weight:400;text-transform:uppercase;letter-spacing:1.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tab-pip-title{font-size:52px;font-weight:800;color:#fff;line-height:1.08;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#tab-pip-live-btn{margin-top:auto;align-self:flex-start;background:var(--accent);border:none;border-radius:12px;color:#fff;font-size:var(--fs-sm);font-weight:700;padding:0 22px;height:56px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background 0.15s;}
#tab-pip-live-btn:hover{background:var(--accent2);}
#tab-pip-live-btn .ci-icon{width:20px;height:20px;}
/* Movie/TV skeleton cards */
.movie-card-skeleton{min-width:0;}
.movie-card-poster-skel{aspect-ratio:2/3;width:100%;border-radius:18px;}
.movie-card-title-skel{height:16px;width:75%;border-radius:6px;margin-top:10px;}
.movie-card-meta-skel{height:14px;width:50%;border-radius:6px;margin-top:8px;}
/* Native subtitle cue styling */
#video::cue { color:transparent; background:transparent; }
#sp-video::cue { color:transparent; background:transparent; }
.riva-subtitle-overlay { position:absolute; left:5%; right:5%; bottom:7%; z-index:8; pointer-events:none; display:flex; flex-direction:column-reverse; align-items:center; gap:6px; text-align:center; transition:bottom 0.25s ease; }
.riva-subtitle-line { display:inline-block; background:rgba(0,0,0,0.78); color:#fff; font-size:80px; font-family:'Inter',sans-serif; font-weight:500; line-height:1.35; padding:6px 18px; border-radius:6px; max-width:100%; pointer-events:none; }
/* When the movie/TV controls are showing, lift captions clear of the scrubber/control bar so the seeker stays grabbable. */
#sp-overlay.sp-controls-on #sp-subtitle-overlay { bottom:34%; }
@keyframes spin { to { transform:rotate(360deg); } }


/* ── STREAMS SIDEBAR ── */
.streams-sidebar { width:var(--sidebar); flex-shrink:0; background:#000; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--border); }
.streams-search-wrap { padding:14px 14px 0; flex-shrink:0; position:relative; }
.streams-search-wrap label { display:block; padding:0 4px 8px; font-size:var(--fs-xs); color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:0.7px; }
.streams-search-wrap input { width:100%; background:var(--surface2); border:1px solid rgba(255,255,255,0.08); border-radius:12px; color:var(--text); font-size:var(--fs-sm); padding:0 18px; height:48px; outline:none; box-sizing:border-box; transition:border-color 0.15s; }
.streams-search-wrap input:focus { border-color:var(--accent); }
.streams-search-wrap input::placeholder { color:var(--text3); }
.streams-search-icon { display:none; }
.media-source-switch { display:none; padding:12px 14px 0; flex-direction:column; gap:8px; flex-shrink:0; }
.media-source-switch.open { display:flex; }
.media-source-switch-label { display:block; padding:0 4px; font-size:var(--fs-xs); color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:0.7px; }
.media-source-switch-row { display:flex; gap:10px; }
.media-source-switch-btn { flex:1; height:42px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background:var(--surface2); color:var(--text2); font-size:var(--fs-xs); font-weight:800; letter-spacing:0.4px; cursor:pointer; transition:background 0.15s,border-color 0.15s,color 0.15s; }
.media-source-switch-btn.active { background:rgba(227,25,55,0.14); border-color:rgba(227,25,55,0.45); color:#fff; }
.media-category-section { padding:0 14px 0; flex:1; min-height:0; display:none; flex-direction:column; }
.media-category-section.open { display:flex; }
.media-category-section .sidebar-section-title { padding:10px 4px 8px; }
.media-category-list { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:0; scrollbar-width:none; background:transparent; border-radius:0; }
.media-category-list::-webkit-scrollbar { display:none; }
.media-list { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:0 12px 12px; scrollbar-width:thin; scrollbar-color:var(--surface3) transparent; }
.media-list::-webkit-scrollbar { width:5px; }
.media-list::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:3px; }
/* Custom scroll indicator */
.scroll-indicator-wrap { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
.scroll-indicator-wrap > .scroll-track { position:absolute; right:3px; top:6px; bottom:6px; width:3px; background:rgba(255,255,255,0.07); border-radius:3px; z-index:5; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.scroll-indicator-wrap.si-scrollable > .scroll-track { opacity:1; }
.scroll-indicator-wrap.category-loading > .scroll-track { opacity:0 !important; }
.scroll-indicator-wrap > .scroll-track > .scroll-thumb { position:absolute; left:0; right:0; background:var(--accent); border-radius:3px; min-height:20px; opacity:0.65; transition:opacity 0.15s; }
.scroll-indicator-wrap.si-scrolling > .scroll-track > .scroll-thumb { opacity:1; }
html.light-mode .scroll-indicator-wrap > .scroll-track { background:rgba(0,0,0,0.08); }

/* Media row */
.media-item { display:flex; align-items:center; gap:16px; padding:0 14px; height:var(--media-h); border-radius:14px; cursor:pointer; transition:background 0.15s; }
.media-item:hover { background:var(--surface2); }
.media-item.active { background:var(--accent-bg); }
.media-poster { width:44px; height:66px; border-radius:8px; background:var(--surface3); flex-shrink:0; object-fit:cover; }
.media-poster-ph { width:44px; height:66px; border-radius:8px; background:var(--surface3); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--text3); }
.media-poster-ph .ci-icon { width:22px; height:22px; }
.media-info { flex:1; min-width:0; }
.media-title { font-size:var(--fs-sm); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-meta { font-size:var(--fs-xs); color:var(--text3); margin-top:5px; font-weight:600; }

/* ── STREAMS DETAIL ── */
.streams-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; background:#000; }
.movie-library-view { display:none; flex:1; flex-direction:column; min-height:0; }
.movie-library-view.open { display:flex; }
.media-pl-pills { display:flex; gap:10px; padding:14px 28px; flex-wrap:nowrap; overflow-x:auto; flex-shrink:0; scrollbar-width:none; border-bottom:1px solid rgba(255,255,255,0.06); }
.media-pl-pills::-webkit-scrollbar { display:none; }
.media-pl-pill { flex-shrink:0; background:var(--surface2); border:2px solid rgba(255,255,255,0.12); border-radius:999px; color:var(--text2); font-size:var(--fs-sm); font-weight:700; padding:0 24px; height:52px; cursor:pointer; white-space:nowrap; transition:background 0.15s,border-color 0.15s,color 0.15s; }
.media-pl-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.media-pl-pill:hover:not(.active) { background:var(--surface3); border-color:rgba(255,255,255,0.22); color:var(--text); }
.actor-detail-view { display:none; flex:1; flex-direction:column; min-height:0; }
.actor-detail-view.open { display:flex; }
.actor-detail-topbar { padding:18px 28px 18px; flex-shrink:0; }
.actor-detail-scroll { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--surface3) transparent; }
.actor-detail-scroll::-webkit-scrollbar { width:4px; }
.actor-detail-scroll::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:2px; }
.actor-detail-header { padding:28px; display:flex; gap:24px; align-items:flex-start; }
.actor-detail-photo { width:168px; aspect-ratio:2/3; border-radius:20px; overflow:hidden; background:var(--surface2); border:1px solid rgba(255,255,255,0.08); flex-shrink:0; }
.actor-detail-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.actor-detail-photo-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text3); background:linear-gradient(180deg,var(--surface2),var(--surface3)); }
.actor-detail-photo-ph .ci-icon { width:52px; height:52px; }
.actor-detail-copy { flex:1; min-width:0; padding-top:8px; }
.actor-detail-kicker { font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,0.58); margin-bottom:10px; }
.actor-detail-title { font-size:calc(var(--fs-xl) + 6px); font-weight:800; margin-bottom:12px; letter-spacing:-0.5px; line-height:1.04; }
.actor-detail-meta { font-size:var(--fs-sm); color:var(--text2); font-weight:700; margin-bottom:12px; }
.actor-detail-overview { font-size:var(--fs-sm); color:rgba(255,255,255,0.76); line-height:1.7; max-width:760px; }
.actor-detail-grid-wrap { padding:0 28px 28px; display:flex; flex-direction:column; min-height:0; }
.actor-detail-grid-title { font-size:var(--fs-md); font-weight:800; margin:0 0 16px; color:var(--text); }
/* ── TV SUB-TABS ── */
.tv-subtab-bar { display:none; flex-shrink:0; flex-direction:row; gap:0; border-bottom:1px solid rgba(255,255,255,0.07); padding:0 20px; background:var(--bg); }
.tv-subtab-bar.visible { display:flex; }
.tv-subtab-btn { background:none; border:none; color:var(--text3); font-size:14px; font-weight:600; padding:14px 18px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 0.15s,border-color 0.15s; }
.tv-subtab-btn.active { color:#fff; border-bottom-color:var(--accent); }
/* ── CUSTOM CHANNELS ── */
#custom-channels-view { display:none; flex:1; flex-direction:column; overflow:hidden; }
.cc-list-header { padding:22px 28px 18px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; box-shadow:0 1px 0 rgba(255,255,255,0.05); }
.cc-list-title { font-size:20px; font-weight:800; color:#fff; }
.cc-new-btn { background:var(--accent); border:none; border-radius:12px; color:#fff; font-size:14px; font-weight:700; padding:0 18px; height:44px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; transition:background 0.15s; }
.cc-new-btn:hover { background:#c41230; }
.cc-grid { padding:20px 24px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; overflow-y:auto; flex:1; }
.cc-card { background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:20px; cursor:pointer; transition:border-color 0.15s,background 0.15s; display:flex; flex-direction:column; gap:12px; }
.cc-card:hover { border-color:rgba(255,255,255,0.2); background:var(--surface2); }
.cc-card-name { font-size:17px; font-weight:800; color:#fff; }
.cc-card-shows { font-size:13px; color:var(--text3); }
.cc-card-play { background:var(--accent); border:none; border-radius:10px; color:#fff; font-size:13px; font-weight:700; padding:0 16px; height:38px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; align-self:flex-start; transition:background 0.15s; }
.cc-card-play:hover { background:#c41230; }
.cc-empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--text3); padding:40px; text-align:center; }
.cc-empty-state svg { width:64px; height:64px; opacity:0.3; }
.cc-empty-state p { font-size:16px; }
.cc-empty-state .cc-new-btn { margin-top:8px; }
/* ── CUSTOM CHANNEL DETAIL / SCHEDULE ── */
#cc-detail-view { display:none; flex:1; flex-direction:column; overflow:hidden; }
.cc-detail-topbar { padding:16px 24px; display:flex; align-items:center; gap:14px; flex-shrink:0; box-shadow:0 1px 0 rgba(255,255,255,0.05); }
.cc-detail-back { background:rgba(255,255,255,0.06); border:none; border-radius:12px; color:var(--text); font-size:14px; font-weight:700; padding:0 16px; height:44px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; transition:background 0.15s; }
.cc-detail-back:hover { background:rgba(255,255,255,0.1); }
.cc-detail-name { font-size:18px; font-weight:800; color:#fff; flex:1; }
.cc-detail-action-btn { background:rgba(255,255,255,0.07); border:none; border-radius:10px; color:var(--text3); font-size:13px; font-weight:600; padding:0 14px; height:38px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; transition:background 0.15s,color 0.15s; }
.cc-detail-action-btn:hover { background:rgba(255,255,255,0.12); color:#fff; }
.cc-detail-body { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.cc-shows-strip { display:flex; align-items:center; gap:10px; padding:14px 24px 14px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; overflow-x:auto; scrollbar-width:none; }
.cc-shows-strip::-webkit-scrollbar { display:none; }
.cc-show-chip { background:var(--surface2); border:1px solid rgba(255,255,255,0.1); border-radius:30px; display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; flex-shrink:0; }
.cc-show-chip img { width:24px; height:24px; border-radius:4px; object-fit:cover; }
.cc-show-chip-name { font-size:13px; font-weight:600; color:var(--text); }
.cc-show-chip-remove { background:none; border:none; color:var(--text3); cursor:pointer; padding:2px; display:flex; align-items:center; font-size:16px; line-height:1; transition:color 0.15s; }
.cc-show-chip-remove:hover { color:var(--accent); }
.cc-add-show-chip { background:rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.2); border-radius:30px; display:inline-flex; align-items:center; gap:6px; padding:6px 14px; flex-shrink:0; color:var(--text3); font-size:13px; font-weight:600; cursor:pointer; transition:background 0.15s,color 0.15s; }
.cc-add-show-chip:hover { background:rgba(255,255,255,0.1); color:#fff; }
/* ── SCHEDULE ── */
.cc-schedule-wrap { flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--surface3) transparent; }
.cc-schedule-wrap::-webkit-scrollbar { width:4px; }
.cc-schedule-wrap::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:2px; }
.cc-schedule-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:14px; color:var(--text3); padding:60px; }
.cc-schedule-item { display:flex; align-items:center; gap:16px; padding:14px 24px; border-bottom:1px solid rgba(255,255,255,0.05); cursor:pointer; transition:background 0.15s; }
.cc-schedule-item:hover { background:rgba(255,255,255,0.04); }
.cc-schedule-item.now { background:rgba(227,25,55,0.1); border-left:3px solid var(--accent); padding-left:21px; }
.cc-schedule-item.past { opacity:0.45; }
.cc-schedule-time { font-size:13px; font-weight:700; color:var(--text3); min-width:54px; flex-shrink:0; }
.cc-schedule-item.now .cc-schedule-time { color:var(--accent); }
.cc-schedule-thumb { width:72px; height:42px; border-radius:8px; object-fit:cover; background:var(--surface2); flex-shrink:0; }
.cc-schedule-thumb-ph { width:72px; height:42px; border-radius:8px; background:var(--surface2); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text3); }
.cc-schedule-info { flex:1; min-width:0; }
.cc-schedule-show { font-size:12px; color:var(--accent); font-weight:700; letter-spacing:0.3px; margin-bottom:2px; }
.cc-schedule-ep-title { font-size:14px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-schedule-item.past .cc-schedule-ep-title { color:var(--text3); }
.cc-schedule-meta { font-size:12px; color:var(--text3); margin-top:2px; }
.cc-schedule-now-badge { background:var(--accent); color:#fff; font-size:11px; font-weight:900; padding:3px 10px; border-radius:99px; letter-spacing:0.5px; flex-shrink:0; }
.cc-schedule-play-btn { background:var(--accent); border:none; border-radius:10px; color:#fff; font-size:13px; font-weight:700; padding:0 14px; height:36px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; flex-shrink:0; transition:background 0.15s; }
.cc-schedule-play-btn:hover { background:#c41230; }
.cc-no-schedule { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:16px; padding:60px; text-align:center; color:var(--text3); }
.cc-no-schedule .cc-new-btn { margin-top:4px; }
.movie-library-header { padding:22px 28px 18px; box-shadow:0 1px 0 rgba(255,255,255,0.05); display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-shrink:0; flex-wrap:wrap; }
.movie-library-header-actions { display:flex; align-items:flex-end; gap:12px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.movie-library-header-actions .playlist-mini-btn { display:inline-flex; align-items:center; gap:10px; }
.library-header-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.library-header-toolbar.is-library .media-sort-label-default { display:none; }
.visually-hidden-file-input {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  opacity:0;
  pointer-events:none;
}
.movie-library-title { font-size:calc(var(--fs-xl) + 12px); font-weight:800; letter-spacing:-0.4px; color:var(--text); }
.movie-library-sub { font-size:calc(var(--fs-sm) + 5px); color:var(--text3); margin-top:8px; }
.media-sort { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.media-sort-label { font-size:var(--fs-lg); color:var(--text2); font-weight:800; text-transform:uppercase; letter-spacing:0.06em; margin-right:4px; }
.media-sort-btn { height:60px; padding:0 30px; border-radius:12px; border:2px solid var(--border2); background:var(--surface2); color:var(--text2); font-size:var(--fs-lg); font-weight:800; cursor:pointer; transition:background 0.15s,border-color 0.15s,color 0.15s; display:inline-flex; align-items:center; gap:10px; }
.media-sort-btn .msort-chev { width:20px; height:20px; flex-shrink:0; }
.media-sort-btn.active { background:var(--btn-dark-red); border-color:var(--btn-red-border); color:#fff; }
.movie-library-note { padding:14px 28px 0; color:var(--text3); font-size:var(--fs-xs); }
.movie-library-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-width:none; }
.movie-library-scroll::-webkit-scrollbar { display:none; }
.movie-library-grid { padding:22px 24px 28px; display:grid; grid-template-columns:repeat(6,1fr); gap:24px 20px; align-content:start; }
.movie-library-grid.loading { display:flex; align-items:center; justify-content:center; padding:0; min-height:240px; }
.movie-library-grid.library-grid-empty { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 360px); padding:0; grid-column:1/-1; }
.movie-library-grid.library-grid-empty .empty-state { padding:0; margin:0; font-size:calc(var(--fs-xl) + 8px); line-height:1.35; font-weight:700; color:var(--text2); max-width:720px; }
html.desktop-mode .movie-library-grid.library-grid-empty .empty-state { font-size:24px; }
html.desktop-mode .movie-library-grid.library-grid-empty { min-height:calc(100vh - 280px); }
#media-category-list .category-item { font-size:calc(var(--fs-lg) + 4px); font-weight:600; margin-bottom:8px; }
#media-category-list .library-tab-icon { width:28px; height:28px; flex-shrink:0; display:inline-block; fill:currentColor; color:rgba(255,255,255,0.82); }
#media-category-list .category-item.active .library-tab-icon { color:#fff; }
html.light-mode #media-category-list .library-tab-icon { color:rgba(0,0,0,0.72); }
html.light-mode #media-category-list .category-item.active .library-tab-icon { color:var(--accent); }
html.desktop-mode #media-category-list .category-item { font-size:22px; }
html.desktop-mode #media-category-list .library-tab-icon { width:24px; height:24px; }
.rp-live-card .movie-card-poster { display:flex; align-items:center; justify-content:center; background:var(--surface2); }
.rp-live-channel-icon { width:78px; height:78px; border-radius:18px; background:var(--surface3); display:flex; align-items:center; justify-content:center; color:var(--text2); flex-shrink:0; }
.rp-live-channel-icon .ci-icon { width:44px; height:44px; }
.rp-live-channel-logo { width:78px; height:78px; border-radius:18px; background:var(--surface3); object-fit:contain; padding:8px; box-sizing:border-box; flex-shrink:0; }
html.light-mode .rp-live-channel-icon { background:var(--surface3); color:rgba(0,0,0,0.55); }
html.light-mode .rp-live-card .movie-card-poster { background:var(--surface2); }
/* Continue Watching row */
.continue-watching-section { flex-shrink:0; padding:20px 24px 0; }
.continue-watching-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:14px; }
.continue-watching-title { font-size:var(--fs-md); font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:0.8px; }
.cw-clear-btn { background:var(--surface2); border:1px solid var(--border2); border-radius:12px; color:var(--text2); font-size:var(--fs-sm); font-weight:700; padding:0 22px; height:48px; cursor:pointer; flex-shrink:0; transition:background 0.15s,color 0.15s,border-color 0.15s; }
.cw-clear-btn:hover { background:rgba(227,25,55,0.14); border-color:rgba(227,25,55,0.4); color:#fff; }
html.desktop-mode .cw-clear-btn { height:34px; font-size:13px; padding:0 14px; border-radius:9px; }
.continue-watching-row { display:flex; gap:20px; overflow-x:auto; padding-bottom:14px; scrollbar-width:none; }
.recently-played-section { flex-shrink:0; padding:20px 24px 0; display:flex; flex-direction:column; gap:18px; }
.rp-heading { font-size:calc(var(--fs-xl) + 2px); font-weight:800; color:var(--text); }
.rp-group { display:flex; flex-direction:column; gap:12px; }
.rp-group-title { font-size:var(--fs-md); font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:0.8px; }
.rp-row { display:flex; gap:18px; overflow-x:auto; padding-bottom:14px; scrollbar-width:none; }
.rp-row::-webkit-scrollbar { display:none; }
.continue-watching-row::-webkit-scrollbar { display:none; }
.scroll-indicator-wrap.si-horizontal { position:relative; display:block; }
.scroll-indicator-wrap.si-horizontal > .scroll-track-h { position:absolute; left:8px; right:8px; bottom:4px; height:4px; background:rgba(255,255,255,0.08); border-radius:3px; z-index:5; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.scroll-indicator-wrap.si-horizontal.si-scrollable-h > .scroll-track-h { opacity:1; }
.scroll-indicator-wrap.si-horizontal > .scroll-track-h > .scroll-thumb-h { position:absolute; top:0; height:100%; background:var(--accent); border-radius:3px; min-width:24px; opacity:0.65; transition:opacity 0.15s; }
.scroll-indicator-wrap.si-horizontal.si-scrolling-h > .scroll-track-h > .scroll-thumb-h { opacity:1; }
html.light-mode .scroll-indicator-wrap.si-horizontal > .scroll-track-h { background:rgba(0,0,0,0.08); }
.rp-row .rp-card { width:170px; flex:0 0 170px; }
.continue-watching-row::-webkit-scrollbar { display:none; }
.continue-watching-row .movie-card { flex:0 0 calc((100% - 100px)/6); min-width:0; }
.cw-progress-bar { position:absolute; left:0; right:0; bottom:0; height:6px; background:rgba(0,0,0,0.55); }
.cw-progress-fill { height:100%; background:var(--accent); }
.cw-card { flex:0 0 130px; cursor:pointer; border-radius:10px; overflow:hidden; background:var(--surface); border:1.5px solid var(--border); transition:border-color 0.15s,transform 0.15s; }
.cw-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.cw-card:active { transform:scale(0.97); }
.cw-poster { position:relative; width:100%; aspect-ratio:2/3; background:var(--surface2); overflow:hidden; }
.cw-poster img { width:100%; height:100%; object-fit:cover; display:block; }
.cw-poster-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text3); }
.cw-progress-bar { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.15); }
.cw-progress-fill { height:100%; background:var(--accent); border-radius:0 2px 2px 0; }
.cw-body { padding:7px 8px 8px; }
.cw-card-title { font-size:12px; font-weight:600; color:var(--text); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cw-card-meta { font-size:11px; color:var(--text3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.light-mode .cw-progress-bar { background:rgba(0,0,0,0.1); }
.library-filter-wrap { display:none !important; }
.library-content-filter { padding:0; flex-shrink:0; }
.library-content-filter label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.library-content-filter select { width:150px; min-width:130px; max-width:150px; background:var(--surface2); border:2px solid var(--border2); border-radius:10px; color:var(--text); font-size:var(--fs-sm); font-weight:600; padding:0 14px; height:46px; outline:none; box-sizing:border-box; }
html.desktop-mode .library-content-filter select { width:132px; min-width:120px; max-width:132px; height:34px; font-size:13px; padding:0 10px; border-radius:8px; }
.movie-card { cursor:pointer; transition:transform 0.15s; min-width:0; content-visibility:auto; contain-intrinsic-size:200px 320px; }
.movie-card:hover { transform:translateY(-2px); }
.movie-card.active .movie-card-poster { border-color:var(--accent); box-shadow:0 0 0 4px rgba(227,25,55,0.12); }
.movie-card-poster { aspect-ratio:2/3; width:100%; background:var(--surface2); border:1px solid rgba(255,255,255,0.07); border-radius:18px; display:flex; align-items:center; justify-content:center; overflow:hidden; transition:border-color 0.15s,box-shadow 0.15s,transform 0.15s; position:relative; }
.movie-card:hover .movie-card-poster { border-color:var(--accent); }
.movie-card-poster img { width:100%; height:100%; object-fit:cover; display:block; }
.movie-card-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:46px; color:var(--text3); background:linear-gradient(180deg,var(--surface2),var(--surface3)); }
.movie-card-ph .ci-icon { width:48px; height:48px; }
/* Favourite + watch-later buttons are hidden on list cells (manage from the
   details screen instead). Both buttons share the .movie-card-fav class. */
.movie-card-fav { display:none !important; position:absolute; top:10px; right:10px; width:46px; height:46px; border:none; border-radius:999px; background:rgba(0,0,0,0.58); color:#fff; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.movie-card-fav .ci-icon { width:24px; height:24px; }
.movie-card-fav.saved { color:#facc15; }
.movie-card-watchlater { right:64px; }
.movie-card-watchlater.saved { color:#93c5fd; }
.library-sections { display:flex; flex-direction:column; gap:26px; width:100%; min-height:0; }
.movie-library-grid > .library-sections { grid-column:1 / -1; }
.library-section { display:flex; flex-direction:column; gap:14px; }
.library-section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 6px; }
.library-section-title { font-size:var(--fs-lg); font-weight:800; color:var(--text); letter-spacing:-0.2px; }
.library-section-sub { font-size:var(--fs-xs); color:var(--text3); }
.library-section-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:24px 20px; align-content:start; }
.library-section-grid.single-row { grid-auto-flow:column; grid-auto-columns:minmax(170px,220px); overflow-x:auto; overflow-y:hidden; padding:2px 0 8px; scrollbar-width:none; }
.library-section-grid.single-row::-webkit-scrollbar { display:none; }
.movie-card-body { padding:8px 4px 0; }
.movie-card-title { font-size:var(--fs-sm); font-weight:700; color:var(--text); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:left; }
.movie-card-meta { font-size:var(--fs-xs); color:var(--text3); margin-top:4px; font-weight:600; text-align:left; }
.movie-card-rating { display:inline-flex; align-items:center; gap:5px; color:var(--text2); font-weight:700; vertical-align:middle; font-size:var(--fs-sm); }
.movie-card-rating .ci-icon { width:19px; height:19px; color:var(--accent); }
.streams-idle { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text3); gap:16px; }
.streams-idle .si-icon { width:96px; height:96px; background:var(--surface2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:40px; }
.streams-idle p { font-size:var(--fs-lg); }
.streams-idle .si-sub { font-size:var(--fs-sm); color:var(--text3); }
.live-playlist-no-media-copy { max-width:760px; margin:0; padding:0 28px; text-align:center; color:var(--text2); font-size:calc(var(--fs-xl) + 4px) !important; line-height:1.28; font-weight:800; }
html.desktop-mode .live-playlist-no-media-copy { max-width:560px; font-size:22px !important; }
.media-source-setup-btn { min-width:220px; height:72px; padding:0 42px; font-size:24px; margin-top:28px; }
html.desktop-mode .media-source-setup-btn { min-width:168px; height:56px; padding:0 30px; border-radius:12px; font-size:18px; margin-top:20px; }
.streams-detail { display:none; flex:1; flex-direction:column; overflow:hidden; min-height:0; position:relative; }
.streams-detail-topbar { display:none; }
.streams-detail-back { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.24); border-radius:var(--radius); color:#fff; font-size:var(--fs-md); font-weight:700; padding:0 28px; height:60px; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:12px; cursor:pointer; transition:background 0.15s,border-color 0.15s; }
.streams-detail-back:hover { background:rgba(255,255,255,0.13); border-color:rgba(255,255,255,0.36); }
.streams-detail-divider { height:1px; background:rgba(255,255,255,0.05); flex-shrink:0; }
.streams-detail-scroll { flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; position:relative; background:
  radial-gradient(circle at top center, rgba(227,25,55,0.08), transparent 42%),
  linear-gradient(180deg, rgba(255,255,255,0.02), transparent 18%); display:flex; flex-direction:column; align-items:stretch; }
.streams-detail-scroll::-webkit-scrollbar { display:none; }
.streams-detail-scroll > .detail-header,
.streams-detail-scroll > .season-ep-row,
.streams-detail-scroll > .ep-stream-body { width:100%; max-width:100%; padding-left:28px; padding-right:28px; box-sizing:border-box; }
.detail-header { padding-top:24px; padding-bottom:34px; }
.detail-loading-overlay { position:absolute; inset:0; z-index:30; display:none; align-items:center; justify-content:center; background:rgba(5,5,5,0.62); pointer-events:none; }
.streams-detail.detail-loading .detail-loading-overlay { display:flex; }
.streams-detail.detail-loading .streams-detail-scroll,
.streams-detail.detail-loading .detail-play-row { visibility:hidden; }
.detail-loading-overlay .spin-ring { width:96px; height:96px; border-width:7px; margin:0; }
.detail-hero-bg { --detail-poster-h:570px; --detail-header-pad-top:24px; position:absolute; top:0; left:0; right:0; height:calc(var(--detail-header-pad-top) + var(--detail-poster-h) * 0.75); overflow:hidden; pointer-events:none; opacity:0; transition:opacity 0.25s ease; z-index:0; }
.detail-hero-bg.active { opacity:1; }
.detail-hero-bg::before { content:''; position:absolute; left:-6%; right:-6%; bottom:0; height:42%; z-index:1; pointer-events:none; backdrop-filter:blur(24px) saturate(1.08); -webkit-backdrop-filter:blur(24px) saturate(1.08); -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.28) 32%, #000 100%); mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.28) 32%, #000 100%); }
.detail-hero-bg::after { content:''; position:absolute; inset:0; z-index:2; background:
  linear-gradient(180deg, rgba(8,8,8,0.22) 0%, rgba(8,8,8,0.38) 42%, rgba(10,10,10,0.62) 72%, rgba(10,10,10,0.9) 90%, var(--bg) 100%),
  linear-gradient(90deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.38) 24%, rgba(10,10,10,0.68) 54%, rgba(10,10,10,0.92) 100%);
}
html.light-mode .detail-hero-bg.active::after { background:
  linear-gradient(180deg, rgba(6,6,8,0.62) 0%, rgba(6,6,8,0.74) 42%, rgba(6,6,8,0.86) 72%, rgba(6,6,8,0.94) 90%, var(--bg) 100%),
  linear-gradient(90deg, rgba(6,6,8,0.82) 0%, rgba(6,6,8,0.58) 30%, rgba(6,6,8,0.28) 58%, rgba(6,6,8,0.08) 100%);
}
.detail-hero-bg-image { position:absolute; inset:-18px -14px -12px; background-size:cover; background-position:center 18%; background-repeat:no-repeat; filter:saturate(0.92) brightness(0.74); transform:scale(1.04); opacity:0.78; -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,0.92) 62%, rgba(0,0,0,0.5) 80%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,0.92) 62%, rgba(0,0,0,0.5) 80%, transparent 100%); }
.streams-detail-scroll > *:not(.detail-hero-bg) { position:relative; z-index:1; }
@keyframes detailContentFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.streams-detail.detail-ready .detail-header,
.streams-detail.detail-ready .detail-play-row { animation:detailContentFadeIn 0.24s ease both; }
.streams-detail.detail-loading .detail-fav-btn,
.streams-detail.detail-loading .detail-progress-wrap,
.streams-detail.detail-loading .detail-actions,
.streams-detail.detail-loading .detail-play-row,
.streams-detail.detail-loading #detail-trailer-btn { display:none !important; }

/* Detail header */
.detail-header { box-shadow:0 1px 0 rgba(255,255,255,0.05); display:flex; flex-wrap:nowrap; gap:0; align-items:flex-start; justify-content:flex-start; flex-shrink:0; }
.detail-header-inner { display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; width:100%; max-width:100%; }
/* Back button takes its own full-width row; poster + info wrap below it,
   left aligned. */
.detail-topbar { flex-shrink:0; display:flex; align-items:center; padding:20px 28px; background:var(--bg); box-shadow:0 1px 0 rgba(255,255,255,0.05); position:relative; z-index:3; }
.detail-topbar .streams-detail-back { width:auto; height:76px; padding:0; gap:0; border-radius:16px; line-height:1; }
/* Movie/TV detail back button uses the global dark-red fill + red border. */
#streams-detail-back { background:var(--btn-dark-red); border:2px solid var(--btn-red-border); color:#fff; padding:0; gap:0; }
#streams-detail-back:hover { background:var(--btn-dark-red-hover); border-color:var(--btn-red-border); }
.detail-title-row { display:flex; align-items:center; gap:20px; }
.detail-meta-dot { color:rgba(255,255,255,0.45); font-size:var(--fs-lg); line-height:1; margin:0 2px; }
.detail-fav-btn { width:76px; height:76px; border-radius:16px; align-self:center; margin-top:-6px; }
.detail-fav-btn .ci-icon { width:38px; height:38px; }
.detail-fav-btn:hover { background:var(--accent2); }
.detail-fav-btn:not(.saved) { background:rgba(255,255,255,0.12); }
.detail-fav-btn.saved { background:var(--accent); }
.detail-progress-clear-btn.detail-watched-tick { width:76px !important; height:76px !important; border-radius:10px !important; border:2px solid rgba(255,255,255,0.22) !important; box-sizing:border-box !important; background:rgba(255,255,255,0.12) !important; color:#fff !important; }
.detail-progress-clear-btn.detail-watched-tick:hover, .detail-progress-clear-btn.detail-watched-tick:active, .detail-progress-clear-btn.detail-watched-tick:focus { background:rgba(255,255,255,0.12) !important; border:2px solid rgba(255,255,255,0.22) !important; color:#fff !important; transform:none !important; }
.detail-progress-clear-btn.detail-watched-tick .ci-icon { width:38px !important; height:38px !important; }
html.desktop-mode .detail-fav-btn { width:36px; height:36px; border-radius:9px; }
html.desktop-mode .detail-fav-btn .ci-icon { width:18px; height:18px; }
html.desktop-mode .detail-progress-clear-btn.detail-watched-tick { width:38px !important; height:38px !important; border-radius:10px !important; }
html.desktop-mode .detail-progress-clear-btn.detail-watched-tick .ci-icon { width:16px !important; height:16px !important; }
html.desktop-mode .detail-topbar { padding:12px 24px; }
html.desktop-mode .detail-topbar .streams-detail-back { font-size:15px; }
.detail-poster-col { flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.detail-play-row { flex:0 0 auto; min-height:172px; max-height:280px; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding:32px 28px 36px; position:relative; z-index:2; flex-shrink:0; background:var(--bg); box-shadow:0 -1px 0 rgba(255,255,255,0.08); }
.detail-play-row .detail-action-btn, #detail-play-row #detail-trailer-btn { height:88px !important; min-height:88px; box-sizing:border-box; border-radius:10px !important; padding:0 36px !important; font-size:var(--fs-lg) !important; }
#detail-play-area { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
#detail-play-area .vod-play-btn { width:auto !important; min-width:340px; padding:0 40px !important; height:88px !important; font-size:var(--fs-lg) !important; }
#detail-play-area > div { flex-direction:row !important; gap:18px !important; flex-wrap:wrap; justify-content:center; }
.detail-play-row .detail-action-btn .ci-icon,
#detail-play-area .vod-play-btn .ci-icon { width:46px !important; height:46px !important; }
.detail-progress-bar { max-width:420px; }
.detail-progress-text { font-size:var(--fs-md) !important; }
.detail-progress-clear-btn { width:64px !important; height:64px !important; }
.detail-progress-clear-btn .ci-icon { width:28px; height:28px; }
html.desktop-mode .detail-progress-clear-btn { width:38px !important; height:38px !important; }
html.desktop-mode .detail-progress-clear-btn .ci-icon { width:16px; height:16px; }
html.desktop-mode .detail-play-row { min-height:88px; padding:14px 16px 22px; gap:10px; }
html.desktop-mode .detail-play-row .detail-action-btn, html.desktop-mode #detail-play-row #detail-trailer-btn { height:44px !important; min-height:44px; border-radius:10px !important; padding:0 18px !important; font-size:15px !important; }
html.desktop-mode #detail-play-area { gap:10px; }
html.desktop-mode #detail-play-area .vod-play-btn { height:44px !important; font-size:15px !important; min-width:180px; }
html.desktop-mode .detail-play-row .detail-action-btn .ci-icon,
html.desktop-mode #detail-play-area .vod-play-btn .ci-icon { width:20px !important; height:20px !important; }
/* Larger detail typography */
.detail-title { font-size:calc(var(--fs-xl) + 18px) !important; }
.detail-kicker { font-size:var(--fs-md) !important; }
.detail-genres .genre-pill, .detail-genres span { font-size:var(--fs-md); }
.detail-meta { font-size:var(--fs-lg) !important; }
.detail-overview { font-size:var(--fs-lg) !important; line-height:1.65 !important; }
.detail-progress-text { font-size:var(--fs-md) !important; }
.vod-play-btn .ci-icon { width:46px !important; height:46px !important; }
.detail-action-btn { height:76px !important; font-size:var(--fs-lg) !important; padding:0 30px !important; gap:14px !important; }
.detail-action-btn .ci-icon { width:32px; height:32px; }
html.desktop-mode .detail-action-btn { height:40px !important; font-size:13px !important; padding:0 18px !important; gap:8px !important; }
html.desktop-mode .detail-action-btn .ci-icon { width:18px; height:18px; }
html.desktop-mode .detail-title { font-size:30px !important; }
html.desktop-mode .detail-meta { font-size:13px !important; }
html.desktop-mode .vod-play-btn .ci-icon { width:20px !important; height:20px !important; }
.detail-poster { width:380px; height:570px; border-radius:20px; object-fit:cover; background:var(--surface2); flex-shrink:0; box-shadow:0 20px 44px rgba(0,0,0,0.3); }
.detail-poster-ph { width:380px; height:570px; border-radius:20px; background:rgba(22,22,22,0.9); border:1px solid rgba(255,255,255,0.08); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:52px; box-shadow:0 20px 44px rgba(0,0,0,0.26); color:rgba(255,255,255,0.52); }
.detail-poster-ph .ci-icon { width:52px; height:52px; }
.detail-info { flex:0 1 860px; min-width:0; padding-top:14px; max-width:860px; display:flex; flex-direction:column; align-self:flex-start; min-height:0; }
.detail-info > .scroll-indicator-wrap { flex:0 1 auto; min-height:0; max-width:100%; margin:0 0 16px; }
.detail-overview-scroll { overflow-y:auto; scrollbar-width:none; min-height:48px; }
.detail-overview-scroll::-webkit-scrollbar { display:none; }
.detail-kicker { font-size:var(--fs-lg); font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,0.58); margin-bottom:14px; }
.detail-title-row { margin-bottom:20px; }
.detail-title { font-size:calc(var(--fs-xl) + 10px); font-weight:800; margin-bottom:0; letter-spacing:-0.7px; line-height:1.04; text-shadow:0 2px 18px rgba(0,0,0,0.3); color:#fff; }
.detail-genres { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 22px; }
.detail-genre-pill { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.14); border-radius:999px; color:rgba(255,255,255,0.9); font-size:var(--fs-md); font-weight:700; line-height:1; padding:10px 16px; }
.detail-meta { display:flex; flex-wrap:wrap; align-items:center; gap:18px; font-size:var(--fs-md); color:rgba(255,255,255,0.8); margin:0 0 22px; font-weight:700; }
.detail-meta-text { white-space:nowrap; }
.detail-cast { display:flex; flex-wrap:wrap; align-items:flex-start; gap:0; margin:0 0 24px; font-size:var(--fs-lg); color:rgba(255,255,255,0.88); line-height:1.6; font-weight:800; }
.detail-cast-sep { color:rgba(255,255,255,0.56); padding:0 6px 0 0; }
.detail-rating-badge { display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:800; font-size:1.3em; }
.detail-rating-badge .ci-icon { width:0.9em; height:0.9em; color:var(--accent); }
.detail-progress-wrap { display:flex; align-items:center; gap:20px; margin:0 0 24px; }
.detail-progress-side { gap:22px; }
.detail-progress-text { display:flex; align-items:center; line-height:1; margin:0; position:relative; top:0; }
html.desktop-mode .detail-progress-text { top:0; }
.detail-progress-bar { flex:0 1 420px; height:8px; border-radius:999px; background:rgba(255,255,255,0.12); overflow:hidden; position:relative; }
.detail-progress-fill { height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:999px; transition:width 0.2s ease; }
.detail-progress-side { display:flex; align-items:center; gap:22px; }
.detail-progress-text { font-size:var(--fs-md) !important; color:rgba(255,255,255,0.74); font-weight:700; white-space:nowrap; min-width:128px; text-align:right; justify-content:flex-end; }
.detail-progress-clear-btn { width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.84); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.detail-progress-clear-btn:hover { background:rgba(227,25,55,0.16); border-color:rgba(227,25,55,0.34); color:#fff; transform:translateY(-1px); }
.detail-progress-clear-btn .ci-icon { width:18px; height:18px; }
.detail-actions { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.detail-action-btn { background:rgba(14,14,14,0.66); border:2px solid rgba(255,255,255,0.12); border-radius:var(--radius); color:var(--text); font-size:var(--fs-md); font-weight:700; padding:0 26px; height:64px; display:inline-flex; align-items:center; justify-content:center; gap:12px; cursor:pointer; transition:border-color 0.15s,background 0.15s,color 0.15s; }
.detail-action-btn:hover { border-color:var(--accent); background:rgba(227,25,55,0.12); }
.detail-action-btn.saved,
.detail-action-btn.watched { background:rgba(227,25,55,0.14); border-color:rgba(227,25,55,0.35); color:#fff; }
.detail-action-btn.saved .ci-icon { color:#facc15; }
.detail-action-btn.watch-later.saved .ci-icon { color:#93c5fd; }
.detail-overview { font-size:var(--fs-lg) !important; color:rgba(255,255,255,0.76); line-height:1.72 !important; display:block; overflow:visible; max-width:840px; margin:0; }
/* Cinematic hero — high-contrast type over backdrop art */
.streams-detail.detail-hero-active .detail-title { color:#fff; text-shadow:0 2px 28px rgba(0,0,0,0.88), 0 1px 6px rgba(0,0,0,0.92); }
.streams-detail.detail-hero-active .detail-kicker { color:rgba(255,255,255,0.62); }
.streams-detail.detail-hero-active .detail-meta,
.streams-detail.detail-hero-active .detail-meta-text { color:rgba(255,255,255,0.9); }
.streams-detail.detail-hero-active .detail-meta-dot { color:rgba(255,255,255,0.55); }
.streams-detail.detail-hero-active .detail-cast { color:rgba(255,255,255,0.88); }
.streams-detail.detail-hero-active .detail-cast-sep { color:rgba(255,255,255,0.5); }
.streams-detail.detail-hero-active .detail-genre-pill { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.94); }
.streams-detail.detail-hero-active .detail-overview {
  color:rgba(255,255,255,0.92);
  max-width:100%;
  padding:22px 26px;
  border-radius:16px;
  background:rgba(8,8,10,0.58);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 48px rgba(0,0,0,0.28);
}
html.light-mode .streams-detail.detail-hero-active .detail-overview {
  background:rgba(8,8,10,0.68);
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 20px 52px rgba(0,0,0,0.34);
}
html.light-mode .streams-detail:not(.detail-hero-active) .detail-title { color:var(--text); text-shadow:none; }
.detail-debug { font-size:var(--fs-xs); color:var(--accent2); line-height:1.5; margin-top:12px; font-weight:700; white-space:pre-wrap; }

.sp-scrubber-row { display:flex; align-items:center; gap:20px; padding:6px 0; }
.sp-time { font-size:28px; color:rgba(255,255,255,0.8); font-weight:700; flex-shrink:0; min-width:96px; font-variant-numeric:tabular-nums; }
.sp-time:last-child { text-align:right; }
.sp-scrubber-wrap { flex:1; position:relative; height:80px; display:flex; align-items:center; cursor:pointer; }
.sp-scrubber-bg { position:absolute; left:0; right:0; height:12px; background:rgba(255,255,255,0.2); border-radius:6px; overflow:hidden; pointer-events:none; box-shadow:0 12px 32px rgba(0,0,0,0.58),0 3px 10px rgba(0,0,0,0.5),inset 0 0 0 1px rgba(255,255,255,0.16); }
.sp-scrubber-buf { position:absolute; left:0; height:100%; background:rgba(255,255,255,0.25); border-radius:3px; transition:width 0.3s; }
.sp-scrubber-fill { position:absolute; left:0; height:100%; background:var(--accent); border-radius:3px; }
.sp-scrubber-thumb { position:absolute; top:50%; width:52px; height:52px; background:white; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 14px 34px rgba(0,0,0,0.62),0 3px 12px rgba(0,0,0,0.52); transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1); flex-shrink:0; }
.sp-scrubber-wrap:active .sp-scrubber-thumb,
.sp-scrubber-wrap.scrubbing .sp-scrubber-thumb { transform:translate(-50%,-50%) scale(1.4); box-shadow:0 18px 42px rgba(0,0,0,0.66),0 4px 16px rgba(0,0,0,0.56); }
.sp-scrubber { position:absolute; left:0; right:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0; }
.sp-scrubber::-webkit-slider-thumb { width:56px; height:56px; }
.sp-scrubber::-moz-range-thumb { width:56px; height:56px; }
@keyframes sp-progress-shoot-right {
  0% { transform:translateX(-120%); opacity:0; }
  12% { opacity:1; }
  72% { opacity:1; }
  100% { transform:translateX(180%); opacity:0; }
}
#sp-progress-fill { position:relative; overflow:hidden; }
#sp-progress-fill::after {
  content:'';
  position:absolute;
  inset:0;
  width:58%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),rgba(255,255,255,0.9),rgba(255,255,255,0.16),transparent);
  filter:blur(1px);
  animation:sp-progress-shoot-right 1.15s ease-in-out infinite;
  pointer-events:none;
}
/* Audio track selector */
.audio-track-row { display:flex; align-items:center; gap:12px; padding:10px 0; flex-wrap:wrap; }
.audio-label { font-size:var(--fs-sm); color:rgba(255,255,255,0.7); font-weight:700; flex-shrink:0; }
.audio-pills { display:flex; gap:8px; flex-wrap:wrap; }
.audio-pill { background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.3); border-radius:26px; padding:0 26px; height:62px; display:flex; align-items:center; font-size:var(--fs-lg); font-weight:700; color:rgba(255,255,255,0.85); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.audio-pill:hover { background:rgba(255,255,255,0.25); }
.audio-pill.active { background:var(--accent); border-color:var(--accent); color:white; }

/* Season/ep */
.season-ep-row { padding:16px 28px; display:flex; gap:16px; flex-shrink:0; box-shadow:0 1px 0 rgba(255,255,255,0.05); align-items:center; flex-wrap:wrap; }
.season-ep-row label { font-size:var(--fs-lg); color:var(--text3); font-weight:700; }
.season-ep-row select { background:var(--surface2); border:2px solid var(--border2); border-radius:12px; color:var(--text); font-size:var(--fs-sm); padding:0 18px; height:54px; outline:none; cursor:pointer; font-weight:700; }
/* Season picker: narrower trigger, larger chevron (matches the playlist dropdown)
   with breathing room on its right edge. */
.season-ep-row .touch-select-shell { width:auto; flex:0 0 auto; }
.season-ep-row .touch-select-trigger { width:auto; min-width:240px; max-width:360px; padding:0 10px 0 18px; }
.season-ep-row .touch-select-trigger .ci-icon { width:24px; height:24px; margin-right:10px; }

/* Episode + stream stacked body — grows with content; main detail scroll handles overflow */
.ep-stream-body { display:flex; flex-direction:column; flex:0 0 auto; overflow:visible; min-height:0; padding-bottom:28px; }

/* Episode list */
.ep-list-wrap { width:100%; min-width:0; overflow:visible; display:flex; }
.ep-list { display:flex; flex-direction:column; align-items:stretch; padding:16px 10px; gap:14px; width:100%; flex:1; box-sizing:border-box; }
.ep-item { display:flex; align-items:stretch; gap:16px; padding:18px; border-radius:16px; cursor:default; transition:background 0.15s,border-color 0.15s; border:1px solid rgba(255,255,255,0.06); background:var(--surface); width:100%; box-sizing:border-box; }
.ep-item:hover { background:var(--surface); border-color:rgba(255,255,255,0.06); }
.ep-item.active { background:var(--surface); border-color:rgba(255,255,255,0.08); }
.ep-thumb { width:136px; min-height:100%; border-radius:10px; overflow:hidden; background:var(--surface2); flex-shrink:0; display:flex; align-items:stretch; justify-content:center; align-self:stretch; position:relative; }
.ep-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ep-thumb-ph { width:100%; height:100%; font-size:24px; color:var(--text3); display:flex; align-items:center; justify-content:center; }
.ep-watch-toggle { position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:999px; border:2px solid #16a34a; background:#16a34a; color:#fff; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:transform 0.1s,filter 0.15s; }
.ep-watch-toggle:hover { filter:brightness(1.05); }
.ep-watch-toggle:active { transform:scale(0.96); }
.ep-watch-toggle .ci-icon { width:18px; height:18px; }
.ep-copy { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.ep-num { font-size:var(--fs-lg); font-weight:800; color:var(--accent); margin-bottom:8px; }
.ep-name { font-size:30px; font-weight:800; line-height:1.3; }
.ep-desc { font-size:21px; color:var(--text3); line-height:1.55; margin-top:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ep-play-btn { background:var(--accent); border:none; border-radius:var(--radius); color:white; font-size:var(--fs-md); font-weight:700; padding:0 28px; height:60px; cursor:pointer; flex-shrink:0; align-self:center; white-space:nowrap; transition:background 0.15s; }
.ep-play-btn:hover { background:var(--accent2); }
.ep-play-icon-btn { width:96px; height:96px; padding:0; flex-shrink:0; align-self:center; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius); cursor:pointer; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); color:#fff; box-sizing:border-box; transition:background 0.15s,border-color 0.15s; }
.ep-play-icon-btn:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
.ep-play-icon-btn .ci-icon { width:42px; height:42px; }
html.light-mode .ep-play-icon-btn { background:var(--accent) !important; border-color:var(--accent) !important; }
html.light-mode .ep-play-icon-btn:hover { background:var(--accent2) !important; border-color:var(--accent2) !important; }
.ep-item.active .ep-num { color:var(--accent); }
.ep-item-skeleton { cursor:default; }
.ep-item-skeleton, .ep-item-skeleton:hover { background:var(--surface); border-color:rgba(255,255,255,0.06); }
.ep-item-skeleton .ep-thumb .epg-skeleton-block { position:absolute; inset:0; border-radius:0; }
.ep-item-skeleton .ep-copy { justify-content:center; }
.ep-item-skeleton .ep-copy .epg-skeleton-block { display:block; }

/* Stream list — scrolls with the detail page, not independently */
.stream-list { flex:0 0 auto; width:100%; overflow:visible; padding:12px 16px; box-sizing:border-box; }
.stream-item { display:flex; align-items:center; gap:16px; padding:18px; border-radius:16px; border:1px solid rgba(255,255,255,0.06); background:var(--surface); margin-bottom:10px; transition:border-color 0.15s,background 0.15s; }
.stream-item:hover { border-color:rgba(255,255,255,0.12); background:var(--surface2); }
.stream-item.playing { border-color:var(--accent-border); background:var(--accent-bg); }
.stream-quality { border-radius:8px; font-size:var(--fs-xs); font-weight:800; padding:7px 12px; flex-shrink:0; min-width:62px; text-align:center; color:white; letter-spacing:0.5px; }
.q4k { background:#7c3aed; }
.q1080 { background:#1d4ed8; }
.q720 { background:#065f46; }
.qsd { background:var(--surface3); color:var(--text2); }
.qhd { background:#1d4ed8; }
.stream-info { flex:1; min-width:0; }
.stream-name-row { display:flex; align-items:center; gap:10px; min-width:0; }
.stream-name { font-size:var(--fs-sm); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stream-compat-badge { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-size:11px; font-weight:800; border-radius:999px; padding:4px 8px; }
.stream-compat-badge svg { width:14px; height:14px; }
.stream-compat-badge.supported { background:rgba(34,197,94,0.16); color:#8ef0af; border:1px solid rgba(34,197,94,0.45); }
.stream-compat-badge.warning { background:rgba(245,158,11,0.16); color:#ffd36f; border:1px solid rgba(245,158,11,0.45); }
.stream-compat-badge.error { background:rgba(239,68,68,0.16); color:#fca5a5; border:1px solid rgba(239,68,68,0.45); }
.stream-compat-info { width:28px; height:28px; border-radius:999px; border:1px solid rgba(245,158,11,0.45); background:rgba(245,158,11,0.12); color:#ffd36f; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; padding:0; }
.stream-compat-info svg { width:14px; height:14px; }
.stream-details { font-size:var(--fs-xs); color:var(--text3); margin-top:5px; }
.stream-codecs { font-size:var(--fs-xs); color:rgba(255,255,255,0.78); margin-top:5px; font-weight:700; }
.stream-format-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.stream-format-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid var(--border2); color:var(--text2); font-size:11px; font-weight:800; letter-spacing:0.02em; }
.stream-format-pill.safe { background:rgba(34,197,94,0.14); border-color:rgba(34,197,94,0.36); color:#9aefb7; }
.stream-format-pill.risky { background:rgba(245,158,11,0.14); border-color:rgba(245,158,11,0.38); color:#ffd36f; }
.stream-warning-note { font-size:var(--fs-xs); color:#ffd36f; margin-top:6px; line-height:1.45; font-weight:700; }
.stream-status { font-size:var(--fs-xs); color:var(--accent2); margin-top:6px; display:none; font-weight:700; }
.stream-play-btn { background:var(--accent); border:none; border-radius:12px; color:white; font-size:var(--fs-sm); font-weight:700; padding:0 28px; height:54px; cursor:pointer; flex-shrink:0; transition:background 0.15s; white-space:nowrap; }
.stream-play-btn:hover { background:var(--accent2); }
.stream-play-btn:disabled { background:var(--surface3); color:var(--text3); cursor:default; }

/* Toast */
.toast { position:fixed; bottom:32px; right:32px; background:var(--surface2); border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding:24px 38px; font-size:26px; font-weight:700; color:var(--text); max-width:min(720px,80vw); transform:translateY(120px); opacity:0; transition:transform 0.3s,opacity 0.3s; z-index:200; box-shadow:0 8px 32px rgba(0,0,0,0.4); }
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { background:rgba(20,80,40,0.96); border-color:rgba(72,196,121,0.7); color:#eafff1; }
.volume-edge-indicator { position:fixed; top:12vh; right:0; bottom:12vh; width:22px; z-index:2147483000; pointer-events:none; opacity:0; visibility:hidden; transition:opacity 0.15s ease,visibility 0.15s ease; }
.volume-edge-indicator.show { opacity:1; visibility:visible; }
.volume-edge-track { position:absolute; inset:0; background:rgba(70,70,70,0.85); border-left:1px solid rgba(255,255,255,0.5); box-shadow:inset 0 0 18px rgba(0,0,0,0.3); }
.volume-edge-fill { position:absolute; left:0; right:0; bottom:0; height:0; background:#fff; transition:height 0.12s ease; box-shadow:0 0 22px rgba(255,255,255,0.75); }

/* ── SETTINGS FULL PAGE ── */
.settings-overlay { display:none; position:fixed; top:110px; left:0; right:0; bottom:0; z-index:200; background:var(--bg); overflow:hidden; }
.settings-overlay.open,.settings-overlay[style*="flex"] { display:flex !important; }
.settings-shell { display:flex; flex-direction:row; width:100%; height:100%; overflow:hidden; background:var(--bg); }
.settings-nav-col { width:360px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0; }
html.light-mode .settings-nav-col { background:var(--surface); box-shadow:1px 0 0 rgba(0,0,0,0.08); }
.settings-nav-header { padding:24px 24px; flex-shrink:0; display:flex; align-items:center; gap:16px; }
.settings-nav-title { display:flex; align-items:center; gap:12px; font-size:var(--fs-xl); font-weight:800; color:var(--text); }
.settings-nav-title .ci-icon { width:30px; height:30px; flex-shrink:0; }
.settings-content-topbar { flex-shrink:0; display:flex; align-items:center; justify-content:flex-end; padding:20px 28px; }
.settings-close-btn { background:var(--accent); border:2px solid rgba(255,255,255,0.25); border-radius:14px; color:#fff; width:76px; height:76px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s; flex-shrink:0; }
.settings-close-btn:hover { background:var(--accent2); }
.settings-close-btn .ci-icon { width:32px; height:32px; }
.settings-content-header { display:none; }
.settings-nav-list { display:flex; flex-direction:column; gap:0; padding:8px 0 24px; flex:1; min-height:0; }
.settings-tab-btn { width:100%; min-height:96px; border:none; border-radius:0; background:transparent; color:var(--text2); font-size:40px; font-weight:700; display:flex; align-items:center; gap:20px; cursor:pointer; padding:0 22px; text-align:left; transition:background 0.15s,color 0.15s; position:relative; border-left:6px solid transparent; }
.settings-tab-btn:hover { background:rgba(255,255,255,0.05); color:var(--text); }
.settings-tab-btn.active { background:rgba(255,255,255,0.06); color:var(--text); border-left-color:var(--accent); }
.settings-tab-btn .ci-icon { width:30px; height:30px; flex-shrink:0; }
.settings-overlay.playlist-only .settings-nav-col { display:none; }
.settings-content-col { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; position:relative; background:var(--bg); }
.settings-si-track { position:absolute; right:3px; top:6px; bottom:6px; width:3px; background:rgba(255,255,255,0.07); border-radius:3px; z-index:10; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.settings-si-track.si-visible { opacity:1; }
.settings-si-thumb { position:absolute; left:0; right:0; top:0; background:var(--accent); border-radius:3px; min-height:20px; opacity:0.65; transition:opacity 0.15s; }
.settings-si-track.si-scrolling .settings-si-thumb { opacity:1; }
html.light-mode .settings-si-track { background:rgba(0,0,0,0.08); }
.settings-live-si-track { position:absolute; right:3px; top:6px; bottom:6px; width:3px; background:rgba(255,255,255,0.07); border-radius:3px; z-index:10; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.settings-live-si-track.si-visible { opacity:1; }
.settings-live-si-thumb { position:absolute; left:0; right:0; top:0; background:var(--accent); border-radius:3px; min-height:20px; opacity:0.65; transition:opacity 0.15s; }
.settings-live-si-track.si-scrolling .settings-live-si-thumb { opacity:1; }
html.light-mode .settings-live-si-track { background:rgba(0,0,0,0.08); }
.settings-panel { display:none; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:40px 56px; scrollbar-width:thin; scrollbar-color:var(--accent) rgba(255,255,255,0.06); -webkit-overflow-scrolling:touch; }
.settings-panel::-webkit-scrollbar { width:8px; }
.settings-panel::-webkit-scrollbar-thumb { background:var(--accent); border-radius:999px; }
.settings-panel.active { display:flex; flex-direction:column; align-items:center; }
.settings-panel.active > *:not([class*="si-track"]):not(.settings-account-hidden-field) { width:100%; max-width:720px; box-sizing:border-box; }
/* General controls must fill the centered column — nested max-widths left-align
   dropdowns and make the tab look off-center even when the row itself is centered. */
#settings-panel-general .settings-field-select,
#settings-panel-general .settings-field-select .touch-select-shell { width:100%; max-width:none; }
/* Live TV toggles should span the content column (pre-centering layout). */
#settings-panel-live.active { align-items:stretch; }
#settings-panel-live.active > *:not([class*="si-track"]) { max-width:none; }
#settings-panel-playlists.active { position:relative; padding:0; align-items:stretch; }
#settings-panel-playlists.active > .settings-playlists-scroll { width:100%; max-width:720px; margin:0 auto; box-sizing:border-box; }
.settings-save-row { flex-shrink:0; padding:20px 56px 28px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:center; gap:16px; background:var(--bg); }
.settings-save-btn { width:auto; min-width:280px; padding:0 42px; background:var(--accent); border:none; border-radius:16px; color:#fff; font-size:22px; font-weight:800; height:74px; cursor:pointer; transition:background 0.15s; box-sizing:border-box; }
.settings-save-btn:hover { background:var(--accent2); }
.settings-cancel-btn { width:auto; min-width:280px; padding:0 42px; background:transparent; border:2px solid var(--border2); border-radius:16px; color:var(--text2); font-size:22px; font-weight:800; height:74px; cursor:pointer; transition:background 0.15s,color 0.15s,border-color 0.15s; box-sizing:border-box; }
.settings-cancel-btn:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.3); }
/* Scale up settings content */
.settings-panel label:not(.ios-toggle):not(.settings-toggle-label) { font-size:var(--fs-md); }
.settings-panel span[id*="label"] { font-size:var(--fs-xl) !important; }
.settings-panel input:not([type="checkbox"]),.settings-panel select { font-size:var(--fs-sm) !important; height:72px !important; }
.settings-panel p { font-size:var(--fs-sm) !important; line-height:1.6 !important; }
.settings-panel .phone-paste-tip { font-size:var(--fs-md) !important; padding:28px 26px !important; line-height:1.55 !important; min-height:74px; box-sizing:border-box; }
.settings-panel .phone-paste-tip svg { width:32px !important; height:32px !important; }
.settings-panel .playlist-section-title,
.settings-panel .settings-toggle-label { font-size:var(--fs-xl); font-weight:700; color:var(--text2); }
.settings-panel .ios-toggle-track { width:76px; height:46px; overflow:hidden; box-sizing:border-box; }
.settings-panel .ios-toggle-thumb { top:2px; left:2px; width:42px; height:42px; }
.settings-panel .ios-toggle input:checked + .ios-toggle-track .ios-toggle-thumb,.settings-panel .ios-toggle.is-checked .ios-toggle-thumb { transform:translateX(30px); }
#settings-panel-playlists .phone-paste-wrap input,
#settings-panel-media .phone-paste-wrap input { height:74px !important; }
#settings-panel-playlists .phone-paste-btn,
#settings-panel-media .phone-paste-btn { width:74px; height:74px; flex-shrink:0; }
#settings-panel-playlists .phone-paste-btn svg,
#settings-panel-media .phone-paste-btn svg { width:38px; height:38px; }
.settings-section-title { font-size:var(--fs-xl) !important; font-weight:800; margin-bottom:10px; }
.settings-section-sub { font-size:var(--fs-sm) !important; }
.settings-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0; border-bottom:1px solid var(--border); }
.settings-toggle-row-inline { justify-content:flex-start; gap:28px; }
.settings-toggle-row-inline .settings-toggle-label { flex:0 1 auto; }
.settings-toggle-row:last-child { border-bottom:none; }
.settings-stepper { display:inline-flex; align-items:center; border:1px solid var(--border2); border-radius:12px; overflow:hidden; flex-shrink:0; }
.settings-auto-fullscreen-row { flex-wrap:wrap; gap:16px; }
.settings-toggle-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:6px; }
.settings-stepper-btn { width:76px; height:76px; background:var(--surface2); border:none; color:var(--text); font-size:36px; font-weight:300; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background 0.15s; line-height:1; }
.settings-stepper-btn:active { background:var(--surface3); }
.settings-stepper-val { min-width:148px; text-align:center; font-size:var(--fs-md); font-weight:700; color:var(--text); padding:0 16px; border-left:1px solid var(--border2); border-right:1px solid var(--border2); height:76px; display:flex; align-items:center; justify-content:center; }
html.desktop-mode .settings-stepper-btn { width:52px; height:52px; font-size:28px; }
html.desktop-mode .settings-stepper-val { min-width:104px; height:52px; font-size:15px; padding:0 12px; }
.settings-toggle-label { font-size:var(--fs-xl); font-weight:700; color:var(--text2); }
.settings-panel label.settings-toggle-label { cursor:pointer; }
.settings-general-row { padding:0 0 24px; margin-bottom:24px; border-bottom:1px solid var(--border); }
.settings-general-row:last-child { border-bottom:none; margin-bottom:0; }
.settings-update-actions { width:100%; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.settings-inline-toggle-row { display:flex; align-items:center; gap:28px; }
/* Clock format uses toggle buttons; hide any legacy touch-select shell */
#settings-clock-format + .touch-select-shell { display:none !important; }
.settings-field-block { margin-bottom:32px; }
.settings-field-label { display:block; font-size:var(--fs-xl); color:var(--text2); margin-bottom:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; }
.settings-account-hidden-field { display:none !important; }
.settings-account-summary { display:flex; align-items:center; gap:20px; padding:0; border-bottom:none; margin-bottom:0; }
.settings-account-header { padding:0 0 28px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.settings-account-avatar { width:80px; height:80px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:36px; font-weight:800; color:#fff; }
.settings-account-copy { min-width:0; flex:1; }
.settings-account-email { font-size:var(--fs-xl); font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-account-tier { font-size:var(--fs-lg); color:var(--text3); margin-top:6px; line-height:1.25; }
/* Free-trial days-remaining pill directly under the tier label */
.settings-trial-pill-row { display:none; margin-top:12px; padding-left:100px; box-sizing:border-box; }
.settings-trial-pill-row.is-visible { display:block; }
.settings-trial-pill {
  display:inline-flex; align-items:center; margin:0; padding:8px 20px; border-radius:999px;
  border:2px solid var(--btn-red-border,#e31937); background:var(--btn-dark-red,#b3122a); color:#fff;
  font-size:var(--fs-md); font-weight:700; white-space:nowrap; line-height:1.2;
}
.settings-admin-trial-row {
  display:none; margin-top:16px; padding-left:100px; box-sizing:border-box; flex-direction:column; gap:10px;
}
.settings-admin-trial-row.is-visible { display:flex; }
.settings-admin-trial-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.settings-admin-trial-controls input {
  width:120px; height:var(--btn-h); padding:0 14px; border-radius:var(--radius);
  border:2px solid var(--border2); background:var(--surface2); color:var(--text);
  font-size:var(--fs-md); font-weight:700; outline:none;
}
.settings-admin-trial-hint { margin:0; font-size:var(--fs-sm); color:var(--text3); font-weight:600; }
html.desktop-mode .settings-admin-trial-row { padding-left:84px; }
.settings-account-premium-btn {
  width:auto; min-width:220px; padding:0 56px; background:var(--accent); border:none; border-radius:16px;
  color:#fff; font-size:22px; font-weight:800; height:74px; cursor:pointer; margin:0;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:background 0.15s; box-sizing:border-box;
}
.settings-account-premium-btn:hover { background:var(--accent2); }
/* Duplicated "Get Premium" pinned to the bottom of the settings sidebar */
.settings-nav-premium { flex-shrink:0; display:flex; justify-content:center; padding:14px 16px 20px; border-top:1px solid var(--border); }
.settings-account-action-btn { background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius); color:var(--text2); font-size:var(--fs-md); font-weight:700; height:var(--btn-h); min-width:180px; padding:0 40px; cursor:pointer; white-space:nowrap; transition:background 0.15s,color 0.15s,border-color 0.15s; }
.settings-account-action-btn:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.3); }
#settings-panel-help.active { display:flex; align-items:center; justify-content:center; }
#settings-panel-account.active > #settings-account-status { max-width:720px; }
.settings-help-card { width:min(680px,100%); padding:52px 44px; border:1px solid var(--border2); border-radius:24px; background:var(--surface); text-align:center; box-sizing:border-box; box-shadow:0 18px 48px rgba(0,0,0,.24); }
.settings-help-icon { width:54px; height:54px; margin-bottom:20px; color:var(--accent); }
.settings-help-card h2 { margin:0 0 14px; color:var(--text); font-size:36px; }
.settings-help-card p { margin:0 0 12px; color:var(--text2); }
.settings-help-email { display:block; margin-bottom:30px; color:var(--text); font-size:24px; font-weight:800; text-decoration:none; word-break:break-word; }
.settings-help-email:hover { color:var(--accent); }
.settings-help-mail-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:58px; padding:0 30px; border:2px solid var(--btn-red-border); border-radius:var(--radius); background:var(--btn-dark-red); color:#fff; font-size:18px; font-weight:800; text-decoration:none; box-sizing:border-box; }
.settings-help-mail-btn:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); }
.settings-help-mail-btn .ci-icon { width:22px; height:22px; }
#settings-panel-account.active:not(.show-cancel-view) { display:flex; flex-direction:column; align-items:center; }
#settings-panel-account #settings-account-main-view { flex:1; min-height:0; display:flex; flex-direction:column; width:100%; max-width:720px; margin:0 auto; }
#settings-panel-account.active.show-cancel-view { align-items:stretch; }
#settings-panel-account.active.show-cancel-view > #settings-account-cancel-view { max-width:none; }
.settings-account-guest { flex:1; width:100%; }
.settings-account-guest-inner { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:54px 0 72px; box-sizing:border-box; }
#settings-panel-account p.settings-account-guest-copy { max-width:720px; margin:0 0 34px; color:var(--text2); font-size:var(--fs-xl) !important; line-height:1.35 !important; font-weight:700; }
.settings-account-auth-actions { display:flex; align-items:center; justify-content:center; gap:18px; width:100%; max-width:620px; flex-wrap:wrap; }
.settings-account-auth-btn { width:auto; min-width:280px; height:74px; padding:0 42px; border-radius:16px; font-size:22px; font-weight:800; cursor:pointer; box-sizing:border-box; }
#settings-signup-btn.settings-account-auth-btn { background:var(--surface2); border:2px solid var(--border2); color:var(--text); }
#settings-signup-btn.settings-account-auth-btn:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.28); }
html.desktop-mode .settings-account-guest-copy { font-size:var(--fs-xl) !important; max-width:680px; }
html.desktop-mode .settings-account-auth-btn { min-width:240px; height:62px; padding:0 34px; font-size:18px; border-radius:14px; }
html.light-mode .settings-tab-btn { color:rgba(0,0,0,0.5); }
html.light-mode .settings-tab-btn.active { background:rgba(0,0,0,0.06); color:var(--text); }
html.light-mode .settings-tab-btn:hover { background:rgba(0,0,0,0.04); }
html.light-mode .settings-panel .settings-toggle-row,
html.light-mode .settings-panel .settings-general-row,
html.light-mode .settings-panel .settings-account-header,
html.light-mode .settings-panel .settings-account-summary,
html.light-mode .settings-save-row { border-color:rgba(0,0,0,0.24); }
html.light-mode .settings-save-row { border-top-color:rgba(0,0,0,0.24); }
html.light-mode .settings-panel .ios-toggle-track { background:rgba(0,0,0,0.08); border:2px solid rgba(0,0,0,0.24); box-sizing:border-box; overflow:hidden; }
html.light-mode .settings-panel .ios-toggle input:checked + .ios-toggle-track,
html.light-mode .settings-panel .ios-toggle.is-checked .ios-toggle-track { border-color:rgba(0,0,0,0.24); }
html.light-mode .settings-panel .ios-toggle-thumb { width:38px; height:38px; top:2px; left:2px; }
html.light-mode .settings-panel .ios-toggle input:checked + .ios-toggle-track .ios-toggle-thumb,
html.light-mode .settings-panel .ios-toggle.is-checked .ios-toggle-thumb { transform:translateX(30px); }

/* ── View-mode badge (read-only indicator) ───────────────────────────────── */
.view-mode-badge { display:none; font-size:11px; font-weight:700; color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.07); border-radius:7px; padding:4px 10px; letter-spacing:0.05em; flex-shrink:0; pointer-events:none; text-transform:uppercase; }
.view-mode-badge.visible { display:block; }
html.desktop-mode .view-mode-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  font-size:12px;
  font-weight:700;
  padding:4px 14px;
  line-height:1;
  border-radius:999px;
  border:2px solid var(--btn-red-border);
  background:var(--btn-dark-red);
  color:#fff;
  letter-spacing:0.06em;
  box-sizing:border-box;
}
html.desktop-mode .view-mode-badge.visible { display:inline-flex; }
html.light-mode.desktop-mode .view-mode-badge {
  background:rgba(255,255,255,0.96);
  color:var(--text);
  border-color:rgba(227,25,55,0.88);
}

/* ── Desktop compatibility mode ───────────────────────────────────────────── */
/* Applied when pointer:fine + width≥1024 (mouse-driven desktop browser) */
html.desktop-mode {
  --fs-xs:14px; --fs-sm:16px; --fs-md:18px; --fs-lg:22px; --fs-xl:28px;
  --btn-h:48px; --input-h:48px; --icon-size:38px;
  --ch-h:64px; --media-h:70px;
  --sidebar:360px; --epg-channel-col:260px; --epg-row-height:92px;
  --radius:12px;
}
/* Header */
html.desktop-mode .app-header { height:64px; padding:0 28px; }
html.desktop-mode .header-logo { margin-right:24px; }
html.desktop-mode .header-logo img { height:34px; }
/* Web/desktop (not Tesla): slightly taller header + larger logo bloom. */
html.desktop-mode:not(.tesla-browser) .app-header { height:74px; }
html.desktop-mode:not(.tesla-browser) .header-logo img {
  height:44px;
  filter:drop-shadow(0 0 12px rgba(227,25,55,0.34)) drop-shadow(0 4px 14px rgba(0,0,0,0.45));
}
html.desktop-mode:not(.tesla-browser) .app-header::before {
  top:-64px; left:-52px; width:420px; height:250px;
  background:radial-gradient(ellipse at 38% 32%,rgba(227,25,55,0.30) 0%,rgba(227,25,55,0.10) 38%,rgba(227,25,55,0.03) 58%,transparent 74%);
}
html.light-mode.desktop-mode:not(.tesla-browser) .header-logo img {
  filter:drop-shadow(0 0 10px rgba(227,25,55,0.18)) drop-shadow(0 1px 2px rgba(0,0,0,0.12));
}
html.light-mode.desktop-mode:not(.tesla-browser) .app-header::before {
  top:0; left:-36px; bottom:0; width:min(380px,36vw); height:100%;
  background:radial-gradient(ellipse at 18% 100%,rgba(227,25,55,0.16) 0%,rgba(227,25,55,0.07) 42%,rgba(227,25,55,0.02) 62%,transparent 78%);
}
html.desktop-mode:not(.tesla-browser) .settings-overlay { top:74px; }
html.desktop-mode:not(.tesla-browser) #global-search-page { top:74px; }
html.desktop-mode .tab-nav { height:76px; max-height:76px; }
html.desktop-mode .tab-btn { font-size:27px; padding:0 26px; gap:8px; height:100%; }
html.desktop-mode .tab-btn span { padding-bottom:3px; border-bottom-width:2px; }
html.desktop-mode .tab-beta { font-size:9px; padding:2px 6px !important; margin-bottom:5px; }
html.desktop-mode .header-actions { align-items:center; gap:10px; margin-left:10px; }
html.desktop-mode .header-actions > .hdr-icon-btn,
html.desktop-mode .header-actions > .header-language-wrap > .hdr-icon-btn {
  width:52px; height:52px; border-radius:12px; padding:10px;
}
html.desktop-mode .header-actions > .hdr-icon-btn .ci-icon { width:30px; height:30px; }
html.desktop-mode .header-language-btn { width:52px; height:52px; border-radius:12px; padding:0 !important; }
html.desktop-mode .header-language-flag { width:34px; height:25px; }
html.desktop-mode .hdr-btn { height:44px; font-size:15px; padding:0 16px; border-radius:10px; gap:8px; max-width:220px; }
html.desktop-mode .hdr-icon-btn { width:44px; height:44px; border-radius:10px; padding:9px; }
html.desktop-mode .hdr-icon-btn .ci-icon { width:22px; height:22px; }
html.desktop-mode .hdr-profile-btn { width:44px; height:44px; border-radius:10px; }
html.desktop-mode .hdr-profile-btn .ci-icon { width:22px; height:22px; }
html.desktop-mode .hdr-profile-dropdown { min-width:260px; border-radius:12px; }
html.desktop-mode .hdr-profile-email { padding:12px 16px 10px; font-size:13px; }
html.desktop-mode .hdr-profile-item { padding:12px 16px; font-size:15px; gap:12px; }
html.desktop-mode .hdr-profile-item.auth-cta { min-height:48px; font-size:15px; font-weight:700; padding:14px 16px; gap:10px; }
html.desktop-mode .hdr-profile-item.auth-cta .ci-icon { width:20px; height:20px; }
html.desktop-mode .hdr-search-bar { width:min(360px,30vw); min-width:240px; }
html.desktop-mode .hdr-search-icon { left:14px; }
html.desktop-mode .hdr-search-icon .ci-icon { width:20px; height:20px; }
html.desktop-mode .hdr-search-bar input { height:52px; font-size:20px; padding:0 42px 0 46px; }
html.desktop-mode .now-playing-badge { font-size:14px; padding:7px 12px; max-width:220px; border-radius:10px; }
/* Sidebar & channels */
html.desktop-mode .category-item { height:var(--sidebar-row-height,64px); min-height:var(--sidebar-row-height,64px); max-height:var(--sidebar-row-height,64px); font-size:20px; padding:0 12px 0 16px; box-sizing:border-box; }
html.desktop-mode .category-name { line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
html.desktop-mode .channel-item { padding:12px 12px 0; gap:12px; }
html.desktop-mode .channel-logo { width:48px; height:48px; border-radius:10px; }
html.desktop-mode .channel-name { font-size:16px; }
html.desktop-mode .channel-epg { font-size:14px; margin-top:4px; }
html.desktop-mode .fav-btn { width:40px; height:40px; border-radius:10px; }
html.desktop-mode .fav-btn .ci-icon { width:18px; height:18px; }
html.desktop-mode .sidebar { padding:12px 16px 12px 10px; gap:6px; }
html.desktop-mode .sidebar-section-head { padding:8px 2px 8px 6px; gap:10px; }
html.desktop-mode .sidebar-section-actions { gap:8px; padding-right:4px; }
html.desktop-mode .sidebar-section-icon-btn { width:48px; height:48px; border-radius:11px; }
html.desktop-mode .sidebar-section-icon-btn .ci-icon { width:24px; height:24px; }
html.desktop-mode .sidebar-section-edit { width:48px; height:48px; border-radius:11px; }
html.desktop-mode .sidebar-section-edit .ci-icon { width:24px; height:24px; }
html.desktop-mode .sidebar-section-title { font-size:20px; }
html.desktop-mode .sidebar-search-wrap input { height:44px; font-size:15px; }
html.desktop-mode .playlist-switch-wrap label { font-size:20px; }
html.desktop-mode .playlist-switch-wrap .touch-select-trigger { border-radius:12px; font-size:20px; font-weight:600; }
html.desktop-mode .playlist-switch-wrap .touch-select-trigger .ts-chevron { width:24px; height:24px; }
html.desktop-mode .playlist-switch-wrap .touch-select-trigger .ts-inline-add { border-radius:10px; }
html.desktop-mode .playlist-switch-wrap .touch-select-trigger .ts-inline-add .ci-icon { width:26px; height:26px; }
/* Touch-select (dropdown) */
html.desktop-mode .touch-select-trigger { height:46px; font-size:15px; padding:0 14px; }
html.desktop-mode .touch-select-trigger .ts-inline-chevron { width:46px; height:46px; }
html.desktop-mode .playlist-switch-wrap .touch-select-trigger { height:var(--sidebar-row-height,64px); padding:0 0 0 14px; }
html.desktop-mode .playlist-switch-wrap .touch-select-trigger .ts-inline-chevron { width:52px; height:var(--sidebar-row-height,64px); flex-shrink:0; }
html.desktop-mode .playlist-switch-wrap .touch-select-trigger .ts-inline-add { width:52px; height:var(--sidebar-row-height,64px); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; align-self:stretch; }
html.desktop-mode .playlist-switch-wrap .touch-select-trigger .ts-action-divider { height:32px; align-self:center; margin:0; }
html.desktop-mode .settings-field-select .touch-select-trigger { height:52px; font-size:16px; padding:0 16px; }
html.desktop-mode .touch-select-option { min-height:46px; font-size:15px; padding:0 16px; }
/* Login / auth card */
html.desktop-mode .app-header::before {
  top:-52px; left:-44px; width:340px; height:200px;
  background:radial-gradient(ellipse at 38% 32%,rgba(227,25,55,0.20) 0%,rgba(227,25,55,0.05) 40%,transparent 70%);
}
html.light-mode.desktop-mode .app-header { overflow:hidden; }
html.light-mode.desktop-mode .app-header::before {
  top:0; left:-28px; bottom:0; width:min(300px,32vw); height:100%;
  background:radial-gradient(ellipse at 18% 100%,rgba(227,25,55,0.10) 0%,rgba(227,25,55,0.045) 44%,rgba(227,25,55,0.015) 62%,transparent 76%);
}
html.desktop-mode .login-form-sub { font-size:22px; }
html.desktop-mode .login-form-logo img { height:42px; }
html.desktop-mode .field input { height:48px; font-size:16px; }
html.desktop-mode .connect-btn { font-size:16px; padding:14px; }
html.desktop-mode .signup-btn { font-size:15px; padding:13px; }
html.desktop-mode #login-card .login-drop-submit,
html.desktop-mode #auth-secondary-btn,
html.desktop-mode #auth-already-signin-btn { width:220px; min-width:220px; height:48px; padding:0 28px; font-size:16px; }
html.desktop-mode #login-card .login-form-sub { font-size:22px; margin-bottom:16px; }
html.desktop-mode .login-close-btn { width:44px; height:44px; }
html.desktop-mode #login-card .login-form-panel { padding:0 36px 0 0; }
html.desktop-mode .login-drop-logo-img { height:48px; }
/* Web/desktop only (not Tesla): tighter fields, larger titles/buttons, bigger logo bloom. */
html.desktop-mode:not(.tesla-browser) #login-card .login-dropdown-inner { padding-top:36px; }
html.desktop-mode:not(.tesla-browser) #login-card .login-drop-logo-row {
  margin-top:0; margin-bottom:14px; min-height:0;
}
html.desktop-mode:not(.tesla-browser) #login-card .login-fields-col { max-width:340px; width:100%; }
html.desktop-mode:not(.tesla-browser) #login-card .login-form-sub { max-width:340px; font-size:30px; margin-bottom:18px; letter-spacing:-0.3px; }
html.desktop-mode:not(.tesla-browser) #login-card .login-drop-submit,
html.desktop-mode:not(.tesla-browser) #auth-secondary-btn,
html.desktop-mode:not(.tesla-browser) #auth-already-signin-btn { font-size:20px; height:54px; min-width:220px; width:220px; padding:0 28px; }
html.desktop-mode:not(.tesla-browser) .login-drop-logo-bloom {
  width:min(400px,72%); height:110px; margin:0;
  background:radial-gradient(ellipse at 50% 55%,rgba(227,25,55,0.28) 0%,rgba(227,25,55,0.12) 40%,rgba(227,25,55,0.04) 62%,transparent 78%);
}
html.desktop-mode:not(.tesla-browser) .login-drop-logo-img { height:72px; filter:drop-shadow(0 0 16px rgba(227,25,55,0.32)) drop-shadow(0 8px 22px rgba(0,0,0,0.55)); }
html.light-mode.desktop-mode:not(.tesla-browser) .login-drop-logo-bloom {
  background:radial-gradient(ellipse at 50% 55%,rgba(227,25,55,0.14) 0%,rgba(227,25,55,0.06) 44%,rgba(227,25,55,0.02) 62%,transparent 76%);
}
html.light-mode.desktop-mode:not(.tesla-browser) .login-drop-logo-img { filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.10)); }
/* Split the view in half: form centered in left half, switcher centered in right half. */
html.desktop-mode:not(.tesla-browser) #login-card:not(.auth-qr-enabled) .login-layout {
  position:relative; display:grid !important; grid-template-columns:1fr 1fr !important;
  align-items:center; justify-content:unset; width:100%; gap:0;
}
html.desktop-mode:not(.tesla-browser) #login-card:not(.auth-qr-enabled) .login-layout::before {
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:1px; height:280px; background:rgba(255,255,255,0.18); z-index:1; pointer-events:none;
}
html.light-mode.desktop-mode:not(.tesla-browser) #login-card:not(.auth-qr-enabled) .login-layout::before {
  background:rgba(0,0,0,0.16);
}
html.desktop-mode:not(.tesla-browser) #login-card:not(.auth-qr-enabled) .login-form-panel {
  flex:unset; width:100%; max-width:none; padding:0; align-items:center; box-sizing:border-box;
}
html.desktop-mode:not(.tesla-browser) #login-card:not(.auth-qr-enabled) .login-right-slot {
  position:relative; flex:unset; width:100%; padding:0; border-left:none;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
}
html.desktop-mode:not(.tesla-browser) #login-card:not(.auth-qr-enabled) .login-right-slot::before { content:none; display:none; }
html.desktop-mode:not(.tesla-browser) #login-card:not(.auth-qr-enabled) .auth-secondary-divider { display:none; }
html.desktop-mode:not(.tesla-browser) #login-card .field input,
html.desktop-mode:not(.tesla-browser) #login-card .login-drop-submit,
html.desktop-mode:not(.tesla-browser) #auth-secondary-btn,
html.desktop-mode:not(.tesla-browser) #auth-already-signin-btn { border-radius:10px; }
html.desktop-mode .login-qr-image-wrap { width:240px; height:240px; padding:12px; }
html.desktop-mode #login-qr-canvas,
html.desktop-mode #signup-qr-canvas,
html.desktop-mode #login-qr-canvas canvas,
html.desktop-mode #login-qr-canvas img,
html.desktop-mode #login-qr-canvas table,
html.desktop-mode #signup-qr-canvas canvas,
html.desktop-mode #signup-qr-canvas img,
html.desktop-mode #signup-qr-canvas table { width:216px !important; height:216px !important; }
html.desktop-mode .login-qr-title { font-size:18px; margin-bottom:12px; }
html.desktop-mode .login-qr-copy { font-size:21px; }
html.desktop-mode .login-qr-refresh-btn { height:44px; min-width:128px; font-size:14px; border-radius:10px; }
/* Landing page */
html.desktop-mode .landing-hero { padding:64px 48px 52px; }
html.desktop-mode .landing-hero img { height:72px; margin-bottom:28px; }
html.desktop-mode .landing-tagline { font-size:58px; letter-spacing:-1px; margin-bottom:20px; }
html.desktop-mode .landing-subtitle { font-size:28px; }
html.desktop-mode .landing-section-title { font-size:34px; }
html.desktop-mode .landing-section-sub { font-size:18px; margin-bottom:32px; }
html.desktop-mode .step-label { font-size:22px; }
html.desktop-mode .step-desc { font-size:16px; }
html.desktop-mode .landing-footer { font-size:16px; padding:48px 48px 32px; }
html.desktop-mode .landing-login-btn { height:48px; font-size:16px; padding:0 26px; border-radius:12px; }
html.desktop-mode .landing-language-btn { height:64px; font-size:20px; padding:0 52px 0 20px; min-width:220px; }
html.desktop-mode .landing-signin-cta { height:56px; font-size:18px; padding:0 34px; }
html.desktop-mode #app-landing-panel .landing-cta .landing-signin-cta { height:52px; font-size:17px; padding:0 32px; }
html.desktop-mode #app-landing-panel .landing-hero { padding:28px 40px 24px; }
html.desktop-mode #app-landing-panel .landing-tagline { font-size:52px; margin-bottom:24px; }
html.desktop-mode #app-landing-panel .landing-subtitle { font-size:26px; max-width:800px; }
html.tesla-browser .landing-tagline { font-size:28px !important; letter-spacing:-.35px; }
html.tesla-browser .landing-subtitle { font-size:16px !important; max-width:660px; }
html.tesla-browser #app-landing-panel .landing-tagline { font-size:28px !important; margin-bottom:16px; }
html.tesla-browser #app-landing-panel .landing-subtitle { font-size:16px !important; max-width:660px; }
html.tesla-browser .landing-cta .add-playlist-btn,
html.tesla-browser #app-landing-panel .landing-cta .add-playlist-btn { height:48px; padding:0 28px; font-size:16px !important; border-radius:10px; }
html.tesla-browser .landing-cta .landing-learn-more-btn,
html.tesla-browser #app-landing-panel .landing-cta .landing-learn-more-btn { height:48px; padding:0 26px; font-size:16px !important; border-radius:10px; }
html.tesla-browser .landing-login-btn,
html.tesla-browser #app-landing-panel .app-landing-signin-top { height:48px; padding:0 24px; font-size:16px !important; border-radius:10px; }
html.tesla-browser #app-landing-panel .landing-light-mode-pill { height:40px; padding:0 14px; font-size:14px; }
html.desktop-mode #app-landing-panel .landing-cta { padding:28px 0 0; gap:18px; }
html.desktop-mode #app-landing-panel .landing-cta .add-playlist-btn { font-size:22px; height:60px; padding:0 38px; border-radius:10px; }
html.desktop-mode #app-landing-panel .landing-cta .landing-learn-more-btn { font-size:22px; height:60px; padding:0 34px; border-radius:10px; }
html.desktop-mode #app-landing-panel .app-landing-top-actions { top:12px; right:12px; gap:10px; max-width:calc(100% - 24px); }
html.desktop-mode #app-landing-panel .app-landing-signin-top { height:56px; font-size:22px; padding:0 28px; border-radius:10px; }
html.desktop-mode #app-landing-panel .landing-light-mode-pill { height:40px; padding:0 12px 0 14px; font-size:14px; gap:6px; }
html.desktop-mode #app-landing-panel .landing-light-mode-pill .ci-icon { width:14px; height:14px; }
html.desktop-mode #app-landing-panel .landing-footer { font-size:16px; margin-top:36px; padding-top:36px; }
html.desktop-mode #app-landing-panel .landing-footer-links a { font-size:16px; }
html.desktop-mode .landing-cat-spinner { margin-top:28px; }
html.desktop-mode .landing-cat-ring { width:72px; height:72px; border-width:5px; }
html.desktop-mode #app-landing-panel .landing-hero img { height:84px; margin-bottom:28px; }
/* Settings */
html.desktop-mode .settings-overlay { top:64px; }
html.desktop-mode .settings-nav-col { width:320px; }
html.desktop-mode .settings-nav-header { padding:18px 20px; gap:12px; }
html.desktop-mode .settings-nav-header .hdr-icon-btn { width:44px; height:44px; padding:8px; border-radius:10px; }
html.desktop-mode .settings-nav-header .hdr-icon-btn .ci-icon { width:24px; height:24px; }
html.desktop-mode .settings-nav-title { font-size:28px; gap:12px; }
html.desktop-mode .settings-nav-title .ci-icon { width:30px; height:30px; }
html.desktop-mode .settings-content-topbar { padding:14px 22px; }
html.desktop-mode .settings-close-btn { width:48px; height:48px; border-radius:12px; }
html.desktop-mode .settings-close-btn .ci-icon { width:22px; height:22px; }
html.desktop-mode .settings-tab-btn { min-height:66px; padding:0 18px; gap:14px; border-radius:0; font-size:26px; }
html.desktop-mode .settings-tab-btn .ci-icon { width:26px; height:26px; }
html.desktop-mode .settings-panel { padding:36px 48px 44px; }
html.desktop-mode #settings-panel-playlists.active { padding:0; }
html.desktop-mode .settings-panel > div,
html.desktop-mode .settings-panel .settings-general-row,
html.desktop-mode .settings-panel .settings-toggle-row,
html.desktop-mode .settings-panel .playlist-section,
html.desktop-mode .settings-panel .phone-paste-tip { max-width:720px; margin-left:auto; margin-right:auto; }
html.desktop-mode .settings-panel .settings-field-select { width:100%; max-width:480px; }
html.desktop-mode .settings-panel .settings-field-select .touch-select-shell { width:100%; max-width:480px; }
html.desktop-mode #settings-panel-general .settings-field-select,
html.desktop-mode #settings-panel-general .settings-field-select .touch-select-shell { width:100%; max-width:none; }
html.desktop-mode .settings-panel .phone-paste-wrap { max-width:560px; width:100%; }
html.desktop-mode .settings-panel input:not([type="checkbox"]) { height:52px !important; font-size:16px !important; }
html.desktop-mode .settings-panel label:not(.ios-toggle):not(.settings-toggle-label) { font-size:var(--fs-md); }
html.desktop-mode .settings-panel span[id*="label"] { font-size:var(--fs-xl) !important; }
html.desktop-mode .settings-panel p { font-size:15px !important; }
html.desktop-mode #settings-panel-account p.settings-account-guest-copy { max-width:680px; font-size:var(--fs-xl) !important; line-height:1.35 !important; }
html.desktop-mode .settings-panel .playlist-section-sub { font-size:17px !important; }
html.desktop-mode .settings-panel .playlist-section-title,
html.desktop-mode .settings-panel .settings-toggle-label { font-size:var(--fs-xl); font-weight:700; color:var(--text2); }
html.desktop-mode .settings-field-select .touch-select-trigger { height:52px; font-size:16px; padding:0 16px; border-radius:var(--radius); }
html.desktop-mode #settings-panel-general .settings-field-select .touch-select-trigger { height:52px; font-size:20px; padding:0 16px; }
html.desktop-mode #settings-panel-general .settings-field-select .touch-select-trigger .ts-inline-chevron { width:52px; height:52px; }
html.desktop-mode #settings-panel-general .settings-field-select .touch-select-trigger .ts-chevron { width:18px; height:18px; }
html.desktop-mode .settings-field-select .touch-select-trigger .ci-icon { width:20px; height:20px; }
html.desktop-mode .settings-general-row { padding-bottom:28px; margin-bottom:28px; }
html.desktop-mode .settings-general-row .settings-toggle-label { font-size:var(--fs-xl); font-weight:700; color:var(--text2); margin-bottom:12px !important; }
html.desktop-mode #settings-clock-btn-24,
html.desktop-mode #settings-clock-btn-12 { min-width:148px !important; padding:0 28px !important; font-size:var(--fs-md) !important; }
html.desktop-mode .settings-toggle-row { padding:20px 0; gap:20px; }
html.desktop-mode .settings-save-row { padding:16px 48px 22px; }
html.desktop-mode .settings-save-btn,
html.desktop-mode .settings-cancel-btn { min-width:240px; height:62px; padding:0 34px; border-radius:14px; font-size:18px; }
html.desktop-mode .settings-account-summary { gap:16px; padding-bottom:0; max-width:none; }
html.desktop-mode .settings-account-header { padding-bottom:24px; max-width:720px; }
html.desktop-mode .settings-account-avatar { width:68px; height:68px; font-size:30px; }
html.desktop-mode .settings-account-email { font-size:28px; }
html.desktop-mode .settings-account-tier { font-size:var(--fs-lg); }
html.desktop-mode .settings-trial-pill-row { padding-left:84px; margin-top:10px; }
html.desktop-mode .settings-trial-pill { font-size:var(--fs-md); padding:7px 18px; }
html.desktop-mode .settings-account-premium-btn { min-width:240px; height:62px; padding:0 34px; border-radius:14px; font-size:18px; }
html.desktop-mode .settings-account-action-btn { min-width:140px; padding:0 28px; }
html.desktop-mode .settings-panel .phone-paste-tip { padding:20px 22px !important; font-size:16px !important; min-height:44px; }
html.desktop-mode .settings-panel .phone-paste-tip svg { width:24px !important; height:24px !important; }
html.desktop-mode #settings-overlay .settings-phone-tip-row,
html.desktop-mode #settings-overlay .phone-paste-tip,
html.desktop-mode #settings-overlay .phone-paste-btn,
html.desktop-mode #playlist-editor-overlay .phone-paste-tip,
html.desktop-mode #playlist-editor-overlay .phone-paste-btn,
html.desktop-mode #playlist-editor-overlay .playlist-phone-btn { display:none !important; }
html.desktop-mode .settings-panel .playlist-item { padding:16px 18px; }
html.desktop-mode .settings-panel .playlist-item-name { font-size:18px; }
html.desktop-mode .settings-panel .playlist-item-meta { font-size:14px; }
html.desktop-mode .settings-panel .playlist-icon-btn { width:36px; height:36px; border-radius:9px; }
html.desktop-mode .settings-panel .playlist-icon-btn .ci-icon { width:18px; height:18px; }
html.desktop-mode .settings-toggle-hint { font-size:16px; }
html.desktop-mode .settings-playlists-scroll { padding:36px 48px; }
html.desktop-mode .settings-panel .ios-toggle-track { width:56px; height:34px; }
html.desktop-mode .settings-panel .ios-toggle-thumb { top:2px; left:2px; width:30px; height:30px; }
html.desktop-mode .settings-panel .ios-toggle input:checked + .ios-toggle-track .ios-toggle-thumb,
html.desktop-mode .settings-panel .ios-toggle.is-checked .ios-toggle-thumb { transform:translateX(22px); }
html.light-mode.desktop-mode .settings-panel .ios-toggle-thumb { width:26px; height:26px; }
html.desktop-mode #settings-panel-playlists .phone-paste-wrap input,
html.desktop-mode #settings-panel-media .phone-paste-wrap input { height:52px !important; }
html.desktop-mode #settings-panel-playlists .phone-paste-btn,
html.desktop-mode #settings-panel-media .phone-paste-btn { width:52px; height:52px; }
html.desktop-mode #settings-panel-playlists .phone-paste-btn svg,
html.desktop-mode #settings-panel-media .phone-paste-btn svg { width:18px; height:18px; }
html.desktop-mode .settings-collapsible-summary { height:52px; font-size:16px; }
html.desktop-mode .settings-toggle-label { font-size:var(--fs-xl); }
html.desktop-mode .settings-panel .settings-toggle-label { font-size:var(--fs-xl); }
html.desktop-mode .playlist-mini-btn { height:44px; font-size:15px; padding:0 18px; border-radius:10px; }
html.desktop-mode .settings-panel .playlist-mini-btn.primary { height:var(--btn-h); font-size:var(--fs-md); padding:0 32px; border-radius:var(--radius); }
/* Scrollbars visible on desktop */
html.desktop-mode * { scrollbar-width:thin; scrollbar-color:var(--surface3) transparent; }
html.desktop-mode *::-webkit-scrollbar { width:6px; height:6px; }
/* ── Desktop: fullscreen movie/show player ── */
html.desktop-mode #sp-title { font-size:28px !important; top:24px !important; left:28px !important; }
html.desktop-mode #sp-controls-title { font-size:28px !important; top:24px !important; left:28px !important; }
html.desktop-mode #sp-spinner { gap:26px !important; }
html.desktop-mode #sp-spinner-label { font-size:22px !important; }
html.desktop-mode #sp-progress-wrap { width:360px !important; gap:12px !important; }
html.desktop-mode #sp-progress-wrap > div { height:10px !important; border-radius:0 !important; }
html.desktop-mode #sp-progress-fill { border-radius:0 !important; }
html.desktop-mode #sp-progress-label { font-size:16px !important; }
html.desktop-mode #sp-loading-logo { height:64px !important; bottom:28px !important; }
html.desktop-mode .riva-subtitle-line { font-size:28px; padding:5px 14px; }
html.desktop-mode .sp-ctrl-btn { width:56px; height:56px; border-radius:12px; }
html.desktop-mode .sp-close-btn { width:56px; height:56px; border-radius:12px; }
html.desktop-mode .sp-close-btn .ci-icon,
html.desktop-mode .sp-ctrl-btn .ci-icon { width:24px; height:24px; }
html.desktop-mode #sp-close-btn { top:20px !important; right:24px !important; }
html.desktop-mode .sp-scrubber-row { gap:14px; }
html.desktop-mode .sp-time { font-size:15px; min-width:58px; }
html.desktop-mode .sp-scrubber-wrap { height:40px; }
html.desktop-mode .sp-scrubber-bg { height:8px; border-radius:4px; }
html.desktop-mode .sp-scrubber-thumb { width:20px; height:20px; }
html.desktop-mode #sp-buf-indicator .spin-ring { width:48px !important; height:48px !important; border-width:4px !important; }
html.desktop-mode .audio-pill { height:34px; padding:0 14px; border-radius:17px; border-width:1px; font-size:14px; }
html.desktop-mode .sp-audio-label,
html.desktop-mode .sp-subtitle-label { font-size:14px; }
/* ── Desktop: movie/show browse + details ── */
html.desktop-mode .movie-library-grid { grid-template-columns:repeat(7,1fr); gap:22px 16px; padding:22px 24px 28px; }
html.desktop-mode .vod-play-btn { height:52px !important; padding:0 40px !important; border-radius:10px !important; font-size:17px !important; gap:12px !important; }
html.desktop-mode .vod-play-btn .ci-icon { width:22px !important; height:22px !important; }
html.desktop-mode .vod-secondary-btn { height:40px !important; padding:0 20px !important; font-size:14px !important; }
html.desktop-mode .streams-detail-back { height:44px; padding:0; font-size:15px; border-radius:12px; gap:0; }
html.desktop-mode .detail-title { font-size:34px; }
html.desktop-mode .stream-item { padding:14px; gap:14px; border-radius:14px; }
html.desktop-mode .stream-play-btn { height:42px; padding:0 22px; font-size:15px; border-radius:10px; }
html.desktop-mode .stream-quality { font-size:12px; padding:6px 10px; min-width:52px; }
/* ── Desktop: toasts ── */
html.desktop-mode .toast { font-size:16px; padding:15px 24px; border-radius:14px; bottom:24px; right:24px; max-width:480px; }
/* ── Desktop: layout surfaces (player, EPG, modals, search) ── */
html.desktop-mode .player-area { padding:10px; }
html.desktop-mode .app-body { min-height:0; --sidebar-row-height:64px; }
html.desktop-mode .ch-count { font-size:14px; padding:5px 8px 0; }
html.desktop-mode .sdh-pill { width:34px; height:56px; left:-16px; border-radius:12px; gap:5px; }
html.desktop-mode .sdh-bar { width:3px; height:28px; }
html.desktop-mode .sdh-chevron-left { border-top-width:5px; border-bottom-width:5px; border-right-width:6px; }
html.desktop-mode .sdh-chevron-right { border-top-width:5px; border-bottom-width:5px; border-left-width:6px; }
/* EPG panel — sized for mouse/keyboard instead of zoom scaling */
html.desktop-mode .epg-time-header-pad,
html.desktop-mode .epg-time-slot { font-size:15px; padding:12px 16px; }
html.desktop-mode .epg-row-ch { padding:12px 16px; gap:12px; }
html.desktop-mode .epg-row-ch-name { font-size:16px; }
html.desktop-mode .epg-row-ch-logo { width:46px; height:46px; border-radius:10px; }
html.desktop-mode .epg-prog { padding:10px 14px; }
html.desktop-mode .epg-prog-title { font-size:16px; }
html.desktop-mode .epg-prog-time { font-size:13px; }
html.desktop-mode .epg-grid-expand-btn { width:58px; height:58px; border-radius:14px; bottom:16px; right:18px; }
html.desktop-mode .epg-grid-expand-btn .ci-icon { width:28px; height:28px; }
html.desktop-mode .epg-pip,
html.desktop-mode .epg-pip-placeholder,
html.desktop-mode .epg-pip-layout { height:380px; min-height:380px; max-height:380px; }
html.desktop-mode .epg-pip-ph-slot { font-size:16px; padding:0 24px; }
html.desktop-mode .epg-pip-meta { padding:20px 24px; gap:12px; }
html.desktop-mode .epg-pip-title { font-size:24px; }
html.desktop-mode .epg-pip-channel { font-size:20px; }
html.desktop-mode .epg-pip-desc { font-size:15px; max-height:84px; }
html.desktop-mode .epg-pip-time { font-size:14px; }
html.desktop-mode .epg-pip-mute,
html.desktop-mode .epg-pip-stop,
html.desktop-mode .epg-pip-expand { width:64px; height:64px; border-radius:12px; }
html.desktop-mode .epg-pip-mute .ci-icon,
html.desktop-mode .epg-pip-stop .ci-icon { width:28px; height:28px; }
html.desktop-mode .epg-pip-expand .ci-icon { width:28px; height:28px; }
html.desktop-mode .epg-pip-play { width:64px; height:64px; font-size:32px; }
html.desktop-mode .epg-pip-play .ci-icon { width:32px; height:32px; }
html.desktop-mode .epg-pip-loading-status { font-size:17px; }
html.desktop-mode .epg-pip-loading-boot { width:min(280px,58%); }
html.desktop-mode .epg-pip-loading-progress-track { height:8px; }
html.desktop-mode .epg-pip-expand-text { height:50px; padding:0 22px; font-size:16px; border-radius:10px; gap:10px; }
html.desktop-mode .epg-pip-expand-text .ci-icon { width:20px; height:20px; }
/* Riva Free on web/desktop: larger Play Fullscreen control + label. */
html.desktop-mode:not(.tesla-browser).riva-free-active .epg-pip-expand-text,
html.desktop-mode:not(.tesla-browser) body.riva-free-active .epg-pip-expand-text {
  height:62px; padding:0 30px; font-size:20px; gap:12px;
}
html.desktop-mode:not(.tesla-browser).riva-free-active .epg-pip-expand-text .ci-icon,
html.desktop-mode:not(.tesla-browser) body.riva-free-active .epg-pip-expand-text .ci-icon {
  width:26px; height:26px;
}
html.desktop-mode .epg-pip-fav { width:50px; height:50px; border-radius:12px; }
html.desktop-mode .epg-pip-fav .ci-icon { width:22px; height:22px; }
html.desktop-mode #epg-pip.tab-floating { width:540px; border-width:4px; bottom:18px; right:18px; }
html.desktop-mode .epg-pip-close { width:50px; height:50px; top:12px; right:12px; border-radius:12px; }
html.desktop-mode .epg-pip-close .ci-icon { width:22px; height:22px; }
/* Global search */
html.desktop-mode #global-search-page { top:64px; }
html.desktop-mode .gsearch-head { padding:16px 28px; gap:14px; }
html.desktop-mode .gsearch-body { padding:24px 28px 32px; gap:28px; }
html.desktop-mode .gsearch-head-label { font-size:var(--fs-md); }
html.desktop-mode .gsearch-section-title { font-size:var(--fs-md); margin-bottom:14px; gap:12px; }
html.desktop-mode .gsearch-playlist-pill { height:40px; padding:0 18px; font-size:15px; }
html.desktop-mode .gsearch-channel-item { padding:16px 20px; gap:14px; border-radius:14px; min-height:84px; }
html.desktop-mode .gsearch-channels-grid { grid-auto-columns:calc((100% - 42px)/4); gap:14px; }
html.desktop-mode .gsearch-channel-name { font-size:17px; }
html.desktop-mode .gsearch-channel-logo { width:46px; height:46px; border-radius:10px; }
html.desktop-mode .gsearch-media-row .gsearch-media-card,
html.desktop-mode .gsearch-media-card-skeleton { flex:0 0 172px; width:172px; }
html.desktop-mode .gsearch-media-poster-ph { font-size:28px; }
/* Touch-select sheets & stream modals — desktop/web uses the same sheet chrome as Tesla */
html.desktop-mode .touch-select-overlay.playlist-select .touch-select-playlist-add-row { width:100%; justify-content:center; align-items:center; padding:4px 0 22px; }
html.desktop-mode .touch-select-overlay.playlist-select .touch-select-add-playlist { margin:0 auto; min-width:180px; }
html.desktop-mode .stream-url-shell { width:min(580px,94vw); padding:32px; border-radius:18px; }
html.desktop-mode .stream-url-shell h2 { font-size:var(--fs-xl); }
html.desktop-mode #playlist-editor-overlay .stream-url-shell { width:100%; max-width:none; aspect-ratio:auto; max-height:min(100dvh,760px); padding:24px 48px 30px; border-radius:0; }
html.desktop-mode .playlist-editor-close { width:68px; height:68px; top:18px; right:28px; border-radius:14px; }
html.desktop-mode .playlist-editor-close .ci-icon { width:30px; height:30px; }
html.desktop-mode .playlist-editor-head h2 { font-size:32px; }
html.desktop-mode .playlist-editor-logo-bloom img { height:56px; }
html.desktop-mode .playlist-phone-btn { height:var(--btn-h); font-size:var(--fs-md); margin-bottom:24px; }
html.desktop-mode .playlist-phone-btn svg { width:22px; height:22px; }
/* Premium upsell — use explicit sizing instead of zoom */
html.desktop-mode #premium-upsell-panel { zoom:1; }
html.desktop-mode .pu-dismiss { top:16px; right:16px; height:44px; padding:0 20px; font-size:15px; }
html.desktop-mode .pu-headline { font-size:48px; letter-spacing:-1.2px; }
html.desktop-mode .pu-benefit-title { font-size:34px; margin-bottom:16px; }
html.desktop-mode .pu-price-display .pu-price-annual { font-size:36px; }
html.desktop-mode .pu-price-display .pu-price-monthly { font-size:22px; }
/* Help & misc modals */
html.desktop-mode .help-modal-shell { padding:32px 28px 28px; width:min(460px,100%); gap:16px; border-radius:18px; }
html.desktop-mode .help-modal-ok { padding:0 36px; }
html.desktop-mode .login-card { padding:24px 24px 20px; border-radius:16px; }
html.desktop-mode .premium-modal-actions .connect-btn,
html.desktop-mode .premium-modal-actions .signup-btn { min-width:160px; height:var(--btn-h); font-size:var(--fs-md); }
/* Expanded categories — denser grid on wide screens */
html.desktop-mode .categories-expanded-topbar { padding:12px 24px 10px; gap:12px; }
html.desktop-mode .m3u-picker-grid.categories-expanded-grid .m3u-picker-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
html.desktop-mode .m3u-picker-grid.categories-expanded-grid .m3u-picker-item { min-height:84px; padding:16px 20px; border-radius:10px; font-size:var(--fs-md); }
html.desktop-mode .categories-expanded-body { padding:6px 24px 24px; }
/* Custom channels + overlays */
html.desktop-mode .cc-new-btn { height:42px; font-size:15px; padding:0 18px; }
html.desktop-mode .cc-list-title { font-size:var(--fs-lg); }
html.desktop-mode .ctrl-btn { width:46px; height:46px; border-radius:11px; font-size:20px; }
html.desktop-mode .overlay-channel-logo { width:46px; height:46px; font-size:20px; }
html.desktop-mode .overlay-epg-desc { font-size:15px; max-height:76px; }
html.desktop-mode .live-up-next { font-size:16px; }
html.desktop-mode .epg-now { font-size:var(--fs-md); }
html.desktop-mode #mute-btn,
html.desktop-mode #stop-btn,
html.desktop-mode #prev-btn,
html.desktop-mode #next-btn,
html.desktop-mode #fullscreen-exit-btn { width:56px !important; height:56px !important; border-radius:10px !important; }
html.desktop-mode #mute-btn .ci-icon,
html.desktop-mode #stop-btn .ci-icon,
html.desktop-mode #fullscreen-exit-btn .ci-icon { width:28px !important; height:28px !important; }
html.desktop-mode #prev-btn .ci-icon,
html.desktop-mode #next-btn .ci-icon { width:24px !important; height:24px !important; }
/* Fullscreen live TV (web): slightly larger controls, back/stop/next clustered together */
html.desktop-mode .tv-expanded #mute-btn,
html.desktop-mode .tv-expanded #stop-btn,
html.desktop-mode .tv-expanded #prev-btn,
html.desktop-mode .tv-expanded #next-btn,
html.desktop-mode .tv-expanded #live-restart-btn,
html.desktop-mode .tv-expanded #live-cc-fs-btn,
html.desktop-mode .tv-expanded #fullscreen-exit-btn { width:64px !important; height:64px !important; border-radius:10px !important; }
html.desktop-mode .tv-expanded #mute-btn .ci-icon,
html.desktop-mode .tv-expanded #stop-btn .ci-icon,
html.desktop-mode .tv-expanded #live-restart-btn .ci-icon,
html.desktop-mode .tv-expanded #live-cc-fs-btn .ci-icon,
html.desktop-mode .tv-expanded #fullscreen-exit-btn .ci-icon { width:32px !important; height:32px !important; }
html.desktop-mode .tv-expanded #prev-btn .ci-icon,
html.desktop-mode .tv-expanded #next-btn .ci-icon { width:28px !important; height:28px !important; }
html.desktop-mode .tv-expanded #prev-btn { left:calc(50% - 76px) !important; }
html.desktop-mode .tv-expanded #next-btn { left:calc(50% + 76px) !important; }
html.desktop-mode .tv-expanded #live-cc-fs-btn { left:96px !important; }
html.desktop-mode .continue-watching-card,
html.desktop-mode .cw-card { zoom:1; }
html.desktop-mode .gsearch-head .streams-detail-back { height:44px; border-radius:12px; padding:0; font-size:15px; }
/* ── Desktop: movie/show browse + details ── */
html.desktop-mode .ctrl-btn { width:46px; height:46px; border-radius:11px; }
html.desktop-mode .ctrl-btn .ci-icon { width:20px; height:20px; }
html.desktop-mode .detail-action-btn { height:46px; font-size:15px; padding:0 22px; border-radius:12px; gap:10px; }
html.desktop-mode .detail-action-btn .ci-icon { width:20px; height:20px; }
html.desktop-mode .detail-overview { font-size:15px; max-width:860px; }
html.desktop-mode .detail-meta-row { font-size:14px; gap:12px; }
html.desktop-mode .ep-item { gap:14px; padding:12px; border-radius:14px; }
html.desktop-mode .ep-thumb, html.desktop-mode .ep-thumb-ph { width:140px; height:80px; border-radius:10px; }
html.desktop-mode .ep-num { font-size:15px; }
html.desktop-mode .detail-kicker { font-size:15px !important; }
html.desktop-mode .ep-name { font-size:16px; }
html.desktop-mode .ep-desc { font-size:14px; }
html.desktop-mode .ep-play-btn { height:38px; font-size:14px; padding:0 18px; border-radius:10px; }
html.desktop-mode .ep-play-icon-btn { width:56px; height:56px; border-radius:10px; }
html.desktop-mode .ep-play-icon-btn .ci-icon { width:26px; height:26px; }
html.desktop-mode .season-ep-row { gap:12px; }
html.desktop-mode .empty-state { font-size:15px; }
html.desktop-mode .empty-state-action { height:42px; font-size:15px; padding:0 20px; border-radius:10px; }
html.desktop-mode .category-skeleton-item { height:60px; min-height:60px; }
html.desktop-mode .media-source-switch-btn { height:40px; font-size:13px; border-radius:10px; }
html.desktop-mode .movie-card-title { font-size:14px; }
html.desktop-mode .movie-card-meta { font-size:13px; }
html.desktop-mode .cw-card, html.desktop-mode .continue-watching-card { zoom:1; }
html.desktop-mode .stream-codecs, html.desktop-mode .stream-details { font-size:14px; }
html.desktop-mode .stream-name { font-size:15px; }
html.desktop-mode .stream-compat-badge { font-size:12px; }
html.desktop-mode .stream-format-pill { font-size:12px; }
html.desktop-mode *::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:3px; }
/* ─────────────────────────────────────────────────────────────────────────── */

.settings-section { margin-bottom:28px; }
.settings-section-title { font-size:var(--fs-xl); font-weight:800; color:var(--text); margin-bottom:10px; }
.settings-section-sub { color:var(--text3); font-size:var(--fs-sm); line-height:1.55; margin-bottom:16px; }
.settings-collapsible { border:1px solid var(--border2); border-radius:var(--radius); overflow:hidden; margin-bottom:4px; }
.settings-collapsible-summary { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:0 22px; height:72px; font-size:var(--fs-md); font-weight:700; color:var(--text2); cursor:pointer; user-select:none; }
.settings-collapsible-summary::-webkit-details-marker { display:none; }
.settings-collapsible-summary::after { content:''; display:block; width:10px; height:10px; border-right:2px solid var(--text3); border-bottom:2px solid var(--text3); transform:rotate(45deg); transition:transform 0.2s; margin-top:-4px; }
.settings-collapsible[open] .settings-collapsible-summary::after { transform:rotate(-135deg); margin-top:4px; }
.settings-collapsible-body { padding:18px; border-top:1px solid var(--border2); background:var(--surface2); }
.stream-url-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:210; align-items:flex-start; justify-content:center; padding:20px 24px 0; box-sizing:border-box; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.stream-url-shell { background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-radius:22px; padding:36px; width:620px; max-width:94vw; max-height:calc(100dvh - 40px); overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:0 24px 80px rgba(0,0,0,0.6); }
.stream-url-shell h2 { font-size:var(--fs-xl); font-weight:800; margin-bottom:10px; }
.stream-url-shell p { color:var(--text3); font-size:var(--fs-sm); line-height:1.55; margin-bottom:22px; }
/* NOTE: no `display:flex` here — the ID selector outranks the base
   `.stream-url-overlay { display:none }`, which left an invisible
   full-viewport z-2000 overlay permanently intercepting every click/hover
   until its own backdrop click dismissed it (desktop "dead links until first
   click" bug). Visibility is inline (openPlaylistModal) or via .open. */
#playlist-editor-overlay {
  padding:0;
  overflow:hidden;
  background:transparent;
  z-index:2000;
  align-items:flex-start;
  justify-content:stretch;
  box-sizing:border-box;
  transform:translateY(-110%);
  transition:transform 0.38s cubic-bezier(0.4,0,0.2,1),background 0.38s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
}
#playlist-editor-overlay.open {
  display:flex;
  transform:translateY(0);
  background:rgba(0,0,0,0.55);
  pointer-events:auto;
}
#playlist-editor-overlay .stream-url-shell {
  position:relative;
  width:100%;
  max-width:none;
  aspect-ratio:auto;
  max-height:min(100dvh,860px);
  margin:0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,0.1);
  border-radius:0;
  padding:28px 60px 34px;
  box-sizing:border-box;
  background:rgba(10,10,12,0.97);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  transform:none;
  opacity:1;
  transition:none;
  box-shadow:0 24px 64px rgba(0,0,0,0.65);
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
.playlist-editor-banner { position:relative; display:flex; align-items:center; justify-content:flex-start; min-height:110px; margin:0 0 18px; padding-right:96px; box-sizing:border-box; }
.playlist-editor-logo-bloom { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,70%); height:160px; background:radial-gradient(ellipse at 50% 40%,rgba(227,25,55,0.16) 0%,rgba(227,25,55,0.07) 36%,rgba(227,25,55,0.025) 58%,transparent 76%); display:flex; align-items:center; justify-content:center; padding:0; pointer-events:none; z-index:1; }
.playlist-editor-logo-mark { position:relative; display:inline-flex; align-items:center; }
.playlist-editor-logo-bloom img { height:72px; width:auto; object-fit:contain; filter:drop-shadow(0 0 14px rgba(227,25,55,0.32)) drop-shadow(0 10px 28px rgba(0,0,0,0.72)); }
.playlist-editor-logo-tm { font-size:17px; color:rgba(255,255,255,0.35); font-weight:700; position:absolute; bottom:2px; right:-20px; line-height:1; }
#playlist-editor-overlay.open .stream-url-shell { transform:none; opacity:1; }
.playlist-editor-close { position:absolute; top:24px; right:36px; z-index:4; width:68px; height:68px; border-radius:14px; border:2px solid var(--btn-red-border); background:var(--btn-dark-red); color:#fff; display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:background 0.15s,border-color 0.15s,color 0.15s; }
.playlist-editor-close:hover { background:var(--btn-dark-red-hover); border-color:var(--accent); color:#fff; }
.playlist-editor-close .ci-icon { width:30px; height:30px; }
.playlist-editor-head { position:relative; z-index:2; display:flex; align-items:center; justify-content:flex-start; margin:0; }
.playlist-editor-head h2 { margin:0; font-size:48px; line-height:1.1; }
.playlist-phone-btn { display:flex; align-items:center; justify-content:center; gap:14px; width:min(420px,100%); margin:0 auto 28px; height:var(--btn-h); background:var(--accent); border:none; border-radius:var(--radius); color:#fff; font-size:calc(var(--fs-md) + 4px); font-weight:800; cursor:pointer; transition:background 0.15s,transform 0.1s; }
.playlist-phone-btn:active { transform:scale(0.98); background:var(--accent2); }
.playlist-phone-btn svg { width:28px; height:28px; flex-shrink:0; }
#playlist-editor-overlay .playlist-form-grid { width:min(1180px,calc(100% - 120px)); margin:24px auto 0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:start; }
#playlist-editor-overlay .playlist-form-grid .full { grid-column:1 / -1; }
#playlist-editor-overlay .playlist-type-select-field,
#playlist-editor-overlay .playlist-type-select-field .touch-select-shell { width:100%; max-width:none; }
#playlist-editor-overlay .playlist-type-select-field .touch-select-trigger {
  width:100%;
  height:68px;
  box-sizing:border-box;
  border:2px solid var(--border2);
  border-radius:var(--radius);
  background:var(--surface2);
  color:var(--text);
  font-size:var(--fs-md);
  padding-left:18px;
}
#playlist-editor-overlay .playlist-type-select-field .touch-select-trigger .ts-inline-chevron { width:68px; height:68px; }
#playlist-url-field { grid-column:1 / -1; }
#playlist-user-field { grid-column:1 / span 2; }
#playlist-pass-field { grid-column:3 / span 2; }
#playlist-editor-overlay label { font-size:calc(var(--fs-md) + 4px) !important; }
#playlist-editor-overlay input { width:100%; box-sizing:border-box; font-size:var(--fs-md) !important; height:68px !important; }
#playlist-editor-overlay .phone-paste-btn { width:68px; height:68px; }
#playlist-editor-overlay .playlist-field-error { font-size:var(--fs-xs); }
.playlist-editor-divider { display:none; }
.playlist-editor-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin:34px auto 0; width:min(1180px,100%); }
.playlist-editor-save { width:280px; background:var(--accent); border:none; border-radius:var(--radius); color:white; font-size:calc(var(--fs-md) + 4px); font-weight:800; height:var(--btn-h); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity 0.15s; }
.playlist-editor-save:disabled { opacity:0.75; cursor:not-allowed; }
.playlist-editor-cancel { background:var(--surface2); border:2px solid var(--border2); border-radius:var(--radius); color:var(--text2); font-size:calc(var(--fs-md) + 4px); font-weight:700; height:var(--btn-h); cursor:pointer; padding:0 40px; transition:border-color 0.15s,color 0.15s; }
.playlist-editor-cancel:hover { border-color:rgba(255,255,255,0.35); color:var(--text); }
/* ── Add Playlist: download progress modal ── */
#playlist-loading-overlay { z-index:2100; align-items:center; padding:24px; }
.playlist-loading-shell { background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-radius:22px; padding:44px 48px; width:620px; max-width:92vw; box-shadow:0 24px 80px rgba(0,0,0,0.6); display:flex; flex-direction:column; align-items:center; text-align:center; box-sizing:border-box; }
.playlist-loading-title { font-size:var(--fs-xl); font-weight:800; color:var(--text); letter-spacing:-0.3px; }
.playlist-loading-name { font-size:var(--fs-sm); color:var(--text3); margin-top:8px; }
.playlist-loading-status { font-size:var(--fs-md); font-weight:600; color:var(--text2); margin-top:28px; min-height:1.4em; font-variant-numeric:tabular-nums; }
.playlist-loading-bar-track { width:100%; height:14px; border-radius:999px; background:var(--surface2); border:1px solid var(--border2); overflow:hidden; margin-top:14px; }
.playlist-loading-bar { height:100%; width:0%; border-radius:999px; background:var(--accent); transition:width 0.25s ease; }
#category-edit-overlay { align-items:center; padding:110px 24px 28px; }
#category-edit-overlay .stream-url-shell { max-width:720px; max-height:calc(100dvh - 138px); overflow:auto; padding:42px 36px 36px; }
#category-edit-overlay .stream-url-shell h2 { font-size:calc(var(--fs-xl) + 2px); }
#category-edit-overlay .ios-toggle-track { width:68px; height:42px; }
#category-edit-overlay .ios-toggle-thumb { top:2px; left:2px; width:38px; height:38px; box-shadow:0 3px 12px rgba(0,0,0,0.3); }
#category-edit-overlay .ios-toggle input:checked + .ios-toggle-track .ios-toggle-thumb,
#category-edit-overlay .ios-toggle.is-checked .ios-toggle-thumb { transform:translateX(26px); }
#category-edit-save-btn { flex-shrink:0; min-width:140px; height:58px; font-size:21px; font-weight:800; padding:0 26px; box-shadow:0 0 0 1px rgba(227,25,55,0.36), 0 0 54px rgba(227,25,55,0.42), 0 12px 28px rgba(0,0,0,0.28); }
#category-search-overlay { align-items:flex-start; padding:14vh 24px 40px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); background:rgba(0,0,0,0.55); }
#category-search-overlay .stream-url-shell { width:640px; max-width:min(92vw,640px); max-height:none; overflow:visible; padding:28px 28px 24px; border-color:rgba(227,25,55,0.45); }
#category-search-overlay .stream-url-shell h2 { margin-bottom:14px; }
#category-search-submit { height:var(--btn-h); padding:0 80px; flex:0 0 auto; border:none; border-radius:var(--radius); background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 0 1px rgba(227,25,55,0.26), 0 0 28px rgba(227,25,55,0.20), 0 10px 24px rgba(0,0,0,0.24); }
#category-search-submit .ci-icon { width:22px; height:22px; }
#category-search-submit:hover { background:var(--accent2); }
#category-search-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:18px; }
.stream-test-url { width:100%; min-height:170px; resize:vertical; background:var(--surface2); border:2px solid var(--border2); border-radius:16px; color:var(--text); font-size:var(--fs-xs); line-height:1.5; padding:16px; box-sizing:border-box; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
.cast-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cast-choice-btn { min-height:140px; border-radius:18px; border:2px solid var(--border2); background:var(--surface2); color:var(--text); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; padding:20px; cursor:pointer; text-align:left; }
.cast-choice-btn.primary { background:var(--accent-bg); border-color:var(--accent-border); }
.cast-choice-btn .ci-icon { width:28px; height:28px; color:var(--accent); }
.cast-choice-title { font-size:var(--fs-md); font-weight:800; }
.cast-choice-copy { font-size:var(--fs-xs); color:var(--text3); line-height:1.5; }
.cast-code-card { display:flex; flex-direction:column; gap:12px; padding:20px; border:2px solid var(--accent-border); border-radius:18px; background:var(--accent-bg); margin-bottom:18px; }
.cast-code-label { font-size:var(--fs-xs); color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.cast-code-value { font-size:42px; font-weight:900; letter-spacing:0.22em; color:var(--text); }
.cast-status-note { color:var(--text3); font-size:var(--fs-xs); line-height:1.5; margin-top:12px; }
.cast-url-note { color:var(--text3); font-size:var(--fs-xs); line-height:1.45; margin-top:10px; }
.cast-link-box { width:100%; min-height:82px; resize:none; background:var(--surface2); border:2px solid var(--border2); border-radius:16px; color:var(--text); font-size:var(--fs-xs); line-height:1.5; padding:14px 16px; box-sizing:border-box; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
.cast-form-field { margin-bottom:16px; }
.cast-form-field label { display:block; font-size:var(--fs-xs); color:var(--text2); margin-bottom:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.cast-form-field input,
.cast-form-field textarea { width:100%; background:var(--surface2); border:2px solid var(--border2); border-radius:16px; color:var(--text); font-size:var(--fs-sm); padding:14px 16px; outline:none; box-sizing:border-box; }
.cast-form-field textarea { min-height:120px; resize:vertical; }
.cast-pill { display:inline-flex; align-items:center; gap:8px; background:var(--surface2); border:2px solid var(--border2); border-radius:999px; color:var(--text2); font-size:var(--fs-xs); font-weight:700; padding:10px 14px; }
.cast-pill .ci-icon { color:var(--accent); }
.cast-upload-summary { margin-top:10px; padding:14px 16px; border:2px solid var(--border2); border-radius:16px; background:var(--surface2); color:var(--text2); font-size:var(--fs-xs); line-height:1.5; display:none; }
.cast-progress { width:100%; height:12px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,0.08); margin-top:14px; display:none; }
.cast-progress-fill { width:0%; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width 0.2s; }
@media (max-width: 700px) {
  .stream-url-overlay { align-items:flex-start; padding:14px; }
  .stream-url-shell { width:100%; max-width:none; max-height:calc(100dvh - 40px); padding:24px 18px; border-radius:18px; margin:0; }
  #playlist-editor-overlay { padding:0; }
  #playlist-editor-overlay .stream-url-shell { width:100%; max-width:none; max-height:100dvh; padding:24px 20px 28px; border-radius:0; overflow:auto; }
  .playlist-editor-close { top:16px; right:16px; width:68px; height:68px; border-radius:14px; }
  .playlist-editor-close .ci-icon { width:30px; height:30px; }
  .playlist-editor-head h2 { font-size:28px; }
  .playlist-editor-intro { width:100%; }
  #playlist-editor-overlay .phone-paste-tip { width:100%; max-width:100%; white-space:normal; font-size:18px; }
  #playlist-editor-overlay .stream-url-shell { border-radius:0; }
  #playlist-editor-overlay .playlist-form-grid { width:100%; grid-template-columns:1fr; }
  #playlist-editor-overlay .playlist-form-grid .full,
  #playlist-user-field,
  #playlist-pass-field,
  #playlist-url-field { grid-column:1 / -1; }
  .playlist-editor-divider { display:none; }
  .playlist-editor-actions { flex-direction:column; align-items:stretch; gap:12px; }
  .playlist-editor-save, .playlist-editor-cancel { width:100%; padding:0; }
  #category-edit-overlay { align-items:center; padding:92px 14px 16px; }
  #category-edit-overlay .stream-url-shell { max-width:none; max-height:calc(100dvh - 108px); padding:30px 20px 24px; }
  #category-edit-save-btn { min-width:122px; height:54px; font-size:18px; }
  #category-search-overlay { padding:92px 14px 20px; }
  #category-search-overlay .stream-url-shell { width:100%; max-width:none; padding:24px 18px 20px; }
  .cast-choice-grid { grid-template-columns:1fr; }
}

/* States */
.empty-state { padding:64px 16px; text-align:center; color:var(--text3); font-size:var(--fs-xl); grid-column:1/-1; width:100%; }
.empty-state.fav-empty { display:flex; flex-direction:column; gap:16px; padding:48px 18px; max-width:760px; margin:0 auto; }
.fav-empty-title { color:var(--text2); font-size:calc(var(--fs-xl) + 8px); font-weight:700; line-height:1.35; }
.fav-empty-sub { color:var(--text2); font-size:calc(var(--fs-xl) + 8px); font-weight:700; line-height:1.35; }
html.desktop-mode .fav-empty-title,
html.desktop-mode .fav-empty-sub { font-size:24px; }
.empty-state-action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; height:100%; padding:48px 24px; text-align:center; color:var(--text3); font-size:var(--fs-md); }
.empty-state-action .add-playlist-btn { height:60px; padding:0 34px; font-size:18px; }
.m3u-picker { padding:20px; display:flex; flex-direction:column; gap:14px; }
.m3u-picker-title { color:var(--text2); font-size:var(--fs-sm); font-weight:700; }
.m3u-picker-list { display:flex; flex-direction:column; gap:10px; }
.m3u-picker-item { background:var(--surface2); border:1px solid rgba(255,255,255,0.07); border-radius:14px; color:var(--text); min-height:62px; padding:0 18px; font-size:var(--fs-sm); font-weight:700; display:flex; align-items:center; cursor:pointer; text-align:left; transition:border-color 0.15s,background 0.15s; }
@media (hover:hover){ .m3u-picker-item:hover { border-color:var(--accent-border); background:var(--accent-bg); } }
.m3u-picker-item.active { border:2px solid var(--btn-red-border); background:var(--btn-dark-red); color:#fff; }
/* Riva Free playlist: 4-per-row card grid with a category kicker above a larger channel name */
.m3u-picker-grid .m3u-picker-title { font-size:28px; }
.m3u-picker-grid .m3u-picker-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; align-items:stretch; }
.m3u-picker-grid .m3u-picker-item { flex-direction:column; justify-content:center; align-items:center; gap:6px; text-align:center; padding:18px 16px; min-height:100px; border:1px solid var(--border2); box-sizing:border-box; border-radius:10px; }
.m3u-picker-grid .m3u-picker-item.active { border:2px solid var(--btn-red-border); background:var(--btn-dark-red); color:#fff; }
.m3u-picker-grid .m3u-picker-item.active .m3u-picker-name { color:#fff; }
.m3u-picker-grid .m3u-picker-item.active .m3u-picker-cat { color:rgba(255,255,255,0.72); }
html.light-mode .m3u-picker-grid .m3u-picker-item { border-color:rgba(0,0,0,0.18); }
html.light-mode .m3u-picker-grid .m3u-picker-item.active { background:var(--btn-dark-red); border-color:var(--btn-red-border); color:#fff; }
html.light-mode .m3u-picker-grid .m3u-picker-item.active .m3u-picker-name { color:#fff; }
.m3u-picker-cat { font-size:var(--fs-xs); font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.m3u-picker-name-row { display:flex; align-items:center; justify-content:center; gap:10px; max-width:100%; min-width:0; }
.m3u-picker-logo { width:40px; height:40px; border-radius:8px; background:var(--surface3); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.m3u-picker-logo img { width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; }
.m3u-picker-name { font-size:var(--fs-lg); font-weight:700; color:var(--text); line-height:1.15; min-width:0; max-width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.idle-play-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; color:var(--text3); }
.idle-play-icon { width:112px; height:112px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:54px; padding-left:8px; box-shadow:0 18px 40px rgba(0,0,0,0.32); }
.idle-play-title { font-size:var(--fs-lg); font-weight:700; color:var(--text); }
.idle-play-copy { font-size:var(--fs-sm); max-width:420px; line-height:1.5; }
.loading-state { padding:48px 16px; text-align:center; color:var(--text3); font-size:var(--fs-md); }
.loading-state .spin-ring { margin:0 auto 18px; }
.loading-state.spinner-only { min-height:100%; display:flex; align-items:center; justify-content:center; padding:0; }
.loading-state.spinner-only .spin-ring { margin:0; }
.playlist-list-wrap { position:relative; margin-bottom:24px; --playlist-list-scroll-opacity:0; --playlist-list-scroll-thumb:0px; --playlist-list-scroll-top:0px; }
.playlist-list-wrap.scrollable { padding-right:16px; }
.playlist-list-wrap.scrollable::before { content:''; position:absolute; right:4px; top:0; bottom:0; width:4px; border-radius:999px; background:rgba(255,255,255,0.07); opacity:var(--playlist-list-scroll-opacity,0); pointer-events:none; }
.playlist-list-wrap.scrollable::after { content:''; position:absolute; right:4px; top:var(--playlist-list-scroll-top,0px); width:4px; height:var(--playlist-list-scroll-thumb,0px); border-radius:999px; background:var(--accent); opacity:var(--playlist-list-scroll-opacity,0); pointer-events:none; }
.playlist-list { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.playlist-list-wrap .playlist-list { margin-bottom:0; }
.playlist-list-wrap.scrollable .playlist-list { max-height:min(360px,38vh); overflow-y:auto; padding-right:10px; scrollbar-width:none; }
.playlist-list-wrap.scrollable .playlist-list::-webkit-scrollbar { display:none; }
.playlist-item { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid rgba(255,255,255,0.08); border-radius:16px; background:var(--surface2); }
.settings-panel .playlist-item { padding:22px 20px; gap:18px; border-radius:18px; border:1px solid var(--border2); }
.settings-panel .playlist-item.active { border-color:var(--border2); background:var(--surface2); }
html.light-mode .settings-panel .playlist-item { border-color:rgba(0,0,0,0.18); }
html.light-mode .settings-panel .playlist-item.active { border-color:rgba(0,0,0,0.18); background:var(--surface2); }
.settings-panel .playlist-item-name-row { display:flex; align-items:center; gap:14px; min-width:0; }
.settings-panel .playlist-active-dot { width:14px; height:14px; border-radius:50%; background:#32d74b; flex-shrink:0; box-shadow:0 0 10px rgba(50,215,75,0.55); }
.settings-panel .playlist-item-name { font-size:var(--fs-xl); flex:1; min-width:0; }
.settings-panel .playlist-item-meta { font-size:var(--fs-md); margin-top:8px; }
.settings-panel .playlist-item-counts { font-size:var(--fs-sm); margin-top:6px; }
.settings-panel .playlist-icon-btn { width:76px; height:76px; border-radius:16px; align-self:center; background:var(--btn-dark-red) !important; border:2px solid var(--btn-red-border) !important; box-shadow:none !important; color:#fff !important; padding:0; box-sizing:border-box; }
.settings-panel .playlist-icon-btn .ci-icon { width:38px; height:38px; }
.settings-panel .playlist-icon-btn:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent) !important; }
.settings-toggle-hint { font-size:var(--fs-md); color:var(--text3); line-height:1.55; }
.settings-panel .playlist-empty { font-size:var(--fs-md); padding:28px 20px; }
.playlist-section-sub { color:var(--text3); font-size:var(--fs-sm); line-height:1.55; margin:0 0 14px; }
.settings-panel .playlist-section-sub { font-size:var(--fs-lg); line-height:1.55; margin-bottom:16px; }
.settings-general-row .phone-paste-tip { margin-bottom:0; }
.settings-playlists-scroll .settings-general-row { padding:0 0 24px; margin-bottom:24px; border-bottom:1px solid var(--border); }
.settings-playlists-scroll .settings-general-row:last-child { border-bottom:none; margin-bottom:0; }
#settings-panel-playlists { padding:0; overflow:hidden; position:relative; }
#settings-panel-playlists.active { display:flex; flex-direction:column; }
.settings-playlists-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:40px 56px; }
.settings-playlists-scroll::-webkit-scrollbar { display:none; }
.settings-playlists-si-track { position:absolute; right:3px; top:6px; bottom:6px; width:3px; background:rgba(255,255,255,0.07); border-radius:3px; z-index:10; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.settings-playlists-si-track.si-visible { opacity:1; }
.settings-playlists-si-thumb { position:absolute; left:0; right:0; top:0; background:var(--accent); border-radius:3px; min-height:20px; opacity:0.65; transition:opacity 0.15s; }
.settings-playlists-si-track.si-scrolling .settings-playlists-si-thumb { opacity:1; }
html.light-mode .settings-playlists-si-track { background:rgba(0,0,0,0.08); }
.playlist-item.active { border-color:var(--accent-border); background:var(--accent-bg); }
.playlist-item-main { flex:1; min-width:0; }
.playlist-item-name { font-size:var(--fs-sm); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.playlist-item-meta { font-size:var(--fs-xs); color:var(--text3); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.playlist-item-counts { font-size:var(--fs-xs); color:var(--accent); margin-top:4px; font-weight:600; }
.playlist-item-actions { display:flex; gap:10px; flex-shrink:0; }
.playlist-hidden-list { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.playlist-hidden-item { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:2px solid var(--border2); border-radius:14px; background:var(--surface2); }
.playlist-hidden-item-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); font-weight:700; color:var(--text); }
.playlist-hidden-empty { padding:18px; border:2px dashed var(--border2); border-radius:16px; color:var(--text3); text-align:center; font-size:var(--fs-sm); margin-bottom:24px; }
.playlist-mini-btn { background:var(--surface3); border:2px solid var(--border2); border-radius:12px; color:var(--text2); font-size:15px; font-weight:700; padding:0 18px; height:46px; cursor:pointer; }
.playlist-mini-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.settings-panel .playlist-mini-btn.primary { height:var(--btn-h); font-size:var(--fs-md); padding:0 40px; border-radius:var(--radius); }
.playlist-field-error { display:none; font-size:13px; color:#f87171; margin-top:6px; }
.playlist-field-hint { display:block; font-size:16px; color:var(--text3); margin-top:8px; line-height:1.5; }
.playlist-input-error { border-color:#f87171 !important; }
.phone-paste-wrap { display:flex; gap:10px; align-items:stretch; }
.phone-paste-wrap input,.phone-paste-wrap textarea { flex:1; min-width:0; }
.password-input-wrap { position:relative; flex:1; min-width:0; display:flex; align-items:stretch; }
.password-input-wrap > input { width:100%; min-width:0; padding-right:72px !important; }
.password-toggle-btn { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:52px; height:52px; border:none; border-radius:12px; background:transparent; color:var(--text3); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:color 0.15s, background 0.15s; }
.password-toggle-btn:hover { color:var(--text); background:rgba(255,255,255,0.06); }
.password-toggle-btn .ci-icon { width:30px; height:30px; }
.phone-paste-btn { flex-shrink:0; width:60px; height:60px; background:var(--surface2); border:2px solid var(--border2); border-radius:var(--radius); color:var(--text3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:4px; transition:color 0.15s,border-color 0.15s,background 0.15s; }
.phone-paste-tip { display:flex; align-items:center; gap:10px; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2); border-radius:10px; padding:12px 14px; margin-bottom:24px; font-size:var(--fs-xs); color:var(--text2); line-height:1.45; }
.phone-paste-tip svg { flex-shrink:0; width:18px; height:18px; color:#22c55e; }
.phone-paste-btn:hover { color:var(--text); border-color:rgba(255,255,255,0.3); background:var(--surface3); }
.phone-paste-btn svg { width:26px; height:26px; }
.qr-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.78); z-index:2100; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
.qr-modal-overlay.open { display:flex; }
.qr-modal-shell { background:var(--surface); border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:44px 40px 40px; width:min(600px,100%); display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; box-shadow:0 24px 80px rgba(0,0,0,0.6); }
.qr-modal-title { font-size:40px; font-weight:800; color:var(--text); margin-bottom:12px; }
.qr-modal-copy { font-size:var(--fs-md); color:var(--text2); margin-bottom:28px; line-height:1.5; }
.qr-modal-canvas-wrap { background:#fff; border-radius:16px; padding:18px; margin-bottom:24px; display:flex; align-items:center; justify-content:center; }
.qr-modal-canvas-wrap canvas { display:block; }
.qr-modal-status { font-size:var(--fs-md); color:var(--text2); margin-bottom:24px; min-height:24px; display:flex; align-items:center; justify-content:center; gap:12px; }
.qr-modal-status:not(.received)::after { content:''; width:22px; height:22px; border:2.5px solid rgba(255,255,255,0.18); border-top-color:rgba(255,255,255,0.75); border-radius:50%; animation:spin 0.75s linear infinite; flex-shrink:0; }
.qr-modal-status.received { color:#22c55e; font-weight:700; }
.qr-modal-close { background:var(--accent); border:none; border-radius:var(--radius); color:#fff; font-size:var(--fs-md); font-weight:800; height:var(--btn-h); cursor:pointer; width:280px; max-width:100%; transition:background 0.15s; }
.qr-modal-close:hover { background:var(--accent2); }
.playlist-empty { padding:24px 18px; border:2px dashed var(--border2); border-radius:16px; color:var(--text3); text-align:center; font-size:var(--fs-sm); margin-bottom:24px; }
.playlist-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:205; align-items:flex-start; justify-content:center; padding:20px 24px 0; box-sizing:border-box; overflow-y:auto; }
.playlist-modal-shell { background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:40px; width:860px; max-width:94vw; max-height:calc(100dvh - 40px); overflow:auto; box-shadow:0 24px 80px rgba(0,0,0,0.6); }
.touch-select-sheet,
.stream-url-shell,
.help-modal-shell,
.qr-modal-shell,
.playlist-modal-shell,
.auth-email-modal-card,
#settings-overlay .settings-shell,
#change-email-modal > div,
#change-password-modal > div,
#cc-name-modal > div,
#cc-add-modal > div { border-radius:0 !important; }
.playlist-modal-top { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }
.playlist-modal-copy h2 { font-size:var(--fs-xl); font-weight:800; margin-bottom:8px; }
.playlist-modal-copy p { color:var(--text3); font-size:var(--fs-sm); line-height:1.5; max-width:560px; }
.playlist-section { margin-top:24px; }
.playlist-section:first-of-type { margin-top:0; }
.playlist-section-head { display:flex; align-items:center; justify-content:flex-start; gap:16px; margin-bottom:14px; }
.settings-panel .playlist-section-head { width:100%; gap:20px; justify-content:space-between; }
.settings-panel .playlist-section-head .playlist-mini-btn { margin-left:auto; }
.playlist-section-title { font-size:var(--fs-md); font-weight:800; color:var(--text); }
.playlist-section-sub { color:var(--text3); font-size:var(--fs-xs); margin-top:6px; }
.playlist-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.playlist-form-grid .full { grid-column:1 / -1; }
.playlist-divider { height:1px; background:linear-gradient(90deg,transparent,var(--border2),transparent); margin:26px 0 6px; }
.category-edit-list { display:flex; flex-direction:column; gap:14px; max-height:min(62vh,760px); overflow:auto; padding:6px 12px 18px 0; margin-top:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-y; scroll-behavior:auto; }
.category-edit-list::-webkit-scrollbar { display:none; }
.category-edit-item { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 22px; border:1px solid rgba(255,255,255,0.08); border-radius:18px; background:var(--surface2); }
.category-edit-item-main { min-width:0; flex:1; }
.category-edit-item-name { font-size:calc(var(--fs-sm) + 3px); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.category-edit-item-sub { margin-top:6px; font-size:var(--fs-xs); color:var(--text3); line-height:1.45; }
.category-edit-empty { padding:24px 18px; border:2px dashed var(--border2); border-radius:16px; color:var(--text3); text-align:center; font-size:var(--fs-sm); }
.category-rename-btn { background:var(--surface3); border:1px solid rgba(255,255,255,0.14); border-radius:10px; color:var(--text2); font-size:14px; font-weight:700; padding:0; width:62px; height:62px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background 0.15s,color 0.15s; }
.category-rename-btn:hover { background:var(--surface2); color:var(--text); }
.category-rename-input { flex:1; min-width:0; background:var(--surface2); border:2px solid var(--accent); border-radius:10px; color:var(--text); font-size:17px; font-weight:700; padding:0 14px; height:44px; outline:none; font-family:inherit; box-sizing:border-box; }
.category-rename-ok { background:var(--accent); border:none; border-radius:10px; color:#fff; font-size:15px; font-weight:800; padding:0 22px; height:44px; cursor:pointer; flex-shrink:0; white-space:nowrap; transition:background 0.15s; }
.category-rename-ok:hover { background:var(--accent2); }

/* ── FULLSCREEN STREAM PLAYER ── */
#sp-overlay { position:fixed; inset:0; background:#000; z-index:999; display:none; flex-direction:column; }
#sp-title { position:absolute; top:28px; left:36px; font-size:52px; font-weight:800; color:#fff; max-width:var(--fs-player-text-width); overflow-wrap:anywhere; line-height:1.1; }
#sp-loading-desc { position:absolute; top:108px; left:36px; max-width:var(--fs-player-text-width); font-size:24px; line-height:1.5; color:rgba(255,255,255,0.82); display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; text-align:left; overflow-wrap:anywhere; }
#sp-video { width:100%; height:100%; object-fit:contain; position:absolute; inset:0; }
#sp-subtitle-overlay { z-index:1; }
.sp-header { position:absolute; top:0; left:0; right:0; padding:24px 36px; display:flex; justify-content:space-between; align-items:center; background:linear-gradient(to bottom,rgba(0,0,0,0.85),transparent); z-index:2; opacity:0; transition:opacity 0.3s; pointer-events:none; }
.sp-title { font-size:var(--fs-xl); font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,0.7); }
.sp-footer { position:absolute; bottom:0; left:0; right:0; padding:12px 36px 12px; background:linear-gradient(to top,rgba(0,0,0,0.9),transparent); z-index:2; display:flex; flex-direction:column; gap:12px; opacity:0; transition:opacity 0.3s; pointer-events:none; }
.sp-footer.visible { opacity:1; pointer-events:all; }
.sp-ctrl-row { display:flex; align-items:center; gap:24px; margin:22px 0; }
.sp-audio-row { display:none; align-items:center; gap:14px; flex-wrap:wrap; }
.sp-audio-row.pinned { position:absolute; left:36px; right:36px; bottom:178px; z-index:4; padding:10px 0; pointer-events:all; }
.sp-audio-label { font-size:var(--fs-sm); color:rgba(255,255,255,0.7); font-weight:700; flex-shrink:0; }
.sp-audio-pills { display:flex; gap:8px; flex-wrap:wrap; }
.sp-subtitle-row { display:none; align-items:center; gap:14px; flex-wrap:nowrap; position:relative; align-self:flex-start; max-width:30vw; min-width:0; padding-right:42px; }
.sp-subtitle-label { font-size:var(--fs-lg); color:rgba(255,255,255,0.7); font-weight:700; flex-shrink:0; }
.sp-subtitle-pills { display:flex; gap:8px; flex-wrap:nowrap; max-width:calc(30vw - 150px); min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.sp-subtitle-pills::-webkit-scrollbar { display:none; }
.sp-subtitle-pills .audio-pill { flex:0 0 auto; }
.sp-subtitle-row::after { content:'\203A'; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:42px; line-height:1; font-weight:300; color:rgba(255,255,255,0.66); pointer-events:none; }
/* Sized to match the live TV fullscreen controls (136x136, 64px icons) */
/* Dark-red fullscreen controls (match the selected-channel-name style: accent-bg + accent-border) */
.sp-close-btn { background:var(--btn-dark-red) !important; border:2px solid var(--btn-red-border); border-radius:16px; color:white; font-size:var(--fs-md); font-weight:700; padding:0; width:118px; height:118px; box-sizing:border-box; cursor:pointer; transition:background 0.15s,border-color 0.15s,opacity 0.3s; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 16px 38px rgba(0,0,0,0.58),0 4px 14px rgba(0,0,0,0.5); }
.sp-close-btn:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent); }
/* Movie/TV fullscreen title + description — text only over the video */
#sp-controls-meta { position:absolute; top:28px; left:36px; z-index:10; max-width:var(--fs-player-text-width); opacity:0; pointer-events:none; transition:opacity 0.3s; display:flex; flex-direction:column; gap:14px; padding:0; border-radius:0; background:none; border:none; box-shadow:none; }
#sp-overlay.sp-controls-on #sp-controls-meta { filter:var(--fs-meta-shadow); gap:4px; }
#sp-controls-title { font-size:52px; font-weight:800; color:#fff; line-height:1.1; overflow-wrap:anywhere; max-width:100%; }
#sp-controls-desc { font-size:28px; color:rgba(255,255,255,0.92); line-height:1.5; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; overflow-wrap:anywhere; }
#sp-overlay.sp-controls-on #sp-controls-title,
#sp-overlay.sp-controls-on #sp-controls-desc { text-shadow:none; }
#sp-controls-desc:empty { display:none; }
html.desktop-mode #sp-controls-meta { top:20px !important; left:24px !important; padding:14px 18px !important; gap:8px !important; max-width:var(--fs-player-text-width) !important; }
html.desktop-mode #sp-controls-desc { font-size:13px !important; }
html.desktop-mode #sp-collapse-btn { right:98px !important; top:20px !important; }
/* Floating movie/TV mini-player (collapsed fullscreen) */
/* Movie/TV PiP matches the live-TV floating PiP (#epg-pip.tab-floating):
   identical outer box (720px wide, 492px tall with the 6px border, since
   box-sizing is border-box) and the same grey drag-handle pill across the top. */
#sp-pip { display:none; position:fixed; bottom:24px; right:24px; width:720px; height:492px; max-width:calc(100vw - 48px); z-index:1000; background:#000; border-radius:0; overflow:hidden; border:6px solid var(--btn-dark-red); box-shadow:0 8px 16px rgba(0,0,0,0.6),0 24px 64px rgba(0,0,0,0.75); cursor:pointer; box-sizing:border-box; }
#sp-pip.open { display:block; }
#sp-pip::before { content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:180px; height:4px; border-radius:999px; background:rgba(185,188,196,0.7); box-shadow:0 2px 10px rgba(0,0,0,0.34); z-index:3; pointer-events:none; }
#sp-pip-slot { position:absolute; inset:0; }
#sp-pip-slot video { width:100%; height:100%; object-fit:contain; background:#000; }
.sp-pip-btn { position:absolute; top:16px; width:76px; height:76px; background:var(--btn-dark-red); border:2px solid var(--btn-red-border); border-radius:16px; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; padding:0; box-sizing:border-box; transition:background 0.15s; }
.sp-pip-btn:hover { background:var(--btn-dark-red-hover); }
.sp-pip-btn .ci-icon { width:38px; height:38px; }
#sp-pip-close { right:16px; }
.sp-pip-controls { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:16px; }
.sp-pip-controls .sp-pip-btn { position:static; top:auto; right:auto; }
#sp-mute-btn { background:var(--btn-dark-red) !important; border:2px solid var(--btn-red-border); color:#fff; }
#sp-mute-btn:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent); }
#sp-mute-btn.active { background:var(--btn-dark-red) !important; border-color:var(--btn-red-border); }
.sp-ctrl-btn { background:var(--btn-dark-red) !important; border:2px solid var(--btn-red-border); border-radius:16px; color:white; font-size:24px; width:118px; height:118px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s,border-color 0.15s; flex-shrink:0; }
#sp-playpause-btn { box-shadow:0 16px 38px rgba(0,0,0,0.58),0 4px 14px rgba(0,0,0,0.5); }
.sp-ctrl-btn:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent); }
.sp-ctrl-btn.hidden { display:none; }
.sp-close-btn .ci-icon,
.sp-ctrl-btn .ci-icon { width:54px; height:54px; }
/* Expanded TV mode */
.tv-expanded .app-header { display:none; }
.tv-expanded .sidebar,
.tv-expanded .streams-sidebar,
.tv-expanded .streams-panel { display:none !important; }
.tv-expanded .epg-panel { display:none !important; }
.tv-expanded .player-area {
  position:fixed;
  inset:0;
  z-index:150;
  width:100vw;
  height:100vh;
  max-height:100vh;
  flex:1;
  padding:0;
  background:#000;
}
.tv-expanded .video-wrap { width:100%; max-height:100vh; border-radius:0; background:#000; }
.tv-expanded #video { border-radius:0; }
.tv-expanded .app-body { height:100vh; max-height:100vh; overflow:hidden; }
.tv-expanded .overlay { padding:20px 24px 188px; box-sizing:border-box; overflow:hidden; }
.tv-expanded .overlay-top { gap:24px; }
.tv-expanded .overlay-channel-logo { width:92px; height:92px; border-radius:16px; font-size:38px; background:#101114; }
.tv-expanded .overlay-channel-logo img { padding:0; opacity:1; }
.tv-expanded .overlay-ch-name { font-size:52px; }
.tv-expanded .live-badge { font-size:22px; padding:8px 20px; border-radius:10px; }
.tv-expanded .video-wrap.fullscreen-controls-visible .live-up-next.visible { display:block; }
.tv-expanded .live-up-next { font-size:44px; }
.tv-expanded .epg-now { font-size:44px; }
.tv-expanded .epg-now strong { font-size:52px; }
.tv-expanded .epg-now-time { display:block; margin-left:0; margin-top:8px; font-size:44px; font-weight:800; }
.tv-expanded .overlay-epg-desc { font-size:30px; max-height:none; overflow:hidden; scrollbar-width:none; padding-right:0; display:-webkit-box; -webkit-line-clamp:10; -webkit-box-orient:vertical; }
.tv-expanded .overlay-epg-desc::-webkit-scrollbar { display:none; }
.tv-expanded .audio-label { font-size:24px; }
.tv-expanded .audio-pill { height:58px; font-size:24px; padding:0 26px; border-radius:30px; }
@keyframes fs-chevron-drop{0%,100%{opacity:.22;transform:translateY(0)}40%{opacity:.85;transform:translateY(9px)}}
html.desktop-mode .fs-exit-hint,
html.desktop-mode .sp-exit-hint{display:none!important;opacity:0!important;pointer-events:none!important;}
.fs-exit-hint{display:none;position:absolute;right:46px;top:50%;transform:translateY(-50%);z-index:10;flex-direction:column;align-items:center;background:none;border:none;cursor:pointer;padding:12px 10px;color:#fff;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.tv-expanded .fs-exit-hint{display:flex;}
.tv-expanded .overlay.visible~.fs-exit-hint{opacity:1;pointer-events:all;}
.fs-exit-hint svg{width:64px;height:64px;display:block;flex-shrink:0;}
.fs-exit-hint svg:nth-child(n+2){margin-top:-20px;}
.fs-exit-hint svg:nth-child(1){animation:fs-chevron-drop 2.2s ease-in-out infinite;}
.fs-exit-hint svg:nth-child(2){animation:fs-chevron-drop 2.2s ease-in-out infinite .22s;}
.fs-exit-hint svg:nth-child(3){animation:fs-chevron-drop 2.2s ease-in-out infinite .44s;}
/* Movie/TV fullscreen exit hint — same animated chevron + swipe-down-to-close as live TV */
.sp-exit-hint{position:absolute;right:46px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;background:none;border:none;cursor:pointer;padding:12px 10px;color:#fff;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.sp-exit-hint svg{width:64px;height:64px;display:block;flex-shrink:0;}
.sp-exit-hint svg:nth-child(n+2){margin-top:-20px;}
.sp-exit-hint svg:nth-child(1){animation:fs-chevron-drop 2.2s ease-in-out infinite;}
.sp-exit-hint svg:nth-child(2){animation:fs-chevron-drop 2.2s ease-in-out infinite .22s;}
.sp-exit-hint svg:nth-child(3){animation:fs-chevron-drop 2.2s ease-in-out infinite .44s;}
.tv-expanded #fullscreen-exit-btn { width:136px !important; height:136px !important; border-radius:10px !important; background:var(--btn-dark-red) !important; border:2px solid var(--btn-red-border) !important; box-shadow:none !important; }
.tv-expanded #fullscreen-exit-btn .ci-icon { width:64px !important; height:64px !important; }
/* Dark-red fullscreen controls (match the selected-channel-name style: accent-bg + accent-border) */
.tv-expanded #mute-btn,
.tv-expanded #stop-btn,
.tv-expanded #prev-btn,
.tv-expanded #next-btn { background:var(--btn-dark-red) !important; border-color:var(--btn-red-border) !important; }
/* Auto-hide: ALL fullscreen controls (incl. the close/exit button — previously
   omitted, so it lingered after the timer) fade together. */
.tv-expanded #mute-btn,
.tv-expanded #stop-btn,
.tv-expanded #prev-btn,
.tv-expanded #next-btn,
.tv-expanded #fullscreen-exit-btn { opacity:0; pointer-events:none; transition:opacity 0.3s; }
.tv-expanded .video-wrap.fullscreen-controls-visible #mute-btn,
.tv-expanded .video-wrap.fullscreen-controls-visible #stop-btn,
.tv-expanded .video-wrap.fullscreen-controls-visible #prev-btn,
.tv-expanded .video-wrap.fullscreen-controls-visible #next-btn,
.tv-expanded .video-wrap.fullscreen-controls-visible #fullscreen-exit-btn { opacity:1; pointer-events:all; }
.tv-expanded #mute-btn:hover, .tv-expanded #stop-btn:hover, .tv-expanded #prev-btn:hover, .tv-expanded #next-btn:hover, .tv-expanded #fullscreen-exit-btn:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent) !important; }
#mute-btn:hover, #stop-btn:hover, #prev-btn:hover, #next-btn:hover, #fullscreen-exit-btn:hover { background:rgba(0,0,0,0.8); border-color:rgba(255,255,255,0.5); }
/* Chevron glyphs fill their box more than the stop/mute glyphs — slightly
   smaller keeps them optically in line with the other controls. */
#prev-btn .ci-icon,#next-btn .ci-icon { width:54px; height:54px; }
/* Live fullscreen CC button — bottom-left in line with the mute button; fades
   with the other fullscreen controls. Shown only when subtitles are available. */
.tv-expanded #live-cc-fs-btn { background:var(--btn-dark-red) !important; border-color:var(--btn-red-border) !important; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.tv-expanded .video-wrap.fullscreen-controls-visible #live-cc-fs-btn { opacity:1; pointer-events:all; }
.tv-expanded #live-cc-fs-btn:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent) !important; }
#live-cc-fs-btn .ci-icon { width:64px; height:64px; }
/* Restart-from-start (live catch-up) button — mirrors the CC button; bottom-left in fullscreen. */
.tv-expanded #live-restart-btn { background:var(--btn-dark-red) !important; border-color:var(--btn-red-border) !important; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.tv-expanded .video-wrap.fullscreen-controls-visible #live-restart-btn { opacity:1; pointer-events:all; }
.tv-expanded #live-restart-btn:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent) !important; }
#live-restart-btn .ci-icon { width:64px; height:64px; }
/* Site-wide red action buttons share the Play Fullscreen dark-red + red-border look.
   box-sizing:border-box keeps fixed button sizes from growing with the added border. */
.add-playlist-btn,.landing-login-btn,.connect-btn,.touch-select-add-playlist,.touch-select-save-btn,.sidebar-action-btn,.sidebar-playlist-btn,.help-modal-ok,.fav-btn,.pu-card-cta,#tab-pip-live-btn,.cc-new-btn,.cc-schedule-play-btn,.ep-play-btn,.stream-play-btn,.settings-close-btn,.settings-save-btn,.settings-account-premium-btn,.playlist-phone-btn,.playlist-editor-save,.qr-modal-close,.vod-play-btn,.epg-pip-play,.compat-card-btn.primary,.playlist-mini-btn.primary,#settings-signin-btn,#category-search-submit,#change-email-submit-btn,#change-password-send-btn { background:var(--btn-dark-red) !important; border:2px solid var(--btn-red-border) !important; box-sizing:border-box !important; }
.add-playlist-btn:hover,.landing-login-btn:hover,.connect-btn:hover,.touch-select-add-playlist:hover,.touch-select-save-btn:hover,.sidebar-action-btn:hover,.sidebar-playlist-btn:hover,.help-modal-ok:hover,.fav-btn:hover,.pu-card-cta:hover,#tab-pip-live-btn:hover,.cc-new-btn:hover,.cc-schedule-play-btn:hover,.ep-play-btn:hover,.stream-play-btn:hover,.settings-close-btn:hover,.settings-save-btn:hover,.settings-account-premium-btn:hover,.playlist-phone-btn:hover,.playlist-editor-save:hover,.qr-modal-close:hover,.vod-play-btn:hover,.epg-pip-play:hover,.compat-card-btn.primary:hover,.playlist-mini-btn.primary:hover,#settings-signin-btn:hover,#category-search-submit:hover,#change-email-submit-btn:hover,#change-password-send-btn:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent) !important; }
#settings-signin-btn,#settings-signin-btn:hover { color:#fff !important; }
.ep-play-icon-btn { background:var(--btn-dark-red) !important; border:2px solid var(--btn-red-border) !important; box-sizing:border-box !important; }
.ep-play-icon-btn:hover { background:var(--btn-dark-red-hover) !important; border-color:var(--accent) !important; }
html.light-mode .ep-play-icon-btn { background:var(--accent) !important; border-color:var(--accent) !important; }
html.light-mode .ep-play-icon-btn:hover { background:var(--accent2) !important; border-color:var(--accent2) !important; }
/* Miniplayer play button keeps dark-red fill but border matches EPG now-line accent. */
.epg-pip-play { border-color:var(--accent) !important; }
/* "Watch from start" is a secondary action — match the Play Trailer button, not the red play buttons */
.vod-play-btn.vod-restart-btn { background:rgba(14,14,14,0.66) !important; border:2px solid rgba(255,255,255,0.12) !important; color:var(--text) !important; }
.vod-play-btn.vod-restart-btn:hover { background:rgba(227,25,55,0.12) !important; border-color:var(--accent) !important; }

/* Every interactive control uses the same 10px corner treatment as the
   landing-page Learn More button. Panels, artwork, badges, switches and
   progress indicators keep their component-specific geometry. */
button,
input:not([type]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="file"],
select,
textarea,
[role="button"],
a[class~="btn"],
a[class*="-btn"] {
  border-radius:var(--control-radius) !important;
}
input[type="file"]::file-selector-button {
  border-radius:var(--control-radius) !important;
}
.landing-language-menu,
.header-language-menu,
.hdr-profile-dropdown,
.touch-select-sheet {
  border-radius:var(--control-radius) !important;
}
/* Keep the settings sidebar selection indicator as a straight red edge —
   the global control-radius rule would otherwise round the left border. */
.settings-tab-btn,
.settings-tab-btn.active {
  border-radius:0 !important;
}