/* CSS Custom Properties & Design Tokens */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  
  /* Color Palette - Cyber Space Theme */
  --bg-base: hsl(240, 25%, 5%);
  --bg-surface: hsla(240, 20%, 9%, 0.55);
  --bg-surface-solid: hsl(240, 20%, 9%);
  --bg-surface-hover: hsla(240, 20%, 15%, 0.75);
  --bg-sidebar: hsla(240, 25%, 6%, 0.7);
  --bg-panel: hsla(240, 20%, 10%, 0.4);
  
  --border-color: hsla(240, 100%, 100%, 0.08);
  --border-focus: hsla(184, 100%, 50%, 0.4);
  
  /* Accents */
  --cyan: hsl(184, 100%, 50%);
  --purple: hsl(276, 80%, 56%);
  --pink: hsl(328, 100%, 54%);
  --accent-gradient: linear-gradient(135deg, var(--cyan), var(--purple));

  /* TV Guide accent — follows the theme by default; flattened to grey when the
     "Theme colors in TV Guide" setting is off (body.guide-flat). */
  --guide-accent: var(--accent-gradient);
  --guide-accent-solid: var(--purple);

  /* Status Colors */
  --status-connected: hsl(142, 72%, 45%);
  --status-disconnected: hsl(350, 80%, 55%);
  --status-warning: hsl(48, 96%, 53%);
  --guide-accent-flat: linear-gradient(135deg, #3a3c46, #4c4f5b);
  
  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  
  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
}

/* Reset and Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  color: hsl(240, 100%, 98%);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Ambient glow particles */
.ambient-glow {
  position: fixed;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(120px);
  opacity: 0.08;
  z-index: -1;
}

.glow-1 {
  background: var(--cyan);
  top: -20vh;
  left: -10vw;
}

.glow-2 {
  background: var(--purple);
  bottom: -20vh;
  right: -10vw;
}

/* Text Formatting Utilities */
.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.glint-text {
  background: 
    linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0.75) 55%, transparent 65%) -200% center / 200% 100% no-repeat,
    var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0s;
}

.glint-text.animate-glint {
  animation: glint-animation 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes glint-animation {
  0% {
    background-position: -200% center, 0% center;
  }
  100% {
    background-position: 200% center, 0% center;
  }
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsla(240, 100%, 100%, 0.15);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: hsla(240, 100%, 100%, 0.3);
}

/* Buttons and Inputs */
button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: hsla(240, 20%, 5%, 0.7);
  border: 1px solid var(--border-color);
  color: hsl(240, 100%, 98%);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px hsla(184, 100%, 50%, 0.15);
}

/* Glassmorphism Panel styles */
.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* App Shell Layout */
.app-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  /* Use the SMALL viewport height so the shell always fits the visible area even
     when the mobile browser's address bar is showing. With 100vh/100dvh the shell
     can be taller than what's visible, so the page itself scrolls and the top
     app-header slides up behind the address bar (the "can't reach the menu" bug). */
  height: 100svh;
  width: 100vw;
  overflow: hidden;
}

/* Sidebar Styles */
.sidebar {
  background: var(--bg-sidebar);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-right: 1px solid var(--border-color);
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  height: 100vh;
  z-index: 10;
  width: 260px;
  min-width: 80px;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-8);
}

.brand-logo {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.brand-logo-img {
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  transition: all var(--transition-normal);
}

.btn-sidebar-toggle {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: hsla(240, 100%, 100%, 0.6);
  padding: 0;
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: var(--spacing-2);
  position: relative;
  z-index: 2;
}

.btn-sidebar-toggle:hover {
  background: hsla(184, 100%, 50%, 0.15);
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 8px hsla(184, 100%, 50%, 0.2);
}

.brand-logo.large {
  font-size: var(--text-3xl);
  justify-content: center;
  margin-bottom: var(--spacing-2);
}

.sidebar-nav {
  flex-grow: 1;
}

.sidebar-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  color: hsla(240, 100%, 100%, 0.6);
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.nav-link .nav-title {
  transition: opacity 0.25s ease, width 0.25s ease;
  opacity: 1;
}

.nav-link:hover {
  color: hsl(240, 100%, 100%);
  background: var(--bg-surface-hover);
  transform: translateX(4px);
}

.nav-link.active {
  color: hsl(240, 100%, 100%);
  background: var(--accent-gradient);
  box-shadow: 0 4px 15px -3px hsla(276, 80%, 56%, 0.3);
}

.nav-link i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Profile Selector in Sidebar */
.profile-manager {
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.profile-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.profile-select-wrapper label {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.profile-manager select {
  width: 100%;
  background: hsla(240, 20%, 5%, 0.5);
  cursor: pointer;
  text-align: center;
  text-align-last: center;
}

/* Sidebar Footer */
.sidebar-footer {
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.btn-icon-text {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  color: hsla(240, 100%, 100%, 0.5);
  transition: color var(--transition-fast);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn-icon-text:hover {
  color: hsl(240, 100%, 100%);
}

.btn-icon-text.logout:hover {
  color: var(--status-disconnected);
}

/* Main Content Area */
.main-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* App Header */
.app-header {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-8);
  border-bottom: 1px solid var(--border-color);
  background: hsla(240, 25%, 5%, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
}

#page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.search-bar-container {
  position: relative;
  width: 320px;
}

.search-bar-container input {
  width: 100%;
  padding-left: var(--spacing-12) !important;
  background: hsla(240, 20%, 5%, 0.4);
}

/* Search is only active on Live TV / TV Guide / Movies / Series. On other tabs
   it's dimmed and shows a not-allowed cursor; clicking it surfaces a message. */
.search-bar-container.search-disabled {
  opacity: 0.45;
}

.search-bar-container.search-disabled input {
  cursor: not-allowed;
}

.search-icon {
  position: absolute;
  left: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: hsla(240, 100%, 100%, 0.4);
  pointer-events: none;
}

/* FAQ button in the header — styled like a chip so it sits naturally next to
   the status chip and avatar. */
.header-faq-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid var(--border-color);
  background: hsla(240, 20%, 5%, 0.4);
  color: hsla(240, 100%, 100%, 0.75);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.header-faq-btn:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}
.header-faq-btn i, .header-faq-btn svg {
  width: 14px;
  height: 14px;
}
/* Upgrade shortcut next to it — keep it compact */
.header-upgrade-btn {
  padding: var(--spacing-2) var(--spacing-3) !important;
  font-size: var(--text-xs) !important;
  white-space: nowrap;
}
.header-upgrade-btn i, .header-upgrade-btn svg {
  width: 14px;
  height: 14px;
}

/* Sidebar FAQ button: mobile-only */
.sidebar-faq-btn { display: none !important; }

/* On narrow screens: hide header FAQ, show sidebar FAQ, hide upgrade label */
@media (max-width: 768px) {
  .header-faq-btn { display: none !important; }
  .sidebar-faq-btn { display: flex !important; }
  .header-upgrade-label { display: none; }
}

/* Status Chip */
.status-chip {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid var(--border-color);
  background: hsla(240, 20%, 5%, 0.4);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.status-chip.connected .status-dot {
  background-color: var(--status-connected);
  color: var(--status-connected);
}

.status-chip.disconnected .status-dot {
  background-color: var(--status-disconnected);
  color: var(--status-disconnected);
}

.status-chip.warning .status-dot {
  background-color: var(--status-warning);
  color: var(--status-warning);
}

/* Content Body */
.content-body {
  flex-grow: 1;
  padding: var(--spacing-8);
  overflow-y: auto;
  position: relative;
  height: calc(100vh - 70px);
  min-height: 0;
}

/* Tab Section toggles */
.tab-section {
  display: none;
}

.tab-section.active {
  display: block;
}

/* DASHBOARD VIEW */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
}

.dashboard-card {
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.dashboard-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-2);
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}

.info-item .label {
  color: hsla(240, 100%, 100%, 0.50);
}

.info-item .value {
  font-weight: 500;
  word-break: break-all;
  text-align: right;
  max-width: 70%;
}

.badge {
  background: hsla(184, 100%, 50%, 0.1);
  color: var(--cyan);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

/* Stats boxes */
.stats-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.stat-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  background: hsla(240, 100%, 100%, 0.02);
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  border: 1px solid hsla(240, 100%, 100%, 0.03);
}

.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-circle.live {
  background: hsla(184, 100%, 50%, 0.1);
  color: var(--cyan);
}

.icon-circle.movie {
  background: hsla(276, 80%, 56%, 0.1);
  color: var(--purple);
}

.icon-circle.series {
  background: hsla(328, 100%, 54%, 0.1);
  color: var(--pink);
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: var(--text-xl);
  font-weight: 700;
  font-family: var(--font-display);
}

.stat-label {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.4);
}

.dashboard-recent {
  padding: var(--spacing-6);
}

.dashboard-recent h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-4);
}

.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-4);
  align-items: start;
}

.placeholder-text {
  grid-column: 1 / -1;
  text-align: center;
  color: hsla(240, 100%, 100%, 0.35);
  font-size: var(--text-sm);
  padding: var(--spacing-8);
}

/* LIVE TV VIEW (3 Column layout) */
.live-layout {
  display: flex;
  gap: var(--spacing-2);
  height: calc(100vh - 70px - 2 * var(--spacing-8));
  overflow: hidden;
}

.sidebar-categories {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 240px;
  flex-shrink: 0;
}

.sidebar-channels {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 280px;
  flex-shrink: 0;
}

.layout-resizer {
  width: 8px;
  cursor: col-resize;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  margin: 0 -4px;
  transition: background-color var(--transition-fast);
}

.layout-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background-color: transparent;
  transition: background-color var(--transition-fast);
}

.layout-resizer:hover::after,
.layout-resizer.active::after {
  background-color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.layout-resizer:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.sidebar-categories h4, .sidebar-channels h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: hsla(240, 100%, 100%, 0.4);
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
}

.categories-search, .channels-search {
  padding: 0 var(--spacing-4) var(--spacing-3);
}

.categories-search input, .channels-search input {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-xs);
  background: hsla(240, 20%, 5%, 0.3);
}

.category-list, .channel-list {
  flex-grow: 1;
  overflow-y: auto;
  list-style: none;
  padding: 0 var(--spacing-2) var(--spacing-4);
}

.category-item {
  width: 100%;
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: hsla(240, 100%, 100%, 0.7);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-item:hover {
  background: var(--bg-surface-hover);
  color: hsl(240, 100%, 100%);
}

.category-item.active {
  background: hsla(184, 100%, 50%, 0.15);
  color: var(--cyan);
  font-weight: 500;
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* TV Guide: pinned "Favorites" section at the top of the category list. Gold
   star + a hairline divider set it apart from the provider categories below. */
.category-item.guide-fav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: 600;
  color: hsla(240, 100%, 100%, 0.9);
  margin-bottom: var(--spacing-2);
  padding-bottom: calc(var(--spacing-3) + 2px);
  border-bottom: 1px solid hsla(240, 100%, 100%, 0.08);
}
.category-item.guide-fav-item .guide-fav-item-icon {
  width: 15px;
  height: 15px;
  color: #f59e0b;
  fill: #f59e0b;
  flex-shrink: 0;
}
.category-item.guide-fav-item:hover {
  background: rgba(245, 158, 11, 0.10);
  color: #fff;
}
.category-item.guide-fav-item.active {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border-left: 2px solid #f59e0b;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.category-item.guide-fav-item.active .guide-fav-item-icon {
  color: #fbbf24;
  fill: #fbbf24;
}

/* Category item hover locks/hides */
.category-item-row {
  position: relative;
  width: 100%;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}

.category-item-row .category-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  transition: padding-right var(--transition-fast) ease, background var(--transition-fast) ease, color var(--transition-fast) ease;
}

.category-item-row:hover .category-item {
  padding-right: 60px; /* Make space for action buttons on the right */
  background: var(--bg-surface-hover);
  color: #ffffff;
}

.category-item-actions-right {
  position: absolute;
  right: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast) ease;
  z-index: 5;
}

.category-item-row:hover .category-item-actions-right {
  opacity: 1;
  pointer-events: auto;
}

.cat-action-btn {
  background: none;
  border: none;
  color: hsla(240, 100%, 100%, 0.4);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  width: 20px;
  height: 20px;
}

.cat-action-btn i,
.cat-action-btn svg {
  width: 13px !important;
  height: 13px !important;
}

.cat-action-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.cat-action-btn.active {
  color: var(--status-disconnected);
}

.category-locked-indicator {
  color: var(--status-disconnected);
  display: flex;
  align-items: center;
  font-size: var(--text-xs);
  margin-left: auto;
  width: 14px;
  height: 14px;
}

/* Hide the inline lock indicator when the row is hovered — the action button already shows it */
.category-item-row:hover .category-locked-indicator {
  display: none;
}

.category-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  text-align: left;
}

.channels-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: var(--spacing-4);
}

.count-tag {
  background: hsla(240, 100%, 100%, 0.05);
  border: 1px solid var(--border-color);
  padding: 1px var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.5);
  font-weight: 600;
}

.channel-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: var(--text-sm);
  color: hsla(240, 100%, 100%, 0.7);
  transition: all var(--transition-fast);
  margin-bottom: 2px;
}

.channel-item:hover {
  background: var(--bg-surface-hover);
  color: hsl(240, 100%, 100%);
}

.channel-item.active {
  background: hsla(276, 80%, 56%, 0.15);
  color: var(--purple);
  border-left: 3px solid var(--purple);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Channel-level lock/hide hover actions — mirrors category-item-row behaviour */
.channel-item.channel-item-row {
  position: relative;
}

.channel-item-actions {
  position: absolute;
  right: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast) ease;
  z-index: 5;
}

.channel-item.channel-item-row:hover .channel-item-actions {
  opacity: 1;
  pointer-events: auto;
}

.channel-item.channel-item-row:hover {
  padding-right: 56px;
}

.channel-locked-indicator {
  width: 12px;
  height: 12px;
  color: var(--status-disconnected);
  flex-shrink: 0;
}

.channel-item.channel-item-row:hover .channel-locked-indicator {
  display: none;
}

.channel-item img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 8px;
  object-fit: contain;
  padding: 4px;
  background: #17181d;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Fallback TV icon — tighter padding so it fills the 46px slot clearly */
.channel-item img[src="tv-fallback.png"],
#playing-channel-logo[src="tv-fallback.png"] {
  padding: 2px;
  object-fit: contain;
}

.channel-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  min-width: 0;
}

/* LIVE PLAYER CONTAINER (Col 3) */
.live-player-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 320px;
}

/* ---- Live TV "theater" mode: player fills the whole browser window ---- */
/* Engaged when a channel is selected; mirrors the full-window Movie/Series
   player. The maximize button inside still escalates to true monitor fullscreen. */
