/* 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));
  
  /* Status Colors */
  --status-connected: hsl(142, 72%, 45%);
  --status-disconnected: hsl(350, 80%, 55%);
  --status-warning: hsl(48, 96%, 53%);
  
  /* 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;
}

/* 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;
}

/* 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; }

.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; cursor: pointer; gap: var(--spacing-4); }
.settings-toggle { width: 18px; height: 18px; cursor: pointer; accent-color: var(--cyan); flex-shrink: 0; }

/* ---- 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). */
#multiview-dialog { 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; }
}

/* Startup cover — hides the live-edge catch-up seek on stream start */
.stream-startup-cover {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.stream-startup-cover.active {
  opacity: 1;
  pointer-events: all;
}
/* Hide spinner when offline overlay is showing */
.stream-startup-cover.offline::after {
  display: none;
}
.stream-startup-cover::after {
  content: '';
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* 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;
  background: hsla(240, 20%, 8%, 0.4);
}

.channel-main-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.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;
}

.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 */
}

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;
}

.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);
}

.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);
}
.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;
  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 */
.tv-guide-layout {
  --guide-channel-width: 260px;
  --guide-timeline-width: 5760px;
  --guide-half-hour-width: 120px;
  --guide-day-height: 62px;
  --guide-time-height: 58px;
  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: #24252b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
}

.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: linear-gradient(90deg, #168b86, #1e7f95);
  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 #1b8390;
  z-index: 2;
}

/* Time-row navigation arrows (overlay, fixed at NOW edge and far right) */
.timeline-nav {
  position: absolute;
  top: 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: #24252b;
  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;
}

.epg-grid-now-line::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.62);
}

.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: #27282e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--transition-fast);
}

.epg-row:nth-child(even) {
  background: #292a31;
}

.epg-row:hover {
  background: #303139;
}

.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;
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  background: #222329;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background var(--transition-fast);
}

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

@media (hover: hover) {
  .epg-row-header:hover {
    background: #30313a;
  }
}

.epg-row-header img {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 8px;
  object-fit: contain;
  padding: 4px;
  background: #17181d;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.epg-row-header-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

.epg-row-header-cat {
  max-width: 170px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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. The label is repeated
     8× (see app.js) and spread evenly, so "No Information" is readable in
     every screenful of the strip no matter where it's scrolled. */
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.025) 0 14px,
    transparent 14px 28px
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.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: #24252b;
}

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

.epg-program-block {
  position: absolute;
  top: 7px;
  height: calc(100% - 14px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-2);
  min-width: 8px;
  padding: 12px 12px 10px;
  overflow: hidden;
  color: #ffffff;
  background: #2c2d35;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.025);
  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: #373944;
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
}

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

.epg-program-block.active {
  background: #33454a;
  border-color: rgba(42, 201, 189, 0.58);
  box-shadow: inset 3px 0 0 #2ac9bd, 0 0 0 1px rgba(42, 201, 189, 0.1);
}

.epg-program-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bell badge on programmes with a reminder set */
.epg-program-bell {
  position: absolute;
  top: 4px;
  right: 5px;
  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-time {
  align-self: flex-end;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  color: rgba(255, 255, 255, 0.86);
  background: #4a5261;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.epg-program-block.compact .epg-program-title {
  display: none;
}

.epg-program-block.compact .epg-program-time {
  align-self: center;
  padding-inline: 4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* 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: 240px;
  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;
}

/* ==========================================================================
   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: hidden !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 modal has a warning, a password field and two CTAs. */
#delete-account-dialog.confirm-modal {
  width: 440px !important;
}

/* 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: hidden !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;
}

/* Override video height in PiP mode */
#tab-live.pip-mode .video-wrapper {
  height: calc(100% - 42px) !important;
  flex-grow: 1;
}

/* 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;
}

.legal-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-6);
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--radius-md);
  max-width: 680px;
  margin: 40px auto 0 auto;
  text-align: left;
}

.legal-banner i {
  color: var(--status-disconnected);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.legal-banner p {
  font-size: 12px;
  color: hsla(240, 100%, 100%, 0.7);
  line-height: 1.5;
}

/* 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); }

.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 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !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;
  }
}