* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #141414;
  color: #fff;
  overflow-x: hidden;
}

.container { padding: 20px 40px; }

header {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #333;
  margin-bottom: 20px;
}
/* Flex `gap` isn't supported on older Tizen WebKit (pre-Safari 14.1), so the
   Update button would butt up against the title. Use sibling-margin instead —
   renders identically on Chromium and on the Tizen TV browser. */
header > * + * { margin-left: 20px; }
header h1 { font-size: 28px; color: #e50914; flex-shrink: 0; }

/* Header action button (Update) — sits right after the title */
.header-btn {
  padding: 6px 14px;
  border: 1px solid #555;
  border-radius: 6px;
  background: #222;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-btn:focus, .header-btn:hover {
  background: #e50914;
  color: #fff;
  border-color: #e50914;
  outline: 2px solid #fff;
}

/* Tabs */
.tab-bar {
  display: flex;
  gap: 6px;
  margin: 0 auto;
}
.tab-btn {
  padding: 8px 18px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #222;
  color: #aaa;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}
.tab-btn.active {
  background: #e50914;
  color: #fff;
  border-color: #e50914;
}
.tab-btn:focus, .tab-btn:hover {
  outline: 2px solid #fff;
}

/* Search */
.search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.search-input {
  width: 300px;
  padding: 10px 18px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 16px;
}
.search-input:focus {
  border-color: #e50914;
  outline: none;
  box-shadow: 0 0 10px rgba(229, 9, 20, 0.4);
}
.search-clear {
  width: 36px;
  height: 36px;
  border: 1px solid #555;
  border-radius: 50%;
  background: #333;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-clear:focus, .search-clear:hover {
  background: #e50914;
  border-color: #e50914;
  outline: 2px solid #fff;
}

/* Movie Grid — Netflix style */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  padding: 10px 0;
}

.movie-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #222;
  cursor: pointer;
  outline: 3px solid transparent;
  margin: 4px;
}

.movie-card:focus, .movie-card:hover {
  transform: scale(1.08);
  z-index: 10;
  outline: 3px solid #e50914;
  box-shadow: 0 8px 30px rgba(229, 9, 20, 0.4);
}

.movie-poster {
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: #1a1a1a;
}

.movie-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Poster placeholder — shown when there's no poster URL or the image 404s.
   Colour is driven by CSS custom props so renderCard() can seed each tile
   with its own hue based on the title, giving the grid visual variety. */
.movie-poster.no-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(135deg, hsl(var(--pp-h, 220), 45%, 22%), hsl(var(--pp-h, 220), 40%, 12%));
  position: relative;
  overflow: hidden;
}
.movie-poster.no-poster::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 80% 90%, rgba(0,0,0,0.35), transparent 60%);
  pointer-events: none;
}
.no-poster-title {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.no-poster-year {
  position: relative;
  margin-top: 12px;
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 1px;
}
.no-poster-brand {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.35);
  font-weight: bold;
}

.movie-info {
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  position: relative;
}

/* Watch-progress bar across the bottom of the card */
.movie-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.12);
  z-index: 4;
  pointer-events: none;
}
.movie-progress-fill {
  height: 100%;
  background: #e50914;
}