.live-player-container.theater {
  position: fixed;
  inset: 0;
  z-index: 1500;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* In theater the video owns the window; channel info + EPG + pip header hide. */
.live-player-container.theater .playing-channel-details,
.live-player-container.theater .channel-epg-guide,
.live-player-container.theater .pip-header {
  display: none;
}
.live-player-container.theater .video-wrapper {
  border-bottom: none;
}
body.live-theater-open {
  overflow: hidden;
}
/* Exit-theater (back to browse) button — only visible in theater mode. */
.live-theater-exit {
  display: none;
}
.live-player-container.theater .live-theater-exit {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 40;
  height: 40px;
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background 0.2s ease, opacity 0.4s ease;
  white-space: nowrap;
}
.live-player-container.theater .live-theater-exit:hover {
  background: rgba(0, 0, 0, 0.85);
}
/* Hide back button + controls when player is idle (no mouse movement) */
.live-player-container.video-idle .custom-video-controls:not(.hidden) {
  opacity: 0;
  pointer-events: none;
}
.live-player-container.theater.video-idle .live-theater-exit {
  opacity: 0;
  pointer-events: none;
}
.live-player-container.video-idle .video-wrapper {
  cursor: none;
}

.video-wrapper {
  flex-grow: 1;
  background: #000;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ───────────────────────── DUAL VIEW (multiview) ─────────────────────────
   Premium: watch two live channels at once. The stage holds pane A (existing
   .video-wrapper) and pane B (#dual-pane-b). Single mode = pane A fills the
   stage; dual mode = side-by-side grid (stacked on narrow screens). Visibility
   is driven by the .dual class on the stage, not the [hidden] attribute. */
.video-stage {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;
}
.video-stage > .video-wrapper { flex: 1 1 100%; min-width: 0; }

/* In-browse layout: lock the live player to a 16:9 box so the channel info +
   EPG panel below it can't share the column height and squash the video.
   `flex: 0 0 auto` makes the stage immovable — it never grows or shrinks — so
   the EPG below absorbs all the slack and scrolls (it has min-height:0 +
   overflow-y:auto). Theater, true fullscreen, dual view and PiP each manage
   their own sizing, so they're excluded here. */
#tab-live:not(.pip-mode) .live-player-container:not(.theater) .video-stage:not(.dual) {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-stage.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border-color);
}
.video-stage:not(.dual) .dual-pane { display: none; }
.video-stage.dual .dual-pane { display: flex; }
.video-stage.dual > .video-wrapper,
.video-stage.dual > .dual-pane { min-width: 0; min-height: 0; }

/* Active-pane highlight — the pane that has audio + receives the next channel. */
.video-stage.dual .video-wrapper.pane-active,
.video-stage.dual .dual-pane.pane-active {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

/* Pane B */
.dual-pane {
  position: relative;
  background: #000;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dual-pane video { width: 100%; height: 100%; object-fit: contain; }
.dual-pane-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  color: hsla(240, 100%, 100%, 0.5);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--spacing-4);
}
.dual-pane-placeholder i { width: 34px; height: 34px; }
.dual-pane.has-stream .dual-pane-placeholder { display: none; }

/* Pane B bottom bar: channel name + audio/close buttons */
.dual-pane-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 12;
}
.dual-pane:hover .dual-pane-bar,
.dual-pane.pane-active .dual-pane-bar { opacity: 1; }
.dual-pane-name {
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dual-pane-actions { display: flex; gap: var(--spacing-2); flex-shrink: 0; }
.dual-pane-btn {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.dual-pane-btn:hover { background: rgba(255, 255, 255, 0.25); }
.dual-pane-btn i { width: 16px; height: 16px; }

/* Dual-view toggle button active state in the control bar */
.dualview-toggle.active { color: var(--cyan); }

/* Stack the two panes vertically on narrow / portrait screens */
@media (max-width: 768px) {
  .video-stage.dual {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }
}

/* Pane B reuses .custom-video-controls (overlay), shown on hover / when active. */
.dual-pane-controls { gap: var(--spacing-3); }
.dual-pane-controls .dual-pane-name {
  color: #fff; font-size: var(--text-xs); font-weight: 600;
  margin-left: auto; max-width: 38%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dual-pane-controls button {
  background: none; border: none; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dual-pane-controls button i { width: 18px; height: 18px; }
.dual-pane .dual-pane-controls { opacity: 0; transition: opacity 0.3s ease; }
.dual-pane:hover .dual-pane-controls,
.dual-pane.pane-active .dual-pane-controls { opacity: 1; }
.live-player-container.video-idle .dual-pane .dual-pane-controls { opacity: 0; }

/* Active-pane outline auto-fades with the controls (idle); reappears on move/touch. */
.video-stage.dual .pane-active { transition: outline-color 0.3s ease; }
.live-player-container.video-idle .video-stage.dual .pane-active { outline-color: transparent; }

/* Stage-level idle — works in OS fullscreen too (where the container's video-idle
   is suppressed). Toggled by a timer bound to the stage itself. The outline rule
   matches the base highlight's specificity (4 classes) so it actually overrides. */
.video-stage.stage-idle .video-wrapper.pane-active,
.video-stage.stage-idle .dual-pane.pane-active { outline-color: transparent; }
.video-stage.stage-idle .dual-center-controls { opacity: 0 !important; }
.video-stage.stage-idle .dual-pane-controls { opacity: 0; }
.video-stage.stage-idle #video-controls { opacity: 0; pointer-events: none; }
.video-stage.stage-idle { cursor: none; }

/* Center controls between the two screens (dual mode, on hover). */
.dual-center-controls {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* Center cluster shows on hover in BOTH single and dual view (desktop + mobile). */
.video-stage .dual-center-controls { display: flex; }
.video-stage:hover .dual-center-controls,
.video-stage:focus-within .dual-center-controls { opacity: 1; }
.live-player-container.video-idle .dual-center-controls { opacity: 0 !important; }
/* The "exit multiview" button only makes sense while multiview is active. */
.video-stage:not(.dual) .dual-center-exit { display: none; }
.dual-center-controls button {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px;
  background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.dual-center-controls button:hover { background: var(--cyan); color: #000; }
.dual-center-controls button i { width: 20px; height: 20px; }
.dual-center-exit:hover { background: var(--status-disconnected, #ef4444) !important; color: #fff !important; }

/* Multiview + fullscreen options live in the center hover cluster (single AND
   dual), so hide them from the bottom bar — it keeps play/volume/badges only. */
.video-stage #control-dualview-btn,
.video-stage #control-theater-btn,
.video-stage #control-fullscreen-btn { display: none; }

/* Desktop (OS) fullscreen of the whole stage = both panes. Separate rules so an
   unsupported :fullscreen selector doesn't drop the others. */
.video-stage:fullscreen { width: 100vw; height: 100vh; background: #000; }
.video-stage:-webkit-full-screen { width: 100vw; height: 100vh; background: #000; }
.video-stage:fullscreen.dual { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) {
  .video-stage:fullscreen.dual { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
}

/* ---- Settings: theme swatches + toggle row ---- */
.theme-swatches { display: flex; gap: var(--spacing-3); flex-wrap: wrap; margin-top: var(--spacing-2); }
.theme-swatch {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.theme-swatch:hover { transform: scale(1.1); }
.theme-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); }

.toggle-switch {
  position: relative;
  display: inline-flex;
  width: 46px;
  height: 26px;
  flex: 0 0 46px;
  cursor: pointer;
}

.settings-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.38);
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-toggle:checked + .toggle-slider {
  border-color: color-mix(in srgb, var(--cyan) 75%, white 10%);
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 38%, transparent);
}

.settings-toggle:checked + .toggle-slider::after { transform: translateX(20px); }
.settings-toggle:focus-visible + .toggle-slider { outline: 2px solid #fff; outline-offset: 3px; }
.toggle-switch-danger .settings-toggle:checked + .toggle-slider {
  border-color: var(--status-disconnected);
  background: linear-gradient(135deg, #f97316, var(--status-disconnected));
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .toggle-slider,
  .toggle-slider::after { transition-duration: 0.01ms; }
}

/* ---- Multiview picker modal ---- */
/* Opaque backdrop so the (small) dual player doesn't peek through while choosing. */
#multiview-dialog::backdrop { background: rgba(0, 0, 0, 0.92); }
/* Flex column so the channel list scrolls and the Watch row stays pinned/visible
   (it was getting clipped at the bottom of the fixed-height dialog on mobile).
   MUST be scoped to [open]: setting display on a <dialog> while it's closed
   strands it in the top layer, leaving an invisible backdrop that swallows
   scroll/taps on the page behind (channel list wouldn't scroll after exiting
   multiview). See the dialog display-[open] footgun note. */
#multiview-dialog[open] { display: flex; flex-direction: column; }
.multiview-modal-body { display: flex; flex-direction: column; gap: var(--spacing-4); flex: 1; min-height: 0; }
.multiview-actions { display: flex; gap: var(--spacing-3); flex-shrink: 0; }
.multiview-title { margin: 0; }
.multiview-sub { margin: 0; color: hsla(240, 100%, 100%, 0.6); font-size: var(--text-sm); }
/* minmax(0,1fr) so a long channel name can't expand one box wider than the other;
   stretch keeps both boxes the same height. */
.multiview-slots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: var(--spacing-4); }
.mv-slot {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2);
  padding: var(--spacing-4);
  border: 2px solid var(--border-color); border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03); cursor: pointer; color: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.mv-slot.active { border-color: var(--cyan); background: rgba(0, 240, 255, 0.08); }
.mv-slot-tag { font-size: var(--text-xs); color: hsla(240, 100%, 100%, 0.5); text-transform: uppercase; letter-spacing: 0.04em; }
.mv-slot-logo { width: 64px; height: 64px; object-fit: contain; background: #000; border-radius: 8px; }
.mv-slot-name { font-size: var(--text-sm); font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mv-channel-search { width: 100%; }
.mv-channel-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 80px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mv-channel-item {
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3); border-radius: 6px;
  cursor: pointer; color: #fff;
}
.mv-channel-item:hover { background: rgba(255, 255, 255, 0.08); }
.mv-channel-item.playing { background: rgba(0, 240, 255, 0.1); }
.mv-channel-item img { width: 34px; height: 34px; object-fit: contain; background: #000; border-radius: 6px; flex-shrink: 0; }
.mv-channel-info { display: flex; flex-direction: column; min-width: 0; }
.mv-channel-name { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-channel-program {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Multiview category picker */
.mv-category-item {
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3); border-radius: 6px;
  cursor: pointer; color: #fff; transition: background 0.15s;
}
.mv-category-item:hover { background: rgba(255,255,255,0.08); }
.mv-cat-name { flex: 1; font-size: var(--text-sm); font-weight: 500; }
.mv-cat-count { font-size: var(--text-xs); color: hsla(240,100%,100%,0.45); min-width: 28px; text-align: right; }
.mv-cat-arrow { width: 14px; height: 14px; color: hsla(240,100%,100%,0.35); flex-shrink: 0; }
.mv-back-item {
  display: flex; align-items: center; gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3); border-radius: 6px;
  cursor: pointer; color: var(--cyan); font-size: var(--text-sm); font-weight: 600;
  border-bottom: 1px solid var(--border-color); margin-bottom: var(--spacing-1);
  transition: background 0.15s;
}
.mv-back-item:hover { background: rgba(0,240,255,0.06); }
.mv-back-item [data-lucide] { width: 14px; height: 14px; }

/* Responsive: keep the live control bar from overflowing at smaller widths. */
@media (max-width: 1100px) {
  .custom-video-controls { flex-wrap: wrap; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); }
}
@media (max-width: 600px) {
  .multiview-slots { gap: var(--spacing-2); }
  .mv-slot-logo { width: 48px; height: 48px; }
}

/* Idle / no-channel cover — branded logo shown before any channel is picked */
.live-idle-cover {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(120, 80, 255, 0.10) 0%, transparent 60%),
    linear-gradient(160deg, #14121d 0%, #0a0910 60%, #060509 100%);
}
.live-idle-cover[hidden] { display: none; }
.live-idle-logo {
  width: clamp(140px, 32%, 280px);
  max-width: 60%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(120, 80, 255, 0.45));
  animation: idleLogoPulse 3.5s ease-in-out infinite;
}
@keyframes idleLogoPulse {
  0%, 100% { opacity: 0.92; filter: drop-shadow(0 0 22px rgba(120, 80, 255, 0.35)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 36px rgba(120, 80, 255, 0.6)); }
}

/* Startup cover — branded "Loading Channel" screen during stream start */
.stream-startup-cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(120, 80, 255, 0.12) 0%, transparent 60%),
    linear-gradient(160deg, #14121d 0%, #0a0910 60%, #060509 100%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.stream-startup-cover.active {
  opacity: 1;
  pointer-events: all;
}
.loading-channel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-6);
  text-align: center;
}
/* Hide loading content when the offline overlay takes over */
.stream-startup-cover.offline .loading-channel-content { display: none; }
.loading-channel-logo {
  width: clamp(120px, 26%, 230px);
  max-width: 55%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(120, 80, 255, 0.5));
}
.loading-channel-label {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.loading-channel-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(170, 130, 255, 0.95);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-channel-name {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsla(240, 100%, 100%, 0.85);
  max-width: 80%;
}
.loading-channel-name:empty { display: none; }

/* Channel offline state */
.channel-offline-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  color: #fff;
  text-align: center;
  padding: var(--spacing-6);
}
.channel-offline-overlay[hidden] { display: none; }
.channel-offline-overlay .offline-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
}
.channel-offline-overlay .offline-icon i { width: 28px; height: 28px; }
.channel-offline-overlay .offline-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}
.channel-offline-overlay .offline-hint {
  font-size: var(--text-sm);
  color: hsla(240, 100%, 100%, 0.5);
  margin: 0;
  max-width: 240px;
}

/* Universal Search Results Tab */
.search-results-page {
  padding: var(--spacing-6);
  max-width: 1400px;
  margin: 0 auto;
}
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}
.search-results-header h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
}
.search-result-section {
  margin-bottom: var(--spacing-8);
}
.search-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--cyan);
  margin: 0 0 var(--spacing-4) 0;
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.search-channel-list {
  max-height: 320px;
  overflow-y: auto;
}
.search-vod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-4);
}

/* Custom Video Controls */
.custom-video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-6);
  opacity: 1;
  z-index: 5;
  transition: opacity 0.4s ease;
}

/* Live TV native fullscreen: fade controls out after idle, hide cursor.
   Covers both single-pane wrapper fullscreen AND full-stage fullscreen. */
.video-wrapper:fullscreen .custom-video-controls,
.video-wrapper:-webkit-full-screen .custom-video-controls,
.video-stage:fullscreen .custom-video-controls,
.video-stage:-webkit-full-screen .custom-video-controls {
  transition: opacity 0.4s ease;
}
.video-wrapper:fullscreen .custom-video-controls.fs-idle,
.video-wrapper:-webkit-full-screen .custom-video-controls.fs-idle,
.video-stage:fullscreen .custom-video-controls.fs-idle,
.video-stage:-webkit-full-screen .custom-video-controls.fs-idle {
  opacity: 0;
  pointer-events: none;
}
.video-wrapper:fullscreen.cursor-hidden,
.video-wrapper:-webkit-full-screen.cursor-hidden,
.video-stage:fullscreen.cursor-hidden,
.video-stage:-webkit-full-screen.cursor-hidden {
  cursor: none;
}

.custom-video-controls button {
  color: #fff;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.custom-video-controls button:hover {
  color: var(--cyan);
  transform: scale(1.1);
}

/* Live quality badges (resolution + frame rate) in the player control bar.
   margin-left:auto pushes them to the right, just before the fullscreen icons. */
.player-stat-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-left: auto;
}

.player-stat-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  white-space: nowrap;
  text-transform: uppercase;
}

.player-stat-badge[hidden] { display: none; }

.progress-bar-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--text-xs);
  color: #ccc;
}

.progress-bar-container input[type="range"] {
  flex-grow: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  outline: none;
  cursor: pointer;
}

.progress-bar-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 5px var(--cyan);
}

.volume-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.volume-container input[type="range"] {
  width: 80px;
  height: 4px;
  cursor: pointer;
}

.playing-channel-details {
  padding: var(--spacing-4) var(--spacing-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  background: hsla(240, 20%, 8%, 0.4);
  /* Query against this row's own width (= the player column, which shrinks as the
     sidebars take space) so the Record button can collapse before it crowds. */
  container-type: inline-size;
  container-name: playing-details;
}

.channel-main-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  min-width: 0; /* let the channel name ellipsize instead of pushing the buttons */
}

.channel-main-info > div {
  min-width: 0;
}

.channel-main-info img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 8px;
  object-fit: contain;
  padding: 5px;
  background: #17181d;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.channel-main-info h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep the Record button from outgrowing a narrow player column: drop the
   "Record Program" / "Stop Recording" label and shrink to an icon-only button
   (like the favourites star) once the row gets tight. */
#live-record-btn {
  flex-shrink: 0;
}

@container playing-details (max-width: 520px) {
  #live-record-btn .live-record-label {
    display: none;
  }
  #live-record-btn {
    padding: var(--spacing-3);
  }
}

.category-tag {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.4);
}

.btn-icon-round {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: hsla(240, 100%, 100%, 0.04);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsla(240, 100%, 100%, 0.5);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

.btn-icon-round:hover {
  background: hsla(240, 100%, 100%, 0.1);
  color: #fff;
}

.btn-icon-round.active {
  background: hsla(48, 96%, 53%, 0.15);
  color: var(--status-warning);
  border-color: var(--status-warning);
}

/* MOVIES / SERIES VIEW (Categories + Grid) */
.movies-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--spacing-6);
  height: calc(100vh - 70px - 2 * var(--spacing-8));
  overflow: hidden;
}

.vod-grid-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
  flex-shrink: 0;
}

.grid-header h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.grid-body {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-6);
  padding-bottom: var(--spacing-8);
}

/* Card item for VOD (Movies & Series) */
.vod-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  transition: transform var(--transition-normal);
  width: 100%;
  position: relative;
}

.vod-card:hover {
  transform: translateY(-5px);
}

