/* ══════════════════════════════════════════════════
   SilvaStream — Live TV Page
   ══════════════════════════════════════════════════ */

body { background: var(--bg); color: var(--text); min-height: 100vh; }

/* ── Page Header / Hero ─────────────────────────── */
.tv-hero {
  background: linear-gradient(135deg, #040714 0%, #0c0f20 60%, #14172b 100%);
  padding: calc(var(--nav-h,72px) + 40px) clamp(16px,4vw,60px) 40px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tv-hero-title {
  font-size: clamp(28px, 5vw, 52px); font-weight: 900; margin: 0 0 10px;
  background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tv-hero-sub { font-size: 16px; color: var(--text-2); margin: 0 0 28px; }

/* TV Search */
.tv-search-bar {
  display: flex; align-items: center; gap: 0;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; max-width: 480px; overflow: hidden;
  transition: border-color .25s;
}
.tv-search-bar:focus-within { border-color: var(--accent); }
.tv-search-bar input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 15px;
  padding: 14px 18px;
}
.tv-search-bar input::placeholder { color: var(--text-muted); }
.tv-search-bar button {
  background: var(--accent); border: none; color: #fff;
  padding: 14px 20px; cursor: pointer; font-size: 15px;
  transition: background .2s;
}
.tv-search-bar button:hover { background: #f40612; }

/* ── Country Section ────────────────────────────── */
.tv-section { padding: 0 clamp(16px,4vw,60px) 50px; }
.tv-section-title {
  font-size: 20px; font-weight: 800; margin: 36px 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.tv-section-title::before {
  content: ''; display: block; width: 4px; height: 22px;
  background: var(--accent); border-radius: 2px;
}

/* Popular country tabs */
.country-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px;
}
.country-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 30px;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; transition: all .2s; font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.country-tab:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.country-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.country-flag { font-size: 18px; line-height: 1; }

/* All countries list */
.all-countries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin-bottom: 40px;
}
.all-countries-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.06);
  cursor: pointer; transition: all .2s; font-size: 13px; font-weight: 500;
  color: var(--text);
}
.all-countries-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.all-countries-btn.active { background: rgba(229,9,20,.1); border-color: rgba(229,9,20,.3); color: var(--accent); }

/* ── Channel Grid ───────────────────────────────── */
.channels-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.channels-count { font-size: 14px; color: var(--text-muted); }

.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.channel-card {
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: all .25s; display: flex; flex-direction: column;
}
.channel-card:hover {
  transform: translateY(-4px);
  border-color: rgba(229,9,20,.4);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.channel-card.playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(229,9,20,.3);
}

.channel-logo-wrap {
  aspect-ratio: 16/9; background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; position: relative; overflow: hidden;
}
.channel-logo {
  max-width: 80%; max-height: 70%; object-fit: contain;
  filter: brightness(.9);
}
.channel-logo-ph {
  font-size: 32px; color: var(--text-muted);
}
.channel-play-ov {
  position: absolute; inset: 0; background: rgba(229,9,20,.8);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; opacity: 0; transition: opacity .2s;
}
.channel-card:hover .channel-play-ov { opacity: 1; }
.channel-card.playing .channel-play-ov { opacity: 1; }

.channel-info { padding: 10px 12px; }
.channel-name {
  font-size: 13px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.channel-group { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* Live indicator */
.live-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--accent); color: #fff; font-size: 9px;
  font-weight: 800; padding: 3px 7px; border-radius: 4px;
  letter-spacing: .5px;
}

/* Verified badge on featured channels */
.verified-badge {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(34,197,94,.15); color: #22c55e;
  font-size: 9px; font-weight: 700; padding: 3px 7px;
  border-radius: 4px; letter-spacing: .3px;
  border: 1px solid rgba(34,197,94,.3);
  backdrop-filter: blur(4px);
}

/* ── Embedded Player ────────────────────────────── */
.tv-player-section {
  position: sticky; top: var(--nav-h, 72px); z-index: 50;
  background: #000; display: none;
}
.tv-player-section.show { display: block; }