/* Corner badges: watched / dead / count */
.movie-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.movie-badge.watched { background: rgba(46, 160, 67, 0.95); color: #fff; }
.movie-badge.dead    { background: rgba(229, 9, 20, 0.95); color: #fff; }
.movie-badge.seen    { background: rgba(30, 136, 229, 0.95); color: #fff; }
/* NEW badge sits in the top-LEFT so it can coexist with the watched/seen
   badge on the right. Pulses to catch the eye on the grid. */
.movie-badge.new-ep  {
  left: 8px; right: auto;
  background: #e50914; color: #fff;
  letter-spacing: 0.5px;
  animation: pulse 1.8s infinite;
}

/* Episode list: progress + checkmark per episode */
.episode-btn { position: relative; }
.episode-btn.ep-watched::after {
  content: '✓';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #2ea043;
  font-size: 1.1em;
  font-weight: bold;
}
.episode-btn.ep-dead::after {
  content: '⚠';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #e50914;
  font-size: 1.1em;
}
.ep-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.ep-progress-fill {
  display: block;
  height: 100%;
  background: #e50914;
}

.movie-title {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.movie-year {
  font-size: 12px;
  color: #888;
  margin-right: 8px;
}

.movie-quality {
  font-size: 11px;
  background: #e50914;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
}

.movie-rating {
  font-size: 11px;
  background: #f1c40f;
  color: #1a1a1a;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
  margin-left: 6px;
}

.movie-genres {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.genre-chip {
  font-size: 10px;
  background: rgba(255,255,255,0.08);
  color: #bbb;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
}

/* Loading */
.loading {
  text-align: center;
  padding: 60px;
  color: #888;
  font-size: 20px;
}

/* TV Controls */
.tv-controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 100;
}

.tv-btn {
  padding: 12px 20px;
  border: 1px solid #555;
  border-radius: 8px;
  background: rgba(0,0,0,0.8);
  color: white;
  font-size: 16px;
  cursor: pointer;
}
.tv-btn:focus, .tv-btn:hover {
  background: #e50914;
  border-color: #e50914;
  outline: 2px solid #fff;
}

/* Modals */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal.active {
  display: flex;
}

.modal-content {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 30px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.close-modal {
  position: absolute;
  top: 15px; right: 20px;
  font-size: 32px;
  color: #888;
  cursor: pointer;
}
.close-modal:hover { color: #fff; }

.back-btn {
  background: none;
  border: 1px solid #555;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 15px;
}
.back-btn:focus, .back-btn:hover { background: #333; }

/* Video Player */
.video-container { width: 100%; }
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
  border-radius: 8px;
}
.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* Forms */
.update-form { margin-top: 15px; }
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  font-size: 14px;
  color: #888;
  margin-bottom: 5px;
}
.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 18px;
}
.form-group input:focus {
  border-color: #e50914;
  outline: none;
}
.form-buttons {
  display: flex;
  gap: 10px;
}
.btn-primary {
  padding: 12px 24px;
  background: #e50914;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
}
.btn-primary:focus, .btn-primary:hover { background: #f40612; outline: 2px solid #fff; }
.btn-secondary {
  padding: 12px 24px;
  background: #333;
  border: 1px solid #555;
  border-radius: 6px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
.btn-secondary:focus, .btn-secondary:hover { background: #444; outline: 2px solid #fff; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
  margin-top: 10px;
}
.page-info {
  font-size: 18px;
  color: #888;
}

/* Section titles */
.section-title {
  font-size: 22px;
  color: #fff;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e50914;
}

/* Series card badge */
.series-card .movie-poster { border-bottom: 3px solid #1e88e5; }

/* Episode buttons — wrap-grid of card-style tiles. Big episode number,
   small "EP" tag, gradient surface. Designed to scale to many episodes
   without pushing the top of the list off-screen. */
.episode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.episode-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 96px;
  padding: 10px 12px;
  background: linear-gradient(160deg, #2a2a2e 0%, #1a1a1d 100%);
  border: 1px solid #3a3a3f;
  border-radius: 12px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  overflow: hidden;
}
.episode-btn .ep-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #888;
  text-transform: uppercase;
}
.episode-btn .ep-num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
  color: #fff;
}
.episode-btn .ep-active-tag {
  font-size: 10px;
  font-weight: 600;
  color: #4CAF50;
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.episode-btn:focus, .episode-btn:hover, .episode-btn.tv-focused {
  background: linear-gradient(160deg, #e50914 0%, #b00610 100%);
  border-color: #ff1f2d;
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(229, 9, 20, 0.45);
  outline: none;
}
.episode-btn:focus .ep-tag,
.episode-btn:hover .ep-tag,
.episode-btn.tv-focused .ep-tag { color: rgba(255,255,255,0.85); }

/* Watched: dimmed surface, the existing ::after checkmark stays */
.episode-btn.ep-watched {
  background: linear-gradient(160deg, #1a2a1a 0%, #131a13 100%);
  border-color: #2a3d2a;
}
.episode-btn.ep-watched .ep-num { color: #cfe9cf; }
.episode-btn.ep-watched.tv-focused {
  background: linear-gradient(160deg, #e50914 0%, #b00610 100%);
  border-color: #ff1f2d;
}

/* Dead stream: warm tint */
.episode-btn.ep-dead {
  background: linear-gradient(160deg, #2a1a1a 0%, #1a1313 100%);
  border-color: #4a2a2a;
  opacity: 0.75;
}

/* Active (last-watched) episode — green ring + brighter surface */
.episode-btn.episode-active {
  background: linear-gradient(160deg, #1f3d1f 0%, #122312 100%);
  border-color: #4CAF50;
  box-shadow: 0 0 0 1px #4CAF50 inset;
}
.episode-btn.episode-active .ep-num { color: #d6f5d6; }
.episode-btn.episode-active:focus,
.episode-btn.episode-active.tv-focused {
  background: linear-gradient(160deg, #2e7d32 0%, #1b5e20 100%);
  border-color: #4CAF50;
  box-shadow: 0 0 24px rgba(76, 175, 80, 0.55), 0 0 0 1px #4CAF50 inset;
  transform: scale(1.06);
}

/* Override the default ep-watched/ep-dead checkmark positions so the
   icons sit in the top-right corner of the card cleanly. */
.episode-btn.ep-watched::after,
.episode-btn.ep-dead::after {
  top: 8px;
  right: 8px;
  transform: none;
  font-size: 12px;
}


/* Cricket Schedule */
.match-list { padding: 10px 0; }
.match-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  margin-bottom: 8px;
  background: #1e1e1e;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.match-card:focus, .match-card:hover, .match-card.tv-focused {
  border-color: #e50914;
  transform: scale(1.02);
  background: #2a2a2a;
}
.match-title { flex: 1; font-size: 20px; font-weight: 600; }
.match-time { font-size: 16px; color: #aaa; min-width: 140px; text-align: right; }
.match-badge {
  font-size: 13px;
  font-weight: bold;
  padding: 4px 14px;
  border-radius: 20px;
  min-width: 60px;
  text-align: center;
}
.badge-live { background: #e50914; color: #fff; animation: pulse 1.5s infinite; }
.badge-scheduled { background: #1e88e5; color: #fff; }
.badge-ended { background: #555; color: #aaa; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.refresh-btn {
  padding: 10px 20px;
  border: 1px solid #555;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.refresh-btn:focus, .refresh-btn:hover {
  background: #e50914;
  border-color: #e50914;
  outline: 2px solid #fff;
}

/* Schedule toolbar — Refresh on the left, Source picker group on the right.
   Wrap-aware so 4+ source pills don't overrun narrower screens. */
.schedule-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.source-picker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 14px;
  background: #1c1c1f;
  border: 1px solid #333;
  border-radius: 999px;
}
.source-picker-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #888;
  text-transform: uppercase;
  margin-right: 4px;
}
.source-pill {
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #ccc;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.source-pill:hover { color: #fff; background: #2a2a2e; }
.source-pill.is-active {
  background: #e50914;
  color: #fff;
  border-color: #ff1f2d;
  font-weight: 600;
}
.source-pill.is-active:hover { background: #c50812; }
.source-pill.tv-focused,
.source-pill:focus {
  background: #e50914;
  color: #fff;
  outline: none !important;
  box-shadow: 0 0 0 2px #ff1f2d, 0 0 18px rgba(229, 9, 20, 0.55) !important;
}

/* Focusable elements — TV remote */
.focusable:focus, .tv-focused {
  outline: 3px solid #e50914 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.5) !important;
}
.movie-card.tv-focused {
  transform: scale(1.08);
  z-index: 10;
}
.tv-btn.tv-focused, .btn-primary.tv-focused, .btn-secondary.tv-focused {
  background: #e50914 !important;
  color: white !important;
}

/* Tab focus ring sits inside the button so it doesn't clip against the header */
.tab-btn.tv-focused {
  outline-offset: 2px !important;
  transform: translateY(-1px);
}
/* When a tab is both active AND focused, keep the active red and add a white ring */
.tab-btn.active.tv-focused {
  outline: 3px solid #fff !important;
  box-shadow: 0 0 0 2px #e50914, 0 0 20px rgba(255,255,255,0.45) !important;
}

/* -----------------------------------------------------------------
   Shortcut hint bar — Samsung color-key legend at the bottom-left.
   Stays unobtrusive so it doesn't compete with .tv-controls at bottom-right.
   ----------------------------------------------------------------- */
.shortcut-hint {
  position: fixed;
  left: 20px;
  bottom: 20px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 14px;
  background: rgba(0,0,0,0.65);
  border: 1px solid #333;
  border-radius: 8px;
  font-size: 13px;
  color: #ddd;
  z-index: 90;
  pointer-events: none;
  user-select: none;
}
.shortcut-hint .sk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.shortcut-hint .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
}
.shortcut-hint .dot.red    { background: #e50914; }
.shortcut-hint .dot.green  { background: #2ea043; }
.shortcut-hint .dot.yellow { background: #f1c40f; }
.shortcut-hint .dot.blue   { background: #1e88e5; }

/* Manual Update — progress bar + ETA + Cancel button */
.scrape-progress {
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 10px;
}
.scrape-progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.scrape-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #e50914, #ff4d1c);
  transition: width 0.25s;
}
.scrape-progress-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: #ddd;
  margin-bottom: 8px;
}
.scrape-progress-current {
  font-size: 13px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------
   Live TV — channel grid. Denser than .movie-grid since channel
   logos are square/wide and don't need poster aspect ratio.
   ----------------------------------------------------------------- */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.channel-card {
  position: relative;
  background: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  outline: 3px solid transparent;
  display: flex;
  flex-direction: column;
}
.channel-card:focus, .channel-card:hover, .channel-card.tv-focused {
  transform: scale(1.06);
  outline: 3px solid #e50914;
  box-shadow: 0 8px 24px rgba(229, 9, 20, 0.45);
  z-index: 3;
}

.channel-logo {
  width: 100%;
  height: 112px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px;
}
.channel-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.channel-logo.no-poster {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(135deg, hsl(var(--pp-h, 220), 45%, 22%), hsl(var(--pp-h, 220), 40%, 12%));
  position: relative;
  padding: 14px;
  text-align: center;
}

.channel-name {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  background: #1a1a1a;
  border-top: 1px solid #2a2a2a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #eee;
}

/* Favorite star overlay on channel cards */
.channel-fav {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 20px;
  line-height: 1;
  color: rgba(255,255,255,0.35);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: 3;
  transition: color 0.15s, transform 0.15s;
}
.channel-card.is-fav .channel-fav {
  color: #f1c40f;
  transform: scale(1.15);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 10px rgba(241,196,15,0.6);
}

/* Dead-stream badge — dims the whole card and overlays a small pill so users
   see at a glance which channels have errored out in the last 24h. */
.channel-card.is-unavailable .channel-logo,
.channel-card.is-unavailable .channel-name { opacity: 0.45; filter: grayscale(0.6); }
.channel-dead {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(180, 40, 40, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 3;
}

/* In-card Play / Favorite overlay — revealed when a channel card is activated
   with OK. Covers the tile with two big buttons so it works without color keys. */
.channel-actions {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  z-index: 5;
}
.channel-card.is-expanded {
  transform: scale(1.06);
  outline: 3px solid #e50914;
  box-shadow: 0 8px 24px rgba(229, 9, 20, 0.45);
  z-index: 4;
}
.channel-card.is-expanded .channel-actions {
  display: flex;
}
.channel-action {
  padding: 12px 10px;
  background: #222;
  border: 2px solid #444;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}
.channel-action:focus,
.channel-action:hover,
.channel-action.tv-focused {
  background: #e50914;
  border-color: #fff;
  outline: 3px solid #fff !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.6) !important;
}

/* Favorite action toast (appears after pressing GREEN on a channel) */
.fav-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 24px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  border: 1px solid #555;
  border-radius: 10px;
  z-index: 9999;
  pointer-events: none;
  animation: fav-toast-fade 1.4s ease-out forwards;
}
@keyframes fav-toast-fade {
  0%   { opacity: 0; transform: translate(-50%, -42%) scale(0.92); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}