.vod-poster-wrapper {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: hsla(240, 100%, 100%, 0.02);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  position: relative;
}

.vod-poster-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.vod-card:hover .vod-poster-wrapper img {
  transform: scale(1.05);
}

.vod-card-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  backdrop-filter: blur(2px);
}

.vod-card:hover .vod-card-play-overlay {
  opacity: 1;
}

.vod-play-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  box-shadow: 0 0 15px var(--cyan);
  transform: scale(0.8);
  transition: transform var(--transition-normal);
}

.vod-card:hover .vod-play-circle {
  transform: scale(1);
}

/* ── Recently-viewed delete button (shown on card hover) ─────────────────── */
.recent-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  z-index: 12;
}
.recent-delete-btn svg {
  width: 13px;
  height: 13px;
  pointer-events: none;
}
.vod-card:hover .recent-delete-btn {
  opacity: 1;
}
.recent-delete-btn:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Favourite button — top-left corner of recent-viewed cards */
.recent-fav-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), color var(--transition-fast);
  z-index: 12;
}
.recent-fav-btn svg {
  width: 13px;
  height: 13px;
  pointer-events: none;
  transition: fill var(--transition-fast);
}
.vod-card:hover .recent-fav-btn {
  opacity: 1;
}
/* Already favourited — always visible with a gold filled star */
.recent-fav-btn.active {
  opacity: 1;
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
}
.recent-fav-btn.active svg {
  fill: #f59e0b;
}
/* Hover: not yet favourited — hint gold */
.recent-fav-btn:not(.active):hover {
  background: rgba(245, 158, 11, 0.85);
  border-color: rgba(245, 158, 11, 0.5);
}
/* Hover: already favourited — hint red to signal "remove" */
.recent-fav-btn.active:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fff;
}
.recent-fav-btn.active:hover svg {
  fill: #fff;
}

.vod-rating {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--border-color);
  padding: 2px var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--status-warning);
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 2;
}

.vod-info {
  display: flex;
  flex-direction: column;
}

.vod-title {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vod-meta {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.4);
  display: flex;
  justify-content: space-between;
  margin-top: 1px;
}

/* FAVORITES VIEW */
.favorites-sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.fav-block {
  padding: var(--spacing-6);
}

.fav-block .section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-3);
}

.fav-block .section-title h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.fav-block .section-title i {
  color: var(--cyan);
}

.favorites-list-inline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--spacing-4);
  list-style: none;
}

.favorites-list-inline .channel-item img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 8px;
  object-fit: contain;
  padding: 4px;
  background: #17181d;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Mobile favorites: the 380px min-width grid overflows narrow screens and
   breaks the layout — collapse to a single column and tighten spacing so the
   channel rows, movie and series cards fit cleanly. */
@media (max-width: 768px) {
  .favorites-sections { gap: var(--spacing-4); }

  .fav-block { padding: var(--spacing-4); }

  .fav-block .section-title { margin-bottom: var(--spacing-4); }

  .fav-block .section-title h3 { font-size: var(--text-base); }

  .favorites-list-inline {
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
  }

  /* Keep the channel row from overflowing: let the text column shrink. */
  .favorites-list-inline .channel-item { min-width: 0; }
  .favorites-list-inline .channel-item .channel-item-info { min-width: 0; }
  .favorites-list-inline .channel-item img {
    width: 48px; height: 48px; flex-basis: 48px;
  }

  #fav-movies-list.recent-grid,
  #fav-series-list.recent-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-3);
  }
}

/* DIALOGS / GLASS MODALS & Starting Animations */
dialog.glass-modal {
  margin: auto;
  border: none;
  background: none;
  color: #fff;
  outline: none;
  max-height: 90vh;
  width: 480px;
  padding: 0; /* Reset browser-default dialog padding so card ring aligns with dialog edge */
  overflow: auto;
}

dialog.glass-modal.large-modal {
  width: 900px;
  max-width: 95vw;
}

.login-card, .settings-card, .detail-content {
  background: rgba(18, 18, 30, 0.7);
  backdrop-filter: blur(25px) saturate(160%);
  -webkit-backdrop-filter: blur(25px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--spacing-8);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}

.detail-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

/* ── Thin site-color gradient outline shared by every modal + notification ──
   A masked ::before paints only a 1.5px ring at the card edge, so the glass
   background underneath is fully preserved. Uses the brand cyan→purple→pink. */
.login-card,
.settings-card,
.detail-content,
.checkout-card,
.external-player-card,
.toast-item {
  position: relative;
}

.login-card::before,
.settings-card::before,
.detail-content::before,
.checkout-card::before,
.external-player-card::before,
.toast-item::before,
dialog.legal-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--cyan), var(--purple) 55%, var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* The legal modals scroll their .legal-content, so an inset ::before on that card
   would scroll up into the middle of the text. Put the ring on the non-scrolling
   dialog wrapper instead — border-radius can't inherit there, so set it explicitly. */
dialog.legal-modal::before {
  border-radius: var(--radius-lg);
}

/* The scroller inside these dialogs is dialog-sized, so its scrollbar runs the
   full straight edge and pokes past the rounded corners. Round + clip the
   dialog itself so the scrollbar is cut to the same rounded shape. */
#settings-dialog,
dialog.legal-modal {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Same scrollbar treatment for the legal/FAQ modals as the settings card:
   thumb inset from the edge, track stopped short of the curved corners. */
.legal-content { scrollbar-width: thin; }
.legal-content::-webkit-scrollbar { width: 10px; }
.legal-content::-webkit-scrollbar-track { margin: 24px 0; }
.legal-content::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}

/* The settings modal is long and scrolled at the DIALOG level, which left the
   card's ring drifting off-screen. Scroll inside the card instead and move the
   ring onto the non-scrolling dialog so it stays pinned to the visible edges. */
#settings-dialog .settings-card {
  max-height: 85vh;
  overflow-y: auto;
}
#settings-dialog .settings-card::before { content: none; }
/* Keep the card's scrollbar INSIDE the rounded gradient ring: shorten the
   track so the thumb never crosses the curved corners, and inset the thumb
   from the right edge so it doesn't sit on top of (or outside) the ring. */
#settings-dialog .settings-card { scrollbar-width: thin; }
#settings-dialog .settings-card::-webkit-scrollbar { width: 10px; }
#settings-dialog .settings-card::-webkit-scrollbar-track { margin: 24px 0; }
#settings-dialog .settings-card::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
#settings-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--cyan), var(--purple) 55%, var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* Close Button on dialogs — well inside the gradient ring on every modal.
   30px inset means the button's edge (18px radius) has 12px clearance from
   the ring regardless of whether the ring is a ::before mask or a border-box
   gradient (which adds a 2px border, still leaving 10px clearance). */
.close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsla(240, 100%, 100%, 0.6);
  z-index: 10;
  transition: all var(--transition-fast);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Starting style animations for dialog top-layer */
dialog[open] {
  opacity: 1;
  transform: scale(1);
  @starting-style {
    opacity: 0;
    transform: scale(0.95);
  }
}

dialog {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete, background-color 0.3s ease-out;
}

dialog[open]::backdrop {
  background-color: rgba(4, 4, 8, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  @starting-style {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}

/* Form Groups and Buttons */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
}

.form-group label {
  font-size: var(--text-sm);
  color: hsla(240, 100%, 100%, 0.6);
  font-weight: 500;
}

.help-text {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.35);
  margin-top: 1px;
}

/* Settings → Content & Guide "Last updated" line: keep the date AND time on a
   single line, truncating with an ellipsis rather than wrapping the time below. */
.refresh-time {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-with-button {
  display: flex;
  gap: var(--spacing-2);
}

.input-with-button input {
  flex: 1;
  min-width: 0;
}

.input-with-button .btn {
  flex-shrink: 0;
}

.login-error-msg {
  color: var(--status-disconnected);
  font-size: var(--text-sm);
  margin-bottom: var(--spacing-6);
  text-align: center;
  font-weight: 500;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  display: none;
}

.login-error-msg:not(:empty) {
  display: block;
}

/* .btn's display:inline-flex overrides the browser's [hidden] handling, so
   enforce it: a hidden button must actually disappear (e.g. "Remind Me" on
   programmes that are already on or have ended). */
.btn[hidden] {
  display: none !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-md);
  font-weight: 600;
  white-space: nowrap; /* button labels ("Watch Now") never wrap to two lines */
  transition: all var(--transition-fast);
  text-align: center;
  text-decoration: none;
}

.btn-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-xs);
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 4px 20px -5px hsla(276, 80%, 56%, 0.4);
}

.btn-primary:hover {
  box-shadow: 0 4px 25px -2px hsla(276, 80%, 56%, 0.5);
  transform: translateY(-2px);
}

.btn-secondary {
  background: hsla(240, 100%, 100%, 0.05);
  border: 1px solid var(--border-color);
  color: #fff;
}

.btn-secondary:hover {
  background: hsla(240, 100%, 100%, 0.1);
}

.btn-danger {
  background: hsla(350, 80%, 55%, 0.15);
  color: var(--status-disconnected);
  border: 1px solid hsla(350, 80%, 55%, 0.3);
}

.btn-danger:hover {
  background: var(--status-disconnected);
  color: #fff;
}

/* Movie/Series Detail Overlay Structure */
.detail-banner {
  height: 320px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.detail-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, var(--bg-surface-solid), rgba(18, 18, 30, 0.4));
}

.detail-banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-8);
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-6);
}

.detail-poster {
  width: 150px;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-color);
  object-fit: cover;
  background: #111;
  flex-shrink: 0;
  margin-bottom: -40px;
}

.detail-header-text {
  flex-grow: 1;
}

.detail-header-text h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: var(--spacing-2);
}

.detail-meta-list {
  display: flex;
  gap: var(--spacing-4);
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.5);
  align-items: center;
}

.detail-body {
  padding: var(--spacing-8);
  padding-top: var(--spacing-12);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-8);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.detail-plot {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: hsla(240, 100%, 100%, 0.75);
  /* Grid track's implicit min-width:auto would let the wide Cast & Crew row
     expand this column and push the Watch/Favorite sidebar off-screen. Pinning
     to 0 lets the row's own overflow-x:auto scroll instead. */
  min-width: 0;
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Episodes layout in Series */
.series-episodes-section {
  grid-column: 1 / -1;
  margin-top: var(--spacing-4);
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-6);
}

.season-selector-bar {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-3);
  overflow-x: auto;
}

.season-btn {
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: hsla(240, 100%, 100%, 0.6);
  transition: all var(--transition-fast);
}

.season-btn:hover {
  color: #fff;
  background: hsla(240, 100%, 100%, 0.05);
}

.season-btn.active {
  color: var(--cyan);
  background: hsla(184, 100%, 50%, 0.1);
  font-weight: 600;
}

.episode-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  list-style: none;
}

.episode-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--spacing-4);
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  background: hsla(240, 100%, 100%, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.episode-item:hover {
  background: var(--bg-surface-hover);
  border-color: hsla(184, 100%, 50%, 0.2);
}

.episode-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cyan);
  font-size: var(--text-sm);
}

.episode-name {
  font-size: var(--text-sm);
  font-weight: 500;
}

/* FULLSCREEN OVERLAY VIDEO PLAYER (Next level client experience) */
.fullscreen-player-modal {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  border: none;
  background: #000;
  color: #fff;
  outline: none;
}

.fs-video-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Close overlay btn */
.close-btn.overlay-close {
  top: var(--spacing-6);
  left: var(--spacing-6);
  right: auto;
  border-radius: var(--radius-md);
  width: auto;
  padding: 0 var(--spacing-4);
  display: inline-flex;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background 0.2s ease, transform 0.2s ease;
}

/* Remux loading overlay — shown while FFmpeg produces the first HLS segment */
.remux-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.remux-loading-overlay[hidden] { display: none; }

/* Full-screen auth loading overlay — bridges the gap between splash-site login
   and the dashboard so the marketing splash never flashes during JWT verify. */
.auth-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg-base, #0a0a12);
  color: #fff;
}
.auth-loading-overlay[hidden] { display: none; }

.auth-spinner-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-spinner-wrap .remux-spinner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-spinner-logo {
  position: relative;
  width: 28px;
  height: 28px;
  object-fit: contain;
  z-index: 1;
}

.remux-spinner {
  width: 52px;
  height: 52px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: var(--cyan, #00f0ff);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.remux-label {
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}
.remux-hint {
  font-size: var(--text-xs, 0.75rem);
  color: hsla(240,100%,100%,0.5);
  margin: 0;
}

/* External-player (VLC) fallback panel — shown when in-browser playback is impossible */
.external-player-overlay {
  position: absolute;
  inset: 0;
  z-index: 11; /* above the remux spinner overlay (10) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
}
.external-player-overlay[hidden] { display: none; }

.external-player-card {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  /* Rounded corners + breathing room so the gradient ring matches the rest of
     the site and the text never touches the border. */
  border-radius: var(--radius-lg);
  padding: var(--spacing-8);
  background: rgba(18, 18, 30, 0.85);
}
.external-player-card .ext-icon {
  width: 42px;
  height: 42px;
  color: var(--cyan, #00f0ff);
}
.external-player-card .ext-icon.error-icon {
  color: #ef4444;
}
.ext-title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.02em;
}
.ext-hint {
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.6;
  color: hsla(240, 100%, 100%, 0.65);
  margin: 0;
}
.ext-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.ext-footnote {
  font-size: var(--text-xs, 0.75rem);
  color: hsla(240, 100%, 100%, 0.4);
  margin: 0;
}

/* Fullscreen player custom control bar */
.fs-controls-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
  padding: var(--spacing-8) var(--spacing-12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Show controls state */
.fullscreen-player-modal.show-controls .fs-controls-overlay,
.fullscreen-player-modal.show-controls .close-btn.overlay-close {
  opacity: 1;
  pointer-events: auto;
}

.fullscreen-player-modal:not(.show-controls) {
  cursor: none;
}

/* Mobile native-controls mode: hide the custom control bar (the browser's own
   video controls handle play/seek/volume) but keep the Back to Browse button. */
.fullscreen-player-modal.native-controls .fs-controls-overlay {
  display: none !important;
}
.fullscreen-player-modal.native-controls .close-btn.overlay-close {
  opacity: 1;
  pointer-events: auto;
}

.fs-title-area {
  margin-bottom: var(--spacing-2);
}

.fs-title-area h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.fs-title-area p {
  font-size: var(--text-xs);
  color: #ccc;
}

.fs-controls-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.fs-controls-row.seek-row {
  gap: var(--spacing-4);
  font-size: var(--text-sm);
}

.fs-controls-row.seek-row input[type="range"] {
  flex-grow: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.fs-controls-row.seek-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.fs-controls-row.actions-row {
  justify-content: space-between;
}

.actions-left, .actions-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
}

.control-btn {
  color: #fff;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.control-btn:hover {
  color: var(--cyan);
  transform: scale(1.1);
}

.control-btn i {
  width: 24px;
  height: 24px;
}

.fs-volume-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.fs-volume-control input[type="range"] {
  width: 100px;
  height: 4px;
}

/* TV Guide (EPG) Styling */
.channel-epg-guide {
  flex-grow: 1;
  min-height: 0; /* allow the panel to shrink + scroll instead of squashing the 16:9 video above */
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4) var(--spacing-6);
  background: hsla(240, 20%, 6%, 0.3);
  overflow-y: auto;
  border-top: 1px solid var(--border-color);
  gap: var(--spacing-4);
}

.guide-header-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  color: hsla(240, 100%, 100%, 0.4);
  letter-spacing: 0.05rem;
}

.epg-active-show {
  background: hsla(240, 100%, 100%, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.epg-now-playing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge-now {
  background: hsla(184, 100%, 50%, 0.15) !important;
  color: var(--cyan) !important;
}

.epg-time {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.5);
  font-family: var(--font-display);
}

.epg-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff;
}

.epg-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: var(--spacing-1) 0;
}

.epg-progress-fill {
  height: 100%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  transition: width 0.5s ease;
}

.epg-description {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: hsla(240, 100%, 100%, 0.6);
}

.epg-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex-grow: 1;
}

.epg-upcoming-list h5 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: hsla(240, 100%, 100%, 0.4);
  letter-spacing: 0.05rem;
}

.epg-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  list-style: none;
  overflow-y: auto;
  max-height: 180px;
}

.epg-timeline-item {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  background: hsla(240, 100%, 100%, 0.01);
  border-left: 2px solid var(--purple);
  font-size: var(--text-xs);
}

