/* Variables de branding (sobreescritas en runtime al cargar /v1/branding) */
:root {
  --brand-primary:   #2563eb;
  --brand-secondary: #1e3a8a;
  --brand-accent:    #3b82f6;
}

/* Tabs */
.tab-btn {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(161 161 170);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.tab-btn:hover { color: white; }
.tab-btn.active {
  color: white;
  border-bottom-color: var(--brand-primary);
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Channel cards */
.channel-card {
  background: rgb(24 24 27);
  border: 1px solid rgb(39 39 42);
  border-radius: 0.75rem;
  padding: 0.75rem;
  transition: all 0.15s;
  cursor: pointer;
  position: relative;
}
.channel-card:hover {
  border-color: var(--brand-primary);
  background: rgb(39 39 42);
  transform: translateY(-2px);
}
.channel-card.playing {
  border-color: var(--brand-primary);
  background: color-mix(in oklab, var(--brand-primary) 15%, rgb(24 24 27));
}
.channel-card .fav-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.7);
  border: none;
  color: rgb(161 161 170);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  opacity: 0;
  transition: all 0.15s;
}
.channel-card:hover .fav-btn,
.channel-card .fav-btn.active { opacity: 1; }
.channel-card .fav-btn.active { color: rgb(250 204 21); }

/* Toasts */
.toast {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.5);
  font-size: 0.875rem;
  min-width: 240px;
  animation: slideIn 0.2s ease-out;
  color: white;
}
.toast-success { background: rgb(22 163 74); }
.toast-error   { background: rgb(220 38 38); }
.toast-info    { background: var(--brand-primary); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Profile pickers */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 0.75rem;
  background: rgb(24 24 27);
  border: 1px solid rgb(39 39 42);
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.15s;
}
.profile-card:hover {
  border-color: var(--brand-primary);
  transform: scale(1.03);
}
.profile-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* Player */
#player-section.fullscreen { position: fixed; inset: 0; z-index: 50; }
#player-section.fullscreen #player-wrap { aspect-ratio: unset; height: 100vh; }

/* Custom scrollbar dark */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(24 24 27); }
::-webkit-scrollbar-thumb { background: rgb(63 63 70); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgb(82 82 91); }

/* EPG grid (vista guide) */
.epg-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2px;
}
.epg-time-header {
  grid-column: 2;
  display: flex;
  background: rgb(24 24 27);
  border-bottom: 2px solid rgb(63 63 70);
  position: sticky;
  top: 0;
  z-index: 5;
}
.epg-time-slot {
  flex: 0 0 120px;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: rgb(161 161 170);
  border-right: 1px solid rgb(39 39 42);
}
.epg-channel-cell {
  background: rgb(24 24 27);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  position: sticky;
  left: 0;
  z-index: 1;
}
.epg-channel-cell:hover { background: rgb(39 39 42); }
.epg-programmes {
  display: flex;
  position: relative;
  min-height: 60px;
  background: rgb(9 9 11);
}
.epg-prog {
  border-right: 1px solid rgb(24 24 27);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.1s, opacity 0.2s;
  background: rgb(24 24 27);
}
.epg-prog:hover { background: rgb(39 39 42); }

/* Programa ya terminado: opaco */
.epg-prog.past {
  opacity: 0.45;
}
.epg-prog.past:hover { opacity: 0.75; }

/* Programa actual (en cualquier canal): borde sutil, no llama tanto la atención */
.epg-prog.now {
  background: rgb(39 39 42);
  border-left: 2px solid rgb(113 113 122);
}

/* El programa que está reproduciéndose en el player: rojo destacado */
.epg-prog.playing {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(220, 38, 38, 0.25));
  border-left: 3px solid #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25) inset;
  position: relative;
}
.epg-prog.playing:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(220, 38, 38, 0.4));
}
.epg-prog.playing .playing-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  letter-spacing: 0.025em;
}

.epg-prog .title { font-weight: 500; color: white; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.epg-prog .time { color: rgb(161 161 170); margin-top: 0.125rem; }

/* ============ Buscador EPG ============ */
.search-result {
  transition: border-color 0.15s, background 0.15s;
}
.search-result:hover {
  background: rgb(30 30 33);
  border-color: rgb(63 63 70);
}

.airing-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: rgb(39 39 42);
  border: 1px solid rgb(63 63 70);
  border-radius: 9999px;
  font-size: 0.75rem;
  color: rgb(228 228 231);
  cursor: pointer;
  transition: all 0.15s;
}
.airing-btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}
.airing-channel { font-weight: 600; }
.airing-time { color: rgb(161 161 170); }
.airing-btn:hover .airing-time { color: rgba(255 255 255 / 0.85); }