.tv-player-wrap {
  position: relative; width: 100%; padding-top: min(42.85%, 480px); max-height: 480px;
  background: #000;
}
.tv-player-wrap video, .tv-player-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.tv-player-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-2); padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tv-playing-name {
  font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.tv-close-btn {
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.1);
  color: var(--text); padding: 6px 14px; border-radius: 6px;
  font-size: 12px; cursor: pointer; transition: background .2s;
}
.tv-close-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Skeleton / Loading ─────────────────────────── */
.channel-skeleton {
  background: var(--bg-card); border-radius: 12px; overflow: hidden;
  animation: shimmer 1.6s infinite;
}
.channel-skeleton-img { height: 90px; background: var(--bg-3); }
.channel-skeleton-txt { padding: 10px 12px; }
.channel-skeleton-line {
  height: 12px; background: var(--bg-3); border-radius: 6px; margin-bottom: 8px;
}
.channel-skeleton-line.short { width: 60%; }

@keyframes shimmer {
  0%,100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ── Empty State ────────────────────────────────── */
.tv-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 40px; text-align: center;
  color: var(--text-muted); gap: 12px;
}
.tv-empty i { font-size: 48px; color: var(--bg-3); }
.tv-empty h3 { font-size: 18px; margin: 0; }

/* ── Load More ──────────────────────────────────── */
#load-more-wrap {
  display: flex; justify-content: center;
  padding: 28px 0 8px;
}
.load-more-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px; padding: 12px 32px; font-size: 15px;
  font-weight: 600; cursor: pointer; transition: all .2s;
  font-family: inherit;
}
.load-more-btn:hover {
  background: var(--accent); border-color: var(--accent);
  color: #fff; transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(229,9,20,.3);
}
.load-more-btn i { font-size: 16px; }
.load-more-count { font-size: 13px; opacity: .7; font-weight: 400; }