.epg-timeline-time {
  font-family: var(--font-display);
  color: var(--purple);
  font-weight: 600;
  flex-shrink: 0;
  width: 85px;
}

.epg-timeline-title {
  color: hsla(240, 100%, 100%, 0.85);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Drag and Drop Channel Arranger styling */
.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: hsla(240, 100%, 100%, 0.2);
  padding: var(--spacing-1);
  transition: color var(--transition-fast);
}

.channel-item:hover .drag-handle {
  color: hsla(240, 100%, 100%, 0.5);
}

.drag-handle:hover {
  color: var(--cyan) !important;
}

.channel-item.dragging {
  opacity: 0.4;
  border: 1px dashed var(--cyan) !important;
  background: hsla(184, 100%, 50%, 0.03) !important;
}

.channel-item.dragover {
  border-top: 2px solid var(--cyan) !important;
  border-radius: 0 !important;
}

.vod-card-draggable {
  cursor: grab;
}
.vod-card-draggable.dragging {
  opacity: 0.4;
  outline: 2px dashed var(--cyan);
  outline-offset: 2px;
}
.vod-card-draggable.drag-over {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Profiles Selection Grid inside Login Card */
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--spacing-4);
  margin-top: var(--spacing-6);
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}

.profile-card {
  background: hsla(240, 100%, 100%, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  position: relative;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.profile-card:hover {
  background: hsla(184, 100%, 50%, 0.05);
  border-color: var(--cyan);
  box-shadow: 0 0 12px hsla(184, 100%, 50%, 0.15);
  transform: translateY(-2px);
}

.profile-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.profile-card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.profile-card-host {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.35);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-top: -4px;
}

.profile-card-delete {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: hsla(240, 100%, 100%, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 5;
  border: none;
  outline: none;
  cursor: pointer;
  pointer-events: auto !important;
}

.profile-card-delete * {
  pointer-events: none !important;
}

.profile-card-delete:hover {
  background: hsla(350, 80%, 55%, 0.2);
  color: var(--status-disconnected);
}

.form-actions-row {
  display: flex;
  gap: var(--spacing-3);
}

.btn-grow {
  flex-grow: 1;
}

.text-center {
  text-align: center;
}

/* TV Guide Grid Container and Layout */
/* "Theme colors in TV Guide" = OFF → guide accents go flat grey (the rest of
   the app keeps its accent theme). */
body.guide-flat {
  --guide-accent: var(--guide-accent-flat);
  --guide-accent-solid: #565a68;
}

.tv-guide-layout {
  --guide-channel-width: 260px;
  --guide-timeline-width: 5760px;
  --guide-half-hour-width: 120px;
  --guide-day-height: 62px;
  --guide-time-height: 58px;
  --guide-headline-height: 44px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--spacing-3);
  height: calc(100vh - 70px - 2 * var(--spacing-8));
  min-height: 560px;
  overflow: hidden;
}

.guide-filter-panel {
  border-radius: 8px;
  background: #202126;
  border-color: rgba(255, 255, 255, 0.08);
}

.tv-guide-grid-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-base);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
}

/* Headline strip: "{Category} ({count})  •  {Mon, Jun 29, 8:11 AM}" */
.guide-grid-headline {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-shrink: 0;
  height: var(--guide-headline-height);
  padding: 0 var(--spacing-5);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: var(--bg-base);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.guide-headline-cat {
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-headline-sep {
  color: var(--cyan);
  opacity: 0.85;
}

.guide-headline-time {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 700;
  white-space: nowrap;
}

.guide-days-bar {
  display: flex;
  align-items: stretch;
  min-height: var(--guide-day-height);
  flex-shrink: 0;
  background: #202126;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.guide-day-nav {
  width: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
  background: #202126;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.guide-day-nav.next {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.guide-day-nav:hover,
.guide-day-nav:focus-visible {
  color: #ffffff;
  background: #2c2d33;
  outline: none;
}

.guide-day-nav i {
  width: 22px;
  height: 22px;
}

.guide-days-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(130px, 1fr);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.guide-days-list::-webkit-scrollbar {
  display: none;
}

.guide-day-item {
  min-width: 130px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-4);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.64);
  white-space: nowrap;
  background: #202126;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.guide-day-item:hover,
.guide-day-item:focus-visible {
  color: #ffffff;
  background: #2a2b31;
  outline: none;
}

.guide-day-item.active {
  position: relative;
  color: #ffffff;
  background: var(--guide-accent);
  border-right-color: rgba(255, 255, 255, 0.08);
}

/* Downward pointer beneath the active day tab */
.guide-day-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 7px solid var(--guide-accent-solid);
  z-index: 2;
}

/* Time-row navigation arrows (overlay, fixed at NOW edge and far right) */
.timeline-nav {
  position: absolute;
  top: calc(var(--guide-headline-height) + var(--guide-day-height));
  height: var(--guide-time-height);
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  background: #4f5668;
  z-index: 18;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.timeline-nav.prev {
  left: var(--guide-channel-width);
  border-right: 1px solid rgba(0, 0, 0, 0.22);
}

.timeline-nav.next {
  right: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.22);
}

.timeline-nav:hover,
.timeline-nav:focus-visible {
  background: #5d6578;
  color: #ffffff;
  outline: none;
}

.timeline-nav i {
  width: 22px;
  height: 22px;
}

.epg-grid-scroll-area {
  flex: 1;
  overflow: auto;
  position: relative;
  background: var(--bg-base);
  overscroll-behavior: contain;
}

.epg-grid-scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.epg-grid-scroll-area::-webkit-scrollbar-track {
  background: #202126;
}

.epg-grid-scroll-area::-webkit-scrollbar-thumb {
  background: #4a5060;
  border: 2px solid #202126;
  border-radius: 8px;
}

.epg-grid-now-line {
  position: absolute;
  top: var(--guide-time-height);
  width: 3px;
  background: #f4f7fb;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.58);
  /* Must stay BELOW the sticky channel column (z-index 14) so the line slides
     under it instead of drawing across the channel names. */
  z-index: 13;
  pointer-events: none;
}

/* Lighter-grey tint over elapsed/past time, left of the NOW line */
.epg-grid-past-overlay {
  position: absolute;
  top: var(--guide-time-height);
  background: rgba(220, 226, 240, 0.13);
  z-index: 12;
  pointer-events: none;
}

/* "NOW" pill badge on the white now-line. position:sticky pins it just below the
   ruler so it stays visible no matter how far the user scrolls down (it still
   tracks the line horizontally, since only `top` is set). Follows the theme
   accent (--guide-accent); grey when guide colors are off. */
.epg-now-badge {
  position: sticky;
  top: calc(var(--guide-time-height) + 3px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: var(--guide-accent);
  border-radius: 7px;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  z-index: 1;
}

.epg-grid-timeline-header {
  display: flex;
  position: sticky;
  top: 0;
  min-width: calc(var(--guide-channel-width) + var(--guide-timeline-width));
  height: var(--guide-time-height);
  background: #555c6d;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  z-index: 16;
}

.sticky-header-corner {
  width: var(--guide-channel-width);
  min-width: var(--guide-channel-width);
  position: sticky;
  left: 0;
  z-index: 17;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.9);
  background: #4f5668;
  border-right: 1px solid rgba(0, 0, 0, 0.22);
}

.timeline-hours-wrapper {
  display: flex;
  position: relative;
  width: var(--guide-timeline-width);
  min-width: var(--guide-timeline-width);
  flex: 0 0 var(--guide-timeline-width);
}

.timeline-hour-col {
  width: var(--guide-half-hour-width);
  min-width: var(--guide-half-hour-width);
  flex: 0 0 var(--guide-half-hour-width);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(0, 0, 0, 0.16);
}

.epg-grid-rows {
  display: flex;
  flex-direction: column;
  min-width: calc(var(--guide-channel-width) + var(--guide-timeline-width));
}

.epg-row {
  display: flex;
  min-width: calc(var(--guide-channel-width) + var(--guide-timeline-width));
  height: 86px;
  background: transparent;
  transition: background var(--transition-fast);
}

@media (hover: hover) {
  .epg-row:hover {
    background: rgba(255, 255, 255, 0.022);
  }
}

/* Sticky channel column: an opaque near-black container so the program pills
   slide cleanly beneath it; the visible rounded "pill" floats inside with a gap. */
.epg-row-header {
  width: var(--guide-channel-width);
  min-width: var(--guide-channel-width);
  position: sticky;
  left: 0;
  z-index: 14;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 8px;
  text-align: left;
  background: var(--bg-base);
}

.epg-row-header:focus-visible {
  outline: none;
}

.epg-row-pill {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: 0 12px;
  border-radius: 6px;
  /* Theme gradient (matches sidebar focused buttons; grey when guide colors off),
     softened by a left→right dark overlay so the pills aren't so bright and fade
     toward the row background on the right. Overlay sits on top of
     var(--guide-accent) so it still follows the theme + flat mode. */
  background:
    linear-gradient(90deg, rgba(8, 9, 16, 0.12) 0%, rgba(8, 9, 16, 0.34) 50%, rgba(8, 9, 16, 0.76) 100%),
    var(--guide-accent);
  /* No light border: with the dark right-side overlay it read as a bright line on
     each cell's right edge. The pill now fades cleanly into the row background. */
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  transition: filter var(--transition-fast);
}

@media (hover: hover) {
  .epg-row-header:hover .epg-row-pill,
  .epg-row-header:focus-visible .epg-row-pill {
    filter: brightness(1.12);
  }
}

.epg-row-header img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
  /* Transparent — the logo sits directly on the themed pill (no dark box). */
  background: transparent;
  border: 0;
}

.epg-row-header-info {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.epg-row-header-num {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.01em;
}

.epg-row-header-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Marquee the channel name on row hover when it's clipped (set by JS, which
   measures the overflow and the duration). Inner span scrolls; outer clips. */
.epg-row-header-name.is-marquee {
  text-overflow: clip;
}
.epg-row-header-name.is-marquee .epg-name-text {
  display: inline-block;
  animation: epg-name-marquee var(--mq-dur, 4s) linear infinite alternate;
}
@keyframes epg-name-marquee {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--mq, 0)); }
}

.epg-row-programs {
  position: relative;
  flex: 0 0 var(--guide-timeline-width);
  width: var(--guide-timeline-width);
  /* visible (not hidden) so the sticky "No Information" label can track the
     horizontal scroll; program blocks are clamped to the day so nothing leaks. */
  overflow: visible;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: var(--guide-half-hour-width) 100%, 240px 100%;
}

.epg-row-status {
  /* Full-width band spanning the ENTIRE 24h timeline, shaped as a rounded pill
     to match the programme cells. The label is repeated (see app.js) and spread
     evenly, so "No Information" is readable in every screenful of the strip. */
  flex: 1 1 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: calc(100% - 16px);
  margin: 8px 6px 8px 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.025) 0 14px,
      transparent 14px 28px
    ),
    #1b1c23;
}

.epg-row-status-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.epg-empty-state {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.54);
  background: var(--bg-base);
}

.epg-empty-state i {
  width: 32px;
  height: 32px;
}

.epg-program-block {
  position: absolute;
  top: 8px;
  height: calc(100% - 16px);
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically since it's a single line */
  gap: var(--spacing-1);
  min-width: 8px;
  padding: 10px 10px;
  overflow: hidden;
  color: #ffffff;
  background: #2b2c34;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.epg-program-block:hover,
.epg-program-block:focus-visible {
  z-index: 3;
  background: #363842;
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
}

.epg-program-block:active {
  transform: scale(0.995);
}

/* Currently-airing programme = the accent cell. Follows the theme accent
   (--guide-accent); a subtle dark overlay keeps the white title readable across
   themes. Goes flat grey when guide colors are off. */
.epg-program-block.active {
  background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)), var(--guide-accent);
  border-color: var(--guide-accent-solid);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.epg-program-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

/* Inline "Live" badge trailing the title on the currently-airing programme */
.epg-program-live {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.28);
  line-height: 1.5;
}

/* Bell badge on programmes with a reminder set */
.epg-program-bell {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 13px;
  height: 13px;
  color: var(--cyan);
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.55));
  pointer-events: none;
}
.epg-program-bell svg { width: 100%; height: 100%; }

.epg-program-block.compact {
  padding: 8px 4px;
  justify-content: center;
}

.epg-program-block.compact .epg-program-title {
  font-size: 12px;
}

/* EPG hover tooltip — fast custom tooltip for program blocks */
.epg-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: rgba(14, 14, 30, 0.97);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 12px;
  max-width: 340px;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.epg-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.epg-tooltip strong {
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.epg-tooltip-time {
  color: var(--cyan);
  font-size: 11px;
}
.epg-tooltip-desc {
  color: hsla(240,100%,100%,0.55);
  font-size: 11px;
  margin-top: 2px;
}


/* Utilities */
.hidden {
  display: none !important;
}

/* Loading animations */
.loader {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: var(--cyan);
  animation: spin 1s ease-in-out infinite;
}

.loader-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
  vertical-align: middle;
}

/* "Searching live guide…" note appended to the channel list during a program search */
.program-search-note {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  font-size: var(--text-xs);
  opacity: 0.7;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Mobile menu button helper styles */
.btn-mobile-menu {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  margin-right: var(--spacing-4);
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.btn-mobile-menu:hover {
  background: var(--bg-surface-hover);
}

.btn-mobile-menu i {
  width: 24px;
  height: 24px;
  display: block;
}

/* Sidebar backdrop overlay for mobile */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .live-layout {
    grid-template-columns: 200px 220px 1fr;
  }
  .tv-guide-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--spacing-2);
  }
}

@media (max-width: 768px) {
  .btn-mobile-menu {
    display: flex;
  }

  .sidebar-backdrop {
    display: block;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    /* Use the *visible* viewport height (dvh) so the footer isn't hidden behind
       the mobile browser's bottom toolbar, which 100vh sits underneath. */
    height: 100dvh;
    width: 280px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.6);
    /* Allow the drawer to scroll so the footer (Settings / Disconnect) is always
       reachable on shorter phones instead of being clipped by overflow:hidden. */
    overflow-y: auto !important;
    padding-bottom: calc(var(--spacing-6) + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Fallback for browsers without dynamic viewport units. */
  @supports not (height: 100dvh) {
    .sidebar { height: 100vh; }
  }

  /* Keep Settings/Disconnect pinned to the bottom of the drawer. */
  .sidebar .sidebar-footer {
    margin-top: auto;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .app-header {
    padding: 0 var(--spacing-4) !important;
    height: 60px !important;
    gap: var(--spacing-2) !important;
  }

  /* Movies, Series, Live TV, TV Guide & Favorites: drop the search to its own full-width row */
  body[data-tab="movies"] .app-header,
  body[data-tab="series"] .app-header,
  body[data-tab="live"] .app-header,
  body[data-tab="tvguide"] .app-header,
  body[data-tab="favorites"] .app-header {
    height: auto !important;
    min-height: 60px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding-bottom: var(--spacing-2) !important;
    row-gap: var(--spacing-2) !important;
  }

  body[data-tab="movies"] .header-left,
  body[data-tab="series"] .header-left,
  body[data-tab="live"] .header-left,
  body[data-tab="tvguide"] .header-left,
  body[data-tab="favorites"] .header-left {
    flex: 0 0 auto !important;
  }

  /* Search drops to its own full-width row; avatar/status stay on row 1 with the title */
  body[data-tab="movies"] .search-bar-container,
  body[data-tab="series"] .search-bar-container,
  body[data-tab="live"] .search-bar-container,
  body[data-tab="tvguide"] .search-bar-container,
  body[data-tab="favorites"] .search-bar-container {
    order: 10 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* content-body must fill whatever space the taller header leaves */
  body[data-tab="movies"] .content-body,
  body[data-tab="series"] .content-body,
  body[data-tab="live"] .content-body,
  body[data-tab="tvguide"] .content-body,
  body[data-tab="favorites"] .content-body {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-tab="movies"] .movies-layout,
  body[data-tab="series"] .movies-layout {
    height: 100% !important;
  }

  /* Page titles are short, so keep them fully visible; the search shrinks instead */
  .header-left {
    flex-shrink: 0 !important;
  }

  #page-title {
    font-size: var(--text-lg) !important;
    white-space: nowrap !important;
  }

  /* Search is now a direct app-header sibling — header-right just holds avatar + status */
  .header-right {
    flex: 0 0 auto !important;
    gap: var(--spacing-2) !important;
    justify-content: flex-end !important;
  }

  /* Search flexes to fill leftover space rather than a fixed width */
  .search-bar-container {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 220px !important;
  }

  .user-profile-menu-container,
  #connection-status-chip {
    flex-shrink: 0 !important;
  }

  .user-profile-menu-container {
    margin-right: 0 !important;
  }

  /* Icon-only avatar on mobile to leave room for the page title */
  .header-username {
    display: none !important;
  }

  .user-avatar-btn {
    padding: 4px !important;
  }

  .search-bar-container input {
    font-size: var(--text-xs) !important;
    padding-left: var(--spacing-8) !important;
  }

  .search-icon {
    left: var(--spacing-2) !important;
    width: 14px !important;
    height: 14px !important;
  }

  #connection-status-chip {
    padding: var(--spacing-1) var(--spacing-2) !important;
  }

  #status-text {
    display: none !important; /* Only show dot on small screens */
  }

  .content-body {
    padding: var(--spacing-3) !important;
    height: calc(100vh - 60px) !important;
    height: calc(100svh - 60px) !important;
  }

  /* Live TV layout for mobile (Player at top, list columns stacked vertically
     to prevent overlaps). Sized with a flex chain instead of a viewport calc —
     the live header wraps to two rows (search bar drops below the title), so a
     "100svh - 60px" assumption overflows and creates a second competing
     scroller on .content-body, which broke touch scrolling while a stream was
     playing. Same pattern as the TV guide (#tab-tvguide.active below). */
  body[data-tab="live"] .content-body {
    overflow: hidden !important;
  }

  #tab-live.active {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .live-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    gap: var(--spacing-3) !important;
  }

  .live-player-container {
    order: -1 !important; /* Keep the video player at the top on mobile */
    width: 100% !important;
    height: auto !important;
    padding: var(--spacing-3) !important;
    flex-shrink: 0 !important;
  }

  .video-wrapper {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }

  .sidebar-categories {
    /* Full-bleed to the screen edges on mobile */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    height: 310px !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    flex-shrink: 0 !important;
  }

  .sidebar-channels {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    height: 520px !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    flex-shrink: 0 !important;
  }

  .layout-resizer {
    display: none !important;
  }

  .category-list {
    max-height: 250px !important;
  }

  .channel-list {
    max-height: 460px !important;
  }

  /* TV Guide mobile styles. Use a flex column with min-height:0 so the inner
     list becomes the single, reliable touch-scroll container (height:100% +
     block layout breaks momentum scrolling on iOS Safari). Scope to .active so
     the inactive tab stays display:none and doesn't reserve space under other
     tabs (it sits before Favorites/Movies/Series in the DOM). */
  #tab-tvguide.active {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Hide the desktop horizontal grid; show the vertical Now & Next list */
  .tv-guide-layout {
    display: none !important;
  }

  .mobile-guide-list {
    display: flex !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  /* VOD Movies & Series Mobile Styles (Categories stacked at top, grid below) */
  .movies-layout {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 60px - 2 * var(--spacing-3)) !important;
    gap: var(--spacing-3) !important;
    overflow: hidden !important;
  }

  #tab-movies .sidebar-categories,
  #tab-series .sidebar-categories {
    /* Full-bleed to the screen edges on mobile */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    height: 280px !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    flex-shrink: 0 !important;
  }

  .movies-layout {
    align-items: stretch !important;
  }

  #tab-movies .category-list,
  #tab-series .category-list {
    max-height: 200px !important;
  }

  .vod-grid-container {
    flex-grow: 1 !important;
    height: calc(100% - 292px) !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .vod-grid-container .grid-body {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: var(--spacing-3) !important;
    overflow-y: auto !important;
    padding-bottom: var(--spacing-8) !important;
    max-height: 100% !important;
  }

  .vod-card .poster-wrapper {
    aspect-ratio: 2 / 3 !important;
  }

  .vod-card h5 {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  /* Modals responsiveness */
  .glass-modal {
    width: 92vw !important;
    max-width: 420px !important;
    padding: var(--spacing-4) !important;
    margin: auto !important;
  }

  .glass-modal.large-modal {
    width: 95vw !important;
    height: 85vh !important;
    max-height: 85vh !important;
    padding: var(--spacing-3) !important;
  }

  .close-btn {
    /* 20px inset — button radius 16px + 4px clearance from the ring. */
    top: 20px !important;
    right: 20px !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* The "Back to Browse" overlay button shares the .close-btn class but is a
     labelled pill, not a round icon — don't let the 32px square squash it. */
  .close-btn.overlay-close {
    top: var(--spacing-3) !important;
    left: var(--spacing-3) !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    padding: var(--spacing-2) var(--spacing-3) !important;
    border-radius: var(--radius-md) !important;
    white-space: nowrap !important;
  }
  .close-btn.overlay-close span { white-space: nowrap !important; }

  .detail-content {
    padding: 0 !important;
    overflow-y: auto !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .detail-banner {
    height: 150px !important;
    flex-shrink: 0 !important;
  }

  .detail-banner-content {
    padding: var(--spacing-3) !important;
    gap: var(--spacing-3) !important;
  }

  .detail-poster {
    width: 70px !important;
    margin-bottom: -15px !important;
  }

  .detail-header-text h2 {
    font-size: var(--text-md) !important;
    margin-bottom: 2px !important;
    padding-right: var(--spacing-8) !important;
  }

  .detail-meta-list {
    flex-wrap: wrap !important;
    gap: var(--spacing-2) !important;
    font-size: 10px !important;
  }

  .detail-body {
    grid-template-columns: 1fr !important;
    padding: var(--spacing-4) !important;
    padding-top: var(--spacing-6) !important;
    gap: var(--spacing-4) !important;
    overflow-y: visible !important;
  }

  .detail-sidebar {
    gap: var(--spacing-2) !important;
  }

  .series-episodes-section {
    margin-top: var(--spacing-2) !important;
    padding-top: var(--spacing-4) !important;
  }

  .season-btn {
    flex-shrink: 0 !important;
  }

  /* Parental control PIN settings pad */
  .pin-modal {
    width: 90vw !important;
    max-width: 290px !important;
  }

  .pin-keypad {
    max-width: 180px !important;
    gap: var(--spacing-2) !important;
  }

  .keypad-btn {
    font-size: var(--text-md) !important;
  }
}

#program-detail-dialog {
  max-width: 500px;
}

/* EPG detail modal — action buttons on one clean row, equal widths */
.epg-detail-actions {
  margin-top: 2rem;
  display: flex;
  gap: var(--spacing-3);
  width: 100%;
}

.epg-detail-actions .btn {
  flex: 1 1 0;
  justify-content: center;
  white-space: nowrap;
  padding: var(--spacing-3) var(--spacing-2);
  font-size: var(--text-sm);
  min-height: 44px;
}

/* ==========================================================================
   PARENTAL CONTROLS, COMPACT SIDEBAR & PREMIUM SLIDER ENHANCEMENTS
   ========================================================================== */

/* 1. Compact Sidebar Mode */
.sidebar.hide-titles {
  width: 80px;
  padding: var(--spacing-6) var(--spacing-2);
}

.sidebar.hide-titles .sidebar-header {
  justify-content: center;
  flex-direction: row-reverse;
}

.sidebar.hide-titles .brand-logo {
  display: none;
}

.sidebar.hide-titles .btn-sidebar-toggle {
  margin-left: 0;
}

.sidebar.hide-titles .nav-title,
.sidebar.hide-titles .profile-manager label,
.sidebar.hide-titles .profile-manager button span,
.sidebar.hide-titles .sidebar-footer button span {
  display: none !important;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  width: 0;
}

.sidebar.hide-titles .profile-manager {
  padding: var(--spacing-2) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.sidebar.hide-titles .profile-select-wrapper {
  margin-bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar.hide-titles .profile-manager select {
  width: 40px;
  padding: var(--spacing-1);
}

.sidebar.hide-titles .nav-link {
  justify-content: center;
  padding: var(--spacing-3) 0;
}

.sidebar.hide-titles .nav-link:hover {
  transform: none;
  background: var(--bg-surface-hover);
}

.sidebar.hide-titles .sidebar-footer button {
  justify-content: center;
  padding: var(--spacing-3) 0;
  width: 100%;
}

/* 2. Custom Range Slider Styling (Seek & Volume) */
.volume-container input[type="range"],
.fs-volume-control input[type="range"] {
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  outline: none;
  height: 6px;
  cursor: pointer;
  padding: 0;
  border: none;
  transition: background var(--transition-fast);
}

.volume-container input[type="range"]::-webkit-slider-runnable-track,
.fs-volume-control input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-sm);
}

.volume-container input[type="range"]::-webkit-slider-thumb,
.fs-volume-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  cursor: pointer;
  margin-top: -3px; /* Vertical centering */
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.volume-container input[type="range"]::-webkit-slider-thumb:hover,
.fs-volume-control input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: #fff;
}

/* 3. Parental Keypad & Dot Display */
.pin-modal {
  width: 320px !important;
}

.pin-card {
  padding: var(--spacing-6) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pin-display {
  display: flex;
  gap: var(--spacing-4);
  margin: var(--spacing-4) 0 var(--spacing-6) 0;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pin-dot.filled {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  transform: scale(1.2);
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
  width: 100%;
  max-width: 220px;
}

.keypad-btn {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--text-lg);
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.keypad-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.keypad-btn:active {
  background: var(--cyan);
  color: #000;
  box-shadow: 0 0 12px var(--cyan);
  transform: scale(0.95);
}

.keypad-btn.danger-btn {
  color: var(--status-disconnected);
}

.keypad-btn.danger-btn:active {
  background: var(--status-disconnected);
  color: #fff;
  box-shadow: 0 0 10px var(--status-disconnected);
}

.keypad-btn.secondary-btn {
  color: hsla(240, 100%, 100%, 0.4);
}

.keypad-btn.secondary-btn:active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: none;
}

/* Wrong PIN shaking effect */
.pin-card.shake {
  animation: pin-shake 0.4s ease-in-out;
}

@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* 4. Category locking items in settings list */
.parental-lock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-3);
  background: hsla(240, 100%, 100%, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  transition: background var(--transition-fast);
}

.parental-lock-item:hover {
  background: hsla(240, 100%, 100%, 0.07);
}

.parental-lock-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--status-disconnected);
}

.hidden-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-3);
  background: hsla(240, 100%, 100%, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  transition: background var(--transition-fast);
}

.hidden-cat-item:hover {
  background: hsla(240, 100%, 100%, 0.07);
}

.hidden-cat-item button {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

/* Locked category items in parental control settings */
.locked-cats-section {
  margin-bottom: 4px;
}

.locked-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: hsla(0, 70%, 50%, 0.08);
  border: 1px solid hsla(0, 70%, 50%, 0.2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  transition: background var(--transition-fast);
  margin-bottom: 4px;
}

.locked-cat-item:last-child {
  margin-bottom: 0;
}

.locked-cat-item:hover {
  background: hsla(0, 70%, 50%, 0.14);
}

.locked-cat-unlock-btn {
  padding: var(--spacing-1) var(--spacing-2) !important;
  font-size: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap;
  flex-shrink: 0;
  border-color: hsla(0, 70%, 50%, 0.3) !important;
  color: var(--status-disconnected) !important;
}

.locked-cat-unlock-btn:hover {
  background: hsla(0, 70%, 50%, 0.25) !important;
  border-color: var(--status-disconnected) !important;
}

.category-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.category-lock-indicator {
  color: var(--status-disconnected);
  display: flex;
  align-items: center;
  font-size: var(--text-xs);
  margin-left: var(--spacing-2);
}

.sidebar-nav-item.dragover {
  border-bottom: 2px dashed var(--cyan);
}

.sidebar-nav-item.dragging {
  opacity: 0.4;
}

/* Mobile "Now & Next" TV Guide (hidden on desktop; shown via media query) */
.mobile-guide-list {
  display: none;
  flex-direction: column;
  gap: var(--spacing-3);
  height: 100%;
  overflow-y: auto;
  padding-bottom: var(--spacing-8);
}

.mobile-guide-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  text-align: left;
  padding: var(--spacing-3);
  border: 1px solid var(--border-color);
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.mobile-guide-card:hover,
.mobile-guide-card:active {
  border-color: var(--cyan);
  background: hsla(240, 20%, 12%, 0.9);
}

.mobile-guide-logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: var(--radius-md, 8px);
  background: hsla(240, 20%, 5%, 0.4);
}

.mobile-guide-body {
  flex: 1;
  min-width: 0;
}

.mobile-guide-channel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-2);
  margin-bottom: 4px;
}

.mobile-guide-name {
  font-weight: 700;
  color: #fff;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-guide-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsla(240, 100%, 100%, 0.4);
  flex-shrink: 0;
}

.mobile-guide-status {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.45);
}

.mobile-guide-now,
.mobile-guide-next {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
}

.mobile-guide-next {
  margin-top: 4px;
}

.mobile-guide-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 5px;
  border-radius: 4px;
  color: #001014;
  background: var(--cyan);
}

.mobile-guide-badge.next {
  color: hsla(240, 100%, 100%, 0.7);
  background: hsla(240, 100%, 100%, 0.1);
}

.mobile-guide-title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-guide-next .mobile-guide-title {
  color: hsla(240, 100%, 100%, 0.55);
}

.mobile-guide-time {
  flex-shrink: 0;
  font-size: 10px;
  color: hsla(240, 100%, 100%, 0.4);
  font-variant-numeric: tabular-nums;
}

.mobile-guide-progress {
  height: 3px;
  border-radius: 3px;
  background: hsla(240, 100%, 100%, 0.1);
  margin-top: 6px;
  overflow: hidden;
}

.mobile-guide-progress-fill {
  height: 100%;
  background: var(--cyan);
  border-radius: 3px;
}

.mobile-guide-play {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--cyan);
}

/* Custom Confirmation Dialog Modal styles */
.confirm-modal {
  width: 380px !important;
  max-width: 90vw !important;
  padding: var(--spacing-6) !important;
}

/* Confirm dialogs (log out, change password, delete account…): generous inner
   padding so the text never sits tight against the gradient ring. */
.confirm-modal .settings-card,
.confirm-modal .login-card {
  padding: var(--spacing-12) var(--spacing-8); /* 3rem top/bottom, 2rem sides */
}

/* The premium upgrade modal — gradient border glow + more breathing room. */
#upgrade-dialog.confirm-modal {
  width: 480px !important;
  padding: 2.5rem !important;
  border-radius: 20px !important;
  overflow: auto !important;
  background:
    linear-gradient(150deg, rgba(22, 10, 48, 0.98) 0%, rgba(10, 10, 30, 0.99) 60%, rgba(8, 22, 38, 0.98) 100%) padding-box,
    linear-gradient(135deg, hsl(184, 100%, 50%), hsl(276, 80%, 56%)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow:
    0 0 40px rgba(0, 240, 255, 0.18),
    0 0 80px rgba(180, 80, 255, 0.12),
    0 8px 40px rgba(0, 0, 0, 0.6) !important;
}

/* The dialog itself already paints the gradient border — the inner card's
   masked ring would draw a second, squared border inside it. Remove it. */
#upgrade-dialog .settings-card::before,
.checkout-modal .checkout-card::before { content: none !important; }

#upgrade-dialog .settings-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  gap: 1.4rem !important;
  padding: 0 !important;
  width: 100% !important;
}

/* The delete-account and change-password modals have a warning, a password field and two CTAs. */
#delete-account-dialog.confirm-modal,
#change-password-dialog.confirm-modal {
  width: 440px !important;
}

.delete-account-acknowledgement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  width: 100%;
  padding: var(--spacing-3);
  text-align: left;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.06);
}

.delete-account-acknowledgement strong,
.delete-account-acknowledgement span { display: block; }
.delete-account-acknowledgement strong { color: #fff; font-size: var(--text-sm); }
.delete-account-acknowledgement span {
  margin-top: 3px;
  color: hsla(240, 100%, 100%, 0.55);
  font-size: var(--text-xs);
  line-height: 1.45;
}

/* Premium checkout / pricing modal — same gradient border treatment as upgrade-dialog. */
.checkout-modal {
  width: 480px !important;
  max-width: 92vw !important;
  padding: 2.5rem 2.5rem 3.5rem !important;
  border-radius: 20px !important;
  overflow: auto !important;
  background:
    linear-gradient(150deg, rgba(22, 10, 48, 0.98) 0%, rgba(10, 10, 30, 0.99) 60%, rgba(8, 22, 38, 0.98) 100%) padding-box,
    linear-gradient(135deg, hsl(184, 100%, 50%), hsl(276, 80%, 56%)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow:
    0 0 40px rgba(0, 240, 255, 0.18),
    0 0 80px rgba(180, 80, 255, 0.12),
    0 8px 40px rgba(0, 0, 0, 0.6) !important;
}

.checkout-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.checkout-plan {
  transition: border-color 0.15s, background 0.15s;
}

.checkout-plan:hover {
  border-color: var(--cyan) !important;
}

#upgrade-dialog .confirm-actions .btn {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

/* Divider line between the description copy and the CTA buttons */
#upgrade-dialog .confirm-actions {
  margin-top: 0.6rem !important;
  padding-top: 1.4rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.confirm-actions {
  display: flex;
  gap: var(--spacing-3);
  width: 100%;
}

.confirm-actions button {
  flex: 1;
}

/* Channel Item Info & Program subtitle */
.channel-item-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  gap: 2px;
}

.channel-item-program {
  font-size: 11px;
  color: hsla(240, 100%, 100%, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  margin-top: 1px;
}

/* (Mobile keeps the current-programme subtitle visible under the channel name.) */

/* Picture-in-Picture Mode Overlay */
#tab-live.pip-mode {
  display: block !important;
  pointer-events: none; /* Let clicks pass through background */
}

#tab-live.pip-mode .live-layout {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  /* Collapse the emptied layout so it doesn't reserve a full screen of space
     above the active tab while the player floats as PiP. */
  height: 0 !important;
  overflow: visible !important;
}

/* The PiP host tab is forced visible to keep the video alive, but it must not
   occupy layout flow alongside the active tab. */
#tab-live.pip-mode {
  height: 0 !important;
  overflow: visible !important;
}

#tab-live.pip-mode .sidebar-categories,
#tab-live.pip-mode .sidebar-channels,
#tab-live.pip-mode .layout-resizer,
#tab-live.pip-mode .channel-epg-guide,
#tab-live.pip-mode .playing-channel-details {
  display: none !important;
}

#tab-live.pip-mode .live-player-container {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  bottom: 24px;
  right: 24px;
  width: 320px;
  height: 222px; /* 180px video + 42px header */
  z-index: 99999;
  pointer-events: auto; /* enable click for controls/drag */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: width 0.1s, height 0.1s;
}

/* PiP Header Styles */
.pip-header {
  display: none;
}

#tab-live.pip-mode .pip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 11, 15, 0.85);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: move;
  user-select: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  height: 42px;
  flex: 0 0 42px;
}

#tab-live.pip-mode .pip-drag-handle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tab-live.pip-mode .pip-drag-handle i {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

#tab-live.pip-mode .pip-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

#tab-live.pip-mode .btn-pip-action {
  background: none;
  border: none;
  color: hsla(240, 100%, 100%, 0.6);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

#tab-live.pip-mode .btn-pip-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Fill the video stage in PiP mode. The stage already sits below the 42px PiP
   header (a flex sibling), so it must NOT subtract the header height again —
   doing so left a 42px transparent strip of the container's glass background
   below the video. height:100% = the stage, which is exactly the 16:9 video box. */
#tab-live.pip-mode .video-wrapper {
  height: 100% !important;
  flex-grow: 1;
}

/* Show the whole frame in the PiP window, matching the main player. `cover`
   filled the window edge-to-edge but cropped the top/bottom of the video on any
   channel whose aspect ratio didn't exactly match the PiP box; `contain`
   letterboxes instead so nothing is cut off. */
#tab-live.pip-mode .video-wrapper video {
  object-fit: contain !important;
}

/* Simplify controls in PiP mode */
#tab-live.pip-mode #seek-container,
#tab-live.pip-mode .volume-container input {
  display: none !important;
}

#tab-live.pip-mode .custom-video-controls {
  padding: var(--spacing-2) var(--spacing-4) !important;
}

/* Toast Notifications Container */
/* On-screen notifications: centered, modal-style cards (not corner toasts).
   Pop in over the middle of the page, styled to match the app's glass modals,
   auto-dismiss, and dismiss early on click/tap. A soft scrim sits behind them
   (added only while a notification is showing) so they read like a modal. */
.toast-container {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transition: background 0.25s ease, opacity 0.2s ease;
}

.toast-container.has-toasts {
  opacity: 1;
  background: rgba(5, 5, 12, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.toast-item {
  /* Vertical card: icon on top, message centered below — reads like a small
     modal instead of a squished horizontal strip. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8) var(--spacing-12); /* 2rem top/bottom, 3rem sides */
  border-radius: var(--radius-lg);
  background: rgba(18, 18, 30, 0.92);
  backdrop-filter: blur(25px) saturate(160%);
  -webkit-backdrop-filter: blur(25px) saturate(160%);
  /* Outline comes from the shared gradient ring (::before); keep the box edge transparent. */
  border: 1px solid transparent;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  min-width: 300px;
  max-width: 420px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.92) translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast-item.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Per-type accent stays on the icon only (the outline is the brand gradient). */
.toast-item.success i { color: #10b981; }
.toast-item.error i,
.toast-item.danger i { color: #ef4444; }
.toast-item.warning i { color: #f59e0b; }
.toast-item.info i { color: #3b82f6; }

.toast-item i {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* Force TV Guide / EPG elements to use Roboto font */
.tv-guide-layout,
.tv-guide-grid-container,
.channel-epg-guide,
#program-detail-dialog {
  font-family: 'Roboto', sans-serif !important;
}

.tv-guide-layout *,
.tv-guide-grid-container *,
.channel-epg-guide *,
#program-detail-dialog * {
  font-family: 'Roboto', sans-serif !important;
}

/* ==========================================================================
   SPLASH / LANDING PAGE & AUTH STYLING
   ========================================================================== */

.splash-view {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background-color: var(--bg-base);
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

/* Splash Header */
.splash-header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-12);
  background: rgba(10, 11, 15, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.splash-logo {
  height: 56px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.splash-logo:hover {
  transform: scale(1.05);
}

.splash-nav {
  display: flex;
  gap: var(--spacing-8);
}

.splash-nav a {
  color: hsla(240, 100%, 100%, 0.6);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.splash-nav a:hover {
  color: var(--cyan);
}

.splash-actions {
  display: flex;
  gap: var(--spacing-4);
  margin-top: 12px;
}

/* Hero Section */
.splash-hero {
  padding: var(--spacing-12) var(--spacing-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-6);
  text-shadow: 0 0 40px rgba(0, 240, 255, 0.1);
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: hsla(240, 100%, 100%, 0.65);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto var(--spacing-8) auto;
}

/* "Use It On" platform buttons */
.use-it-on {
  margin: var(--spacing-6) 0 var(--spacing-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.use-it-on-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsla(240, 100%, 100%, 0.55);
}

.platform-btns {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.platform-btn {
  position: relative; /* anchor for custom tooltip */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 120px;
  padding: var(--spacing-4) var(--spacing-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  color: hsla(240, 100%, 100%, 0.9);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
}

.platform-btn:hover {
  transform: translateY(-4px);
  border-color: var(--border-focus);
  background: var(--bg-surface-hover);
  box-shadow: 0 10px 30px hsla(184, 100%, 50%, 0.18);
}

.platform-icon {
  width: 40px;
  height: 40px;
  color: var(--cyan);
  pointer-events: none;
}

.platform-name {
  font-size: var(--text-sm);
  pointer-events: none;
}

/* Custom tooltip for the splash download buttons.
   Instant + styled, and shows on keyboard/TV-remote focus (native title
   attributes never appeared on touch/TV devices). */
.platform-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: hsla(240, 32%, 8%, 0.98);
  color: hsla(240, 100%, 100%, 0.92);
  border: 1px solid hsla(184, 100%, 50%, 0.4);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 60;
}

/* little arrow pointing down at the button */
.platform-btn[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: hsla(184, 100%, 50%, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 60;
}

.platform-btn[data-tooltip]:hover::after,
.platform-btn[data-tooltip]:focus-visible::after,
.platform-btn[data-tooltip]:hover::before,
.platform-btn[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.view-plans-link {
  font-size: var(--text-sm);
  color: hsla(240, 100%, 100%, 0.6);
  text-decoration: none;
  border-bottom: 1px dashed hsla(240, 100%, 100%, 0.25);
  padding-bottom: 2px;
  transition: color var(--transition-fast);
}

.view-plans-link:hover {
  color: var(--cyan);
}

.unified-disclaimer {
  max-width: 760px;
  margin: 40px auto 0 auto;
  padding: var(--spacing-5) var(--spacing-6);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 240, 255, 0.18);
  background: linear-gradient(135deg, rgba(8, 9, 16, 0.6) 0%, rgba(20, 11, 28, 0.45) 100%);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: left;
}

.disclaimer-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: var(--spacing-3);
}

.disclaimer-icon {
  width: 20px;
  height: 20px;
  color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.45));
}

.disclaimer-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

.disclaimer-grid {
  display: flex;
  gap: var(--spacing-6);
}

@media (max-width: 640px) {
  .disclaimer-grid {
    flex-direction: column;
    gap: var(--spacing-4);
  }
  .disclaimer-divider {
    display: none;
  }
}

.disclaimer-item {
  flex: 1;
}

.disclaimer-item .item-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.disclaimer-item .item-title i {
  width: 15px;
  height: 15px;
  color: var(--cyan);
}

.disclaimer-item .item-title span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.disclaimer-item p {
  margin: 0;
  font-size: 12px;
  color: hsla(240, 100%, 100%, 0.65);
  line-height: 1.6;
}

.disclaimer-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.06);
}

.https-badge {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.18);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--cyan);
  font-family: monospace;
  font-size: 11px;
}

/* Features Section */
.splash-features {
  padding: 80px var(--spacing-8);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.splash-features .section-title,
.splash-pricing .section-title,
.splash-contact .section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-4);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-6);
  margin-top: 50px;
}

.feature-card {
  padding: var(--spacing-8) var(--spacing-6);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.15);
}

.feature-icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--spacing-4);
}

.font-cyan { color: var(--cyan); }
.font-purple { color: var(--purple); }
.font-pink { color: var(--pink); }

.premium-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--spacing-2);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 999px;
}

.feature-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-2);
}

.feature-card p {
  font-size: var(--text-sm);
  color: hsla(240, 100%, 100%, 0.55);
  line-height: 1.6;
}

/* Pricing Section */
.splash-pricing {
  padding: 80px var(--spacing-8);
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.pricing-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-top: 50px;
  align-items: stretch;
}

/* Pricing coupon code section */
.pricing-coupon {
  max-width: 480px;
  margin: var(--spacing-8) auto 0;
  padding: var(--spacing-6);
  border-radius: var(--radius-lg);
  text-align: center;
}

.pricing-coupon h4 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: #fff;
}

.pricing-coupon-sub {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-sm);
  color: hsla(240, 100%, 100%, 0.55);
}

.pricing-coupon-row {
  display: flex;
  gap: var(--spacing-3);
}

.pricing-coupon-row input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}

.pricing-coupon-row input::placeholder {
  text-transform: none;
}

.pricing-coupon-btn,
.pricing-coupon-row .btn {
  flex-shrink: 0;
}

.pricing-coupon-msg {
  margin-top: var(--spacing-3);
  font-size: var(--text-sm);
  font-weight: 500;
  min-height: 18px;
}

.pricing-coupon-msg.success { color: #10b981; }
.pricing-coupon-msg.error { color: #ef4444; }

.pricing-card {
  flex: 1;
  min-width: 320px;
  max-width: 420px;
  padding: var(--spacing-8) var(--spacing-6);
  border-radius: var(--radius-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  transition: transform 0.3s ease;
}

.pricing-card.premium {
  border: 1px solid var(--cyan);
  box-shadow: 0 0 25px -5px rgba(0, 240, 255, 0.15);
  background: hsla(184, 100%, 50%, 0.02);
  /* Allow the "BEST VALUE" tag (top: -12px) to show instead of being clipped */
  overflow: visible;
  margin-top: 12px;
}

.pricing-card:hover {
  transform: translateY(-4px);
}

.premium-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyan);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.08em;
}

.plan-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-2);
}

.plan-header .price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
}

.plan-header .price .period {
  font-size: var(--text-sm);
  font-weight: 400;
  color: hsla(240, 100%, 100%, 0.45);
}

.plan-header .price-subtext {
  font-size: var(--text-xs);
  color: var(--cyan);
  margin-top: var(--spacing-1);
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  font-size: var(--text-sm);
  flex-grow: 1;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  color: hsla(240, 100%, 100%, 0.85);
}

.plan-features li.disabled {
  color: hsla(240, 100%, 100%, 0.3);
}

.check-icon {
  color: var(--status-connected);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.x-icon {
  color: var(--status-disconnected);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Contact Section */
.splash-contact {
  padding: 80px var(--spacing-8);
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.contact-container {
  padding: var(--spacing-8) var(--spacing-6);
  border-radius: var(--radius-lg);
}

/* In-app Contact Us tab — center the panel nicely and let it scroll on short
   screens. The splash version lives in its own scrolling page, but inside the
   app the tab fills the content area, so we add our own breathing room. */
#tab-contact {
  overflow-y: auto;
  padding: var(--spacing-6) var(--spacing-4);
}
#tab-contact .contact-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-top: 30px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

/* Splash Footer */
.splash-footer {
  padding: var(--spacing-8) var(--spacing-6);
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.35);
  margin-top: auto;
}

.footer-links {
  margin-top: var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
}

.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.55);
  transition: color var(--transition-fast);
}

.footer-link-btn:hover {
  color: var(--cyan);
}

.footer-link-sep {
  color: hsla(240, 100%, 100%, 0.25);
}

/* Legal modals (Privacy Policy / Terms of Service) */
.legal-content {
  background: rgba(18, 18, 30, 0.7);
  backdrop-filter: blur(25px) saturate(160%);
  -webkit-backdrop-filter: blur(25px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg, 14px);
  padding: var(--spacing-8);
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
  line-height: 1.6;
  color: hsla(240, 100%, 100%, 0.8);
  font-size: var(--text-sm);
}

.legal-content h2 {
  margin: 0 0 4px;
  color: #fff;
}

.legal-content h3 {
  margin: var(--spacing-5) 0 var(--spacing-2);
  color: var(--cyan);
  font-size: var(--text-base, 15px);
}

.legal-updated {
  color: hsla(240, 100%, 100%, 0.4);
  font-size: var(--text-xs);
  margin: 0 0 var(--spacing-5);
}

.legal-content ul {
  padding-left: var(--spacing-6);
  margin: var(--spacing-2) 0;
}

.legal-content li {
  margin-bottom: var(--spacing-2);
}

.legal-content a {
  color: var(--cyan);
}

/* App Header User Dropdown styling */
.user-profile-menu-container {
  margin-right: var(--spacing-4);
}

.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: hsla(240, 100%, 100%, 0.05);
  border: 1px solid var(--border-color);
  padding: 4px 12px 4px 4px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-avatar-btn:hover {
  background: hsla(240, 100%, 100%, 0.1);
  border-color: rgba(255,255,255,0.2);
}

.header-username {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auth Dialog Forms styling */
.auth-modal {
  width: 92vw !important;
  max-width: 400px !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

.text-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  padding: 0;
  font-family: var(--font-sans);
}

.text-btn:hover {
  text-decoration: underline;
}

/* Email Inbox simulated modal */
.email-inbox-modal {
  z-index: 10000;
}

/* VOD Playback watch progress overlay elements */
.vod-progress-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.vod-progress-fill {
  height: 100%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

.resume-progress-badge {
  font-size: 11px;
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.1);
  border: 1px dashed rgba(0, 240, 255, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: var(--spacing-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Mobile adjustments for Splash */
@media (max-width: 768px) {
  .splash-header {
    padding: 0 var(--spacing-4);
    height: 70px;
    justify-content: flex-end; /* nav is hidden on mobile; keep auth buttons on the right */
  }
  .splash-nav {
    display: none;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}


/* ===================================================================== */
/* ONBOARDING SPOTLIGHT TOUR                                             */
/* A dark backdrop dims the whole screen except a "cutout" around the    */
/* active element, achieved with a giant box-shadow on the spotlight box.*/
/* ===================================================================== */
#tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none; /* let clicks pass except on the tooltip */
}
#tour-overlay.tour-active { pointer-events: auto; }

/* The spotlight: a transparent rounded box. Its huge spread box-shadow is
   what actually paints the dark dimming layer over everything else. */
#tour-spotlight {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(5, 6, 15, 0.80);
  outline: 2px solid var(--cyan, #00f0ff);
  outline-offset: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
/* When a step has no visible target, dim the whole screen and center the card. */
#tour-overlay.tour-modal #tour-spotlight {
  outline: none;
  top: 50%; left: 50%;
  width: 0; height: 0;
}

#tour-tooltip {
  position: absolute;
  width: min(340px, calc(100vw - 32px));
  background: hsla(240, 24%, 9%, 0.97);
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 240, 255, 0.15);
  color: #fff;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, top 0.4s cubic-bezier(0.4,0,0.2,1), left 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index: 9001;
}
#tour-tooltip.tour-show { opacity: 1; transform: translateY(0); }
/* Center the card for modal/mobile steps. */
#tour-overlay.tour-centered #tour-tooltip {
  top: auto !important;
  bottom: 24px;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px);
}
#tour-overlay.tour-centered #tour-tooltip.tour-show {
  transform: translateX(-50%) translateY(0);
}

#tour-tooltip .tour-step-count {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan, #00f0ff);
  font-weight: 600;
  margin-bottom: 6px;
}
#tour-tooltip .tour-title {
  font-family: var(--font-display, inherit);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}
#tour-tooltip .tour-body {
  font-size: 13px;
  line-height: 1.55;
  color: hsla(240, 100%, 100%, 0.7);
  margin: 0 0 16px;
}
#tour-tooltip .tour-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#tour-tooltip .tour-dots {
  display: flex;
  gap: 6px;
}
#tour-tooltip .tour-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.2s ease, width 0.2s ease;
}
#tour-tooltip .tour-dot.active {
  background: var(--cyan, #00f0ff);
  width: 18px;
  border-radius: 4px;
}
#tour-tooltip .tour-buttons { display: flex; gap: 8px; }
#tour-tooltip .tour-skip {
  background: none;
  border: none;
  color: hsla(240, 100%, 100%, 0.4);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 4px;
}
#tour-tooltip .tour-skip:hover { color: hsla(240, 100%, 100%, 0.7); }
#tour-tooltip .tour-btn {
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
  background: rgba(255,255,255,0.06);
  color: #fff;
}
#tour-tooltip .tour-btn:hover { background: rgba(255,255,255,0.12); }
#tour-tooltip .tour-btn.primary {
  background: var(--cyan, #00f0ff);
  border-color: var(--cyan, #00f0ff);
  color: #04121a;
}
#tour-tooltip .tour-btn.primary:hover { filter: brightness(1.08); }

@media (max-width: 600px) {
  #tour-tooltip { width: calc(100vw - 24px); }
}

/* ===================================================================== */
/* MOBILE GUIDE DETAIL — full schedule sheet for a single channel        */
/* ===================================================================== */
.mobile-guide-detail {
  border: none;
  padding: 0;
  width: 100%;
  max-width: 520px;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto auto;            /* top-anchored, full-height sheet */
  border-radius: 0;
  background: hsla(240, 24%, 8%, 0.98);
  color: #fff;
  overflow: hidden;
}
/* display only when [open] — an unconditional display on a <dialog> overrides
   the UA's display:none for the closed state, leaving an invisible full-height
   sheet that blocked scrolling on the live tab after "Watch" closed it. */
.mobile-guide-detail[open] {
  display: flex;
  flex-direction: column;
}
/* Fallback for browsers without dynamic viewport units. */
@supports not (height: 100dvh) {
  .mobile-guide-detail { height: 100vh; max-height: 100vh; }
}
.mobile-guide-detail::backdrop {
  background: rgba(2, 3, 10, 0.7);
  backdrop-filter: blur(3px);
}
.mobile-guide-detail[open] { animation: mgdSlideDown 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes mgdSlideDown { from { transform: translateY(-40px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }

.mgd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 12px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
  flex-shrink: 0;
}
.mgd-back, .mgd-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.mgd-back:hover, .mgd-close:hover { background: rgba(255,255,255,0.12); }
.mgd-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(0,0,0,0.3);
  padding: 4px;
  flex-shrink: 0;
}
.mgd-heading { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mgd-name {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgd-cat { font-size: 12px; color: hsla(240, 100%, 100%, 0.45); }

.mgd-schedule {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 14px;
  -webkit-overflow-scrolling: touch;
}
.mgd-loading, .mgd-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  justify-content: center;
  padding: 48px 20px;
  color: hsla(240, 100%, 100%, 0.45);
  font-size: 13px;
  text-align: center;
}
.mgd-loading i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.mgd-program {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mgd-program.past { opacity: 0.45; }
.mgd-program.now {
  background: linear-gradient(90deg, rgba(0,240,255,0.10), transparent);
  margin: 0 -14px;
  padding: 12px 14px;
  border-radius: 10px;
  border-bottom-color: transparent;
}
.mgd-prog-time {
  display: flex; flex-direction: column;
  align-items: flex-end;
  min-width: 54px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mgd-prog-start { font-weight: 700; font-size: 14px; color: #fff; }
.mgd-prog-end { font-size: 11px; color: hsla(240, 100%, 100%, 0.4); }
.mgd-prog-body { min-width: 0; flex: 1; }
.mgd-prog-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1.3;
}
.mgd-now-badge {
  background: var(--cyan, #00f0ff);
  color: #04121a;
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 5px;
  flex-shrink: 0;
}
.mgd-prog-desc {
  margin: 5px 0 0;
  font-size: 12px; line-height: 1.5;
  color: hsla(240, 100%, 100%, 0.55);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mgd-prog-progress {
  margin-top: 8px;
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.mgd-prog-progress-fill { height: 100%; background: var(--cyan, #00f0ff); border-radius: 2px; }

/* Reminder bell on future programmes — mirrors the desktop Remind Me flow */
.mgd-remind {
  flex-shrink: 0;
  align-self: center;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: hsla(240, 100%, 100%, 0.65);
}
.mgd-remind i, .mgd-remind svg { width: 17px; height: 17px; }
.mgd-remind.active {
  color: var(--cyan, #00f0ff);
  border-color: rgba(0, 240, 255, 0.45);
  background: rgba(0, 240, 255, 0.12);
}

/* In-sheet confirmation toast — sits above the schedule, inside the modal's
   top layer (a normal toast would render behind the full-screen sheet). */
.mgd-toast {
  position: absolute;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  max-width: calc(100% - 32px);
  z-index: 5;
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(18, 18, 30, 0.97);
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.mgd-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.mgd-toast.error { border-color: rgba(239, 68, 68, 0.5); }

.mgd-footer {
  flex-shrink: 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.1));
  background: hsla(240, 24%, 6%, 0.98);
}
.mgd-watch {
  width: 100%;
  justify-content: center;
  gap: 8px;
  background: var(--cyan, #00f0ff);
  color: #04121a;
  font-weight: 700;
  border: none;
  padding: 13px;
  border-radius: 12px;
  font-size: 15px;
}
.mgd-watch:hover { filter: brightness(1.07); }

/* Only relevant on small screens; hide the sheet entirely on desktop. */
@media (min-width: 769px) {
  .mobile-guide-detail, .mobile-guide-detail[open] { display: none !important; }
}

.mobile-guide-sentinel { width: 100%; min-height: 1px; flex-shrink: 0; }

/* Mobile PiP: constrain the mini player width (the mobile live-layout forces
   width:100% on the player, which would otherwise make PiP full-bleed) so the
   JS can center it along the bottom of the screen. */
@media (max-width: 768px) {
  #tab-live.pip-mode .live-player-container {
    width: min(340px, calc(100vw - 24px)) !important;
    height: auto !important;
    margin: 0 !important;
    /* Mobile: center the PiP window at the bottom of the screen (the desktop
       right-anchor made it sit oddly toward the left on narrow phones). */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Upgrade confirm + checkout modals: mobile overrides placed AFTER the desktop
   rules so they win the cascade (same specificity + !important, last wins). */
@media (max-width: 768px) {
  #upgrade-dialog.confirm-modal {
    width: 92vw !important;
    max-width: 420px !important;
    min-width: 0 !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .checkout-modal {
    width: 92vw !important;
    max-width: 420px !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 24px !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* Only apply flex layout when dialog is actually open — prevents closed dialogs
     from overriding display:none and covering the screen */
  dialog[open].checkout-modal {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Inner card scrolls — dialog border/corners always fully visible */
  .checkout-modal .checkout-card {
    padding: 1.5rem 1.5rem 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* A scroll container's OWN bottom padding is dropped by Chromium/Edge, so the
     coupon row ends up flush against the dialog border (the desktop modal's
     bottom padding is also overridden to 0 here). Put the bottom breathing room
     on the last child instead — it IS honored as scrollable space — for a
     deterministic gap regardless of the engine bug. Overrides the coupon div's
     inline 2.8rem on mobile only; desktop keeps its own generous spacing. */
  .checkout-modal .checkout-card > *:last-child {
    padding-bottom: 4.5rem !important;
  }

  /* Keep the coupon row fully contained — input shrinks, Apply button doesn't */
  #checkout-coupon-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  #checkout-coupon {
    min-width: 0 !important;
  }

  /* Stack the Maybe Later / Upgrade buttons vertically so the full
     "Upgrade to Premium" label is never clipped on narrow screens. */
  #upgrade-dialog .confirm-actions {
    flex-direction: column !important;
  }

  #upgrade-dialog .confirm-actions button {
    width: 100% !important;
  }
}

/* Settings modal: same pinned approach as checkout so rounded corners always show.
   NOTE: #settings-dialog is .glass-modal only — .large-modal is the movie/series
   detail dialogs, which keep their own mobile rules. */
@media (max-width: 768px) {
  #settings-dialog {
    position: fixed !important;
    top: 24px !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    max-width: 420px !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Only flex when open — closed dialogs must keep display:none */
  #settings-dialog[open] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Inner settings card scrolls, not the dialog */
  #settings-dialog .settings-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
  }

  /* Bigger touch targets for hamburger menu and upgrade crown on mobile */
  .btn-sidebar-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .header-upgrade-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: var(--spacing-2) var(--spacing-3) !important;
  }
}

/* Larger touch targets for hamburger + upgrade crown on mobile */
@media (max-width: 768px) {
  .btn-mobile-menu {
    width: 48px !important;
    height: 48px !important;
    margin-right: var(--spacing-2) !important;
    /* Expand tap area beyond visual bounds */
    padding: 4px !important;
  }

  /* :not(.hidden) — the forced display would otherwise override .hidden and
     show the upgrade crown to premium users */
  #header-upgrade-btn.header-upgrade-btn:not(.hidden) {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 var(--spacing-3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Movie/Series detail modals on mobile: same pinned treatment as the settings
   and checkout dialogs. The gradient ring used to be painted on the scrolling
   .detail-content, so it drifted off-screen as you scrolled — pin the dialog
   to the viewport, put the ring on the dialog (which never scrolls), and let
   the card scroll inside. */
@media (max-width: 768px) {
  #movie-detail-dialog,
  #series-detail-dialog {
    position: fixed !important;
    top: 24px !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 95vw !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
  }

  /* display only when [open] — closed dialogs must keep display:none */
  #movie-detail-dialog[open],
  #series-detail-dialog[open] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Ring on the non-scrolling dialog so it always hugs the visible edges */
  #movie-detail-dialog::before,
  #series-detail-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 1.5px;
    background: linear-gradient(135deg, var(--cyan), var(--purple) 55%, var(--pink));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
  }

  /* The card scrolls inside the pinned dialog; its own ring is removed and its
     corners are clipped by the dialog's overflow:hidden radius. */
  #movie-detail-dialog .detail-content,
  #series-detail-dialog .detail-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    /* breathing room between the last item and the bottom ring */
    padding-bottom: var(--spacing-6) !important;
  }

  #movie-detail-dialog .detail-content::before,
  #series-detail-dialog .detail-content::before {
    content: none !important;
  }

  /* .detail-body must size to its content — with flex:1 1 0 it was locked to
     the visible height and its overflow spilled past the card's bottom
     padding, leaving the last item flush against the ring. */
  #movie-detail-dialog .detail-body,
  #series-detail-dialog .detail-body {
    flex: 0 0 auto !important;
  }
}

/* My Devices panel in Settings (premium accounts) */
.devices-section {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--border-color);
}

.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.device-row:last-child { border-bottom: none; }

.device-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.device-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
}

.device-this {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

.device-meta {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.45);
  margin-top: 2px;
}

.device-signout {
  flex-shrink: 0;
  background: rgba(239, 68, 68, 0.1);
  color: var(--status-disconnected, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.25);
  white-space: nowrap;
}

.devices-loading {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.45);
  padding: 8px 0;
}

/* Reminder alert modal on mobile: the side-by-side Watch Now / Dismiss buttons
   are wider than the card's content area (no-wrap labels), so they spilled
   through the padding up to the gradient ring. Stack them vertically — same
   fix as the upgrade confirm modal. */
@media (max-width: 768px) {
  #reminder-alert-dialog.confirm-modal {
    width: 92vw !important;
    max-width: 420px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #reminder-alert-dialog .reminder-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #reminder-alert-dialog .reminder-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ───────────────────────── ON-DEVICE DVR (recordings) ───────────────────── */
/* Live "Record this channel" button — turns into a pulsing red dot while live. */
#live-record-btn.recording {
  color: #fff;
  background: #e0314b;
  border-color: #e0314b;
  animation: dvr-rec-pulse 1.6s ease-in-out infinite;
}
#live-record-btn.recording i { fill: currentColor; }
@keyframes dvr-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 49, 75, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(224, 49, 75, 0); }
}

/* Red recording dot on a guide programme cell (rides with the sticky title) */
.epg-rec-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ff3b5b;
  box-shadow: 0 0 7px rgba(255, 59, 91, 0.85);
  vertical-align: baseline;
  animation: dvr-rec-pulse 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}

/* Recordings page */
.recordings-page {
  padding: var(--spacing-2) 0;
}
.recordings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-5);
}
.recordings-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  color: #fff;
}
.recordings-sub {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: hsla(240, 100%, 100%, 0.55);
}
.recordings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-4);
}
.recording-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-solid);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.recording-card:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }
.recording-card.is-recording { border-color: rgba(224, 49, 75, 0.6); }
.recording-card.is-scheduled { border-color: rgba(0, 240, 255, 0.35); }

.recording-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0c0d14;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  border: none;
  cursor: default;
}
button.recording-thumb.play { cursor: pointer; }
.recording-thumb img {
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
}
.recording-thumb .recording-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 15, 0.35);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.recording-thumb .recording-play-icon i { width: 34px; height: 34px; }
button.recording-thumb.play:hover .recording-play-icon { opacity: 1; }
.recording-thumb.scheduled i { width: 30px; height: 30px; color: var(--cyan); }
.recording-thumb.live { color: #ff5a76; background: #15090c; }

.rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b5b;
  animation: dvr-rec-pulse 1.6s ease-in-out infinite;
}
.recording-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-2);
}
.recording-card-title {
  font-weight: 700;
  color: #fff;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recording-card-sub {
  font-size: var(--text-xs);
  color: hsla(240, 100%, 100%, 0.5);
}
.recording-actions {
  display: flex;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-3) var(--spacing-3);
}
.recording-actions .btn-sm { flex: 1; justify-content: center; }
.recording-actions .rec-delete { flex: 0 0 auto; }

.recordings-empty {
  grid-column: 1 / -1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  text-align: center;
  color: hsla(240, 100%, 100%, 0.6);
}
.recordings-empty i { width: 40px; height: 40px; color: var(--cyan); opacity: 0.8; }
.recordings-empty p { margin: var(--spacing-2) 0 0; font-weight: 700; color: #fff; }
.recordings-empty span { font-size: var(--text-sm); color: hsla(240, 100%, 100%, 0.45); max-width: 360px; }

/* Watch-back player dialog */
.recording-player-modal {
  width: min(900px, 94vw);
  max-width: 94vw;
  padding: 0;
}
.recording-player-body { padding: var(--spacing-5); }
.recording-player-body h3 {
  margin: 0 0 var(--spacing-3);
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
}
.recording-player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.recording-player-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.recording-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  color: hsla(240, 100%, 100%, 0.7);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: var(--text-sm);
}