/* Clamp util (sin plugin) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ Modal de detalle TMDB ============ */
.info-btn {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  background: rgb(63 63 70);
  border: 1px solid rgb(82 82 91);
  border-radius: 0.375rem;
  color: rgb(228 228 231);
  cursor: pointer;
  transition: all 0.15s;
}
.info-btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

.provider-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgb(39 39 42);
  border: 1px solid rgb(63 63 70);
  border-radius: 9999px;
  color: rgb(228 228 231);
  transition: all 0.15s;
  text-decoration: none;
}
.provider-pill:hover {
  background: rgb(63 63 70);
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}

.badge-pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: white;
  border-radius: 9999px;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary {
  background: rgb(39 39 42);
  color: rgb(228 228 231);
  border: 1px solid rgb(63 63 70);
}
.btn-secondary:hover { background: rgb(63 63 70); }
.btn-primary {
  background: var(--brand-primary);
  color: white;
  border: none;
}
.btn-primary:hover { filter: brightness(1.1); }

/* ============ Player colapsado (tab Buscar sin reproducción) ============ */
.player-collapsed #player-wrap,
.player-collapsed #player-info { display: none !important; }
.player-collapsed { border-bottom: 0 !important; }

/* Input de búsqueda sticky en la parte superior del tab content */
.search-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(to bottom, rgb(0 0 0) 60%, rgba(0 0 0 / 0));
  padding-bottom: 0.75rem;
  margin: 0 -1rem 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
}

/* ============ VOD ============ */
.vod-card {
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.vod-card:hover { transform: translateY(-2px); filter: brightness(1.1); }

.vod-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  background: rgb(24 24 27);
  border-radius: 0.5rem;
  overflow: hidden;
}
.vod-poster img { width: 100%; height: 100%; object-fit: cover; }
.vod-poster-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; opacity: 0.3;
}

.vod-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(0 0 0 / 0.6);
}
.vod-progress > div {
  height: 100%;
  background: var(--brand-primary);
  transition: width 0.3s;
}

/* ============ VOD Series + Episodios ============ */
.vod-series-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(147 51 234 / 0.9);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  backdrop-filter: blur(4px);
}

.vod-season summary {
  list-style: none;
  user-select: none;
}
.vod-season summary::-webkit-details-marker { display: none; }
.vod-season summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.625rem;
  color: rgb(113 113 122);
  transition: transform 0.15s;
}
.vod-season[open] summary::before { transform: rotate(90deg); }

.vod-ep-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: rgb(24 24 27);
  border: 1px solid rgb(39 39 42);
  border-radius: 0.5rem;
  color: rgb(228 228 231);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.vod-ep-row:hover {
  background: rgb(39 39 42);
  border-color: var(--brand-primary);
}
.vod-ep-num {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: rgb(113 113 122);
  min-width: 2.5rem;
}
.vod-ep-name {
  font-size: 0.875rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vod-ep-duration {
  font-size: 0.75rem;
  color: rgb(113 113 122);
}

/* ============ Plyr — VOD player overrides ============ */
/* Plyr es un wrapper alrededor del <video>. Ocupa todo el #player-wrap
   con position absolute, y los controles flotan abajo (position absolute
   bottom 0) ENCIMA del video con z-index 3 según el default de Plyr. */
#player-wrap .plyr {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 25; /* por encima del video bare (z-20) y el idle-banner (z-10) */
}

/* Permitir que los controles salgan visibles aún sobre fondos oscuros */
#player-wrap .plyr__video-wrapper {
  width: 100%;
  height: 100%;
}
#player-wrap .plyr video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* PROBLEMA: el <video> en el HTML original tiene class="z-20" (Tailwind)
   que se traduce a z-index: 20. Cuando Plyr lo envuelve, el video sigue
   con z:20 y TAPA los controles internos de Plyr (que están en z:3).
   Fix: forzar al video dentro de .plyr a z-index auto, y a los controles
   a un z-index alto. */
#player-wrap .plyr video,
#player-wrap .plyr .plyr__video-wrapper {
  z-index: auto !important;
}
#player-wrap .plyr__controls {
  z-index: 100 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Botón play grande centrado: también puede quedar tapado */
#player-wrap .plyr__control--overlaid {
  z-index: 90 !important;
}
/* En estado --hide-controls (autohide tras inactividad), bajar opacity */
#player-wrap .plyr.plyr--hide-controls .plyr__controls {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Color del brand en la barra de progreso */
:root {
  --plyr-color-main: var(--brand-primary);
  --plyr-video-control-color: #fff;
  --plyr-video-control-color-hover: #fff;
}

/* ========================================================================
   Layout adaptativo: --header-h / --player-h + media queries por viewport
   ------------------------------------------------------------------------
   El header sticky mide alturas distintas según browser/zoom/font/notch.
   Antes hardcodeábamos `top-[57px]` y se rompía en cualquier browser que
   no fuera Chrome 100% sin extensiones.
   setupAdaptiveLayout() en app.js mantiene --header-h actualizada vía
   ResizeObserver — esto es solo el fallback CSS por si JS tarda en cargar
   o falla, y los breakpoints para que el aspect-video no se coma todo.
   ======================================================================== */