/* All Channels special tab */
.all-channels-tab {
  background: linear-gradient(135deg, #1a1d2e, #14172b);
  border: 1px solid rgba(255,255,255,.15) !important;
}
.all-channels-tab.active,
.all-channels-tab:hover {
  background: linear-gradient(135deg, var(--accent), #b91c1c) !important;
  border-color: var(--accent) !important;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 640px) {
  .channels-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .country-tabs { gap: 6px; }
  .country-tab { padding: 7px 14px; font-size: 13px; }
  .all-countries-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ── Country Dropdown ────────────────────────────── */
.country-picker-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  margin: 2rem 0 1rem;
}
.country-dropdown-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--bg-card, #0d1117);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; overflow: hidden;
  min-width: 240px; max-width: 340px;
  transition: border-color .2s, box-shadow .2s;
}
.country-dropdown-wrap:focus-within {
  border-color: var(--accent,#e50914);
  box-shadow: 0 0 0 3px rgba(229,9,20,.18);
}
.country-dropdown-icon {
  position: absolute; left: 14px; color: var(--accent,#e50914);
  font-size: 14px; pointer-events: none; z-index: 1;
}
.country-dropdown-arrow {
  position: absolute; right: 14px; color: rgba(255,255,255,.45);
  font-size: 12px; pointer-events: none; z-index: 1;
}
.country-dropdown {
  width: 100%; background: transparent;
  color: #f4f4f4; border: none; outline: none;
  padding: 12px 38px 12px 36px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
.country-dropdown option, .country-dropdown optgroup {
  background: #0d1117; color: #f4f4f4; font-weight: 500;
}
@media (max-width: 640px) {
  .country-picker-row { flex-direction: column; align-items: flex-start; }
  .country-dropdown-wrap { min-width: 100%; max-width: 100%; }
}

/* ── Offline Card State ──────────────────────────── */
.channel-card.offline .channel-logo-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  border-radius: 8px;
  z-index: 2;
}
.channel-card.offline .channel-logo-wrap::before {
  content: '\f322'; /* fa-signal-slash or fallback */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #ff4545;
  z-index: 3;
}
.channel-card.offline .channel-name { color: #ff6b6b; }
.channel-card.offline .live-badge { background: #555 !important; }

/* ── Offline Player Overlay ──────────────────────── */
#offline-overlay {
  position: absolute; inset: 0;
  background: rgba(4,7,20,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 10; border-radius: 0;
}
.offline-overlay-inner {
  text-align: center; padding: 24px;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.offline-icon {
  font-size: 48px; color: #ff4545;
  animation: pulse-offline 2s ease-in-out infinite;
}
@keyframes pulse-offline {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.95); }
}
.offline-title {
  font-size: 22px; font-weight: 700; color: #f4f4f4;
}
.offline-sub {
  font-size: 14px; color: #8a9cc2; max-width: 280px; line-height: 1.5;
}
.offline-retry-btn {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent,#e50914); color: #fff;
  border: none; border-radius: 50px;
  padding: 10px 26px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .2s, transform .15s;
}
.offline-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}
.offline-yt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 8px;
  background: #ff0000; color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: background .18s;
}
.offline-yt-btn:hover { background: #cc0000; }
.offline-yt-btn i { font-size: 14px; }
.offline-retry-btn:hover {
  background: #c40812; transform: translateY(-1px);
}

/* ══════════════════════════════════════════════
   TV v17 — Fav channels section, PiP, Light mode
   ══════════════════════════════════════════════ */

/* Fav channels section */
#fav-channels-section { margin-bottom: 10px; }
#fav-channels-grid .channel-card { border-color: rgba(229,9,20,.25); }

/* Channel card relative position for fav btn */
.channel-card { position: relative; }

/* Player actions flex row */
.tv-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.tv-player-actions { display: flex; align-items: center; gap: 8px; }

/* PiP btn */
.tv-pip-btn {
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #f4f4f4;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .2s;
}
.tv-pip-btn:hover { background: rgba(255,255,255,.18); }

/* ── Hide offline toggle ─────────────────────────── */
.tv-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  color: rgba(255,255,255,.65); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: 'Poppins', sans-serif;
  transition: all .2s; white-space: nowrap;
}
.tv-filter-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.tv-filter-btn.active {
  background: rgba(229,9,20,.15);
  border-color: rgba(229,9,20,.4);
  color: var(--accent);
}
/* Hide offline channels when filter is active */
.channels-grid.hide-offline .channel-card.offline {
  display: none !important;
}

/* ══════════════════════════════════════════════════
   TV v19 — Channel Surfing Strip, Now-On Badges,
   Floating Mini-Player, Category Swim Lanes,
   Channel Zapping, Unique Designs
   ══════════════════════════════════════════════════ */

/* ── Channel Surfing Strip ─────────────────────── */
.surf-strip {
  background: linear-gradient(180deg, rgba(229,9,20,.06) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 18px clamp(16px,4vw,60px) 14px;
  overflow: hidden;
}
.surf-strip-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.surf-strip-title {
  font-size: 14px; font-weight: 800; letter-spacing: .5px;
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
}
.surf-strip-title .surf-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,.6);
  animation: surfPulse 1.4s infinite;
}
@keyframes surfPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.7); }
}
.surf-strip-count {
  font-size: 11px; color: var(--text-muted); font-weight: 500;
}
.surf-track {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px;
}
.surf-track::-webkit-scrollbar { display: none; }

.surf-card {
  flex-shrink: 0; width: 140px;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; overflow: hidden;
  cursor: pointer; transition: all .25s;
  position: relative;
}
.surf-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(229,9,20,.2);
}
.surf-card.surf-playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(229,9,20,.4), 0 8px 24px rgba(229,9,20,.2);
}
.surf-card-thumb {
  height: 72px; background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.surf-card-thumb img {
  max-height: 44px; max-width: 90px; object-fit: contain;
  filter: brightness(.85); transition: filter .2s;
}
.surf-card:hover .surf-card-thumb img { filter: brightness(1.1); }
.surf-card-thumb .surf-ph { font-size: 24px; color: var(--text-muted); }

.surf-signal {
  position: absolute; top: 5px; right: 5px;
  display: flex; align-items: flex-end; gap: 2px; height: 14px;
}
.surf-signal-bar {
  width: 3px; border-radius: 1px;
  background: #22c55e;
  animation: signalBounce 1.8s ease-in-out infinite;
}
.surf-signal-bar:nth-child(1) { height: 4px; animation-delay: 0s; }
.surf-signal-bar:nth-child(2) { height: 7px; animation-delay: .15s; }
.surf-signal-bar:nth-child(3) { height: 10px; animation-delay: .3s; }
.surf-signal-bar:nth-child(4) { height: 14px; animation-delay: .45s; }
@keyframes signalBounce {
  0%,100% { opacity: 1; }
  50% { opacity: .3; }
}
.surf-card-play {
  position: absolute; inset: 0;
  background: rgba(229,9,20,.75);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  opacity: 0; transition: opacity .2s;
}
.surf-card:hover .surf-card-play { opacity: 1; }
.surf-card.surf-playing .surf-card-play {
  opacity: 1; background: rgba(34,197,94,.75);
}
.surf-card-info { padding: 6px 10px 8px; }
.surf-card-name {
  font-size: 11px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.surf-now-on {
  font-size: 9px; color: var(--accent);
  font-weight: 600; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.surf-now-on i { font-size: 7px; }

/* ── Now-On Badge on channel cards ────────────── */
.now-on-badge {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: 3px 7px;
  font-size: 8px; font-weight: 700; color: #22c55e;
  max-width: 100px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; z-index: 4;
  display: flex; align-items: center; gap: 3px;
}
.now-on-badge i { font-size: 6px; }

/* ── Category Swim Lanes ─────────────────────── */
.swim-lane {
  margin-bottom: 28px;
}
.swim-lane-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.swim-lane-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; flex-shrink: 0;
}
.swim-lane-icon.news { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.swim-lane-icon.entertainment { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.swim-lane-icon.sports { background: linear-gradient(135deg, #22c55e, #16a34a); }
.swim-lane-icon.kids { background: linear-gradient(135deg, #f59e0b, #d97706); }
.swim-lane-icon.religious { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.swim-lane-icon.general { background: linear-gradient(135deg, #e50914, #b91c1c); }
.swim-lane-title {
  font-size: 16px; font-weight: 800;
}
.swim-lane-count {
  font-size: 11px; color: var(--text-muted);
  background: rgba(255,255,255,.06);
  padding: 2px 8px; border-radius: 10px;
}
.swim-lane-track {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: 4px;
}
.swim-lane-track::-webkit-scrollbar { display: none; }

/* ── Floating Mini-Player ────────────────────── */
.floating-mini-player {
  position: fixed; bottom: 24px; right: 24px;
  width: 320px; z-index: 900;
  background: #000; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 16px 48px rgba(0,0,0,.7);
  overflow: hidden; display: none;
  animation: miniPlayerIn .3s ease;
}
.floating-mini-player.show { display: block; }
@keyframes miniPlayerIn {
  from { opacity: 0; transform: translateY(20px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mini-player-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-2); padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mini-player-name {
  font-size: 11px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px; display: flex; align-items: center; gap: 6px;
}
.mini-player-name .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #e50914; animation: surfPulse 1.4s infinite;
}
.mini-player-actions { display: flex; gap: 4px; }
.mini-player-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: 12px; cursor: pointer; padding: 4px;
  transition: color .2s;
}
.mini-player-btn:hover { color: #fff; }
.mini-player-video {
  width: 100%; aspect-ratio: 16/9; display: block;
}

/* ── Keyboard Shortcut Hint ──────────────────── */
.zap-hint {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.85); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; padding: 8px 18px;
  font-size: 12px; font-weight: 600; color: #fff;
  z-index: 800; display: none;
  animation: fadeUp .2s ease;
}
.zap-hint.show { display: flex; align-items: center; gap: 8px; }
.zap-hint kbd {
  background: rgba(255,255,255,.15); padding: 2px 6px;
  border-radius: 4px; font-size: 11px; font-weight: 800;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Enhanced Hero with Radar Pulse ──────────── */
.tv-hero { position: relative; overflow: hidden; }
.tv-hero::before {
  content: '';
  position: absolute; top: 50%; left: 70%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(229,9,20,.1) 0%, transparent 70%);
  border-radius: 50%; transform: translate(-50%, -50%);
  animation: heroRadar 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroRadar {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .5; }
  50% { transform: translate(-50%,-50%) scale(1.3); opacity: 1; }
}

/* ── Channel Card Enhancements ───────────────── */
.channel-card { position: relative; }
.channel-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity .25s;
}
.channel-card:hover::after { opacity: 1; }
.channel-card.playing::after { opacity: 1; background: var(--accent); }

/* ── Back to top (TV page) ───────────────────── */
.tv-back-top {
  position: fixed; bottom: 24px; left: 24px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  font-size: 16px; cursor: pointer; z-index: 800;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(229,9,20,.4);
  transition: transform .2s;
}
.tv-back-top.show { display: flex; }
.tv-back-top:hover { transform: scale(1.1); }

/* ── Light mode overrides ────────────────────── */
body.light-mode .tv-player-section { background: #1a2040; }
body.light-mode .tv-section { background: #f0f2f5; }
body.light-mode .tv-section-title { color: #0d1017; }
body.light-mode .channel-card { background: #fff; border-color: rgba(0,0,0,.07); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
body.light-mode .channel-name { color: #0d1017; }
body.light-mode .channel-country { color: #5a677a; }
body.light-mode .country-dropdown { background: #fff; color: #0d1017; border-color: rgba(0,0,0,.12); }
body.light-mode .ch-fav-btn { background: rgba(0,0,0,.15); }
body.light-mode .surf-strip { background: linear-gradient(180deg, rgba(229,9,20,.04) 0%, rgba(240,242,245,.5) 100%); }
body.light-mode .surf-card { background: #fff; border-color: rgba(0,0,0,.08); }
body.light-mode .now-on-badge { background: rgba(255,255,255,.9); color: #16a34a; border-color: rgba(0,0,0,.08); }
body.light-mode .floating-mini-player { border-color: rgba(0,0,0,.15); }
body.light-mode .swim-lane-track .channel-card { background: #fff; }

@media (max-width: 640px) {
  .surf-card { width: 120px; }
  .surf-card-thumb { height: 56px; }
  .floating-mini-player { width: 260px; bottom: 16px; right: 16px; }
  .zap-hint { display: none !important; }
}

@media (max-width: 768px) {
  .tv-hero { padding: 20px 16px 16px; }
  .tv-hero-title { font-size: 1.6rem; }
  .tv-hero-sub { font-size: 13px; }
  .tv-search-bar { max-width: 100%; }
  .tv-search-bar input { font-size: 14px; padding: 12px 16px; }
  .tv-player-section { margin: 0 -1px; border-radius: 0; }
  .tv-player-bar { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  .tv-player-actions { width: 100%; justify-content: flex-end; }
  .tv-pip-btn { padding: 5px 10px; font-size: 12px; }
  .tv-close-btn { padding: 5px 10px; font-size: 12px; }
  .tv-player-wrap { aspect-ratio: 16/9; }
  .tv-player-wrap video, .tv-player-wrap iframe { border-radius: 0; }
  .surf-strip { padding: 12px 12px 10px; }
  .surf-strip-title { font-size: 12px; }
  .surf-card { width: 110px; }
  .surf-card-thumb { height: 50px; }
  .surf-card-info { padding: 4px 8px 6px; }
  .surf-card-name { font-size: 10px; }
  .surf-now-on { font-size: 8px; }
  .swim-lane-title { font-size: 14px; }
  .swim-lane-icon { width: 28px; height: 28px; font-size: 12px; }
  .swim-lane-track .channel-card { min-width: 140px; }
  .channels-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .channel-card { border-radius: 10px; }
  .channel-logo-wrap { height: 80px; }
  .channel-name { font-size: 12px; }
  .channel-country { font-size: 11px; }
  .tv-back-top { width: 38px; height: 38px; font-size: 14px; bottom: 18px; left: 18px; }
  .floating-mini-player { width: 220px; bottom: 12px; right: 12px; border-radius: 10px; }
  .mini-player-name { font-size: 10px; max-width: 120px; }
  .country-picker-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .country-dropdown-wrap { min-width: 100%; max-width: 100%; }
}
@media (max-width: 380px) {
  .tv-hero-title { font-size: 1.3rem; }
  .surf-card { width: 95px; }
  .surf-card-thumb { height: 42px; }
  .channels-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .channel-logo-wrap { height: 65px; }
  .floating-mini-player { width: 180px; }
}

:fullscreen .tv-player-wrap,
:-webkit-full-screen .tv-player-wrap {
  width: 100vw; height: 100vh;
  position: fixed; top: 0; left: 0; z-index: 9999;
  background: #000;
}
:fullscreen .tv-player-wrap video,
:-webkit-full-screen .tv-player-wrap video,
:fullscreen .tv-player-wrap iframe,
:-webkit-full-screen .tv-player-wrap iframe {
  width: 100% !important; height: 100% !important;
  object-fit: contain;
}