/* --- STALKER PORTAL LOGIN TABS --- */
.login-tabs-container {
  display: flex;
  margin-bottom: var(--spacing-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: var(--spacing-2);
  gap: var(--spacing-4);
}

.login-tab-btn {
  background: none;
  border: none;
  color: hsla(240, 100%, 100%, 0.4);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  padding: var(--spacing-2) var(--spacing-4);
  position: relative;
  transition: color 0.2s ease;
}

.login-tab-btn:hover {
  color: #fff;
}

.login-tab-btn.active {
  color: var(--cyan);
  font-weight: 600;
}

.login-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cyan);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   TMDB Cast & Crew + Actor Filmography
   ========================================================================== */

/* Cast & Crew spans the full dialog width (both grid columns) so the avatar
   row uses the whole width instead of being trapped in the left plot column. */
.cast-mount {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Single horizontal row of circular cast/crew avatars (director first) that
   extends and scrolls sideways — never wraps to a second row. Vertical padding
   gives the focus scale() room so the enlarged circle isn't clipped by the
   overflow container. */
.cast-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-top: 4px;
  padding: 10px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #8a8a92 transparent;   /* Firefox: light-grey thumb */
}
.cast-row > .cast-avatar { flex: 0 0 auto; }
/* Scroll bar at the bottom of the cast & crew row — light grey so it stands
   out against the dark dialog background. */
.cast-row::-webkit-scrollbar { height: 7px; }
.cast-row::-webkit-scrollbar-track { background: transparent; }
.cast-row::-webkit-scrollbar-thumb {
  background: #8a8a92;
  border-radius: 4px;
}
.cast-row::-webkit-scrollbar-thumb:hover { background: #a6a6ae; }
.cast-avatar {
  flex: 0 0 auto;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-primary, #fff);
}
.cast-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;                 /* circular crop */
  background-color: var(--bg-surface-solid);
  background-size: cover;             /* ContentScale.Crop */
  background-position: center;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.cast-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #888);
}
.cast-avatar-placeholder i { width: 40px; height: 40px; }
.cast-avatar:hover .cast-avatar-img,
.cast-avatar:focus-visible .cast-avatar-img {
  border-color: var(--cyan);
  transform: scale(1.05);
  outline: none;
}
.cast-avatar-name {
  margin-top: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  max-width: 104px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cast-avatar-role {
  font-size: var(--text-xs);
  color: var(--text-muted, #888);
  max-width: 104px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Full-bleed actor page — an overlay INSIDE the detail dialog. */
.person-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--bg-surface-solid);
  border-radius: inherit;
  overflow-y: auto;
  overflow-x: hidden;   /* vertical scroll only — never a horizontal bar */
  padding: 28px 32px 40px;
  outline: none;
}
.person-overlay-close { z-index: 21; }
.person-header {
  display: flex;
  gap: 24px;
  align-items: center;
}
.person-photo {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--bg-surface-solid);
  background-size: cover;
  background-position: center;
}
.person-header-text h2 { margin: 0; }
.person-knownfor { color: var(--cyan); margin: 4px 0 0; font-size: var(--text-sm); }
.person-bio {
  margin: 18px 0 24px;
  color: #bbb;
  line-height: 1.6;
  max-height: 8.5em;
  overflow-y: auto;
}
.filmography-grid {
  display: grid;
  /* 5 across. minmax(0, 1fr) — not 1fr — so the nowrap credit titles can't
     force columns wider than their share and trigger horizontal overflow. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .filmography-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .filmography-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.credit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-primary, #fff);
  text-align: left;
}
.credit-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface-solid);
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.credit-card:hover .credit-poster,
.credit-card:focus-visible .credit-poster {
  border-color: var(--cyan);
  transform: scale(1.04);
  outline: none;
}
.credit-poster-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  font-size: var(--text-xs);
  color: #bbb;
}
.credit-title {
  margin-top: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.credit-year { font-size: var(--text-xs); color: var(--text-muted, #888); }
/* "Not in your library" scrim — hidden until a lookup misses. */
.credit-scrim {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.72);
  color: #ddd;
  font-size: var(--text-xs);
  font-weight: 600;
}
.credit-missing .credit-scrim { display: flex; }
.credit-loading { opacity: 0.5; }
.credit-loading { opacity: 0.5; }

/* ==========================================================================
   PRODUCT NEWS — notification center + admin publisher
   ========================================================================== */

/* Screen-reader-only text (used for the unread announcement count). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Bell + badge --------------------------------------------------------- */
.notif-center-container { position: relative; display: flex; align-items: center; }

.notif-bell-btn { position: relative; }
.notif-bell-btn.has-unread i { color: var(--cyan); }

.notif-badge {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--cyan);
  color: #001014;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px hsla(240, 20%, 5%, 0.9);
}

/* --- Panel ---------------------------------------------------------------- */
/* Lives on <body> (moved there by ProductNews.bind) and is anchored under the
   bell by positionPanel(). It cannot stay inside .app-header: that element's
   backdrop-filter becomes the containing block for fixed descendants. */
.notif-panel {
  position: fixed;
  top: 64px;
  right: 16px;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: min(560px, 70vh);
  display: flex;
  flex-direction: column;
  background: hsla(240, 22%, 7%, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  z-index: 1200;
  overflow: hidden;
}
.notif-panel.hidden { display: none; }
.notif-panel:focus { outline: none; }

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.notif-panel-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.notif-panel-actions { display: flex; align-items: center; gap: 4px; }

.notif-text-btn {
  background: none;
  border: none;
  color: hsla(240, 100%, 100%, 0.55);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.notif-text-btn:hover:not(:disabled) { color: var(--cyan); background: rgba(0, 240, 255, 0.08); }
.notif-text-btn:disabled { opacity: 0.35; cursor: default; }

.notif-icon-btn {
  background: none;
  border: none;
  color: hsla(240, 100%, 100%, 0.45);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.notif-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.notif-icon-btn i { width: 15px; height: 15px; }

.notif-list {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Announcement card ---------------------------------------------------- */
.notif-item {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 12px 10px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.notif-item.unread {
  border-color: rgba(0, 240, 255, 0.28);
  background: rgba(0, 240, 255, 0.05);
  cursor: pointer;
}
.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--cyan);
}
.notif-item.unread:hover { background: rgba(0, 240, 255, 0.09); }
.notif-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.notif-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.notif-item h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

.notif-body {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: hsla(240, 100%, 100%, 0.72);
  overflow-wrap: anywhere;
}
.notif-body p { margin: 0 0 8px; }
.notif-body p:last-child { margin-bottom: 0; }
.notif-body h2 { font-size: 14px; margin: 10px 0 6px; color: #fff; }
.notif-body h3 { font-size: 13px; margin: 8px 0 4px; color: #fff; }
.notif-body ul, .notif-body ol { margin: 0 0 8px; padding-left: 20px; }
.notif-body li { margin-bottom: 3px; }
.notif-body a { color: var(--cyan); text-decoration: underline; }
.notif-body a:hover { opacity: 0.8; }

.notif-date {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: hsla(240, 100%, 100%, 0.35);
}

/* --- Empty / loading / error states --------------------------------------- */
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px;
  text-align: center;
}
.notif-empty i { width: 28px; height: 28px; color: hsla(240, 100%, 100%, 0.22); }
.notif-empty-title { margin: 0; font-size: var(--text-sm); font-weight: 600; color: hsla(240, 100%, 100%, 0.7); }
.notif-empty-msg { margin: 0; font-size: 12px; color: hsla(240, 100%, 100%, 0.4); max-width: 250px; }

.notif-skeleton {
  height: 64px;
  border-radius: 10px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.035) 25%,
    rgba(255,255,255,0.075) 50%,
    rgba(255,255,255,0.035) 75%);
  background-size: 200% 100%;
  animation: notif-shimmer 1.4s infinite;
}
@keyframes notif-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Admin publisher ------------------------------------------------------ */
.admin-page { max-width: 860px; margin: 0 auto; padding-bottom: var(--spacing-6, 40px); }

.admin-panel {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-4, 20px);
  margin-bottom: var(--spacing-4, 20px);
}

.admin-panel h2, .admin-panel h3 {
  font-family: var(--font-display);
  margin: 0 0 6px;
}
.admin-panel h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; }

.admin-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-3);
}
.admin-header-row h2 { margin: 0 0 4px; }
.admin-header-row h3 { margin: 0; }

.admin-help {
  font-size: 12px;
  line-height: 1.5;
  color: hsla(240, 100%, 100%, 0.45);
  margin: 0 0 var(--spacing-3);
}

.admin-error {
  font-size: 12px;
  color: var(--status-disconnected, hsl(0, 84%, 60%));
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 var(--spacing-3);
}
.admin-error.hidden { display: none; }

/* Lock screen */
.admin-lock-inner { max-width: 380px; margin: 0 auto; text-align: center; padding: var(--spacing-4) 0; }
.admin-lock-icon { width: 34px; height: 34px; color: var(--cyan); margin-bottom: var(--spacing-3); }
.admin-lock-inner h2 { margin-bottom: 6px; }
.admin-lock-inner .form-group { text-align: left; }

/* Toolbar */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 6px;
  background: hsla(240, 20%, 5%, 0.7);
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.admin-tool {
  background: none;
  border: none;
  color: hsla(240, 100%, 100%, 0.6);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.admin-tool:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.admin-tool:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.admin-tool i { width: 16px; height: 16px; }
.admin-tool-sep { width: 1px; height: 18px; background: var(--border-color); margin: 0 4px; }

/* Editor */
.admin-editor {
  min-height: 220px;
  max-height: 460px;
  overflow-y: auto;
  background: hsla(240, 20%, 5%, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--spacing-3) var(--spacing-4);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.65;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.admin-editor:focus {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.08);
}
.admin-editor:empty::before {
  content: attr(data-placeholder);
  color: hsla(240, 100%, 100%, 0.28);
  pointer-events: none;
}
.admin-editor h2 { font-size: 17px; margin: 12px 0 6px; }
.admin-editor h3 { font-size: 15px; margin: 10px 0 5px; }
.admin-editor ul, .admin-editor ol { padding-left: 22px; margin: 6px 0; }
.admin-editor a { color: var(--cyan); text-decoration: underline; }

.help-text.over-limit, .over-limit { color: var(--status-disconnected, hsl(0, 84%, 60%)); }

.admin-actions {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-top: var(--spacing-3);
}

/* Broadcast progress */
.admin-broadcast-status { margin-top: var(--spacing-3); font-size: 12px; }
.admin-broadcast-status.hidden { display: none; }
.admin-broadcast-status p { margin: 0 0 6px; color: hsla(240, 100%, 100%, 0.7); }
.admin-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.admin-progress-fill {
  height: 100%;
  background: var(--accent-gradient, var(--cyan));
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* History */
.admin-history { display: flex; flex-direction: column; gap: 8px; }
.admin-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  flex-wrap: wrap;
}
.admin-history-row.archived { opacity: 0.55; }
.admin-history-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Delete is destructive and irreversible, so it reads as a quiet text button
   next to Archive rather than a second filled control competing with it. It
   only takes on full danger styling on hover/focus. */
.btn-danger-ghost {
  background: transparent;
  color: hsla(350, 80%, 70%, 0.75);
  border: 1px solid transparent;
}
.btn-danger-ghost:hover,
.btn-danger-ghost:focus-visible {
  background: hsla(350, 80%, 55%, 0.15);
  color: var(--status-disconnected);
  border-color: hsla(350, 80%, 55%, 0.3);
}

/* Delete confirmation dialog */
.admin-delete-target {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin-bottom: var(--spacing-4);
  background: hsla(350, 80%, 55%, 0.07);
  border: 1px solid hsla(350, 80%, 55%, 0.2);
  border-radius: 10px;
}
.admin-delete-target-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsla(240, 100%, 100%, 0.45);
}
.admin-delete-target strong {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
#admin-delete-confirm[disabled] { opacity: 0.45; cursor: not-allowed; }

.admin-history-main { min-width: 0; flex: 1; }
.admin-history-main h4 {
  margin: 0 0 3px;
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.admin-history-meta { font-size: 11px; color: hsla(240, 100%, 100%, 0.35); margin-right: 8px; }

.admin-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 20px;
}
.admin-status-badge.published { background: rgba(0, 240, 255, 0.12); color: var(--cyan); }
.admin-status-badge.archived { background: rgba(255, 255, 255, 0.08); color: hsla(240, 100%, 100%, 0.5); }

.notif-preview { cursor: default; margin-bottom: var(--spacing-3); }

/* Sidebar admin item is not draggable — mark it visually distinct. */
.sidebar-nav-item-admin { margin-top: 4px; }
.sidebar-nav-item-admin .nav-link i { color: var(--cyan); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
  /* Full-width bottom sheet. positionPanel() clears its inline offsets at this
     breakpoint so these rules win. */
  .notif-panel {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    max-height: 78vh;
  }
  .notif-panel-header { padding: 12px; }
  .notif-text-btn { font-size: 10px; padding: 4px; }
  .admin-actions .btn { flex: 1 1 100%; justify-content: center; }
  .admin-history-row { align-items: flex-start; }
  .admin-history-actions { width: 100%; }
  .admin-history-actions .btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-skeleton { animation: none; }
  .admin-progress-fill { transition: none; }
}


/* Preflight recipient count shown above the broadcast buttons, so the admin
   always sees how many people a send reaches before confirming. */
.admin-recipient-count {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: var(--spacing-3);
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: hsla(240, 100%, 100%, 0.75);
}
.admin-recipient-count i {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--cyan);
}
/* Nobody has opted in — warn rather than invite a send that would do nothing. */
.admin-recipient-count.is-zero {
  background: rgba(250, 204, 21, 0.07);
  border-color: rgba(250, 204, 21, 0.25);
}
.admin-recipient-count.is-zero i { color: var(--status-warning); }

/* One-time product-news email consent prompt. Both answers are given equal
   visual weight beyond standard primary/secondary styling — this is a consent
   question, not an upsell, so "No thanks" must not look discouraged. */
/* .confirm-modal sets `width: 380px !important`, which is too narrow for two
   full-text buttons side by side. Override with the same #id.confirm-modal
   pattern the upgrade and delete-account dialogs already use. */
#news-consent-dialog.confirm-modal {
  width: 460px !important;
  max-width: 92vw !important;
}

/* The shared settings-card padding (48px 32px) eats ~64px of usable width. */
.news-consent-modal .news-consent-card { padding: 32px 26px; }

.news-consent-card { text-align: center; }

.news-consent-icon {
  width: 34px;
  height: 34px;
  color: var(--cyan);
  margin: 0 auto var(--spacing-3);
}

.news-consent-card h3 { margin-bottom: var(--spacing-2); }

.news-consent-desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: hsla(240, 100%, 100%, 0.7);
  margin: 0 0 var(--spacing-3);
}

/* Deliberately NOT flex: the icon, the text node and the <strong> would each
   become separate flex items, breaking the sentence into columns. Inline flow
   keeps it as one wrapping sentence. */
.news-consent-note {
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: hsla(240, 100%, 100%, 0.45);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 var(--spacing-4);
}
.news-consent-note svg,
.news-consent-note i {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 5px;
}
.news-consent-note strong { color: hsla(240, 100%, 100%, 0.7); font-weight: 600; }

.news-consent-actions {
  display: flex;
  gap: var(--spacing-3);
}
/* min-width:0 + normal wrapping so a long label shrinks instead of overflowing
   the dialog (the shared .btn sets white-space:nowrap and min-width:auto). */
.news-consent-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: normal;
  padding-left: 12px;
  padding-right: 12px;
  line-height: 1.3;
}

@media (max-width: 460px) {
  .news-consent-actions { flex-direction: column-reverse; }
}

/* Expandable recipient address list (admin only, fetched on demand). */
.admin-recipient-count { position: relative; flex-wrap: wrap; }

.admin-recipient-list-btn {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  font-size: 11px;
  text-decoration: underline;
}

.admin-recipient-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: var(--spacing-3);
  background: rgba(0, 0, 0, 0.2);
}
.admin-recipient-list.hidden { display: none; }

.admin-recipient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
}
.admin-recipient-row:last-child { border-bottom: none; }
.admin-recipient-row.excluded { opacity: 0.5; }

.admin-recipient-who { min-width: 0; display: flex; flex-direction: column; }

.admin-recipient-email {
  font-size: 12px;
  color: hsla(240, 100%, 100%, 0.85);
  overflow-wrap: anywhere;
}
.admin-recipient-name {
  font-size: 11px;
  color: hsla(240, 100%, 100%, 0.4);
}

.admin-recipient-list .admin-status-badge { flex-shrink: 0; }