:root {
  --header-h: 57px;   /* fallback razonable; JS lo sobreescribe en ms */
  --player-h: 0px;    /* 0 cuando no hay canal reproduciéndose */
}

/* Player wrap: aspect 16:9 pero NUNCA más del 60% del viewport por default.
   Sin esto, en pantallas landscape de baja altura (Nest Hub 1024x600,
   Surface Pro landscape) el player se come la viewport entera y la grilla
   de canales queda fuera de pantalla. */
#player-wrap {
  max-height: 60vh;
}

/* Mobile portrait chico: la grilla debe ser lo principal, player chico arriba.
   En iPhone SE (375x667) el aspect-video original ocuparía 375x210 = OK,
   pero queremos limitar para que sí o sí queden 2 filas de canales visibles. */
@media (orientation: portrait) and (max-width: 480px) {
  #player-wrap {
    max-height: 40vh;
  }
}

/* Landscape muy chata (smart displays tipo Nest Hub 1024x600).
   Compromiso 50/50 entre player y grilla. */
@media (orientation: landscape) and (max-height: 600px) {
  #player-wrap {
    max-height: 50vh;
  }
}

/* Tablet portrait (iPad ~768-1024 ancho): un poco más generoso. */
@media (orientation: portrait) and (min-width: 481px) and (max-width: 1024px) {
  #player-wrap {
    max-height: 50vh;
  }
}

/* Desktop grande (1280+): seguimos con 60vh por default — el player puede
   crecer en ancho hasta lo que el container permita. */

/* TVs / 4K / ultrawide: limitar a 1920px para que en 4K (3840x2160) el
   player no quede ridículamente gigante y se pueda navegar con remote.
   Sin este max-width crecería a 3840px de ancho = 2160px de alto = todo
   el viewport, sin lugar para la grilla. */
@media (min-width: 1920px) {
  #player-wrap {
    max-width: 1920px;
  }
}

/* Notch / safe-area en iOS (iPhone con notch o Dynamic Island).
   El header sticky debe respetar el área segura arriba — sino el contenido
   queda debajo del notch. */
@supports (padding-top: env(safe-area-inset-top)) {
  #view-app > header {
    padding-top: max(0.75rem, env(safe-area-inset-top));
  }
}

/* ==================== Rediseño estilo Cpar Play ==================== */

/* Píldoras de navegación en el header */
.nav-pill {
  padding: 0.45rem 1.1rem;
  border-radius: 9999px;
  background: rgb(39 39 42 / 0.6);
  border: 1px solid transparent;
  border-bottom: none !important;
  white-space: nowrap;
  font-size: 0.875rem;
}
.nav-pill.active { background: rgb(63 63 70); color: #fff; border-color: rgb(82 82 91); }
.nav-icon { border-bottom: none !important; padding: 0.45rem 0.6rem; border-radius: 9999px; }
.nav-icon.active { background: rgb(63 63 70); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Rieles horizontales */
.rail {
  display: flex; gap: 0.9rem; overflow-x: auto; padding: 0.25rem 0.1rem 0.75rem;
  scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: rgb(63 63 70); border-radius: 3px; }
.home-h { font-size: 1.5rem; font-weight: 700; margin: 1.2rem 0 0.7rem; }

/* Tarjetas héroe "Ahora en Vivo" */
.hero-card {
  position: relative; flex: 0 0 420px; max-width: 85vw; aspect-ratio: 16/9;
  border-radius: 0.9rem; overflow: hidden; cursor: pointer;
  background: rgb(24 24 27); scroll-snap-align: start;
  transition: transform .15s;
}
.hero-card:hover { transform: scale(1.015); }
.hero-bg, .hero-bg .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-logo-bg { position: absolute; inset: 0; margin: auto; max-width: 45%; max-height: 45%; object-fit: contain; opacity: .9; }
.hero-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.25) 45%, transparent 70%); }
.hero-txt { position: absolute; left: 1rem; right: 1rem; bottom: 0.8rem; }
.hero-bar { height: 4px; background: rgb(63 63 70); border-radius: 2px; margin-top: 0.5rem; overflow: hidden; }
.hero-bar i { display: block; height: 100%; background: #dc2626; }

/* Tiles de logos de canales */
.logo-tile {
  flex: 0 0 150px; aspect-ratio: 16/10; border-radius: 0.7rem; cursor: pointer;
  background: rgb(17 17 19); border: 1px solid rgb(39 39 42);
  display: flex; align-items: center; justify-content: center; padding: 0.9rem;
  transition: transform .15s, border-color .15s;
}
.logo-tile:hover { transform: scale(1.05); border-color: rgb(113 113 122); }
.logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-tile span { font-size: .8rem; color: rgb(161 161 170); text-align: center; }

/* Tiles VOD y servicios */
.vod-tile { position: relative; flex: 0 0 150px; aspect-ratio: 2/3; border-radius: 0.6rem; overflow: hidden; cursor: pointer; background: rgb(24 24 27); transition: transform .15s; }
.vod-tile:hover { transform: scale(1.04); }
.vod-tile img { width: 100%; height: 100%; object-fit: cover; }
/* Preview estilo Netflix: clip mudo en loop al pasar el mouse. */
.vod-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; z-index: 1; }
/* Etiqueta "NUEVO" sobre tiles/heroes. */
.badge-new { position: absolute; top: 6px; left: 6px; z-index: 3; background: var(--brand, #2563eb); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .4px; padding: 2px 6px; border-radius: 4px; }
.vod-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: .6rem; font-size: .8rem; color: rgb(161 161 170); text-align: center; }
.svc-tile { flex: 0 0 auto; padding: 1rem 1.6rem; border-radius: .7rem; background: rgb(24 24 27); border: 1px solid rgb(39 39 42); cursor: pointer; font-weight: 600; }
.svc-tile:hover { border-color: rgb(113 113 122); }

/* Vista TV en vivo: dos columnas en desktop; en móvil el player va ARRIBA */
.live-grid { display: grid; gap: 1.25rem; }
.live-grid > * { min-width: 0; }
.live-grid > div:first-child { order: 2; }
#live-right { order: 1; }
@media (min-width: 900px) {
  .live-grid { grid-template-columns: minmax(340px, 430px) 1fr; align-items: start; }
  .live-grid > div:first-child { order: 1; }
  #live-right { order: 2; position: sticky; top: calc(var(--header-h, 57px) + 1rem); }
  .live-list { max-height: calc(100vh - var(--header-h, 57px) - 7rem); overflow-y: auto; }
}
.live-list { display: flex; flex-direction: column; gap: 0.6rem; padding-right: 0.25rem; }
.live-list::-webkit-scrollbar { width: 6px; }
.live-list::-webkit-scrollbar-thumb { background: rgb(63 63 70); border-radius: 3px; }

/* Fila de canal */
.ch-row {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem;
  background: rgb(24 24 27 / .65); border: 1px solid rgb(39 39 42);
  border-radius: 0.8rem; cursor: pointer; transition: background .12s, border-color .12s;
}
.ch-row:hover { background: rgb(39 39 42 / .8); }
.ch-row.playing { border-color: #dc2626; background: rgb(45 26 26 / .5); }
.ch-logo { width: 72px; height: 54px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: #000; border-radius: .5rem; overflow: hidden; }
.ch-logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }
.ch-logo.lg { width: 96px; height: 72px; }
.ch-bar { height: 4px; background: rgb(63 63 70); border-radius: 2px; margin-top: 0.35rem; overflow: hidden; max-width: 340px; }
.ch-bar i { display: block; height: 100%; background: #dc2626; }
.ch-fav { font-size: 1.25rem; color: rgb(113 113 122); padding: .3rem .45rem; border-radius: .5rem; flex: 0 0 auto; }
.ch-fav:hover { color: #fff; background: rgb(63 63 70 / .6); }
.ch-fav.active { color: #dc2626; }

/* Switch "Mostrar Favoritos" */
.fav-switch { width: 44px; height: 24px; border-radius: 12px; background: rgb(63 63 70); position: relative; transition: background .15s; }
.fav-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.fav-switch.on { background: var(--brand-primary); }
.fav-switch.on i { left: 23px; }

/* Player dentro de la columna derecha de TV en vivo */
#player-section.in-live { position: static; border: 1px solid rgb(39 39 42); border-radius: 0.9rem; overflow: hidden; }
#player-section.in-live #player-wrap { border-radius: 0; }

/* Chips de catch-up / programación */
.cu-chip {
  flex: 0 0 210px; padding: 0.6rem 0.8rem; border-radius: 0.7rem;
  background: rgb(24 24 27); border: 1px solid rgb(39 39 42);
}
.cu-chip.playable { cursor: pointer; }
.cu-chip.playable:hover { border-color: rgb(113 113 122); }
.cu-chip.now { border-color: #dc2626; }
.cu-tag { display: inline-block; font-size: .68rem; padding: .1rem .5rem; border-radius: 9999px; margin-bottom: .3rem; }
.cu-tag.rep { background: rgb(30 58 138 / .5); color: #93c5fd; }
.cu-tag.next { background: rgb(20 83 45 / .5); color: #86efac; }
.cu-tag.live { background: rgb(127 29 29 / .6); color: #fca5a5; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }