/* =============================================
   CLIFF v2 — STYLES (UI OVERHAUL 2026-03-12)
   Premium Glass Aesthetic · Dark-first · Mobile-first
   ============================================= */

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --app-name: 'StillWatching';
  --app-tagline: 'Your shows. Always in the know.';
  --bg-primary: #090912;
  --bg-secondary: #11111c;
  --bg-tertiary: #191926;
  --bg-card: rgba(255,255,255,0.035);
  --bg-card-hover: rgba(255,255,255,0.07);
  --glass-bg: rgba(17,17,28,0.94);
  --glass-border: rgba(255,255,255,0.075);
  --glass-blur: blur(20px);
  --text-primary: #f1f2fb;
  --text-secondary: rgba(241,242,251,0.58);
  --text-tertiary: rgba(241,242,251,0.3);
  --text-on-accent: #ffffff;
  --text-inverse: #ffffff;
  --hero-surface: linear-gradient(135deg, rgba(10,12,22,0.98), rgba(12,15,28,0.94));
  --hero-surface-strong: linear-gradient(180deg, rgba(18,20,34,0.98), rgba(8,9,16,0.98));
  --hero-panel-bg: rgba(10,12,22,0.42);
  --accent: #8b6ff5;
  --accent-soft: rgba(139,111,245,0.16);
  --accent-glow: 0 0 22px rgba(139,111,245,0.22);
  --accent2: #c4a1ff;
  --accent3: #f97316;
  --accent4: #fb923c;
  --green: #4ade80;
  --orange: #fb923c;
  --red: #f87171;
  --blue: #60a5fa;
  --yellow: #fbbf24;
  --nav-height: 80px;
  --top-bar-height: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-card: 0 8px 28px rgba(0,0,0,0.42);
  --shadow-modal: 0 -8px 80px rgba(0,0,0,0.68);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --bounce: 0.5s cubic-bezier(0.34,1.1,0.64,1);
  --spring: 0.4s cubic-bezier(0.32,0.72,0,1);
}


/* ── Global Polish ── */

/* Selection colour */
::selection { background: rgba(139,111,245,0.3); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: rgba(139,111,245,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,111,245,0.6); }

/* Base focus ring — components can override with their own */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Image fade-in base */
img { opacity: 0; transition: opacity 0.3s ease; }
img.loaded { opacity: 1; }


html { font-size: 16px; color-scheme: dark; scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ambient-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: clip;
  opacity: 0.18;
}
.orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(14px);
  opacity: 0.22;
  animation: orbFloat 18s ease-in-out infinite;
  will-change: transform;
}
/* Pause decorative animations when the tab is hidden to save GPU/battery */
:root:has(body.page-hidden) .orb { animation-play-state: paused; }
.orb-1 {
  width: 320px;
  height: 320px;
  top: 8%;
  left: -80px;
  background: radial-gradient(circle, rgba(124,111,255,0.24) 0%, rgba(124,111,255,0) 70%);
}
.orb-2 {
  width: 280px;
  height: 280px;
  right: -70px;
  top: 22%;
  background: radial-gradient(circle, rgba(255,107,157,0.18) 0%, rgba(255,107,157,0) 72%);
  animation-duration: 22s;
}
.orb-3 {
  width: 360px;
  height: 360px;
  left: 38%;
  bottom: -170px;
  background: radial-gradient(circle, rgba(0,212,255,0.14) 0%, rgba(0,212,255,0) 72%);
  animation-duration: 26s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -16px, 0) scale(1.04); }
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 20% -20%, rgba(122,121,218,0.12) 0%, transparent 58%),
    radial-gradient(ellipse 60% 40% at 85% 110%, rgba(201,127,149,0.06) 0%, transparent 52%),
    radial-gradient(ellipse 50% 60% at 50% 60%, rgba(112,194,200,0.03) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.desktop-sidebar {
  display: none;
}

.signed-out-topbar {
  gap: 18px;
}

.signed-out-topbar-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.signed-out-topbar-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--accent3);
  font-weight: 800;
}

.signed-out-topbar-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.signed-out-topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.landing-header-btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
}

.signed-out-hero {
  margin: 12px 20px 22px;
  padding: 26px;
  border-radius: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 18px;
  background:
    radial-gradient(circle at top left, rgba(122,121,218,0.16), transparent 36%),
    radial-gradient(circle at bottom right, rgba(112,194,200,0.08), transparent 32%),
    linear-gradient(135deg, rgba(10,12,22,0.92), rgba(12,15,28,0.82));
  box-shadow: 0 20px 50px rgba(0,0,0,0.28);
}

.signed-out-hero-copy,
.signed-out-hero-panel {
  min-width: 0;
}

.signed-out-hero-kicker,
.signed-out-hero-panel-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent3);
  font-weight: 800;
}

.signed-out-hero-title {
  margin-top: 10px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.02;
  letter-spacing: -1.5px;
}

.signed-out-hero-sub,
.signed-out-hero-panel-copy {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.signed-out-hero-highlights,
.signed-out-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.signed-out-hero-panel {
  display: flex;
  align-items: stretch;
}

.signed-out-hero-panel-card {
  width: 100%;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
}

.signed-out-hero-panel-title {
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.auth-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 14, 0.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.auth-gate-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.auth-gate-sheet {
  width: min(100%, 480px);
  padding: 24px;
  border-radius: 28px;
  position: relative;
  box-shadow: 0 22px 60px rgba(0,0,0,0.34);
}

.auth-gate-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
}

.auth-gate-title {
  margin-top: 10px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -1px;
}

.auth-gate-copy {
  margin-top: 10px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.auth-gate-toggle {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}

.auth-gate-toggle-btn {
  min-height: 42px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auth-gate-toggle-btn.active {
  background: linear-gradient(135deg, rgba(122,121,218,0.92), rgba(110,118,198,0.88));
  color: #fff;
}

.auth-gate-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.auth-gate-input,
.auth-gate-submit,
.auth-gate-secondary {
  width: 100%;
}

.auth-gate-submit,
.auth-gate-secondary {
  justify-content: center;
  margin-top: 12px;
}

.auth-gate-link {
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.quick-picks-grid {
  display: grid;
  gap: 14px;
}
.quick-pick-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  overflow: hidden;
  min-height: 168px;
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
  animation: fadeUp .5s var(--spring) both;
}
.quick-pick-backdrop,
.quick-pick-overlay {
  position: absolute;
  inset: 0;
}
.quick-pick-backdrop {
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  filter: saturate(1.08);
}
.quick-pick-overlay {
  background:
    linear-gradient(180deg, rgba(8,8,16,.1) 0%, rgba(8,8,16,.7) 65%, rgba(8,8,16,.9) 100%),
    linear-gradient(135deg, rgba(122,121,218,.18), rgba(201,127,149,.08));
}
.quick-pick-body {
  position: relative;
  z-index: 1;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}
.quick-pick-topline,
.quick-pick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.quick-pick-source,
.quick-pick-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
}
.quick-pick-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.quick-pick-meta {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  margin-bottom: 10px;
}
.quick-pick-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quick-pick-actions .mini-btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (min-width: 860px) {
  .quick-picks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes splashIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: var(--safe-top);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--transition);
  will-change: transform;
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--top-bar-height);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-home-btn {
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.logo-home-btn:hover .logo-mark,
.logo-home-btn:focus-visible .logo-mark {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 14px 28px rgba(124,111,255,0.18);
}
.logo-home-btn:focus-visible {
  outline: 2px solid rgba(124,111,255,0.42);
  outline-offset: 6px;
  border-radius: 14px;
}

.cliff-mark {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.42), transparent 34%),
    linear-gradient(145deg, rgba(18,22,42,0.96), rgba(10,12,24,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cliff-mark-ring,
.cliff-mark-core,
.cliff-mark-peak {
  position: absolute;
  display: block;
}
.cliff-mark-ring {
  inset: 5px;
  border-radius: 9px;
  border: 1px solid rgba(122,121,218,0.24);
  box-shadow: inset 0 0 16px rgba(122,121,218,0.08);
}
.cliff-mark-core {
  inset: 7px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(122,121,218,0.16), rgba(112,194,200,0.08));
}
.cliff-mark-peak {
  bottom: 7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 13px solid rgba(217,221,255,0.92);
  filter: drop-shadow(0 0 10px rgba(122,121,218,0.16));
}
.cliff-mark-peak.peak-back {
  left: 7px;
  bottom: 8px;
  transform: scale(0.84);
  border-bottom-color: rgba(120,135,188,0.9);
}
.cliff-mark-peak.peak-front {
  right: 5px;
}

.logo-mark {
  width: 34px;
  height: 34px;
}

.logo-icon {
  font-size: 24px;
  filter: drop-shadow(0 0 10px rgba(122,121,218,0.36));
  animation: float 3.5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

.logo-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.top-bar-actions { display: flex; gap: 8px; align-items: center; }

.sync-chip {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font: inherit;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.sync-chip:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(122,121,218,0.22);
  box-shadow: 0 12px 26px rgba(8,8,16,0.2);
}
.sync-chip:active {
  transform: translateY(0);
}
.sync-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(251,146,60,0.14);
  flex-shrink: 0;
}
.sync-chip-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.sync-chip.ready .sync-chip-dot {
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(74,222,128,0.14);
}
.sync-chip.connected .sync-chip-dot {
  background: var(--accent3);
  box-shadow: 0 0 0 5px rgba(112,194,200,0.14);
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--bg-card);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.icon-btn:hover { background: var(--bg-card-hover); transform: scale(1.06); }
.icon-btn:active { transform: scale(0.93); }
.icon-btn svg { width: 18px; height: 18px; }


.pages-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.page.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  animation: pageIn 0.22s cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.page-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overflow-anchor: none;
  padding-top: calc(var(--top-bar-height) + var(--safe-top) + 8px);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.page-scroll::-webkit-scrollbar { width: 3px; }
.page-scroll::-webkit-scrollbar-track { background: transparent; }
.page-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.section { padding: 0 0 36px; }

.local-banner {
  margin: 12px 20px 18px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  background:
    linear-gradient(135deg, rgba(122,121,218,0.12), rgba(112,194,200,0.06)),
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 34%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  animation: localBannerEntrance .55s var(--spring);
  overflow: hidden;
  position: relative;
}
.local-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.08) 46%, transparent 58%);
  transform: translateX(-120%);
  animation: sheenSweep 8s ease-in-out infinite;
}
@keyframes sheenSweep {
  0%, 70%, 100% { transform: translateX(-120%); }
  84% { transform: translateX(130%); }
}
.local-banner.local-banner-muted {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  pointer-events: none;
  animation: none;
}
.local-banner-title { font-weight: 800; font-size: 14px; }
.local-banner-sub { font-size: 12px; color: var(--text-secondary); max-width: 520px; line-height: 1.4; }
.local-banner-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}
.local-banner-btn:hover { transform: translateY(-1px) scale(1.02); background: rgba(255,255,255,0.16); }
@keyframes localBannerEntrance {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.home-feature-stack {
  display: grid;
  gap: 12px;
  padding: 0 20px 22px;
}

.binge-pulse-section {
  padding-bottom: 26px;
}

.binge-pulse-grid {
  display: grid;
  gap: 12px;
  padding: 0 20px;
}

.binge-pulse-card {
  position: relative;
  min-height: 166px;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  box-shadow: var(--shadow-card);
  animation: fadeInUp 0.5s ease both;
}

.binge-pulse-backdrop,
.binge-pulse-overlay {
  position: absolute;
  inset: 0;
}

.binge-pulse-backdrop {
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: saturate(1.06);
  transition: transform 0.7s ease;
}

.binge-pulse-overlay {
  background:
    linear-gradient(135deg, rgba(8,9,16,0.18), rgba(8,9,16,0.82)),
    radial-gradient(circle at top right, rgba(122,121,218,0.16), transparent 32%);
}

.binge-pulse-card:hover .binge-pulse-backdrop {
  transform: scale(1.11);
}

.binge-pulse-content {
  position: relative;
  z-index: 1;
  min-height: 166px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.binge-pulse-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 800;
}

.binge-pulse-rank {
  color: #fff;
}

.binge-pulse-streak {
  color: var(--accent3);
}

.binge-pulse-title {
  font-size: 24px;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.9px;
  color: #fff;
}

.binge-pulse-meta {
  margin-top: 7px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
}

.binge-pulse-copy {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 42ch;
}

.binge-pulse-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.binge-pulse-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.binge-pulse-actions .mini-btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.watch-plan-card,
.activity-feed-card {
  border-radius: 22px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transform: translateZ(0);
}
.watch-plan-card::before,
.activity-feed-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 38%, rgba(122,121,218,.05));
}
.watch-plan-card::after,
.activity-feed-card::after {
  content: '';
  position: absolute;
  inset: -40% auto auto -10%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.07), rgba(255,255,255,0));
  pointer-events: none;
}
.module-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent3);
  font-weight: 800;
  margin-bottom: 8px;
}
.module-title {
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.7px;
  font-weight: 800;
  margin-bottom: 8px;
}
.module-copy {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.watch-plan-hero {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: center;
  margin: 14px 0 16px;
}
.watch-plan-poster {
  width: 88px;
  aspect-ratio: 2/3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-tertiary);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.watch-plan-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watch-plan-show { font-size: 19px; font-weight: 800; letter-spacing: -.5px; }
.watch-plan-meta { margin-top: 6px; color: var(--text-secondary); font-size: 13px; }
.watch-plan-progress-wrap { margin-top: 12px; }
.watch-plan-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.watch-plan-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.mini-btn {
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
}
.mini-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.1); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.mini-btn:active { transform: scale(0.96) translateY(0); transition: transform 0.08s ease; }
.mini-btn.primary {
  background: linear-gradient(135deg, var(--accent), #8c91d9);
  border-color: transparent;
  color: white;
  box-shadow: 0 10px 24px rgba(122,121,218,.22);
}
.mini-btn.subtle {
  background: rgba(122,121,218,0.10);
  border-color: rgba(122,121,218,0.2);
  color: var(--accent);
  font-size: 12px;
}
.mini-btn.subtle:hover { background: rgba(122,121,218,0.18); border-color: rgba(122,121,218,0.35); }
.activity-feed-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.activity-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.activity-item:first-child { border-top: none; padding-top: 0; }
.activity-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(122,121,218,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
/* Poster thumbnail replaces emoji in queue widget */
.activity-icon-poster {
  width: 40px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-tertiary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.activity-icon-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.activity-icon-emoji { font-size: 20px; }
.activity-item { grid-template-columns: 40px 1fr auto; align-items: center; }
.activity-item-body { min-width: 0; }
.activity-title { font-size: 13px; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.activity-time { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

.persistence-import-preview {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(122,121,218,0.14);
  background: linear-gradient(135deg, rgba(122,121,218,0.08), rgba(255,255,255,0.03));
}

.persistence-import-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1px;
}

.persistence-import-copy {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.persistence-import-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.persistence-import-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  font-weight: 700;
}

.persistence-import-samples {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.persistence-import-sample {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.32);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
}

.persistence-import-sample-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-tertiary);
}

.btn-secondary.danger {
  border-color: rgba(248,113,113,0.28);
  color: #ffd1d1;
}

.btn-secondary.danger:hover {
  background: rgba(248,113,113,0.12);
}

.showcase-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1px;
}
.showcase-chip-accent { background: rgba(122,121,218,.14); color: #e1e1fb; border-color: rgba(122,121,218,.26); }

.continue-watching-rail {
  display: grid;
  gap: 12px;
  padding: 0 20px 14px;
}

.continue-rail-card {
  width: 100%;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(122,121,218,0.12), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.03);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  animation: fadeInUp 0.35s ease both;
}

.continue-rail-card:hover {
  transform: translateY(-2px);
  border-color: rgba(122,121,218,0.26);
  box-shadow: 0 20px 42px rgba(0,0,0,0.32);
}

.continue-rail-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 800;
  color: var(--accent3);
}

.continue-rail-title {
  margin-top: 5px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.continue-rail-copy {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.continue-rail-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.continue-rail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  /* When 4th stat (queued time) is present, auto-expand */
}
.continue-rail-stats:has(.is-queue-time) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 400px) {
  .continue-rail-stats:has(.is-queue-time) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.continue-rail-stat {
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 72px;
}

.continue-rail-stat.is-accent {
  border: 1px solid rgba(122,121,218,0.24);
  box-shadow: inset 0 0 0 1px rgba(122,121,218,0.06);
}
.continue-rail-stat.is-queue-time {
  border: 1px solid rgba(112,194,200,0.2);
}
.continue-rail-stat.is-queue-time .continue-rail-stat-value {
  color: var(--accent3);
  font-size: 18px;
}

.continue-rail-stat-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.continue-rail-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.card-chip-row,
.hero-chip-row,
.poster-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.card-chip-row {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  pointer-events: none;
}
.poster-chip-row {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 40px;
  z-index: 3;
}
.hero-chip-row {
  margin: 10px 0 0;
}
.card-chip-row .showcase-chip,
.poster-chip-row .showcase-chip,
.hero-chip-row .showcase-chip { padding: 4px 8px; font-size: 10px; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 14px;
}

.section-header-stack {
  align-items: flex-end;
}

.section-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.section-subtitle {
  margin-top: 5px;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.see-all-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  opacity: 0.85;
  transition: opacity var(--transition);
}
.see-all-btn:hover { opacity: 1; }

.hero-section {
  padding: 0 0 20px;
  position: relative;
  overflow-anchor: none;
}

.hero-carousel {
  position: relative;
  margin: 0 20px;
  border-radius: var(--radius-xl);
  overflow: clip;
  isolation: isolate;
  min-height: 380px;
  background: linear-gradient(135deg, rgba(14,16,28,0.98), rgba(8,9,16,0.94));
  box-shadow: var(--shadow-card), 0 24px 60px rgba(0,0,0,0.22);
}
.hero-carousel::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  background: linear-gradient(135deg, rgba(122,121,218,0.16) 0%, rgba(201,127,149,0.1) 50%, rgba(112,194,200,0.06) 100%);
  z-index: 0;
  pointer-events: none;
  animation: heroGlow 4s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease, transform .7s ease;
  cursor: pointer;
  transform: scale(1.02);
  will-change: opacity, transform;
}
.hero-slide.active { opacity: 1; z-index: 1; transform: scale(1); }
.hero-media-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 380px;
  height: 100%;
  background:
    radial-gradient(circle at 18% 20%, rgba(122,121,218,0.1), transparent 30%),
    linear-gradient(135deg, rgba(16,18,30,0.96), rgba(8,9,16,0.96));
}
.hero-media-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 28%, rgba(8,9,16,0.18) 100%);
  z-index: 1;
}
.hero-poster-rail {
  display: none;
}
.hero-stage {
  position: relative;
  min-height: 380px;
  height: 100%;
  overflow: hidden;
  background: var(--hero-surface);
}
.hero-bg {
  position: absolute;
  inset: -2%;
  background-size: cover;
  background-position: center center;
  transform: scale(1.08);
  transform-origin: center center;
  filter: saturate(1.04) contrast(1.03);
  animation: heroDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroDrift {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-10px, -6px, 0); }
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: inherit;
  transform: scale(1.12);
  filter: blur(28px) saturate(0.96);
  opacity: 0.42;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 50%, rgba(8,9,16,0.12), transparent 38%),
    linear-gradient(90deg, rgba(7,8,14,0.18) 0%, rgba(7,8,14,0.02) 36%, rgba(7,8,14,0.28) 100%);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.24) 35%, rgba(0,0,0,0.82) 100%),
    linear-gradient(90deg, rgba(8,9,16,0.16) 0%, rgba(8,9,16,0.04) 34%, rgba(8,9,16,0.5) 100%);
}
.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  z-index: 2;
}
.hero-poster-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--hero-surface-strong);
  box-shadow: 0 22px 52px rgba(0,0,0,0.34);
  transform: perspective(1200px) rotateY(-5deg) rotateX(1.5deg);
  transform-origin: center right;
}
.hero-poster-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  pointer-events: none;
}
.hero-poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: var(--hero-surface-strong);
}
.hero-poster-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  font-size: 40px;
  background: linear-gradient(180deg, rgba(124,111,255,0.18), rgba(255,255,255,0.04));
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 7px;
}
.hero-title {
  font-size: clamp(1.8rem, 5vw, 2.2rem);
  font-weight: 900;
  color: var(--text-inverse);
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin-bottom: 9px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.42);
  max-width: 14ch;
}
.hero-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-meta span {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.hero-preview-panel {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: var(--hero-panel-bg);
}

.hero-preview-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent3);
  font-weight: 800;
}

.hero-preview-value {
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  color: var(--text-inverse);
}

.hero-preview-sub {
  margin-top: 7px;
  max-width: 42ch;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
}

.hero-preview-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 18%, transparent);
  background: color-mix(in srgb, var(--text-inverse) 10%, transparent);
  color: var(--text-inverse);
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.hero-preview-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
}

.hero-progress-rails {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  z-index: 3;
}

.hero-progress-rail {
  position: relative;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.16);
}

.hero-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.88), rgba(124,111,255,0.9));
  will-change: width;
}

.hero-progress-rail.active .hero-progress-fill {
  animation: heroRailFill 5s linear forwards;
}

@keyframes heroRailFill {
  from { width: 0; }
  to { width: 100%; }
}

.hero-dots {
  position: absolute;
  bottom: 12px;
  right: 16px;
  display: flex;
  gap: 5px;
  z-index: 3;
}
.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: all 0.3s ease;
  cursor: pointer;
}
.hero-dot.active {
  background: white;
  width: 18px;
  border-radius: 3px;
}
.hero-skeleton {
  margin: 0 20px;
  height: 380px;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  background: #13131f;
  box-shadow: 0 8px 32px rgba(0,0,0,0.52);
}
/* Diagonal shimmer sweep for hero */
.hero-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(122,111,255,0.04) 30%,
    rgba(255,255,255,0.09) 48%,
    rgba(112,194,200,0.03) 66%,
    transparent 100%
  );
  background-size: 400% 100%;
  animation: shimmer 1.9s cubic-bezier(0.4,0,0.6,1) infinite;
  pointer-events: none;
}
/* Dark gradient at bottom (for title/meta placeholder look) */
.hero-skeleton::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  pointer-events: none;
}

.skeleton {
  background: linear-gradient(
    100deg,
    var(--bg-tertiary) 0%,
    rgba(122,111,255,0.04) 20%,
    rgba(255,255,255,0.09) 44%,
    rgba(112,194,200,0.03) 68%,
    var(--bg-tertiary) 100%
  );
  background-size: 400% 100%;
  animation: shimmer 1.65s cubic-bezier(0.4,0,0.6,1) infinite;
  border-radius: var(--radius-sm);
}
/* Stagger shimmer on sibling skeletons so they don't all pulse in sync */
.skeleton:nth-child(2) { animation-delay: 0.15s; }
.skeleton:nth-child(3) { animation-delay: 0.30s; }
.skeleton:nth-child(4) { animation-delay: 0.45s; }
.skeleton:nth-child(5) { animation-delay: 0.60s; }
.skeleton:nth-child(6) { animation-delay: 0.75s; }
.skeleton:nth-child(7) { animation-delay: 0.90s; }
.skeleton:nth-child(8) { animation-delay: 1.05s; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bg-tertiary); opacity: 0.45; }
}

/* Smooth fade-in for content that replaces skeletons */
@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content-loaded {
  animation: fadeInContent 0.28s cubic-bezier(0.2,0,0.3,1) forwards;
}
/* Content rows: fade in on first render */
.horizontal-scroll:not(:empty) .show-card,
.myshows-grid:not(:empty) .myshow-card,
.myshows-grid:not(:empty) .myshow-list-row {
  animation: fadeInContent 0.22s ease both;
}
.myshows-grid:not(:empty) .myshow-card:nth-child(1),
.myshows-grid:not(:empty) .myshow-list-row:nth-child(1) { animation-delay: 0s; }
.myshows-grid:not(:empty) .myshow-card:nth-child(2),
.myshows-grid:not(:empty) .myshow-list-row:nth-child(2) { animation-delay: 0.03s; }
.myshows-grid:not(:empty) .myshow-card:nth-child(3),
.myshows-grid:not(:empty) .myshow-list-row:nth-child(3) { animation-delay: 0.06s; }
.myshows-grid:not(:empty) .myshow-card:nth-child(n+4) { animation-delay: 0.09s; }

/* Poster-ratio card skeleton (2:3) for horizontal rows */
.card-skeleton {
  min-width: 130px;
  aspect-ratio: 2/3;
  height: auto;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Deep dark base for cinema feel */
  background: #13131f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 22px rgba(0,0,0,0.52);
}
/* Shimmer sweep overlay — diagonal sweep */
.card-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(122,111,255,0.03) 28%,
    rgba(255,255,255,0.11) 46%,
    rgba(112,194,200,0.03) 64%,
    transparent 100%
  );
  background-size: 400% 100%;
  animation: shimmer 1.65s cubic-bezier(0.4,0,0.6,1) infinite;
  pointer-events: none;
}
/* Dark gradient at bottom for text-area look — deeper */
.card-skeleton::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
/* Title and sub shimmer lines inside skeleton card */
.card-skeleton-lines {
  position: absolute;
  bottom: 12px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.card-skeleton-title-line {
  height: 9px;
  width: 78%;
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  animation: shimmer 1.85s cubic-bezier(0.4,0,0.6,1) infinite;
}
.card-skeleton-sub-line {
  height: 7px;
  width: 44%;
  border-radius: 6px;
  background: rgba(255,255,255,0.065);
  animation: shimmer 1.85s cubic-bezier(0.4,0,0.6,1) infinite;
  animation-delay: 0.3s;
}
/* Stagger widths on sibling skeleton cards for natural variety */
.card-skeleton:nth-child(2) .card-skeleton-title-line { width: 88%; }
.card-skeleton:nth-child(2) .card-skeleton-sub-line { width: 52%; }
.card-skeleton:nth-child(3) .card-skeleton-title-line { width: 72%; }
.card-skeleton:nth-child(3) .card-skeleton-sub-line { width: 36%; }
.card-skeleton:nth-child(4) .card-skeleton-title-line { width: 83%; }
.card-skeleton:nth-child(5) .card-skeleton-title-line { width: 67%; }
.card-skeleton:nth-child(5) .card-skeleton-sub-line { width: 48%; }
.card-skeleton:nth-child(6) .card-skeleton-title-line { width: 90%; }
.card-skeleton:nth-child(6) .card-skeleton-sub-line { width: 55%; }
/* Legacy fixed-height fallback where aspect-ratio isn't enough */
@supports not (aspect-ratio: 2/3) {
  .card-skeleton { height: 195px; }
}
.grid-skeleton {
  aspect-ratio: 2/3;
  border-radius: var(--radius-md);
  background: #13131f;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 16px rgba(0,0,0,0.42);
}
.grid-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.07) 45%,
    transparent 100%
  );
  background-size: 400% 100%;
  animation: shimmer 1.65s cubic-bezier(0.4,0,0.6,1) infinite;
  pointer-events: none;
}

.horizontal-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 20px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 20px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  /* Deceleration: smooth momentum feel */
  -webkit-scroll-snap-stop: always;
  /* Prevent vertical scroll hijack on touch */
  touch-action: pan-x;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }
/* Ensure last card has trailing space so it's fully reachable */
.horizontal-scroll > :last-child { scroll-snap-align: start; margin-right: 20px; }
/* On touch: snappy card-by-card navigation */
@media (hover: none) and (pointer: coarse) {
  .horizontal-scroll {
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 16px;
    gap: 10px;
    overscroll-behavior-inline: contain;
    /* Tighter momentum for thumb scroll */
    -webkit-overflow-scrolling: touch;
  }
  .horizontal-scroll .show-card,
  .horizontal-scroll .card-skeleton {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* Right-edge fade to indicate more scrollable content.
   Applied via JS: adds .has-scroll-fade to the horizontal-scroll element */
.horizontal-scroll.has-scroll-fade {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 52px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 52px), transparent 100%);
  transition: -webkit-mask-image 0.25s, mask-image 0.25s;
}
.horizontal-scroll.has-scroll-fade.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.show-card {
  position: relative;
  min-width: 130px;
  cursor: pointer;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), filter 0.3s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
/* On touch devices, always stop at each card for deliberate navigation */
@media (hover: none) and (pointer: coarse) {
  .show-card { scroll-snap-stop: always; }
  .card-skeleton { scroll-snap-stop: always; }
}
.show-card:active { transform: scale(0.93); }
.show-card:hover,
.hot-card:hover,
.myshow-card:hover,
.poster-grid-card:hover,
.search-result-item:hover,
.favorite-pill:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.36), 0 0 28px rgba(124,111,255,0.22);
  filter: saturate(1.08);
}

.show-card-img-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 2/3;
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.show-card:hover .show-card-img-wrap {
  transform: scale(1.03) translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 20px rgba(124,111,255,0.25);
}
.show-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.5s ease;
  image-rendering: -webkit-optimize-contrast;
}
.show-card:hover .show-card-img,
.hot-card:hover img,
.poster-grid-card:hover img,
.search-result-item:hover img,
.myshow-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.05);
}
.show-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.86) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--transition);
}
.show-card:hover .show-card-overlay { opacity: 1; }
/* Episode still overlay - shown at bottom of poster on hover for continue watching cards */
.show-card-episode-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background-size: cover;
  background-position: center top;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1);
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 100%);
  mask-image: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 100%);
  z-index: 1;
}
.show-card:hover .show-card-episode-bg { opacity: 0.6; }
.rating-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  color: var(--yellow);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 2;
}
.type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 8px;
  z-index: 2;
  color: white;
}
.status-dot {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.5);
  z-index: 3;
}
.status-dot.watching { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.completed { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.status-dot.plan { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.status-dot.dropped { background: var(--red); box-shadow: 0 0 8px var(--red); }
.status-dot.want { background: var(--accent3); box-shadow: 0 0 8px var(--accent3); }
.status-dot.watched { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.card-user-stars {
  position: absolute;
  bottom: 34px;
  left: 6px;
  font-size: 9px;
  color: var(--yellow);
  letter-spacing: -1px;
  z-index: 3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.show-card-info { padding: 8px 2px 0; }
.show-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.show-card-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-card-meta {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.68);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.show-card-meta-accent {
  color: var(--accent);
  font-weight: 600;
}
.card-progress {
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.card-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.whats-hot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 20px;
}
.hot-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 2/3;
  cursor: pointer;
  background: var(--bg-tertiary);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--shadow-card);
  will-change: transform;
}
.hot-card:active { transform: scale(0.94); }
.hot-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hot-card .card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 10px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.6) 55%, transparent 100%);
}
.hot-card .card-title { font-size: 11px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-card .card-rating { font-size: 10px; color: var(--yellow); font-weight: 600; margin-top: 2px; }
.hot-card .type-tag { font-size: 9px; color: rgba(255,255,255,0.6); margin-bottom: 2px; }
.hot-skeleton {
  height: 170px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
/* Add a subtle inner structure to hot skeleton */
.hot-skeleton::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(0deg, rgba(0,0,0,0.35) 0%, transparent 100%);
  pointer-events: none;
}

.up-next-list {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.up-next-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.up-next-card:hover { background: var(--bg-card-hover); transform: translateX(3px); }
.up-next-card:active { transform: scale(0.98); }
.up-next-thumb {
  width: 80px;
  height: 45px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  overflow: hidden;
  flex-shrink: 0;
}
.up-next-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-next-info { flex: 1; min-width: 0; }
.up-next-show {
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.up-next-ep {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.up-next-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.up-next-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--spring);
  box-shadow: 0 4px 16px rgba(124,111,255,0.45);
}
.up-next-btn:hover { transform: scale(1.12); box-shadow: 0 6px 24px rgba(124,111,255,0.6); }
.up-next-btn:active { transform: scale(0.88); }
.up-next-btn svg { width: 16px; height: 16px; }

/* ─── Custom Lists Grid ───────────────────────── */
.custom-lists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.custom-list-card {
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s;
}
.custom-list-card:hover { transform: translateY(-2px); }
.custom-list-emoji { font-size: 28px; }
.custom-list-name { font-size: 14px; font-weight: 700; }
.custom-list-count { font-size: 12px; color: var(--text-secondary); }

/* ─── Search Page ─────────────────────────────── */
.search-container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overflow-anchor: none;
  min-width: 0;
  padding-top: calc(var(--top-bar-height) + var(--safe-top));
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
}
.search-container::-webkit-scrollbar { display: none; }

/* Search header — in normal document flow, NOT sticky.
   Scrolls with content so it never floats over results. */
.search-top-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 16px 8px;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Search bar — standalone, full-width */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  padding: 0 18px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.search-bar:focus-within {
  border-color: rgba(124,111,255,0.65);
  box-shadow: 0 0 0 4px rgba(124,111,255,0.12), 0 8px 24px rgba(0,0,0,0.16);
  transform: translateY(-1px);
}
.search-icon { width: 18px; height: 18px; color: var(--text-secondary); flex-shrink: 0; }

/* Controls row: type toggle + filter button */
/* Controls row: type toggle + filter icon button */
.search-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Type toggle — equal-width pills, compact */
.search-type-toggle {
  display: inline-flex !important;
  gap: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 11px;
  padding: 3px;
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0;
}
.type-pill {
  width: 80px !important;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
  flex: none !important;
}
.type-pill.active {
  background: var(--accent);
  color: white;
}

/* Filter button — icon only, pill shape */
.filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-toggle-btn svg { width: 14px; height: 14px; }
.filter-toggle-btn:hover,
.filter-toggle-btn.active {
  background: rgba(124,111,255,0.14);
  border-color: rgba(124,111,255,0.3);
  color: #ddd9ff;
}
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* Filters panel (collapsible) */
/* Filters panel — compact horizontal selects, no card, inline with content */
.search-filters-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 0 2px;
}
.search-filters-panel::-webkit-scrollbar { display: none; }
.filters-footer { display: none; } /* Reset button moved into active-filter-pills */
#searchInput {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  caret-color: var(--accent);
}
#searchInput::placeholder { color: var(--text-tertiary); }
.clear-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.clear-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.clear-btn svg { width: 16px; height: 16px; }
/* Recent searches — single scrollable row, header hidden */
.search-chip-rail {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.search-chip-rail::-webkit-scrollbar { display: none; }
.search-chip-rail-header,
.recent-header { display: none; } /* header removed — clear btn moved inline */
.recent-title { display: none; }
.clear-recent-btn {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 999px;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.clear-recent-btn:hover {
  color: var(--text-secondary);
  border-color: rgba(255,255,255,0.16);
}
.recent-tags {
  display: contents; /* chips flow directly into parent flex row */
}
.recent-tag-shell {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  width: auto !important;
  height: 32px;
  padding: 2px 2px 2px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  transition: background var(--transition), border-color var(--transition);
}
.recent-tag-shell:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(124,111,255,0.28);
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
}
.recent-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0 6px 0 0;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition);
}
.recent-tag:hover { color: var(--text-primary); transform: none; }
.recent-tag svg { display: none; } /* hide clock icon — cleaner without it */
.recent-tag span {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-tag:hover { transform: translateY(-1px); }
.recent-tag svg,
.recent-tag-remove svg { width: 12px; height: 12px; color: var(--text-tertiary); }
.recent-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 3px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.recent-tag-remove:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
  transform: scale(1.05);
}
.recent-tag-shell:focus-within {
  border-color: rgba(124,111,255,0.4);
  box-shadow: 0 0 0 3px rgba(124,111,255,0.15);
}
.recent-tag-empty {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.genre-filter-row { margin-bottom: 0; }
.genre-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.genre-pills::-webkit-scrollbar { display: none; }
.search-filters-row {
  display: contents; /* children flow directly into the panel flex row */
}
.filter-select-stack {
  display: contents; /* flatten — label hidden, just the select shows */
}
.filter-label {
  display: none; /* labels hidden — placeholder text in selects is enough */
}
.filter-inline-hint {
  display: none;
}
.active-filter-pills {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
  order: 2;
}
.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(124,111,255,0.24);
  background: rgba(124,111,255,0.14);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.active-filter-pill-x {
  color: var(--accent3);
  font-weight: 900;
}
.clear-discover-btn.compact {
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
  flex-shrink: 0;
  order: 3;
  margin-left: auto;
  border-color: rgba(255,255,255,0.1);
  background: transparent;
  color: var(--text-secondary);
}
.clear-discover-btn.compact:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: var(--text-primary);
}
.filter-select,
.filter-input {
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  width: auto;
  flex-shrink: 0;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}
.filter-select:focus,
.filter-input:focus {
  border-color: var(--accent);
  background: rgba(124,111,255,0.12);
}
/* When a value is selected (not the default), highlight the chip */
.filter-select:not([value=""]):valid {
  border-color: rgba(124,111,255,0.4);
  background: rgba(124,111,255,0.14);
  color: #ddd9ff;
}
.filter-select-stack .filter-select {
  width: auto;
}
.genre-pill {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
}
.genre-pill.active {
  background: linear-gradient(135deg, rgba(124,111,255,0.24), rgba(124,111,255,0.14));
  border-color: rgba(124,111,255,0.54);
  color: #ddd9ff;
  box-shadow: 0 4px 16px rgba(124,111,255,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}
.genre-pill:not(.active):hover { background: var(--bg-card-hover); color: var(--text-primary); transform: translateY(-1px); }
.discover-section {
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.discover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 12px;
}
.discover-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
}
.discover-subtitle { display: none; }
.discover-summary-row {
  display: none; /* shown via JS only when filters are active */
  margin: 0 16px 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card-hover) 72%, transparent), color-mix(in srgb, var(--bg-card) 92%, transparent));
}
.discover-summary-text {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.clear-discover-btn {
  border: 1px solid rgba(124,111,255,0.16);
  background: rgba(124,111,255,0.12);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.clear-discover-btn:hover {
  transform: translateY(-1px);
  background: rgba(124,111,255,0.18);
  border-color: rgba(124,111,255,0.26);
}
.discover-categories {
  display: flex;
  gap: 10px;
  padding: 0 20px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.discover-categories::-webkit-scrollbar { display: none; }
.cat-pill {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  font-family: inherit;
}
.cat-pill:focus-visible,
.episode-deep-link:focus-visible,
.recent-tag:focus-visible,
.recent-tag-remove:focus-visible,
.hero-preview-btn:focus-visible,
.mini-btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid rgba(124,111,255,0.5);
  outline-offset: 2px;
}
.cat-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 4px 16px rgba(124,111,255,0.4);
}
.cat-pill:not(.active):hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* Mood/genre quick-filter chips */
.mood-chips {
  display: flex;
  gap: 7px;
  padding: 0 20px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.mood-chips::-webkit-scrollbar { display: none; }
.mood-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
  font-family: inherit;
}
.mood-chip:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}
.mood-chip.active {
  background: rgba(122,121,218,0.18);
  border-color: var(--accent);
  color: var(--accent);
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 20px;
}
.poster-grid-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 2/3;
  cursor: pointer;
  background: var(--bg-tertiary);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--shadow-card);
}
.poster-grid-card:active { transform: scale(0.95); }
.poster-grid-card img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: -webkit-optimize-contrast; }
.poster-grid-card .card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 10px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
}
.poster-grid-card .card-kicker {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 4px;
  font-weight: 700;
}
.poster-grid-card .card-title { font-size: 11px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-grid-card .card-rating { font-size: 10px; color: var(--yellow); font-weight: 600; }

/* Poster fade-in — visible by default, fade-in is progressive enhancement */
.poster-grid-card img,
.show-card img,
.binge-pulse-card img,
.watch-plan-poster img,
.continue-rail-card img,
.similar-card img,
.quick-pick-card img,
.activity-icon-poster img {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.poster-grid-card img.fade-wired:not(.loaded),
.show-card img.fade-wired:not(.loaded),
.binge-pulse-card img.fade-wired:not(.loaded),
.watch-plan-poster img.fade-wired:not(.loaded),
.continue-rail-card img.fade-wired:not(.loaded),
.similar-card img.fade-wired:not(.loaded),
.quick-pick-card img.fade-wired:not(.loaded),
.activity-icon-poster img.fade-wired:not(.loaded) {
  opacity: 0;
}

/* Retry button for skeleton rows */
.row-retry-btn {
  height: 120px;
  min-width: 140px;
  padding: 16px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.row-retry-btn:hover { background: rgba(255,255,255,0.08); }

.search-results-container { padding: 20px 20px 0; }
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 18px;
}
.results-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(124,111,255,0.14);
  background: linear-gradient(135deg, rgba(124,111,255,0.12), rgba(0,212,255,0.06));
}
.results-status-banner.compact {
  margin-top: -2px;
}
.results-status-title {
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.results-status-copy {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.results-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.results-toolbar-actions .mini-btn {
  white-space: nowrap;
}
.results-toolbar-title {
  font-size: 15px;
  font-weight: 800;
}
.results-toolbar-sub {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
}
.results-group { margin-bottom: 24px; }
.results-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.search-results-container[aria-busy="true"] {
  opacity: 0.96;
}
.discover-empty.glass {
  margin: 0 20px;
}
@media (min-width: 720px) {
  .recent-tags,
  .genre-pills,
  .discover-categories {
    gap: 12px;
  }

  .results-grid,
  .poster-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .search-top-area {
    padding-inline: 20px;
  }
}

@media (max-width: 719px) {
  /* filters are now horizontal chips, grid overrides no longer needed */
}

@media (max-width: 560px) {
  .search-top-area {
    gap: 10px;
    padding-inline: 14px;
  }

  .recent-tags {
    gap: 8px;
  }

  /* Recent tags always horizontal chips — never full-width rows */
  .recent-tag-shell {
    width: auto !important;
    justify-content: flex-start;
  }

  .recent-tag {
    flex: 0 0 auto;
  }

  .discover-header,
  .discover-categories,
  .discover-summary-row,
  .search-results-container,
  .poster-grid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .results-grid,
  .poster-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 380px) {
  .type-pill {
    width: 70px !important;
    font-size: 12px;
  }
  .filter-toggle-btn {
    padding: 0 10px;
    font-size: 12px;
  }
}
.search-result-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  animation: fadeInUp 0.3s ease forwards;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255,255,255,0.08);
}
.search-result-item:active { transform: scale(0.98); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-result-poster-wrap {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--bg-tertiary);
}
.search-result-item img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: -webkit-optimize-contrast; }
.search-result-body {
  padding: 12px 12px 14px;
}
.search-result-topline {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}
.search-result-item .card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-subline {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.search-result-score {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--yellow);
  font-weight: 800;
}
.search-result-copy {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.no-results { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.no-results h3 { font-size: 20px; margin-bottom: 8px; }
.no-results p { font-size: 14px; }
.no-results-rich {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 22px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(12, 13, 24, 0.72);
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}
.no-results-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: linear-gradient(135deg, rgba(124,111,255,0.22), rgba(0,212,255,0.18));
  border: 1px solid rgba(255,255,255,0.08);
}
.no-results-rich p {
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}
.no-results-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.no-results-recent-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}
.no-results-recent-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.no-results-recent-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.myshows-header {
  padding: calc(var(--top-bar-height) + var(--safe-top) + 16px) 20px 0;
}
.page-heading {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin-bottom: 14px;
}
.list-type-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  background: var(--bg-tertiary);
  border-radius: 14px;
  padding: 4px;
}
.list-type-tab {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.list-type-tab.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 3px 12px rgba(124,111,255,0.4);
}
.status-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 14px;
}
.status-tabs::-webkit-scrollbar { display: none; }
.status-tab {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  font-family: inherit;
}
.status-tab.active { background: var(--accent); border-color: var(--accent); color: white; }
.status-tab:not(.active):hover { background: var(--bg-card-hover); }
.myshows-grid {
  padding: 4px 16px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* Mobile: 2-col for phones — gives more readable cards with visible info */
@media (max-width: 480px) {
  .myshows-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 4px 14px 8px;
  }
  .myshow-card .card-bottom {
    padding: 40px 10px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,0.99) 0%, rgba(0,0,0,0.75) 52%, transparent 100%);
  }
  .myshow-card .card-title {
    font-size: 12.5px;
    font-weight: 700;
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
  }
  .myshow-year {
    font-size: 10.5px;
    margin-top: 2px;
  }
  .myshow-next-ep-badge {
    font-size: 10px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .myshow-airing-badge {
    font-size: 10px;
    padding: 2px 6px;
  }
  .myshow-eps-left-badge {
    font-size: 9.5px;
    padding: 2px 5px;
  }
  /* Bigger quick-mark button for easier tapping on mobile */
  .myshow-card-mark-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
    bottom: 8px;
    right: 8px;
  }
  /* Progress bar thicker and more visible on mobile */
  .myshow-progress {
    height: 3.5px;
    margin-top: 6px;
  }
  /* Rating stars smaller on mobile to save space */
  .myshow-stars {
    font-size: 8.5px;
    letter-spacing: -1.5px;
  }
}
@media (max-width: 360px) {
  .myshows-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 4px 10px 8px;
  }
  .myshow-card .card-title {
    font-size: 11.5px;
  }
}
.myshow-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 2/3;
  cursor: pointer;
  background: var(--bg-tertiary);
  transition: transform 0.18s cubic-bezier(0.25,1,0.5,1), box-shadow 0.18s;
  box-shadow: var(--shadow-card);
  animation: fadeInUp 0.3s ease;
}
.myshow-card:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.myshow-card:active { transform: scale(0.96); transition-duration: 0.08s; }
.myshow-card img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: -webkit-optimize-contrast; }

.in-progress-list {
  padding: 4px 16px;
  display: grid;
  gap: 14px;
}

.page-subheading {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 14px;
}

.progress-loading-shell {
  display: grid;
  gap: 22px;
}

.progress-overview-card {
  position: relative;
  margin: 6px 16px 4px;
  padding: 24px;
  border-radius: 28px;
  display: grid;
  gap: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(122,121,218,0.18), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(112,194,200,0.14), transparent 28%),
    linear-gradient(180deg, rgba(22,24,40,0.96), rgba(12,13,24,0.96));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--glass-border));
  box-shadow: 0 24px 56px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
  animation: progressReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.progress-overview-card::after {
  content: '';
  position: absolute;
  inset: auto -12% -40% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,127,149,0.16), transparent 70%);
  pointer-events: none;
}

.progress-overview-copy,
.progress-overview-stats {
  position: relative;
  z-index: 1;
}

.progress-overview-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent3);
}

.progress-overview-title {
  margin-top: 10px;
  max-width: 11ch;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.progress-overview-body {
  margin-top: 14px;
  max-width: 56ch;
  color: color-mix(in srgb, var(--text-primary) 76%, var(--accent3) 24%);
  font-size: 14px;
  line-height: 1.65;
}

.progress-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.progress-overview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.progress-overview-stat {
  min-width: 0;
  padding: 14px 14px 15px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.06);
}

.progress-overview-stat.is-accent {
  border-color: color-mix(in srgb, var(--accent3) 35%, rgba(255,255,255,0.08));
  background: linear-gradient(180deg, rgba(112,194,200,0.14), rgba(255,255,255,0.04));
}

.progress-overview-stat-value {
  display: block;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.progress-overview-stat-label {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.progress-section-block {
  display: grid;
  gap: 12px;
}

.progress-section-heading {
  padding: 8px 20px 0;
  display: grid;
  gap: 6px;
}

.progress-section-copy {
  max-width: 58ch;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.progress-time-group {
  display: grid;
  gap: 12px;
}

.progress-time-group + .progress-time-group {
  margin-top: 12px;
}

.progress-time-group-header {
  padding: 0 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.progress-time-group-copy-wrap {
  min-width: 0;
}

.progress-time-group-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--accent3);
}

.progress-time-group-copy {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.progress-time-group-count {
  flex-shrink: 0;
  align-self: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: color-mix(in srgb, var(--text-primary) 76%, var(--accent3) 24%);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.progress-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--glass-bg) 96%, transparent), color-mix(in srgb, var(--bg-card) 92%, transparent));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  animation: progressReveal 0.56s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--card-index, 0) * 0.06s);
  transform-origin: center bottom;
  transition:
    transform 0.28s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.28s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.28s cubic-bezier(0.25, 1, 0.5, 1),
    background 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}

.progress-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), transparent 42%),
    radial-gradient(circle at top right, rgba(122,121,218,0.08), transparent 28%);
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.progress-card-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.progress-card-poster {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 18px;
  transition: transform 0.26s cubic-bezier(0.25, 1, 0.5, 1), filter 0.26s cubic-bezier(0.25, 1, 0.5, 1);
}

.progress-card-poster img,
.progress-card-poster .no-poster {
  width: 92px;
  height: 132px;
  border-radius: 18px;
  object-fit: cover;
  display: block;
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}
/* Episode still thumbnail variant: wider aspect-ratio, shows scene context */
.progress-card-poster.has-ep-thumb img {
  width: 148px;
  height: 88px;
  border-radius: 14px;
}
@media (max-width: 480px) {
  .progress-card-poster.has-ep-thumb img {
    width: 120px;
    height: 70px;
  }
}

.progress-card-copy {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.progress-card-title-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.progress-card-title {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
}

.progress-card-badge {
  border-radius: 999px;
  padding: 7px 11px;
  background: color-mix(in srgb, var(--accent-soft) 88%, rgba(255,255,255,0.04));
  color: color-mix(in srgb, var(--text-primary) 78%, var(--accent3) 22%);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.progress-card-meta,
.progress-card-next {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 6px;
}

.progress-card-meta {
  color: color-mix(in srgb, var(--accent3) 55%, var(--text-primary) 45%);
  font-weight: 700;
}

.progress-card-next {
  line-height: 1.45;
}

.progress-card-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.progress-card-insight {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  color: color-mix(in srgb, var(--text-primary) 74%, var(--accent3) 26%);
  font-size: 12px;
  font-weight: 700;
}

.progress-card-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 4px;
}

.progress-card .progress-bar {
  margin-top: 10px;
  height: 8px;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.progress-card .progress-fill {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent3) 100%);
  box-shadow: 0 0 18px rgba(122,121,218,0.22);
}

.progress-bar.is-celebrating::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -32%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  mix-blend-mode: screen;
  animation: progressSweep 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.progress-card:hover,
.progress-card:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--glass-border));
  box-shadow: 0 26px 54px rgba(0,0,0,0.32), 0 0 26px rgba(122,121,218,0.08);
}

.progress-card:hover::before,
.progress-card:focus-within::before {
  opacity: 1;
}

.progress-card:hover .progress-card-poster,
.progress-card:focus-within .progress-card-poster {
  transform: translateY(-2px) scale(1.01);
  filter: saturate(1.04);
}

.progress-card:hover .progress-card-title,
.progress-card:focus-within .progress-card-title {
  color: color-mix(in srgb, var(--text-primary) 86%, var(--accent3) 14%);
}

.progress-card.is-celebrating,
.progress-overview-card.is-celebrating {
  border-color: color-mix(in srgb, var(--accent3) 40%, var(--glass-border));
  box-shadow:
    0 28px 60px rgba(0,0,0,0.34),
    0 0 30px rgba(112,194,200,0.12),
    inset 0 1px 0 rgba(255,255,255,0.09);
}

.progress-card.is-celebrating::before,
.progress-overview-card.is-celebrating::before {
  opacity: 1;
}

.continue-action-burst {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 3;
}

.continue-action-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.96) 0%, rgba(112,194,200,0.88) 40%, rgba(112,194,200,0) 78%);
  box-shadow: 0 0 14px rgba(122,121,218,0.26);
  transform: translate(-50%, -50%);
  animation: continueSpark 460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mini-btn.is-success {
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 82%, white), color-mix(in srgb, var(--accent3) 74%, var(--green)));
  border-color: transparent;
  color: #08110e;
  box-shadow: 0 16px 34px rgba(74,222,128,0.18);
}

.progress-card.is-ready .progress-card-badge {
  background: rgba(74,222,128,0.14);
  color: #8ef0ad;
}

.progress-card.is-up_to_date .progress-card-badge {
  background: rgba(112,194,200,0.14);
  color: #9bddde;
}

.progress-card.is-caught_up .progress-card-badge {
  background: rgba(201,127,149,0.14);
  color: #ebb7c5;
}

.progress-card-skeleton {
  min-height: 214px;
  border: 1px solid rgba(255,255,255,0.05);
  background:
    radial-gradient(circle at top right, rgba(124,111,255,0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
}

.progress-card-skeleton,
.progress-skeleton-panel,
.progress-skeleton-line,
.progress-skeleton-chip,
.progress-skeleton-stat-card {
  position: relative;
  overflow: hidden;
}

.progress-card-skeleton::before,
.progress-skeleton-panel::before,
.progress-skeleton-line::before,
.progress-skeleton-chip::before,
.progress-skeleton-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(122,111,255,0.06) 35%, rgba(255,255,255,0.12) 50%, rgba(112,194,200,0.05) 65%, transparent 100%);
  animation: progressShimmer 1.85s cubic-bezier(0.4,0,0.6,1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .progress-card-skeleton::before,
  .progress-skeleton-panel::before,
  .progress-skeleton-line::before,
  .progress-skeleton-chip::before,
  .progress-skeleton-stat-card::before { animation: none; opacity: 0; }
}

.progress-skeleton-panel {
  min-height: 212px;
  display: grid;
  gap: 12px;
}

.progress-skeleton-line {
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
}

.progress-skeleton-line-title {
  width: min(240px, 72%);
  height: 16px;
}

.progress-skeleton-line-hero {
  width: min(280px, 76%);
  height: clamp(28px, 5vw, 42px);
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
}

.progress-skeleton-line-copy {
  width: min(420px, 100%);
  height: 10px;
  margin-top: 8px;
}

.progress-skeleton-line-copy.short {
  width: min(300px, 72%);
}

.progress-skeleton-chip-row {
  display: flex;
  gap: 8px;
}

.progress-skeleton-chip {
  width: 92px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

.progress-skeleton-chip.short {
  width: 68px;
}

.progress-skeleton-stat-grid,
.progress-skeleton-list {
  display: grid;
  gap: 10px;
}

.progress-skeleton-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.progress-skeleton-stat-card {
  min-height: 72px;
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.04);
}

.progress-skeleton-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.7;
}

.progress-skeleton-glow-main {
  width: 180px;
  height: 180px;
  top: -60px;
  right: -40px;
  background: radial-gradient(circle, rgba(124,111,255,0.18), transparent 68%);
}

button.progress-card-poster:focus-visible,
button.progress-card-title:focus-visible,
.progress-overview-actions .mini-btn:focus-visible,
.progress-card-actions .mini-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent3) 70%, white);
  outline-offset: 3px;
}

@keyframes progressReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes progressShimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes progressSweep {
  from {
    transform: translateX(0);
    opacity: 0.1;
  }
  35% {
    opacity: 0.95;
  }
  to {
    transform: translateX(440%);
    opacity: 0;
  }
}

@keyframes continueSpark {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0.9) rotate(var(--spark-rotate));
  }
}
.myshow-card .card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 9px 9px;
  background: linear-gradient(0deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.65) 55%, transparent 100%);
}
.myshow-card .card-title { font-size: 11px; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .myshow-card .card-bottom { padding: 36px 10px 10px; }
  .myshow-card .card-title { font-size: 12px; }
}
.myshow-status-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-bottom: 3px;
  display: inline-block;
}
.badge-watching { background: rgba(74,222,128,0.2); color: var(--green); }
.badge-completed { background: rgba(124,111,255,0.2); color: #b0a8ff; }
.badge-plan { background: rgba(251,146,60,0.2); color: var(--orange); }
.badge-dropped { background: rgba(248,113,113,0.2); color: var(--red); }
.badge-want { background: rgba(0,212,255,0.2); color: var(--accent3); }
.badge-watched { background: rgba(124,111,255,0.2); color: #b0a8ff; }
.myshow-stars { font-size: 9px; color: var(--yellow); letter-spacing: -1px; margin-top: 3px; }
.myshow-progress {
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}
.myshow-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent3)); border-radius: 3px; transition: width 0.4s ease; }
/* Last-watch micro-chip inside card bottom */
.myshow-last-watch-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 3px;
  letter-spacing: 0.01em;
}
.myshow-last-watch-today {
  color: var(--green);
  background: rgba(74,222,128,0.12);
}
.myshow-last-watch-stale {
  color: var(--orange);
  background: rgba(251,146,60,0.1);
}
.myshow-last-watch-cold {
  color: var(--accent3);
  background: rgba(112,194,200,0.08);
}

/* Progress edge accent: a colored bottom-edge strip behind the card */
.myshow-card[data-progress-hi]::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent3), var(--accent));
  z-index: 3;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  opacity: 0.85;
}
.empty-state { grid-column: 1/-1; text-align: center; padding: 80px 20px; }
.empty-icon { font-size: 56px; margin-bottom: 16px; }
.empty-state h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.empty-state p { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 82%, var(--accent2)) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--spring);
  box-shadow: 0 4px 20px rgba(124,111,255,0.38), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { transform: scale(1.04) translateY(-1px); box-shadow: 0 8px 30px rgba(124,111,255,0.50), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn-primary:active { transform: scale(0.97); }

.profile-header {
  padding: calc(var(--top-bar-height) + var(--safe-top) + 30px) 20px 28px;
  text-align: center;
}
.profile-avatar {
  font-size: 64px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 26px rgba(124,111,255,0.65));
  animation: float 3.5s ease-in-out infinite;
}
.profile-name { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.profile-sub { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.profile-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.5;
  padding: 2px 6px;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.profile-edit-btn:hover { opacity: 1; }
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 20px 18px;
}
.stat-card { text-align: center; padding: 14px 6px; border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.glass {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.stat-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.profile-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 20px 26px;
}
.profile-highlight-card {
  border-radius: 18px;
  padding: 16px;
  min-height: 100px;
}
.profile-highlight-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-secondary);
  font-weight: 800;
}
.profile-highlight-value {
  margin-top: 10px;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
}
.profile-highlight-copy {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Streak card special states */
.profile-highlight-card.is-streak {
  background:
    radial-gradient(circle at top right, rgba(251,146,60,0.14), transparent 40%),
    var(--bg-card);
  border-color: rgba(251,146,60,0.22);
}
.profile-highlight-card.is-streak .profile-highlight-value {
  background: linear-gradient(135deg, #fb923c 0%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.profile-highlight-card.is-streak-milestone {
  background:
    radial-gradient(circle at top right, rgba(251,146,60,0.22), transparent 45%),
    radial-gradient(circle at bottom left, rgba(251,191,36,0.10), transparent 40%),
    var(--bg-card);
  border-color: rgba(251,146,60,0.32);
  box-shadow: 0 0 20px rgba(251,146,60,0.12), inset 0 1px 0 rgba(255,255,255,0.07);
}

.status-breakdown { padding: 0 20px; }
.status-chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--chip-color) 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--chip-color) 30%, transparent);
}
.status-chip strong { font-weight: 700; color: var(--chip-color); }
.badge-count-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 6px;
}
.favorites-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 20px;
  scrollbar-width: none;
}
.favorites-row::-webkit-scrollbar { display: none; }
.favorite-pill {
  min-width: 150px;
  max-width: 170px;
  border-radius: 18px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
}
.favorite-pill-title { font-size: 13px; font-weight: 800; line-height: 1.35; }
.favorite-pill-sub { margin-top: 5px; font-size: 11px; color: var(--text-secondary); }
.persistence-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  margin: 0 20px;
}

.persistence-handoff-steps {
  display: grid;
  gap: 10px;
}

.handoff-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.handoff-step.active {
  border-color: rgba(124,111,255,0.28);
  background: linear-gradient(135deg, rgba(124,111,255,0.12), rgba(0,212,255,0.06));
  box-shadow: 0 12px 30px rgba(8, 8, 16, 0.22);
}

.handoff-step.complete {
  border-color: rgba(74,222,128,0.28);
  background: linear-gradient(135deg, rgba(74,222,128,0.14), rgba(124,111,255,0.06));
}

.handoff-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}

.handoff-step.active .handoff-step-dot {
  background: rgba(124,111,255,0.28);
  border-color: rgba(124,111,255,0.34);
}

.handoff-step.complete .handoff-step-dot {
  background: rgba(74,222,128,0.24);
  border-color: rgba(74,222,128,0.3);
}

.handoff-step-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}

.handoff-step-copy {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.persistence-signin-cta {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,111,255,0.12), rgba(0,212,255,0.08));
}

.persistence-signin-form {
  display: grid;
  gap: 10px;
}

.persistence-auth-form {
  grid-template-columns: 1fr;
}

.persistence-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.persistence-auth-actions > button {
  flex: 1 1 140px;
}

.persistence-password-input {
  min-width: 0;
}

.persistence-auth-hint {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.45;
}

.persistence-email-input {
  width: 100%;
}

.persistence-inline-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.persistence-signin-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}

.persistence-signin-copy {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.persistence-signin-btn {
  flex-shrink: 0;
  min-height: 44px;
  white-space: nowrap;
}

.persistence-copy {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.persistence-meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.persistence-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.import-backup-btn {
  cursor: pointer;
}

.backup-import-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.btn-secondary.subtle {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.pref-list { padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
.pref-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
}
.pref-label { font-size: 15px; font-weight: 600; }
.pref-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.toggle-switch { position: relative; width: 48px; height: 28px; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-tertiary);
  border-radius: 14px;
  transition: background var(--transition);
  border: 1px solid var(--glass-border);
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform var(--spring);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.toggle-switch input:checked ~ .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle-switch input:checked ~ .toggle-track::after { transform: translateX(20px); }
.btn-danger {
  display: block;
  width: calc(100% - 40px);
  margin: 0 20px;
  padding: 14px;
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--radius-md);
  color: var(--red);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-danger:hover { background: rgba(248,113,113,0.2); }

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-bottom: var(--safe-bottom);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: stretch;
  height: calc(var(--nav-height) + var(--safe-bottom));
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 6px 2px;
  transition: color var(--transition), transform var(--transition);
  position: relative;
}
.nav-item svg { width: 19px; height: 19px; stroke-width: 1.8; }
.nav-item span { font-size: 9px; font-weight: 600; letter-spacing: 0.05px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52px; display: block; }
.nav-item.active {
  background: rgba(139, 111, 245, 0.15);
  color: var(--accent);
  border-left: 3px solid var(--accent);
  box-sizing: border-box;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 10px var(--accent);
}
.nav-item.active .nav-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 4px var(--accent));
}
.nav-item:active { transform: scale(0.88); }
.nav-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  background: var(--red);
  color: white;
  font-size: 9px;
  font-weight: 800;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid var(--bg-primary);
  animation: badgePop 0.4s var(--spring);
}
@keyframes badgePop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
/* Dot variant — just a colored circle with no number */
.nav-badge--dot {
  min-width: 8px;
  height: 8px;
  padding: 0;
  top: -2px;
  right: -2px;
  border-radius: 50%;
  font-size: 0;
  animation: badgePop 0.4s var(--spring), dotPulse 2.5s ease-in-out infinite 0.5s;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(248,113,113,0); }
}

@media (max-width: 640px) {
  .persistence-signin-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .handoff-step {
    grid-template-columns: 1fr;
  }

  .handoff-step-dot {
    width: 30px;
    height: 30px;
  }

  .persistence-signin-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Detail full-screen page (was modal) ─────── */
.modal-overlay {
  position: relative;
  inset: auto;
  z-index: 1;
  background: transparent;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
  will-change: auto;
  display: block;
  height: 100%;
  max-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: manipulation;
  padding-top: 0;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

#page-detail {
  position: fixed;
  inset: 0;
  z-index: 200;
}
#showModal {
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain !important;
  touch-action: manipulation;
  position: relative;
  z-index: 1;
}

/* Detail top bar — page title + actions */
.detail-topbar {
  display: none;
}
.detail-topbar-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.detail-topbar-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--accent3);
  font-weight: 800;
}
.detail-topbar-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}
.detail-topbar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Sheet is now the scrollable content area inside the full-screen page */
.modal-sheet {
  overflow: visible;
  padding: 0;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
.modal-drag-handle { display: none; } /* no longer needed */

.modal-hero {
  position: relative;
  height: clamp(180px, 28vw, 250px);
  flex-shrink: 0;
  overflow: hidden;
  margin: 0 0 16px;
  border-radius: 26px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  transform: scale(1.06);
}
.modal-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 40%, var(--bg-secondary) 100%);
}
.modal-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  z-index: 1;
}
.modal-poster {
  width: 84px;
  height: 126px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.12);
}
.modal-hero-info { flex: 1; min-width: 0; }
.modal-title {
  font-size: 26px;
  font-weight: 900;
  color: white;
  letter-spacing: -0.05em;
  line-height: 1.1;
  margin-bottom: 8px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
  overflow-wrap: break-word;
  word-break: break-word;
}
.modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}
.meta-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
  font-weight: 500;
  backdrop-filter: blur(8px);
}
.meta-tag.movie { background: rgba(255,107,157,0.25); color: #ffb3cc; }
.modal-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--yellow);
}
.stars-display { letter-spacing: -2px; font-size: 12px; }
.modal-user-rating {
  margin-top: 4px;
  font-size: 12px;
  color: var(--yellow);
  display: flex;
  align-items: center;
  gap: 4px;
}
.modal-actions {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 16px 18px 10px;
  gap: 12px;
  margin: 0 0 8px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
}
.btn-add-watchlist {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 82%, var(--accent2)) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.18);
  flex: 1;
  justify-content: center;
}
.btn-add-watchlist:hover { transform: scale(1.02) translateY(-1px); box-shadow: 0 10px 32px rgba(124,111,255,0.4), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn-add-watchlist:active { transform: scale(0.97); }
.btn-add-watchlist svg { width: 18px; height: 18px; }
.btn-add-watchlist.in-list {
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  box-shadow: none;
}
.status-badge-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  justify-content: center;
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: all var(--transition);
}
.status-badge-btn:hover {
  background: var(--bg-card-hover);
  border-color: rgba(124,111,255,0.22);
}
.action-btns { display: flex; gap: 8px; }
.action-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.action-btn:hover {
  background: var(--bg-card-hover);
  border-color: rgba(124,111,255,0.22);
  transform: translateY(-1px);
}
.action-btn:active { transform: scale(0.93); }
.action-btn svg { width: 20px; height: 20px; }
.modal-section {
  padding: 14px 0 18px;
}
.modal-section + .modal-section {
  border-top: 1px solid rgba(255,255,255,0.05);
}
.detail-stack-section {
  padding-top: 18px;
  padding-bottom: 18px;
}
.detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 14px;
}
.detail-overview-card,
.detail-facts-card {
  border-radius: 24px;
  padding: 20px;
}
.detail-card-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--accent3);
  font-weight: 800;
  margin-bottom: 12px;
}
.detail-facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.detail-fact-item {
  min-width: 0;
}
.detail-fact-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-tertiary);
  font-weight: 800;
}
.detail-fact-value {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
  font-weight: 600;
}
.modal-section-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.modal-tagline {
  font-size: 13px;
  font-style: italic;
  color: var(--accent3);
  margin-bottom: 8px;
  line-height: 1.4;
  opacity: 0.9;
}
.modal-overview {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent3) 100%);
  border-radius: 4px;
  transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 0 8px rgba(124,111,255,0.4);
  position: relative;
}
.progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25));
  border-radius: 0 4px 4px 0;
  pointer-events: none;
}
.progress-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 60px;
  text-align: right;
}
.seasons-section-header {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.seasons-list { display: flex; flex-direction: column; gap: 14px; }
.season-item {
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  overflow: hidden;
}
.season-header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  gap: 14px;
  transition: background var(--transition), border-color var(--transition);
  user-select: none;
}
.season-header:hover { background: color-mix(in srgb, var(--bg-card-hover) 86%, transparent); }
.season-thumb {
  width: 56px;
  height: 82px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  overflow: hidden;
  flex-shrink: 0;
}
.season-thumb img { width: 100%; height: 100%; object-fit: cover; }
.season-info { flex: 1; min-width: 0; }
.season-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.season-name { font-size: 15px; font-weight: 800; margin-bottom: 2px; letter-spacing: -0.02em; }
.season-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.season-ep-count { font-size: 12px; color: var(--text-secondary); }
.season-overview-snippet {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.season-progress-mini {
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 10px;
}
.season-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}
.season-chevron { color: var(--text-secondary); transition: transform var(--transition); }
.season-chevron svg { width: 18px; height: 18px; }
.season-item.open .season-chevron { transform: rotate(90deg); }
.season-percent-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 58px;
  text-align: right;
  line-height: 1.4;
}
.season-percent-label .pct { color: var(--accent); font-size: 13px; display: block; }
/* Season progress ring */
.season-percent-label--ring {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 64px;
  justify-content: flex-end;
}
.season-ring {
  flex-shrink: 0;
  display: block;
}
.season-action-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mark-season-btn,
.mark-season-aired-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.mark-season-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
}
.mark-season-aired-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}
.mark-season-btn:hover { background: var(--accent); color: white; }
.mark-season-aired-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.mark-season-btn:active,
.mark-season-aired-btn:active { transform: scale(0.95); }

/* Non-interactive "Aired" status label — replaces the old mark-season-aired-btn */
.season-aired-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  cursor: default;
  user-select: none;
}
.season-aired-label svg { width: 14px; height: 14px; }
.season-aired-label span { line-height: 1; }
.mark-season-btn svg,
.mark-season-aired-btn svg { width: 14px; height: 14px; }
.mark-season-btn span,
.mark-season-aired-btn span { line-height: 1; }
.episodes-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1);
}
.season-item.open .episodes-list { max-height: 3000px; }
.episode-card {
  border-top: 1px solid var(--glass-border);
  transition: background var(--transition), border-color var(--transition);
}
.episode-card.is-watched > .episode-summary { opacity: 0.72; }
.episode-card.is-watched > .episode-summary .ep-title { text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.2); text-decoration-thickness: 1px; }
.episode-card.is-watched:hover > .episode-summary,
.episode-card.is-watched[open] > .episode-summary { opacity: 1; }
.episode-card[open] {
  background: rgba(255,255,255,0.025);
}
.episode-card:hover { background: rgba(255,255,255,0.025); }
.episode-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.episode-summary::-webkit-details-marker { display: none; }
.ep-thumb {
  width: 90px;
  height: 50px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.ep-info { flex: 1; min-width: 0; }
.ep-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ep-num { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.ep-title { font-size: 14px; font-weight: 650; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.ep-date { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.ep-date-runtime { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ep-date-runtime .ep-runtime-inline { font-size: 10.5px; font-weight: 700; color: var(--accent3); background: rgba(112,194,200,0.1); border: 1px solid rgba(112,194,200,0.18); border-radius: 4px; padding: 0 5px; line-height: 1.6; flex-shrink: 0; }

/* Season runtime chip — shown on season header */
.season-runtime-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent3);
  background: rgba(112,194,200,0.1);
  border: 1px solid rgba(112,194,200,0.18);
  border-radius: 5px;
  padding: 0px 5px;
  line-height: 1.7;
  vertical-align: middle;
}
.season-runtime-est {
  color: var(--text-tertiary);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
.season-binge-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  background: rgba(251,146,60,0.1);
  border: 1px solid rgba(251,146,60,0.2);
  border-radius: 5px;
  padding: 0px 5px;
  line-height: 1.7;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.01em;
}
.season-binge-chip-est {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.ep-expand-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  transition: transform var(--transition), color var(--transition), background var(--transition);
}
.episode-card[open] .ep-expand-icon {
  transform: rotate(180deg);
  color: var(--accent3);
  background: rgba(0,212,255,0.08);
}
.ep-expand-icon svg { width: 16px; height: 16px; }
.episode-detail-panel {
  padding: 0 16px 18px 118px;
  border-left: 2px solid rgba(122,121,218,0.12);
  margin-left: 16px;
  padding-left: 16px;
  animation: epDetailFadeIn 0.2s ease;
}
@keyframes epDetailFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.episode-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.episode-detail-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.episode-detail-summary {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.episode-detail-panel {
  cursor: pointer;
}
.ep-watch-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--transition), border-color var(--transition), color var(--transition), background var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.ep-watch-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.12); }
.ep-watch-btn.watched {
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  border-color: transparent;
  color: white;
  animation: watchedCelebrate .7s cubic-bezier(.2,1.2,.3,1), watchPulse 0.85s ease;
  box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.12), 0 0 24px rgba(74, 222, 128, 0.3);
}
.ep-watch-btn:active { transform: scale(0.88); }
.ep-watch-btn svg { width: 15px; height: 15px; }
.ep-watch-btn.watched svg { animation: checkDraw 0.35s ease forwards; }
.ep-watch-btn.ep-unaired { opacity: 0.35; cursor: not-allowed; }
.ep-watch-btn.ep-unaired:hover { transform: none; }
/* Larger tap target on touch devices */
@media (hover: none) and (pointer: coarse) {
  .ep-watch-btn { width: 38px; height: 38px; }
  .ep-watch-btn svg { width: 17px; height: 17px; }
}
/* Long-press hold visual ring */
.ep-watch-btn:not(.ep-unaired):not(.watched):active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122,121,218,0.18);
  transition: border-color 0.1s, box-shadow 0.5s;
}
@media (max-width: 640px) {
  .season-header {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 14px;
    gap: 12px;
  }

  .season-thumb {
    width: 48px;
    height: 72px;
  }

  .season-header-row,
  .season-meta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .season-percent-label {
    text-align: left;
    min-width: 0;
  }

  .episode-summary {
    padding: 12px 14px;
    gap: 10px;
  }

  .ep-thumb {
    width: 74px;
    height: 44px;
  }

  .ep-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .episode-detail-panel {
    padding: 0 14px 16px 14px;
  }
}
@keyframes checkDraw {
  0% { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
  1% { opacity: 1; }
  100% { stroke-dasharray: 100; stroke-dashoffset: 0; }
}
@keyframes watchPulse {
  0% { box-shadow: 0 0 0 0 rgba(124,111,255,0.65); }
  70% { box-shadow: 0 0 0 14px rgba(124,111,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,111,255,0); }
}
@keyframes watchedCelebrate {
  0% { transform: scale(.8) rotate(-12deg); }
  45% { transform: scale(1.18) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Confetti burst ── */
.confetti-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 0;
  height: 0;
}
.confetti-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confettiParticle 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes confettiParticle {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-particle { animation: none !important; opacity: 0 !important; }
}

/* ── Continue-watching action sparks ── */
.continue-action-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.continue-action-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent3);
  animation: sparkFly 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes sparkFly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-rotate, 0deg)) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .continue-action-spark { animation: none !important; opacity: 0 !important; }
}

/* ── Rating modal emoji burst ── */
.rating-modal-emoji.burst {
  animation: emojiBurst 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes emojiBurst {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55) rotate(-8deg); }
  65%  { transform: scale(0.9) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rating-modal-emoji.burst { animation: none; }
}

/* ── Binge streak toast badge ── */
.toast.binge {
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(248,113,113,0.12));
  border-color: rgba(251,191,36,0.3);
}

/* ── Season complete button flash ── */
@keyframes seasonFlash {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  50%  { box-shadow: 0 0 0 12px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.mark-season-btn.just-done {
  animation: seasonFlash 0.7s ease-out forwards;
}

.rating-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
}
.rating-modal-overlay.open { opacity: 1; pointer-events: all; }
/* Never show rating modal to signed-out users — CSS-level guard even if cached JS adds .open */
body.is-signed-out .rating-modal-overlay { display: none !important; }
.rating-modal-sheet {
  width: 100%;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.4s cubic-bezier(0.32,0.72,0,1);
  will-change: transform;
  border-top: 1px solid var(--glass-border);
  padding-bottom: calc(var(--safe-bottom) + 20px);
}
.rating-modal-overlay.open .rating-modal-sheet { transform: translateY(0); }
.rating-modal-drag {
  width: 36px;
  height: 4px;
  background: var(--glass-border);
  border-radius: 2px;
  margin: 12px auto 0;
}
.rating-modal-body { padding: 20px 24px 16px; text-align: center; }
.rating-modal-emoji { font-size: 48px; margin-bottom: 12px; }
.rating-modal-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.rating-modal-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }
.star-picker {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.star-btn {
  font-size: 42px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all var(--spring);
  line-height: 1;
  padding: 4px;
}
.star-btn.lit { color: var(--yellow); transform: scale(1.15); }
.star-btn:hover { transform: scale(1.2); }
.star-btn:active { transform: scale(0.85); }
.rating-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 24px;
  padding: 0 8px;
}
.btn-skip-rating {
  display: block;
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-skip-rating:hover { background: var(--bg-card); }

.episode-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.episode-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.episode-modal-sheet {
  width: 100%;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(18,19,32,.96), rgba(10,10,20,.98));
  border-top: 1px solid rgba(255,255,255,.08);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
  padding-bottom: calc(var(--safe-bottom) + 18px);
}
.episode-modal-overlay.open .episode-modal-sheet {
  transform: translateY(0);
}
.episode-modal-drag {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 12px auto;
}
.episode-modal-media {
  position: relative;
  min-height: 210px;
  overflow: hidden;
}
.episode-modal-backdrop,
.episode-modal-media-overlay {
  position: absolute;
  inset: 0;
}
.episode-modal-backdrop {
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  transform: scale(1.04);
}
.episode-modal-media-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(8,8,14,.92));
}
.episode-modal-media-content {
  position: relative;
  z-index: 1;
  padding: 76px 22px 22px;
}
.episode-modal-kicker {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}
.episode-modal-title {
  margin-top: 10px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -1px;
}
.episode-modal-subtitle {
  margin-top: 8px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
}
.episode-modal-body {
  padding: 18px 22px 0;
}
.episode-meta-row,
.episode-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.episode-pill-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.episode-meta-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.episode-stat-pill {
  border-radius: 16px;
  padding: 14px 12px;
}
.episode-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-tertiary);
  font-weight: 800;
}
.episode-stat-value {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}
.episode-modal-summary {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
}

/* Episode modal watch-toggle button */
.episode-modal-watch-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(122,121,218,0.3);
  background: rgba(122,121,218,0.1);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  margin-bottom: 16px;
}
.episode-modal-watch-toggle:hover {
  background: rgba(122,121,218,0.18);
  border-color: rgba(122,121,218,0.5);
}
.episode-modal-watch-toggle:active {
  transform: scale(0.97);
}
.episode-modal-watch-toggle.is-watched {
  background: rgba(74,222,128,0.12);
  border-color: rgba(74,222,128,0.35);
  color: var(--green);
}
.episode-modal-watch-toggle.is-watched:hover {
  background: rgba(248,113,113,0.1);
  border-color: rgba(248,113,113,0.3);
  color: var(--red);
}
.episode-modal-watch-toggle.is-watched:hover span::before {
  content: '✕ ';
}
.episode-modal-watch-toggle.is-watched span::before {
  content: '';
}

.toast-container {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--glass-bg);
  opacity: 0.9;
  -webkit-opacity: 0.9;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 12px 40px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.08);
  white-space: nowrap;
  animation: toastIn 0.48s var(--spring);
  pointer-events: all;
  max-width: 90vw;
}
.toast.cta {
  border-color: var(--accent);
  background: rgba(124,111,255,0.15);
  backdrop-filter: var(--glass-blur);
  cursor: pointer;
}
.toast.cta:hover { background: rgba(124,111,255,0.25); }
.toast.hiding { animation: toastOut 0.28s ease forwards; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(24px) scale(0.84); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(-12px) scale(0.88); }
}
.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-cta-btn {
  margin-left: 6px;
  padding: 4px 10px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.status-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
}
.status-picker-overlay.open { opacity: 1; pointer-events: all; }
.status-picker {
  width: 100%;
  padding: 8px 20px calc(var(--safe-bottom) + 20px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--bg-secondary);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.4s cubic-bezier(0.32,0.72,0,1);
  will-change: transform;
  border-top: 1px solid var(--glass-border);
}
.status-picker-overlay.open .status-picker { transform: translateY(0); }
.picker-handle { width: 36px; height: 4px; background: var(--glass-border); border-radius: 2px; margin: 8px auto 16px; }
.picker-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; text-align: center; }
.picker-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.picker-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  color: var(--text-primary);
  text-align: left;
}
.picker-option:hover { background: var(--bg-card-hover); }
.picker-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.picker-option:active { transform: scale(0.98); }
.picker-option-icon { font-size: 20px; }
.picker-option-info { flex: 1; }
.picker-option-label { font-size: 15px; font-weight: 600; display: block; }
.picker-option-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; display: block; }
.picker-check { color: var(--accent); }
.picker-check svg { width: 18px; height: 18px; }
.btn-remove {
  display: block;
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--radius-md);
  color: var(--red);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.btn-remove:hover { background: rgba(248,113,113,0.1); }

.bottom-spacer { height: 20px; }
.no-poster {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.07) 100%);
  color: var(--text-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: inherit;
}
.season-skeleton { height: 84px; border-radius: var(--radius-md); }
.skeleton-grid .grid-skeleton { aspect-ratio: 2/3; }
.section { animation: sectionReveal 0.42s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes sectionReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.confetti-burst { position: fixed; pointer-events: none; z-index: 999; }
.confetti-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  animation: confettiAnim 0.9s ease-out forwards;
}
@keyframes confettiAnim {
  0% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx),var(--ty)) rotate(720deg) scale(0); }
}

@media (max-width: 640px) {
  .local-banner { flex-direction: column; align-items: flex-start; }
  .signed-out-topbar {
    align-items: flex-start;
  }
  .signed-out-topbar-copy {
    display: none;
  }
  .signed-out-topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .signed-out-hero {
    margin: 12px 16px 20px;
    padding: 20px;
    grid-template-columns: 1fr;
  }
  .signed-out-hero-title {
    font-size: 32px;
  }
  .signed-out-hero-actions .btn-primary,
  .signed-out-hero-actions .btn-secondary,
  .landing-header-btn,
  .auth-gate-submit,
  .auth-gate-secondary {
    width: 100%;
    justify-content: center;
  }
  .detail-hero-grid,
  .episode-pill-grid,
  .film-notes-grid {
    grid-template-columns: 1fr;
  }
  .similar-card {
    min-width: 86vw;
  }
  .local-banner-btn { width: 100%; justify-content: center; text-align: center; }
  .watch-plan-hero { grid-template-columns: 74px 1fr; }
  .watch-plan-poster { width: 74px; }
  .watch-plan-actions { flex-wrap: wrap; }
  .hero-preview-panel,
  .binge-pulse-grid { grid-template-columns: 1fr; }
  .hero-preview-panel {
    padding: 13px;
  }
  .hero-preview-btn { width: 100%; justify-content: center; text-align: center; }
  .hero-title {
    max-width: 100%;
    font-size: 22px;
  }
  .hero-content {
    padding: 16px;
  }
  .quick-pick-card,
  .binge-pulse-card {
    min-height: 152px;
  }
  .quick-pick-body,
  .binge-pulse-content {
    min-height: 152px;
    padding: 14px;
  }
  .quick-pick-title,
  .binge-pulse-title {
    font-size: 20px;
  }
  .discover-categories {
    scroll-padding-left: 20px;
  }
  .modal-sheet {
    padding-left: 16px;
    padding-right: 16px;
  }
  .modal-hero {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 28px 28px 22px 22px;
  }
  .modal-hero-content {
    padding: 16px 16px 14px 20px;
    gap: 12px;
  }
  .modal-poster {
    width: 82px;
    height: 123px;
    margin-left: -4px;
  }
  .modal-title {
    font-size: 19px;
    margin-bottom: 6px;
  }
  .modal-meta {
    gap: 4px;
    margin-bottom: 6px;
  }
  .meta-tag {
    font-size: 10px;
    padding: 3px 7px;
  }
  .modal-actions {
    flex-direction: column;
    gap: 10px;
  }
  .watchlist-status-select,
  .btn-add-watchlist,
  .status-badge-btn,
  .action-btns {
    width: 100%;
  }
  .action-btns {
    justify-content: stretch;
    gap: 10px;
  }
  .action-btn {
    flex: 1;
    width: auto;
    border-radius: 16px;
  }
  .detail-quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .detail-stat-card {
    padding: 12px;
    border-radius: 16px;
  }
  .detail-stat-label {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .detail-stat-value {
    margin-top: 6px;
    font-size: 18px;
    line-height: 1.1;
  }
  .detail-stat-sub {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.35;
  }
  .detail-insight-grid { grid-template-columns: 1fr; }
  .detail-facts-card,
  .detail-overview-card {
    padding: 16px;
  }
  .detail-facts-grid {
    gap: 10px 8px;
  }
  .detail-fact-value {
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .trailer-spotlight { grid-template-columns: 1fr; }
  .episode-detail-panel { padding: 0 16px 16px; }
}

@media (min-width: 768px) {
  body {
    overflow-y: auto;
    background:
      radial-gradient(ellipse 85% 65% at 15% 10%, rgba(124,111,255,0.16) 0%, transparent 55%),
      radial-gradient(ellipse 55% 40% at 88% 92%, rgba(255,107,157,0.12) 0%, transparent 52%),
      var(--bg-primary);
  }
  .ambient-orbs { opacity: 0.95; }
  body::before { opacity: 0.75; }
  #app {
    width: min(100%, 1600px);
    min-height: 100dvh;
    height: auto;
    margin: 0 auto;
    padding: 0 24px 24px 0;
    overflow: visible;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .app-shell {
    min-width: 0;
  }
  .desktop-sidebar {
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    align-self: start;
    min-height: 100dvh;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 18px 24px;
    border-radius: 0 28px 28px 0;
    box-shadow: var(--shadow-card);
  }
  .desktop-sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .desktop-logo {
    gap: 10px;
  }
  .desktop-sidebar-tagline {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
  }
  .desktop-sidebar-status {
    padding: 14px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: linear-gradient(180deg, rgba(124,111,255,0.16), rgba(255,255,255,0.03));
  }
  .sidebar-status-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--accent3);
    font-weight: 800;
  }
  .sidebar-status-value {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
  }
  .sidebar-status-sub {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .desktop-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .desktop-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
  }
  .desktop-nav-item svg {
    width: 18px;
    height: 18px;
  }
  .desktop-nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.05);
  }
  .desktop-nav-item.active {
    background: linear-gradient(135deg, rgba(124,111,255,0.2), rgba(124,111,255,0.08));
    color: var(--text-primary);
    border-color: rgba(124,111,255,0.28);
    box-shadow: 0 12px 28px rgba(124,111,255,0.12);
  }
  .desktop-sidebar-footer {
    display: flex;
    gap: 10px;
  }
  .sync-chip {
    min-height: 42px;
    padding: 0 14px;
  }
  .sync-chip-label {
    font-size: 12.5px;
  }
  .top-bar {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    max-width: none;
    margin: 0;
    border-radius: 24px;
  }
  .top-bar-inner { max-width: 100%; padding: 0 24px; }
  .pages-container {
    position: relative;
    inset: auto;
    display: block;
    min-height: auto;
    width: min(100%, 1320px);
    margin: 0 auto;
    padding-top: 16px;
    padding-bottom: 48px;
  }
  .page {
    position: relative;
    inset: auto;
    display: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .page.active { display: block; }
  .page-scroll,
  .search-container {
    height: auto;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Keep the detail page out of the desktop sidebar hit area. */
  #page-detail {
    left: calc((100vw - min(100vw, 1600px)) / 2 + 304px);
    width: calc(min(100vw, 1600px) - 304px);
    right: auto;
  }
  /* Restore scrollability on the detail page scroll container on desktop. */
  #showModal {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .search-top-area {
    position: relative;
    top: auto;
    background: none;
    padding-left: 0;
    padding-right: 0;
  }
  .signed-out-hero {
    margin: 0 0 24px;
  }
  .home-feature-stack {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    align-items: stretch;
  }
  .binge-pulse-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
  }
  .watch-plan-card,
  .activity-feed-card { min-height: 100%; }
  .hero-carousel,
  .hero-skeleton { min-height: 480px; }
  .hero-media-shell {
    grid-template-columns: minmax(228px, 26%) minmax(0, 1fr);
    min-height: 480px;
    gap: 0;
  }
  .hero-media-shell.has-poster {
    grid-template-columns: minmax(228px, 26%) minmax(0, 1fr);
  }
  .hero-poster-rail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0 24px 24px;
    margin-right: -44px;
    background: transparent;
    border-right: 0;
    z-index: 3;
  }
  .hero-poster-rail::after {
    display: none;
  }
  .hero-poster-frame {
    aspect-ratio: 2 / 3;
    width: min(100%, 250px);
    margin-left: auto;
  }
  .hero-stage {
    min-height: 480px;
    margin-left: 0;
    border-radius: 0;
  }
  .hero-content {
    padding: 48px 32px 32px 96px;
    max-width: 760px;
  }
  .hero-title { font-size: clamp(2.2rem, 4vw, 3rem); max-width: 12ch; letter-spacing: -0.04em; }
  .hero-meta span { font-size: 14px; }
  .whats-hot-grid { grid-template-columns: repeat(6, 1fr); }
  .poster-grid,
  .results-grid,
  .myshows-grid { grid-template-columns: repeat(5, 1fr); }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
  .profile-highlight-grid { grid-template-columns: repeat(4, 1fr); }
  .profile-insights-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .favorites-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .favorite-pill { max-width: none; }
  .rating-modal-overlay,
  .status-picker-overlay {
    align-items: center;
    justify-content: center;
    padding: 32px;
  }
  /* Detail page stays full-screen on desktop too */
  .modal-sheet {
    max-width: 860px;
    padding: 0 clamp(24px, 3vw, 36px) 28px;
  }
  .modal-overlay.open .modal-sheet { transform: translateY(0) scale(1); }
  .modal-hero { height: 320px; }
  .modal-hero-content { padding: 28px; gap: 22px; }
  .modal-poster { width: 132px; height: 198px; }
  .modal-title { font-size: 34px; }
  .rating-modal-sheet,
  .status-picker {
    width: min(520px, calc(100vw - 64px));
    border-radius: 28px;
    transform: translateY(18px) scale(0.98);
    padding-bottom: 24px;
  }
  .rating-modal-overlay.open .rating-modal-sheet,
  .status-picker-overlay.open .status-picker { transform: translateY(0) scale(1); }
  .bottom-nav {
    display: none;
  }
  .nav-item { min-height: 62px; }
  .nav-item span { font-size: 11px; }
  .toast-container { bottom: 28px; }
}

@media (min-width: 1100px) {
  .poster-grid,
  .results-grid,
  .myshows-grid { grid-template-columns: repeat(6, 1fr); }
  .hero-title { max-width: min(55%, 12ch); }
}


.favorite-pill {
  appearance: none;
  text-align: left;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.detail-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.detail-stat-card {
  padding: 16px;
  border-radius: 22px;
  min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.detail-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: var(--text-secondary);
}
.detail-stat-value {
  margin-top: 8px;
  font-size: clamp(16px, 3.5vw, 22px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-stat-sub {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.detail-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.detail-insight-card {
  padding: 14px;
  border-radius: 18px;
}
.detail-insight-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: var(--accent3);
  margin-bottom: 8px;
}
.detail-insight-copy {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.detail-similar-row,
.detail-cast-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  padding-inline: 2px;
  scrollbar-width: none;
  scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
}
.detail-similar-row::-webkit-scrollbar,
.detail-cast-row::-webkit-scrollbar { display: none; }
.similar-card {
  min-width: 260px;
  max-width: 280px;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color: inherit;
  text-align: left;
  padding: 12px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  cursor: pointer;
  font: inherit;
  scroll-snap-align: start;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.similar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124,111,255,0.22);
  box-shadow: 0 18px 36px rgba(0,0,0,0.24);
  background: var(--bg-card-hover);
}
.similar-card-poster-wrap {
  width: 92px;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-tertiary);
}
.similar-card-poster,
.similar-card-placeholder {
  width: 100%;
  height: 100%;
}
.similar-card-poster {
  object-fit: cover;
  display: block;
}
.similar-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.similar-card-body {
  min-width: 0;
  align-self: center;
}
.similar-card-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-tertiary);
  font-weight: 800;
}
.similar-card-title {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.similar-card-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--accent3);
  font-weight: 700;
}
.similar-card-chip-row {
  margin-top: 8px;
}
.similar-card-copy {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cast-pill {
  min-width: 190px;
  max-width: 220px;
  padding: 14px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  scroll-snap-align: start;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  text-align: left;
  font-family: inherit;
}
.cast-pill:hover {
  background: rgba(122,121,218,0.1);
  border-color: rgba(122,121,218,0.2);
  transform: translateY(-2px);
}
.cast-pill:active { transform: scale(0.97); }
.cast-pill-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  color: var(--accent3);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  overflow: hidden;
}
.cast-pill-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cast-pill-copy {
  min-width: 0;
}
.cast-pill-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cast-pill-role {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-section-header {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 12px;
  align-items: end;
}
.favorite-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  border-color: rgba(124,111,255,0.22);
  background: var(--bg-card-hover);
}
.favorite-pill:active { transform: scale(0.98); }
.watch-provider-row {
  display: grid;
  gap: 18px;
}
.provider-group {
  display: grid;
  gap: 10px;
}
.provider-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--text-tertiary);
  font-weight: 800;
}
.provider-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.provider-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.provider-pill-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
  background: var(--bg-card-hover);
  box-shadow: 0 14px 28px rgba(0,0,0,0.2);
}
.provider-pill-media {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.provider-pill-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.provider-pill-logo-fallback {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-secondary);
}
.provider-pill-copy {
  min-width: 0;
}
.provider-pill-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.provider-pill-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.trailer-spotlight {
  padding: 18px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.95fr);
  gap: 16px;
  overflow: hidden;
}
.trailer-spotlight-body {
  min-width: 0;
}
.trailer-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent3);
  font-weight: 800;
}
.trailer-title {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.trailer-meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.trailer-copy {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.trailer-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trailer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
}
.trailer-btn.primary {
  background: linear-gradient(135deg, rgba(124,111,255,0.24), rgba(94,234,212,0.18));
  border: 1px solid rgba(124,111,255,0.3);
  color: var(--text-primary);
}
.trailer-btn.subtle {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}
.trailer-btn:hover {
  transform: translateY(-1px);
}
.trailer-btn.primary:hover {
  box-shadow: 0 14px 32px rgba(124,111,255,0.16);
}
.trailer-btn.subtle:hover {
  background: var(--bg-card-hover);
  border-color: rgba(124,111,255,0.22);
  color: var(--text-primary);
}
.trailer-video-list {
  display: grid;
  gap: 10px;
}
.trailer-video-chip {
  width: 100%;
  text-align: left;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: inherit;
  padding: 12px 14px;
  font: inherit;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.trailer-video-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(124,111,255,0.22);
}
.trailer-video-chip.active {
  border-color: rgba(124,111,255,0.36);
  box-shadow: 0 10px 28px rgba(124,111,255,0.15);
  background: var(--bg-card-hover);
}
.trailer-video-chip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--accent3);
  font-weight: 800;
}
.trailer-video-chip-title {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.trailer-video-chip-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.discover-empty {
  margin: 14px 20px 0;
  border-radius: 18px;
  padding: 24px 18px;
  text-align: center;
}
.discover-empty-icon {
  font-size: 30px;
  margin-bottom: 10px;
}
.film-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.film-note-card {
  padding: 16px;
  border-radius: 18px;
}
.film-note-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--accent3);
  font-weight: 800;
}
.film-note-value {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
}
.film-note-copy {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  :root {
    --nav-height: 88px;
    --top-bar-height: 72px;
  }
  .section { padding-bottom: 42px; }
  .section-header { padding: 0 0 18px; }
  .section-title { font-size: 26px; letter-spacing: -0.04em; font-weight: 800; }
  .section-subtitle { font-size: 14px; }
  .local-banner,
  .hero-carousel,
  .hero-skeleton,
  .horizontal-scroll,
  .whats-hot-grid,
  .poster-grid,
  .search-results-container,
  .myshows-grid,
  .stats-row,
  .profile-highlight-grid,
  .favorites-row,
  .status-breakdown,
  .pref-list,
  .btn-danger,
  .up-next-list,
  .modal-actions,
  .modal-section,
  .myshows-header,
  .home-feature-stack { margin-left: 0; margin-right: 0; }
  .local-banner { margin: 0 0 22px; }
  .hero-carousel,
  .hero-skeleton { margin: 0; }
  .horizontal-scroll,
  .whats-hot-grid,
  .poster-grid,
  .myshows-grid,
  .stats-row,
  .profile-highlight-grid,
  .favorites-row,
  .status-breakdown,
  .pref-list,
  .up-next-list,
  .modal-actions,
  .modal-section,
  .home-feature-stack { padding-left: 0; padding-right: 0; }
  .search-results-container { padding: 20px 0 0; }
  .myshows-header { padding: 8px 0 0; }
  .profile-header { padding: 20px 0 32px; }
  .hero-section { padding-bottom: 28px; }
  .hero-carousel,
  .hero-skeleton { min-height: 520px; }
  .hero-media-shell,
  .hero-media-shell.has-poster { min-height: 520px; grid-template-columns: minmax(244px, 28%) minmax(0, 1fr); }
  .hero-poster-rail { padding: 28px 0 28px 28px; margin-right: -54px; }
  .hero-poster-frame { width: min(100%, 270px); }
  .hero-stage { min-height: 520px; }
  .hero-content { max-width: 760px; padding: 52px 34px 34px 110px; }
  .hero-title { font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 0.98; max-width: 11ch; letter-spacing: -0.04em; }
  .hero-meta span { font-size: 15px; }
  .show-card { min-width: 180px; }
  .show-card-title { font-size: 14px; }
  .show-card-sub { font-size: 12px; }
  .hot-card .card-title,
  .poster-grid-card .card-title,
  .search-result-item .card-title,
  .myshow-card .card-title { font-size: 13px; }
  .hot-card .card-rating,
  .poster-grid-card .card-rating,
  .search-result-item .card-rating { font-size: 11px; }
  .up-next-card { padding: 14px 16px; }
  .up-next-show { font-size: 12px; }
  .up-next-ep { font-size: 15px; }
  .up-next-meta { font-size: 12px; }
  .search-container { overflow: visible; width: 100%; }
  .search-top-area {
    position: relative;
    top: auto;
    padding-top: 8px;
    padding-bottom: 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
  }
  .list-type-tabs { max-width: 420px; }
  .search-command-card,
  .search-filters-card,
  .discover-header,
  .discover-summary-row,
  .discover-categories,
  .search-results-container,
  .poster-grid {
    max-width: 100%;
  }
  .search-bar { min-height: 62px; border-radius: 22px; }
  .discover-categories { padding: 0 0 16px; }
  .results-group-title { font-size: 15px; margin-bottom: 14px; }
  .page-heading { font-size: 40px; margin-bottom: 18px; }
  .status-tabs { padding-bottom: 18px; }
  .profile-name { font-size: 36px; }
  .profile-sub { font-size: 16px; }
  .favorite-pill-title { font-size: 14px; }
  .favorite-pill-sub { font-size: 12px; }
}

@media (min-width: 1280px) {
  #app { width: min(100%, 1600px); }
  .desktop-sidebar {
    padding-top: 34px;
    padding-left: 22px;
    padding-right: 22px;
  }
  .desktop-sidebar-status {
    padding: 16px;
    border-radius: 20px;
  }
  .top-bar { max-width: none; }
  .home-feature-stack { grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.8fr); }
  .poster-grid,
  .results-grid,
  .myshows-grid { grid-template-columns: repeat(7, 1fr); }
  .whats-hot-grid { grid-template-columns: repeat(7, 1fr); }
  .show-card { min-width: 196px; }
  .hero-carousel,
  .hero-skeleton {
    min-height: 560px;
  }
  .hero-content { max-width: 820px; }
  .hero-title { font-size: clamp(3rem, 4.5vw, 3.8rem); letter-spacing: -0.04em; }
  .hero-media-shell,
  .hero-media-shell.has-poster {
    min-height: 560px;
    grid-template-columns: minmax(280px, 28%) minmax(0, 1fr);
  }
  .hero-poster-frame { width: min(100%, 310px); }
  .hero-content { padding-left: 124px; }
}

@media (max-width: 640px) {
  .section-header-stack {
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }

  .continue-rail-card {
    padding: 15px 16px;
  }

  .continue-rail-stats {
    grid-template-columns: 1fr;
  }

  .binge-pulse-actions {
    flex-direction: column;
  }

  .binge-pulse-actions .mini-btn {
    width: 100%;
    justify-content: center;
  }
}

.episode-deep-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,212,255,0.22);
  background: rgba(0,212,255,0.08);
  color: var(--accent3);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.episode-deep-link:hover {
  transform: translateY(-1px);
  background: rgba(0,212,255,0.14);
  border-color: rgba(0,212,255,0.3);
}
.episode-deep-link:active {
  transform: translateY(0);
}
.episode-reddit-link {
  margin-top: 8px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,86,0,0.22);
  background: rgba(255,86,0,0.07);
  color: #ff5600;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.episode-reddit-link:hover {
  background: rgba(255,86,0,0.14);
  transform: translateY(-1px);
}

.btn-add-watchlist:focus-visible,
.status-badge-btn:focus-visible,
.action-btn:focus-visible,
.mark-season-btn:focus-visible,
.ep-watch-btn:focus-visible,
.episode-deep-link:focus-visible,
.similar-card:focus-visible,
.provider-pill-link:focus-visible,
.trailer-btn:focus-visible,
.trailer-video-chip:focus-visible {
  outline: none;
  border-color: rgba(124,111,255,0.42);
  box-shadow: 0 0 0 3px rgba(124,111,255,0.18), 0 10px 24px rgba(0,0,0,0.18);
}

.btn-add-watchlist:focus-visible,
.mark-season-btn:focus-visible,
.episode-deep-link:focus-visible,
.trailer-btn:focus-visible {
  transform: translateY(-1px);
}

.similar-card:focus-visible,
.provider-pill-link:focus-visible,
.trailer-video-chip:focus-visible {
  background: var(--bg-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


.auth-topbar {
  justify-content: space-between;
  gap: 16px;
}

.auth-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-landing {
  position: relative;
  min-height: calc(100dvh - var(--top-bar-height) - var(--safe-top));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 120px;
  overflow: hidden;
}

.auth-landing-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(201, 167, 103, 0.16), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(132, 178, 190, 0.12), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(94, 112, 142, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(10, 12, 18, 0.86), rgba(6, 8, 14, 0.98));
}

.auth-landing-backdrop::before,
.auth-landing-backdrop::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.auth-landing-backdrop::before {
  inset: 8% 5% 10%;
  border-radius: 40px;
  border: 1px solid rgba(216, 222, 235, 0.08);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 82%);
  opacity: 0.35;
}

.auth-landing-backdrop::after {
  inset: auto 8% 12% auto;
  width: min(30vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 184, 123, 0.12) 0%, rgba(217, 184, 123, 0) 70%);
  filter: blur(8px);
  animation: authLandingHalo 14s ease-in-out infinite;
}

@keyframes authLandingHalo {
  0%, 100% { transform: scale(0.96); opacity: 0.4; }
  50% { transform: scale(1.04); opacity: 0.72; }
}

.auth-landing-grid {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 430px);
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}

.auth-landing-copy {
  display: grid;
  align-content: center;
  gap: 20px;
  max-width: 720px;
}

.auth-landing-kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(224, 210, 177, 0.76);
  font-weight: 800;
}

.auth-landing-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  max-width: 11ch;
  text-wrap: balance;
}

.auth-landing-sub {
  max-width: 58ch;
  font-family: 'Instrument Sans', 'DM Sans', sans-serif;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.68;
  color: rgba(233, 236, 244, 0.72);
}

.auth-landing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.auth-landing-stage {
  margin-top: 8px;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 32px;
  border: 1px solid rgba(227, 231, 240, 0.09);
  background:
    linear-gradient(180deg, rgba(19, 23, 34, 0.88), rgba(8, 10, 16, 0.92)),
    radial-gradient(circle at top right, rgba(153, 173, 184, 0.14), transparent 34%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26);
}

.auth-landing-stage-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.auth-landing-stage-kicker,
.auth-landing-story-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(210, 218, 230, 0.5);
  font-weight: 800;
}

.auth-landing-stage-title {
  margin-top: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: rgba(246, 247, 251, 0.96);
  max-width: 18ch;
}

.auth-landing-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(227, 231, 240, 0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(236, 239, 244, 0.8);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.auth-landing-stage-badge-dot,
.auth-landing-signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d2bb85, #8bb5ba);
  box-shadow: 0 0 0 6px rgba(210, 187, 133, 0.08);
  animation: authLandingPulse 2.8s ease-in-out infinite;
}

@keyframes authLandingPulse {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.15); opacity: 1; }
}

.auth-landing-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 0.9fr));
  gap: 14px;
}

.auth-landing-story {
  min-width: 0;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(227, 231, 240, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
}

.auth-landing-story-primary {
  background:
    linear-gradient(180deg, rgba(214, 189, 136, 0.08), rgba(255,255,255,0.015)),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
}

.auth-landing-story-metric {
  display: grid;
  align-content: space-between;
}

.auth-landing-story-title {
  margin-top: 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: rgba(248, 249, 252, 0.96);
}

.auth-landing-story-copy {
  margin-top: 12px;
  color: rgba(220, 225, 233, 0.68);
  font-size: 14px;
  line-height: 1.65;
}

.auth-landing-signal-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.auth-landing-signal-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(236, 239, 244, 0.78);
  font-size: 14px;
  line-height: 1.5;
}

.auth-landing-signal-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
}

.auth-landing-metric-value {
  margin-top: 16px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: rgba(244, 235, 215, 0.95);
}

.auth-landing-preview {
  max-width: 520px;
  padding: 20px 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(12,14,26,0.82), rgba(10,12,22,0.62));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.24);
}

.auth-landing-preview-kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}

.auth-landing-preview-title {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
}

.auth-landing-panel {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(13, 16, 24, 0.96), rgba(8, 10, 16, 0.94)),
    radial-gradient(circle at top, rgba(214, 189, 136, 0.08), transparent 42%);
  border: 1px solid rgba(227, 231, 240, 0.1);
  box-shadow: 0 32px 96px rgba(0,0,0,0.5);
  display: grid;
  gap: 20px;
  align-content: start;
}

.auth-panel-animated {
  position: relative;
}
.auth-panel-animated::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 33px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(139, 111, 245, 0.6) 0%,
    rgba(196, 161, 255, 0.3) 40%,
    rgba(249, 115, 22, 0.4) 70%,
    rgba(139, 111, 245, 0.6) 100%
  );
  background-size: 300% 300%;
  animation: swGradientShift 6s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

@keyframes swGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.auth-landing-form-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-landing-mark {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.auth-landing-brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.auth-landing-brand-sub {
  font-size: 13px;
  color: rgba(226, 231, 240, 0.62);
  line-height: 1.5;
}

.auth-landing-panel-intro {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(227, 231, 240, 0.08);
}

.auth-landing-panel-intro-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-landing-panel-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(227, 231, 240, 0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(237, 240, 245, 0.76);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-landing-panel-note {
  margin: 0;
  color: rgba(218, 224, 234, 0.68);
  font-size: 13px;
  line-height: 1.6;
}

.auth-landing-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(227, 231, 240, 0.07);
}

.auth-landing-toggle-btn {
  border: 0;
  background: transparent;
  color: rgba(221, 226, 235, 0.56);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.auth-landing-toggle-btn.active {
  background: linear-gradient(135deg, rgba(214, 189, 136, 0.95), rgba(145, 178, 184, 0.82));
  color: rgba(13, 16, 24, 0.94);
  box-shadow: 0 12px 24px rgba(145, 178, 184, 0.18);
}

.auth-landing-form {
  display: grid;
  gap: 12px;
}

.auth-landing-submit,
.auth-landing-secondary,
.auth-landing-link {
  width: 100%;
}

.auth-landing-link {
  border: 0;
  background: transparent;
  color: rgba(238, 241, 246, 0.72);
  text-align: center;
  font-weight: 600;
  cursor: pointer;
}

.auth-landing-note {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(218, 224, 234, 0.62);
}

/* ── Auth gate field wrappers & validation ── */
.auth-gate-field {
  display: grid;
  gap: 4px;
}

.auth-gate-field-error {
  font-size: 12px;
  color: #f59aa8;
  min-height: 16px;
  padding-left: 2px;
  font-weight: 500;
}

.auth-gate-input.error {
  border-color: rgba(255, 80, 100, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(255, 80, 100, 0.18) !important;
}

.auth-gate-input.error:focus {
  border-color: rgba(255, 80, 100, 0.9) !important;
  box-shadow: 0 0 0 3px rgba(255, 80, 100, 0.24) !important;
}

/* ── Password visibility toggle ── */
.auth-gate-password-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.auth-gate-password-wrap .auth-gate-input {
  flex: 1;
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(227, 231, 240, 0.42);
  cursor: pointer;
  border-radius: 0 12px 12px 0;
  transition: color 0.18s ease;
  flex-shrink: 0;
}

.password-toggle:hover {
  color: rgba(244, 246, 250, 0.82);
}

.password-toggle:focus-visible {
  outline: 2px solid rgba(124,111,255,0.7);
  outline-offset: -2px;
  border-radius: 0 12px 12px 0;
}

/* ── Inline message banners ── */
.auth-gate-message {
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  animation: authMsgIn 0.22s ease;
}

@keyframes authMsgIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-gate-message-error {
  background: rgba(255, 80, 100, 0.14);
  border: 1px solid rgba(255, 80, 100, 0.3);
  color: #ff8a96;
}

.auth-gate-message-success {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: #6ee7b7;
}

/* ── Submit button loading state ── */
.auth-landing-submit {
  position: relative;
  overflow: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.auth-landing-submit .auth-submit-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpinnerSpin 0.7s linear infinite;
  flex-shrink: 0;
}

.auth-landing-submit.loading .auth-submit-label {
  opacity: 0.5;
}

.auth-landing-submit.loading .auth-submit-spinner {
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes authSpinnerSpin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ── Auth callback loading page ── */
.auth-callback-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 20px 8px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.08));
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 32%, rgba(255,255,255,0.03)), rgba(0,0,0,0.06));
  box-shadow: 0 20px 50px rgba(0,0,0,0.24);
}

.auth-callback-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 70%, rgba(255,255,255,0.05));
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-callback-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.auth-callback-body {
  margin: 0;
  max-width: 34ch;
  line-height: 1.6;
}

.auth-callback-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(124,111,255,0.22);
  border-top-color: rgba(124,111,255,0.96);
  border-radius: 50%;
  animation: authSpinnerRaw 0.8s linear infinite;
  box-shadow: 0 0 0 8px rgba(124,111,255,0.08);
}

.auth-callback-success {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(135deg, rgba(91, 227, 143, 0.24), rgba(124,111,255,0.22));
  color: var(--text-primary);
  box-shadow: 0 18px 38px rgba(0,0,0,0.2);
}

.auth-email-confirm-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  margin: 12px 0 4px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.08));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 26%, rgba(255,255,255,0.04)), rgba(0,0,0,0.04));
}

.auth-email-confirm-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(255,255,255,0.06);
}

.auth-email-confirm-copy {
  display: grid;
  gap: 4px;
}

.auth-email-confirm-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.auth-email-confirm-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
}

.auth-email-confirm-body {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

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

/* ── Better input styles for auth gate ── */
.auth-gate-input {
  height: 50px;
  font-size: 15px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(227, 231, 240, 0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  width: 100%;
}

.auth-gate-input:focus {
  outline: none;
  border-color: rgba(214, 189, 136, 0.65);
  box-shadow: 0 0 0 3px rgba(214, 189, 136, 0.14);
  background: rgba(255,255,255,0.06);
}

.auth-gate-input::placeholder {
  color: rgba(227, 231, 240, 0.34);
}

/* ── Auth landing panel premium polish ── */
.auth-landing-panel {
  background: rgba(9,11,18,0.92) !important;
  box-shadow: 0 32px 96px rgba(0,0,0,0.52), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
}

.auth-landing-toggle-btn.active {
  box-shadow: 0 12px 28px rgba(214, 189, 136, 0.2), 0 2px 6px rgba(0,0,0,0.18);
}

.auth-landing-link:hover {
  color: rgba(255,255,255,0.9);
  text-decoration: underline;
}

/* FOUC prevention: hide nav elements until auth state is confirmed */
body.auth-pending #bottomNav,
body.auth-pending #desktopNav,
body.auth-pending #desktopSidebar,
body.auth-pending .top-bar,
body.auth-pending .desktop-sidebar-status {
  display: none !important;
}

body.auth-pending .auth-landing {
  min-height: 100dvh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

body.auth-pending .app-shell {
  display: block !important;
}

body.auth-pending .pages-container {
  display: none !important;
}

body.is-signed-out #bottomNav,
body.is-signed-out #desktopNav,
body.is-signed-out #desktopSidebar,
body.is-signed-out #desktopSidebar .desktop-sidebar-status,
body.is-signed-out #desktopNotifBtn,
body.is-signed-out #notifBtn,
body.is-signed-out .top-bar {
  display: none !important;
}

body.is-signed-out #app {
  display: block !important;
  padding: 0 !important;
}

body.is-signed-out .app-shell {
  display: block !important;
}

body.is-signed-out .pages-container {
  padding: 0 !important;
  margin: 0 !important;
}

body.is-signed-out #page-home > .page-scroll > :not(#authLandingGate) {
  display: none !important;
}

/* Gate ALL pages behind login — only show auth landing when signed out */
body.is-signed-out #page-search,
body.is-signed-out #page-tv,
body.is-signed-out #page-movies,
body.is-signed-out #page-mylist,
body.is-signed-out #page-progress,
body.is-signed-out #page-profile,
body.is-signed-out #page-detail,
body.is-signed-out .modal-overlay {
  display: none !important;
}

/* Make home page fill screen and center auth gate when signed out */
body.is-signed-out #page-home {
  min-height: 100dvh;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

body.is-signed-out .auth-landing {
  min-height: 100dvh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

@media (max-width: 900px) {
  .auth-landing-grid {
    grid-template-columns: 1fr;
  }

  .auth-landing-copy {
    order: 1;
    max-width: none;
  }

  .auth-landing-panel {
    order: 2;
  }

  .auth-landing-stage-grid {
    grid-template-columns: 1fr;
  }

  .auth-landing-stage-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .auth-landing {
    padding: 22px 16px 110px;
  }

  .auth-landing-panel {
    padding: 22px;
    border-radius: 24px;
  }

  .auth-landing-title {
    font-size: clamp(34px, 12vw, 54px);
    max-width: 10ch;
  }

  .auth-landing-sub {
    font-size: 15px;
  }

  .auth-landing-stage {
    padding: 18px;
    border-radius: 24px;
  }

  .auth-landing-stage-title,
  .auth-landing-story-title {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-landing-backdrop::after,
  .auth-landing-stage-badge-dot,
  .auth-landing-signal-dot {
    animation: none;
  }
}

/* =============================================
   UI OVERHAUL POLISH — 2026-03-12
   Premium card aesthetics, stagger animations,
   improved typography, modern micro-interactions
   ============================================= */

/* — Page heading improvements — */
.page-heading {
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* — Section header spacing — */
.section-header {
  padding: 0 20px 16px;
}

/* — Card entrance stagger — */
.show-card:nth-child(1) { animation-delay: 0.04s; }
.show-card:nth-child(2) { animation-delay: 0.08s; }
.show-card:nth-child(3) { animation-delay: 0.12s; }
.show-card:nth-child(4) { animation-delay: 0.16s; }
.show-card:nth-child(5) { animation-delay: 0.20s; }
.show-card:nth-child(n+6) { animation-delay: 0.24s; }

.poster-grid-card:nth-child(1) { animation-delay: 0.04s; }
.poster-grid-card:nth-child(2) { animation-delay: 0.08s; }
.poster-grid-card:nth-child(3) { animation-delay: 0.10s; }
.poster-grid-card:nth-child(4) { animation-delay: 0.12s; }
.poster-grid-card:nth-child(5) { animation-delay: 0.14s; }
.poster-grid-card:nth-child(6) { animation-delay: 0.16s; }
.poster-grid-card:nth-child(n+7) { animation-delay: 0.18s; }

.hot-card:nth-child(1) { animation-delay: 0.04s; }
.hot-card:nth-child(2) { animation-delay: 0.07s; }
.hot-card:nth-child(3) { animation-delay: 0.10s; }
.hot-card:nth-child(4) { animation-delay: 0.13s; }
.hot-card:nth-child(5) { animation-delay: 0.16s; }
.hot-card:nth-child(6) { animation-delay: 0.19s; }

/* — Myshow card border radius — */
.myshow-card {
  border-radius: 18px;
}

/* — Better card image overlay for myshows — */
.myshow-card .card-bottom {
  padding: 40px 10px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.6) 55%, transparent 100%);
}

/* — Search result card improvements — */
.search-result-item {
  border-radius: 20px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s cubic-bezier(0.4,0,0.2,1);
}
.search-result-body {
  padding: 14px 14px 16px;
}

/* — Progress card improvements — */
.progress-card {
  border-radius: 24px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
}
.progress-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.32), 0 0 24px rgba(124,111,255,0.1);
}

/* — Up next card hover improvement — */
.up-next-card {
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* — Binge pulse card radius — */
.binge-pulse-card {
  border-radius: 24px;
}

/* — Quick pick card radius — */
.quick-pick-card {
  border-radius: 24px;
}

/* — Glass with inner highlight for multiple components — */
.search-command-card,
.search-filters-card,
.discover-summary-row,
.continue-rail-card,
.watch-plan-card,
.activity-feed-card,
.detail-overview-card,
.detail-facts-card,
.trailer-spotlight,
.stat-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

/* — Episode modal improvements — */
.episode-modal-sheet {
  border-radius: 32px 32px 0 0;
}

/* — Rating modal improvements — */
.rating-modal-sheet {
  border-radius: 32px 32px 0 0;
}

/* — Status picker improvements — */
.status-picker {
  border-radius: 32px 32px 0 0;
}

/* — Desktop modal improvement — */
@media (min-width: 768px) {
  .modal-sheet {
    box-shadow: var(--shadow-modal), 0 0 80px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
  }
}

/* — Secondary text contrast improvement — */
.text-secondary,
.show-card-sub,
.hot-card .type-tag,
.search-result-subline,
.section-subtitle,
.stat-label {
  color: var(--text-secondary);
}

/* — Modern btn-secondary — */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--spring);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.14);
  transform: scale(1.02) translateY(-1px);
}
.btn-secondary:active {
  transform: scale(0.97);
}

/* — Improved modal section title — */
.modal-section-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

/* — Improved detail stack section — */
.detail-stack-section {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* — Better modal hero height — */
.modal-hero {
  height: clamp(260px, 44vw, 340px);
}

/* — Cat pill improvements — */
.cat-pill {
  min-height: 42px;
  padding: 0 18px;
  font-weight: 700;
  border-radius: 999px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.cat-pill:not(.active):hover {
  transform: translateY(-1px);
}
.cat-pill.active {
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, var(--accent2)) 100%);
  box-shadow: 0 6px 20px rgba(124,111,255,0.36);
}

/* — Profile header refinement — */
.profile-name {
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* — Profile page polish — */
.profile-page {
  padding-top: calc(var(--top-bar-height) + var(--safe-top) + 10px);
}

.profile-hero-shell {
  padding: 0 20px 22px;
}

.profile-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at top, rgba(124,111,255,0.18), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.profile-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 42%);
  pointer-events: none;
}

.profile-page .profile-header {
  padding: 26px 24px 22px;
}

.profile-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  text-align: left;
}

.profile-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent3);
}

.profile-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.profile-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.profile-page .profile-avatar {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 0;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(124,111,255,0.16), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 44px rgba(8, 8, 16, 0.3);
  filter: drop-shadow(0 0 24px rgba(124,111,255,0.24));
}

.profile-page .profile-name {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.profile-page .profile-sub {
  max-width: 34ch;
  margin: 8px auto 0;
  line-height: 1.6;
}

.profile-page .profile-name-row {
  gap: 10px;
  flex-wrap: wrap;
}

.profile-page .profile-edit-btn {
  min-height: 36px;
  padding: 0 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 1;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.profile-page .profile-edit-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.profile-page .stats-row {
  gap: 10px;
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  /* 5 cols when "This Year" card is visible — JS adds .stats-row--5col */
  grid-template-columns: repeat(4, 1fr);
}
.profile-page .stats-row.stats-row--5col {
  grid-template-columns: repeat(5, 1fr);
}
/* Accent color for This Year card */
.stat-card--this-year .stat-num {
  color: var(--accent3) !important;
  -webkit-text-fill-color: var(--accent3) !important;
}
/* Streak stat card — fire orange */
.stat-card--streak .stat-num,
.stat-num--streak {
  color: #fb923c !important;
  -webkit-text-fill-color: #fb923c !important;
  font-size: clamp(16px, 3.5vw, 22px) !important;
}
.stats-row--has-streak .stat-card--streak {
  background: linear-gradient(160deg, rgba(251,146,60,0.10) 0%, rgba(251,146,60,0.03) 100%);
  border-color: rgba(251,146,60,0.18);
}
/* When streak card is visible, stats row expands */
.profile-page .stats-row.stats-row--has-streak {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 520px) {
  /* On narrow mobile, wrap to 2+3 layout */
  .profile-page .stats-row.stats-row--5col {
    grid-template-columns: repeat(2, 1fr);
  }
  .profile-page .stats-row.stats-row--5col .stat-card--this-year {
    grid-column: 1 / -1;
    min-height: auto;
    padding: 10px 8px;
  }
  .profile-page .stats-row.stats-row--has-streak {
    grid-template-columns: repeat(3, 1fr);
  }
  .profile-page .stats-row.stats-row--has-streak.stats-row--5col {
    grid-template-columns: repeat(3, 1fr);
  }
}

.profile-page .stat-card {
  min-height: 92px;
  padding: 16px 8px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.profile-page .stat-num {
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  letter-spacing: -0.06em;
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.profile-page .stat-label {
  margin-top: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.profile-page .profile-highlight-grid {
  gap: 12px;
}

.profile-insights-section {
  padding: 0 20px 28px;
}

.profile-insights-grid {
  display: grid;
  gap: 12px;
}

.profile-insight-card {
  min-height: 116px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.profile-insight-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.profile-insight-value {
  margin-top: 12px;
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.profile-insight-copy {
  margin-top: 10px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.profile-genres-section {
  padding: 0 20px 28px;
}

.top-genres-list {
  display: grid;
  gap: 12px;
}

.top-genre-card {
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.top-genre-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.top-genre-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.top-genre-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.top-genre-percent {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent3);
  letter-spacing: 0.08em;
}

.top-genre-bar {
  margin-top: 12px;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}

.top-genre-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent3) 100%);
  box-shadow: 0 0 18px rgba(122,121,218,0.2);
}

.top-genres-empty {
  padding: 18px;
  border-radius: 18px;
  text-align: center;
  color: var(--text-secondary);
}

.profile-page .profile-highlight-card {
  min-height: 116px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.profile-page .profile-highlight-value {
  margin-top: 12px;
  font-size: clamp(1.55rem, 4vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.06em;
}

.profile-page .profile-highlight-copy {
  margin-top: 10px;
  line-height: 1.55;
}


.profile-page .favorites-row {
  gap: 14px;
}

.profile-page .favorite-pill {
  min-height: 104px;
  border-radius: 20px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.profile-page .favorite-pill-sub {
  margin-top: 6px;
  line-height: 1.5;
}

.profile-page .pref-list {
  gap: 12px;
}

.profile-page .pref-item {
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.profile-page .pref-info {
  min-width: 0;
}

.profile-page .pref-label {
  font-weight: 700;
}

.profile-page .pref-sub {
  margin-top: 4px;
  line-height: 1.5;
}

.profile-page .toggle-switch:has(input:focus-visible) .toggle-track,
.profile-page .profile-edit-btn:focus-visible,
.profile-page .favorite-pill:focus-visible,
.profile-page .see-all-btn:focus-visible,
.profile-page .up-next-card:focus-visible,
.profile-page .custom-list-card:focus-visible,
.profile-page .btn-danger:focus-visible,
.profile-page .btn-secondary:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, white);
  box-shadow: 0 0 0 3px rgba(124,111,255,0.18);
}

@media (min-width: 768px) {
  .progress-overview-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    align-items: end;
  }

  .progress-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
  }

  .progress-section-block .in-progress-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 640px) {
  .progress-overview-card {
    margin-left: 12px;
    margin-right: 12px;
    padding: 20px;
    border-radius: 24px;
  }

  .progress-overview-title {
    max-width: none;
    font-size: clamp(28px, 10vw, 38px);
  }

  .progress-overview-body {
    font-size: 13px;
  }

  .progress-section-heading {
    padding-left: 16px;
    padding-right: 16px;
  }

  .progress-time-group-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .in-progress-list {
    padding-left: 12px;
    padding-right: 12px;
  }

  .progress-card {
    padding: 16px;
    border-radius: 20px;
  }

  .progress-card-main {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .progress-card-poster img,
  .progress-card-poster .no-poster {
    width: 78px;
    height: 114px;
    border-radius: 16px;
  }

  .progress-card-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .progress-card-title {
    font-size: 17px;
  }

  .progress-card-actions .mini-btn,
  .progress-overview-actions .mini-btn {
    flex: 1 1 140px;
    justify-content: center;
  }
}

.profile-page .custom-lists-grid {
  padding: 0 20px;
  margin-top: 0;
}

.profile-page .custom-list-card {
  min-height: 128px;
  justify-content: space-between;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.profile-page .section {
  padding-bottom: 34px;
}

.profile-page .section-header {
  padding-bottom: 14px;
}

.profile-page .section-title {
  letter-spacing: -0.05em;
}

.profile-page .no-results {
  padding: 42px 20px;
}

.profile-page .no-results-rich {
  width: 100%;
  max-width: none;
}

.profile-page .activity-time {
  font-weight: 700;
}

.profile-page .up-next-card,
.profile-page .up-next-item {
  border-radius: 20px;
}

.profile-page .btn-danger {
  min-height: 48px;
  padding: 14px 18px;
  border-radius: 18px;
  font-weight: 700;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.profile-page .btn-danger:hover {
  background: rgba(248,113,113,0.18);
  border-color: rgba(248,113,113,0.38);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.18);
}

.profile-danger-zone {
  padding-top: 4px;
}

@media (min-width: 768px) {
  .profile-page {
    padding-top: 20px;
  }

  .profile-hero-shell {
    padding: 0 0 26px;
  }

  .profile-genres-section {
    padding: 0 0 30px;
  }

  .profile-page .profile-header {
    padding: 28px 28px 24px;
  }

  .profile-page .stats-row {
    padding: 22px 24px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-page .profile-avatar {
    animation: none;
  }

  .profile-page .profile-edit-btn:hover,
  .profile-page .favorite-pill:hover,
  .profile-page .btn-danger:hover,
  .profile-page .up-next-card:hover,
  .profile-page .custom-list-card:hover {
    transform: none;
  }
}

/* — Discover header improvement — */
.discover-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* — Section spacing for home — */
.hero-section {
  padding: 0 0 24px;
}

/* — Reduced glow opacity for all themes — */
:root {
  --accent-glow: 0 0 28px rgba(124,111,255,0.22);
}

/* — Show card info improvements — */
.show-card-title {
  font-size: 12px;
  font-weight: 700;
}
.show-card-sub {
  font-size: 11px;
  opacity: 0.72;
}

/* — Hot card improvements — */
.hot-card .card-title {
  font-size: 11px;
  font-weight: 700;
}

/* — type-pill overrides consolidated above — */

/* — Improved continue rail card — */
.continue-rail-card {
  border-radius: 24px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s cubic-bezier(0.4,0,0.2,1);
}
.continue-rail-card:hover {
  box-shadow: 0 24px 50px rgba(0,0,0,0.36), 0 0 28px rgba(124,111,255,0.16);
}

/* — Improved quick-picks section spacing — */
.quick-picks-section,
.binge-pulse-section {
  padding-bottom: 30px;
}

/* — Desktop modal improvements — */
@media (min-width: 768px) {
  .modal-title {
    font-size: 36px;
    letter-spacing: -0.04em;
  }
  .modal-section-title {
    font-size: 20px;
  }
}

/* — Accessibility: focus rings — */
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(124,111,255,0.6);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Modal close button */
/* .modal-close-btn replaced by .detail-back-btn in detail topbar */

/* Non-blocking rating modal */
.rating-modal-overlay {
  position: fixed;
  bottom: 80px !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: 90%;
  max-width: 320px;
  z-index: 999;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  opacity: 0.9;
}

/* Cleaner, smaller rating modal at bottom */
.rating-modal-overlay {
  position: fixed !important;
  bottom: 100px !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 280px !important;
  max-width: 90vw !important;
  padding: 20px !important;
  z-index: 9999 !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.rating-modal-sheet {
  background: transparent !important;
  box-shadow: none !important;
}
.rating-modal-emoji {
  font-size: 32px !important;
  margin-bottom: 8px !important;
}
.rating-modal-title {
  font-size: 16px !important;
  margin-bottom: 4px !important;
}
.rating-modal-sub {
  font-size: 12px !important;
  margin-bottom: 12px !important;
}
.star-picker {
  gap: 4px !important;
}
.star-btn {
  font-size: 24px !important;
  padding: 4px 8px !important;
}
.rating-labels {
  font-size: 10px !important;
  margin-top: 8px !important;
}
.btn-skip-rating {
  margin-top: 12px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
}

/* Non-floating search filters - anchored */
@media (max-width: 640px) {
  .search-filters-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 1 !important;
    margin: 8px 0 !important;
    padding: 12px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  
  .search-command-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 1 !important;
    margin: 0 0 8px 0 !important;
    padding: 12px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  
  .search-container {
    padding-bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════
   Import Section
══════════════════════════════════════════════ */
.import-card {
  padding: 22px 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header row */
.import-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.import-icon-wrap {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.15));
}
.import-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.import-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.import-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Step-by-step instructions */
.import-steps-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.import-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.import-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.import-step-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.import-step-text strong { color: var(--text); font-weight: 600; }
.import-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.import-link:hover { text-decoration: underline; }

/* Drop zone */
.import-drop-zone {
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
  user-select: none;
  outline: none;
}
.import-drop-zone:hover,
.import-drop-zone:focus-visible {
  border-color: var(--accent);
  background: rgba(255,255,255,0.03);
}
.import-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
  transform: scale(1.01);
}
.import-drop-zone[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.7;
}
.import-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.import-drop-icon-large {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 2px;
}
.import-drop-primary {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.import-drop-secondary {
  font-size: 12px;
  color: var(--text-muted);
}
.import-drop-primary code,
.import-drop-secondary code,
.import-step-text code {
  font-family: monospace;
  font-size: 0.9em;
  background: rgba(255,255,255,0.1);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text);
}

/* Status message */
.import-status {
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 10px;
  line-height: 1.55;
}
.import-status--loading {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.import-status--success {
  background: rgba(72,220,129,0.1);
  color: #5ce893;
  border: 1px solid rgba(72,220,129,0.2);
}
.import-status--error {
  background: rgba(255,80,80,0.08);
  color: #ff7a7a;
  border: 1px solid rgba(255,80,80,0.18);
}
.import-status--success strong,
.import-status--error strong { font-weight: 700; }
.import-skipped {
  display: block;
  margin-top: 4px;
  opacity: 0.65;
  font-size: 12px;
}
.import-ep-note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.8;
}

/* Progress bar */
.import-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.import-progress-bar-track {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.import-progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.3s ease;
  width: 0%;
}
.import-progress-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Spinner */
.import-spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Prevent wrong-page flash before SPA routing picks the real tab */
body:not(.app-ready) .page {
  visibility: hidden;
}
body:not(.app-ready) #app {
  opacity: 0;
}
body.app-ready #app {
  opacity: 1;
  transition: opacity 0.12s ease;
}

/* ══════════════════════════════════════════════
   My List — Sort + Count badges
══════════════════════════════════════════════ */
.mylist-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.mylist-sort-wrap {
  flex-shrink: 0;
}
.mylist-sort-select {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.mylist-sort-select:hover,
.mylist-sort-select:focus { border-color: var(--accent); color: var(--text); }
.tab-count {
  font-size: 11px;
  opacity: 0.6;
  font-weight: 400;
}

/* Status picker footer */
.picker-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.btn-add-to-list {
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.btn-add-to-list:hover { background: rgba(255,255,255,0.1); }

/* ══════════════════════════════════════════════
   Empty state improvements
══════════════════════════════════════════════ */
.empty-state-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}
.empty-state-progress {
  padding: 40px 20px;
}

/* My List inline search */
.mylist-search-wrap {
  padding: 0 0 10px;
}
.mylist-search {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  padding: 9px 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.mylist-search::placeholder { color: var(--text-muted); }
.mylist-search:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
}

/* "Jump to next unwatched" season banner */
.next-ep-jump-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-muted);
  border: 1px solid rgba(124,111,255,0.2);
  background: rgba(124,111,255,0.06);
}
.next-ep-jump-banner span { flex: 1; }
.jump-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Continue rail recent mini-row */
.continue-rail-recent-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.continue-rail-recent-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.continue-rail-recent-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(124,111,255,0.28);
  background: rgba(124,111,255,0.08);
}
.continue-rail-recent-poster-wrap {
  width: 36px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
}
.continue-rail-recent-poster,
.continue-rail-recent-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}
.continue-rail-recent-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.continue-rail-recent-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.continue-rail-recent-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search result quick-add button */
.search-result-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.search-quick-add-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: rgba(124,111,255,0.1);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.search-quick-add-btn:hover { background: rgba(124,111,255,0.25); transform: scale(1.1); }
.search-quick-add-btn.added { background: rgba(74,222,128,0.15); border-color: var(--green); color: var(--green); }
.search-in-list-badge {
  font-size: 10px;
  color: var(--green);
  font-weight: 700;
  opacity: 0.9;
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Discover grid quick-add overlay button */
.poster-grid-quick-add {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.18s, background 0.18s, border-color 0.18s, transform 0.15s;
  z-index: 4;
}
.poster-grid-card:hover .poster-grid-quick-add,
.poster-grid-card:focus-within .poster-grid-quick-add {
  opacity: 1;
}
/* Always visible on touch devices */
@media (hover: none) {
  .poster-grid-quick-add { opacity: 0.85; }
}
.poster-grid-quick-add:hover {
  background: rgba(124,111,255,0.7);
  border-color: var(--accent);
  transform: scale(1.12);
}
.poster-grid-quick-add.added {
  background: rgba(74,222,128,0.6);
  border-color: var(--green);
  color: white;
  opacity: 1;
}
.poster-grid-in-list {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(74,222,128,0.7);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  backdrop-filter: blur(4px);
}

/* Card long-press preview popup */
.card-preview-popup {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px);
  left: 12px;
  right: 12px;
  max-width: 420px;
  margin: 0 auto;
  z-index: 900;
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  animation: slideUp 0.2s cubic-bezier(0.25,1,0.5,1) both;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.cpp-poster {
  width: 60px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.cpp-poster img { width: 100%; height: 100%; object-fit: cover; }
.cpp-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.cpp-title { font-size: 14px; font-weight: 700; color: var(--text); }
.cpp-meta { font-size: 12px; color: var(--text-muted); }
.cpp-overview { font-size: 12px; color: var(--text-secondary); line-height: 1.4; flex: 1; }
.cpp-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Keyboard shortcut hint in search bar */
.search-kbd-hint {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-family: monospace;
  color: var(--text-muted);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
  transition: opacity 0.15s;
}
#searchInput:focus + .search-kbd-hint { opacity: 0; }

/* Voice search button */
.voice-search-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.voice-search-btn:hover {
  color: var(--accent);
  background: rgba(122,121,218,0.12);
}
.voice-search-btn:active { transform: scale(0.9); }
.voice-search-btn.listening {
  color: var(--red, #f87171);
  background: rgba(248,113,113,0.1);
  box-shadow: 0 0 0 3px rgba(248,113,113,0.18);
  animation: voicePulse 1.1s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(248,113,113,0.18); }
  50% { box-shadow: 0 0 0 6px rgba(248,113,113,0.06); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Watched by year bars */
.watched-by-year-bars {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0 8px;
}
.year-bar-row--current .year-bar-label { color: var(--accent3) !important; font-weight: 800 !important; }

/* My List card improved badges */
.myshow-card-top-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.myshow-rating-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(0,0,0,0.7);
  color: #fbbf24;
  border-radius: 4px;
  padding: 2px 5px;
  backdrop-filter: blur(4px);
}
.myshow-note-badge {
  font-size: 11px;
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
  padding: 1px 3px;
  backdrop-filter: blur(4px);
  cursor: help;
  line-height: 1;
}
.myshow-year {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .myshow-year { font-size: 12px; }
  .myshow-stars { font-size: 10px; }
}

/* Episode activity heatmap */
.activity-heatmap {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 60px;
  padding: 4px 0;
}
.heatmap-bar {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(to top, var(--accent), var(--accent3));
  opacity: var(--heat, 0.08);
  min-height: 6px;
  height: calc(var(--heat, 0.08) * 100%);
  position: relative;
  transition: opacity 0.2s, height 0.3s ease;
  cursor: default;
}
.heatmap-bar:hover { opacity: 1 !important; }
.heatmap-count {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  display: none;
}
.heatmap-bar:hover .heatmap-count { display: block; }

/* Offline banner */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(255,80,80,0.92);
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════════
   OVERNIGHT BUILD — 2026-03-21
   (1) My List skeleton loading
   (2) Improved mobile My List cards
   (3) Horizontal row scroll arrows
   (4) Profile year breakdown enhancements
   (5) Episode runtime badge polish
══════════════════════════════════════════════ */

/* ── (1) My List skeleton loading state ── */
.mylist-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 16px 8px;
}
@media (max-width: 480px) {
  .mylist-skeleton-grid { grid-template-columns: repeat(2, 1fr); }
}
.mylist-skeleton-card {
  aspect-ratio: 2/3;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  background: var(--bg-tertiary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 14px rgba(0,0,0,0.32);
}
.mylist-skeleton-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0.04) 42%,
    rgba(255,255,255,0.09) 52%,
    rgba(255,255,255,0.04) 62%,
    transparent 100%
  );
  background-size: 350% 100%;
  animation: shimmer 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
.mylist-skeleton-card:nth-child(2)::before { animation-delay: 0.15s; }
.mylist-skeleton-card:nth-child(3)::before { animation-delay: 0.30s; }
.mylist-skeleton-card:nth-child(4)::before { animation-delay: 0.10s; }
.mylist-skeleton-card:nth-child(5)::before { animation-delay: 0.25s; }
.mylist-skeleton-card:nth-child(6)::before { animation-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  .mylist-skeleton-card::before { animation: none; opacity: 0; }
}
.mylist-skeleton-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 10px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mylist-skeleton-line {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
}
.mylist-skeleton-line.short { width: 55%; }

/* ── (2) Improved mobile My List cards ── */
.myshow-card .card-bottom {
  padding: 40px 10px 10px;
}
.myshow-card .card-title {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
}
@media (max-width: 480px) {
  .myshow-card .card-bottom {
    padding: 44px 9px 9px;
    /* Deeper gradient for readability on small cards */
    background: linear-gradient(0deg, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.72) 52%, transparent 100%);
  }
  .myshow-card .card-title {
    font-size: 12px;
    -webkit-line-clamp: 2;
    letter-spacing: -0.01em;
  }
  .myshow-year { font-size: 10.5px; color: rgba(255,255,255,0.6); }
  /* Bigger tap targets for quick-mark on mobile */
  .myshow-card-mark-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
    bottom: 34px;
    right: 6px;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  .myshow-card-season-btn {
    bottom: 70px;
    right: 6px;
    font-size: 9px;
    padding: 3px 7px;
    opacity: 1;
    transform: none;
  }
  /* Status badge always visible on mobile */
  .myshow-status-badge {
    opacity: 1 !important;
  }
  /* Next ep badge: keep it readable at small size */
  .myshow-next-ep-badge {
    font-size: 9.5px;
    padding: 1px 4px;
  }
  /* Eps-left badge: slightly smaller on mobile */
  .myshow-eps-left-badge {
    font-size: 9px;
    padding: 1px 4px;
  }
  /* Airing today badge: smaller on mobile grid */
  .myshow-card-airing-badge {
    font-size: 9.5px;
    padding: 2px 6px;
  }
  /* New ep badge: smaller */
  .myshow-card-new-ep-badge {
    font-size: 9.5px;
    padding: 1px 5px;
  }
}
.myshow-progress {
  height: 4px;
  margin-top: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.myshow-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
/* Glowing progress bar for high-completion shows */
.myshow-card[data-progress-hi] .myshow-progress-fill {
  box-shadow: 0 0 8px rgba(112,194,200,0.55);
}
/* Progress bar always visible on mobile (not just inside card-bottom) */
@media (max-width: 480px) {
  .myshow-progress {
    height: 3px;
    margin-top: 5px;
  }
}

/* ── (3) Horizontal row scroll arrows ── */
.row-with-arrows {
  position: relative;
}
.row-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(17,17,28,0.88);
  backdrop-filter: blur(12px);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
}
.row-with-arrows:hover .row-scroll-arrow,
.row-with-arrows:focus-within .row-scroll-arrow {
  opacity: 1;
  pointer-events: auto;
}
.row-scroll-arrow:hover {
  background: rgba(122,121,218,0.22);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-50%) scale(1.1);
}
.row-scroll-arrow:active { transform: translateY(-50%) scale(0.92); }
.row-scroll-arrow.arrow-prev { left: 4px; }
.row-scroll-arrow.arrow-next { right: 4px; }
.row-scroll-arrow[hidden] { display: none !important; }
.row-scroll-arrow svg { width: 18px; height: 18px; }
/* Only show arrows on non-touch (desktop) */
@media (hover: none) {
  .row-scroll-arrow { display: none !important; }
}

/* ── (4) Profile year breakdown enhancements ── */
.year-bar-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.year-bar-row:last-child { border-bottom: none; }
.year-bar-main {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
}
.year-bar-counts {
  min-width: 52px;
  text-align: right;
}
.year-bar-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.year-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.year-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.year-bar-row--current .year-bar-fill {
  background: linear-gradient(90deg, var(--accent3), var(--green));
  box-shadow: 0 0 8px rgba(74,222,128,0.3);
}
.year-bar-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 50px;
  text-align: right;
}
.year-bar-unit { font-weight: 500; color: var(--text-tertiary); }
.year-bar-subcount {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: right;
  margin-top: 1px;
}
/* Inline show chips under each year bar */
.year-bar-shows {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 4px;
}
.year-bar-show-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 2px 7px 2px 6px;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.year-bar-show-chip-count {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(122,121,218,0.12);
  border-radius: 3px;
  padding: 0 3px;
  flex-shrink: 0;
}
.year-bar-show-chip--more {
  color: var(--text-tertiary);
  background: transparent;
  border-color: transparent;
  font-size: 10px;
}

/* Monthly sparkline for current year inside year breakdown */
.year-month-sparkline {
  margin-top: 6px;
  padding: 8px 10px 6px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
/* Past-year sparklines: slightly more compact than current-year */
.year-month-sparkline--past {
  opacity: 0.75;
  transform: scaleY(0.85);
  transform-origin: bottom;
}
.year-month-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 48px;
  padding-bottom: 2px;
}
.year-month-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.year-month-bar {
  width: 100%;
  max-width: 18px;
  border-radius: 3px 3px 0 0;
  background: rgba(122,121,218,0.35);
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), background 0.2s;
  min-height: 3px;
}
.year-month-bar.is-current {
  background: linear-gradient(180deg, var(--accent3), rgba(112,194,200,0.5));
  box-shadow: 0 0 6px rgba(112,194,200,0.25);
}
.year-month-bar.is-peak {
  background: linear-gradient(180deg, var(--accent), rgba(122,121,218,0.6));
  box-shadow: 0 0 6px rgba(122,121,218,0.3);
}
.year-month-bar.is-current.is-peak {
  background: linear-gradient(180deg, var(--green), rgba(74,222,128,0.5));
  box-shadow: 0 0 6px rgba(74,222,128,0.3);
}
.year-month-label {
  font-size: 8.5px;
  color: var(--text-tertiary);
  font-weight: 600;
  line-height: 1;
}
.year-month-peak-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 5px;
  text-align: right;
  font-weight: 500;
}

/* Year bar expand button */
.year-bar-expand-btn {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(122,121,218,0.1);
  border: 1px solid rgba(122,121,218,0.18);
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.year-bar-expand-btn:hover {
  background: rgba(122,121,218,0.2);
  color: var(--text-primary);
}
.year-bar-main--clickable { cursor: pointer; transition: opacity 0.15s; }
.year-bar-main--clickable:hover { opacity: 0.85; }

/* Year expand detail panel */
.year-detail-panel {
  display: none;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  animation: fadeInUp 0.2s ease;
}
.year-detail-panel.is-open {
  display: flex;
}
.year-detail-show-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px;
  border-radius: 6px;
  transition: background 0.12s;
}
.year-detail-show-row:hover { background: rgba(255,255,255,0.05); cursor: pointer; }
.year-detail-show-poster {
  width: 28px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--bg-secondary);
}
.year-detail-show-poster-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--bg-secondary);
}
.year-detail-show-row.is-movie .year-detail-show-name { color: var(--accent2); }
.year-detail-show-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.year-detail-show-count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(122,121,218,0.1);
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* ── (5) Episode runtime badge polish ── */
.ep-runtime {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(112,194,200,0.85);
  background: rgba(112,194,200,0.1);
  border: 1px solid rgba(112,194,200,0.15);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.ep-date-runtime .ep-runtime {
  background: rgba(112,194,200,0.09);
  border-color: rgba(112,194,200,0.13);
  padding: 1px 5px;
  margin-left: 0;
}
/* Short episodes get a warm accent; long get cool accent */
.ep-runtime[data-short] { color: var(--orange); background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.15); }
.ep-runtime[data-long]  { color: rgba(180,160,255,0.85); background: rgba(122,121,218,0.1); border-color: rgba(122,121,218,0.15); }

/* Episode card aired/unwatched pulse for next-up episodes */
.episode-card.is-next-up > .episode-summary { 
  border-left: 2px solid var(--accent); 
  padding-left: 10px; 
  margin-left: -12px;
}

/* ── (6) Streak mini-calendar in profile highlight card ── */
.streak-mini-cal {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.streak-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  transition: transform 0.15s, background 0.15s;
}
.streak-dot.active {
  background: linear-gradient(135deg, #fb923c, #fbbf24);
  border-color: rgba(251,146,60,0.4);
  box-shadow: 0 0 6px rgba(251,146,60,0.35);
}
.streak-dot.today {
  outline: 2px solid rgba(255,255,255,0.3);
  outline-offset: 1px;
}
.streak-dot.today.active {
  outline-color: rgba(251,146,60,0.6);
}
.profile-highlight-card.is-streak .profile-highlight-copy {
  /* Override to allow HTML content */
  line-height: 1.4;
}

/* ── Search empty state: "From your list" chips ── */
.no-results-mylist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.no-results-mylist-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  transition: background 0.18s, border-color 0.18s;
}
.no-results-mylist-chip:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}
.no-results-mylist-chip img {
  width: 28px;
  height: 42px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.no-results-chip-icon {
  width: 28px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--bg-tertiary);
  border-radius: 5px;
  flex-shrink: 0;
}

/* ── Year bar interactivity ── */
/* Legacy year-bar detail (no longer used but kept for backward compat) */
.year-bar-detail { display: none; }

/* ── My List near-done accent ── */
.myshow-card--near-done::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(112,194,200,0.28);
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   HOME — WEEK STATS STRIP
══════════════════════════════════════════════ */

.home-week-stats-strip {
  display: flex;
  gap: 0;
  padding: 0 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-week-stats-strip::-webkit-scrollbar { display: none; }

.home-week-stat {
  flex: 1;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-right: 1px solid var(--glass-border);
  text-align: center;
}
.home-week-stat:last-child { border-right: none; }
.home-week-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.home-week-stat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.home-week-stat.is-streak .home-week-stat-num {
  color: #fb923c;
}
.home-week-stat.is-year .home-week-stat-num {
  color: var(--accent3);
}
.home-week-stat.is-year .home-week-stat-label {
  color: rgba(112,194,200,0.7);
}
@media (max-width: 400px) {
  .home-week-stat-num { font-size: 15px; }
}

/* ══════════════════════════════════════════════
   HOME — AIRING THIS WEEK STRIP
══════════════════════════════════════════════ */

.airing-week-strip {
  display: flex;
  gap: 10px;
  padding: 4px 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.airing-week-strip::-webkit-scrollbar { display: none; }

.airing-week-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  flex-shrink: 0;
  min-width: 160px;
  max-width: 240px;
  animation: fadeInUp 0.3s ease both;
}
/* Airing today: pulsing red glow border */
.airing-week-chip.airing-today {
  border-color: rgba(248,113,113,0.35);
  background: linear-gradient(135deg, rgba(248,113,113,0.09) 0%, var(--bg-card) 100%);
  animation: fadeInUp 0.3s ease both, airingTodayPulse 3s ease-in-out 1s infinite;
}
@keyframes airingTodayPulse {
  0%, 100% { border-color: rgba(248,113,113,0.35); box-shadow: none; }
  50% { border-color: rgba(248,113,113,0.6); box-shadow: 0 0 12px rgba(248,113,113,0.15); }
}
.airing-week-chip.airing-today .airing-week-chip-name {
  color: white;
}
.airing-week-chip:hover {
  background: var(--bg-card-hover);
  border-color: rgba(122,121,218,0.3);
  transform: translateY(-2px);
}
.airing-week-chip:active { transform: scale(0.97); }

.airing-week-chip-poster {
  width: 42px;
  height: 63px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  display: block;
}
.airing-week-chip-icon {
  width: 42px;
  height: 63px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.airing-week-chip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.airing-week-chip-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.airing-week-chip-ep {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.3px;
}
.airing-week-chip-day {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-top: 2px;
}
.airing-week-chip-day.is-today {
  color: #f87171;
  font-weight: 800;
}

/* ══════════════════════════════════════════════
   MY LIST — AIRING TODAY/TOMORROW BADGE
══════════════════════════════════════════════ */

.myshow-airing-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.myshow-airing-badge.airing-today {
  background: rgba(239,68,68,0.18);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.25);
  animation: newEpPulse 2.5s ease-in-out infinite;
}
.myshow-airing-badge.airing-soon {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.2);
}
/* Overlay badge on grid card */
.myshow-card-airing-badge {
  position: absolute;
  bottom: 44px;
  left: 8px;
  right: 8px;
  display: flex;
}
/* Pulse ring on airs-today card */
.myshow-card--airs-today::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(239,68,68,0.5);
  animation: airingPulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes airingPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.2; }
}
/* Today dot in list mode */
.myshow-list-today-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,0.6);
  animation: airingPulse 1.5s ease-in-out infinite;
}
.myshow-list-poster { position: relative; }
.myshow-list-row--airs-today {
  border-color: rgba(239,68,68,0.25);
}

/* ══════════════════════════════════════════════
   CONTINUE WATCHING — PICK FOR ME
══════════════════════════════════════════════ */

.progress-page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.progress-pick-btn {
  flex-shrink: 0;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(124,111,255,0.12);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  white-space: nowrap;
  font-family: inherit;
}
.progress-pick-btn:hover {
  background: rgba(124,111,255,0.22);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.progress-pick-btn:active { transform: scale(0.96); }

#progressPickResult {
  margin: 0 16px 8px;
}
.progress-pick-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--accent);
  background: rgba(124,111,255,0.08);
  animation: fadeInUp 0.25s ease;
}
.progress-pick-result-poster {
  width: 56px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-tertiary);
}
.progress-pick-result-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.progress-pick-result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.progress-pick-result-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.progress-pick-result-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-pick-result-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.progress-pick-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Episodes-left overlay badge on My List grid cards */
.myshow-eps-left-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}
.myshow-eps-left-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  background: rgba(0,0,0,0.72);
  color: rgba(255,255,255,0.7);
  border-radius: 4px;
  padding: 2px 5px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  letter-spacing: 0.1px;
}
/* "Behind" variant — orange tint for 10+ episodes left */
.myshow-eps-left-badge.myshow-eps-left-behind {
  color: var(--orange);
  background: rgba(251,146,60,0.14);
  border: 1px solid rgba(251,146,60,0.28);
}
/* In list mode, show inline with other badges */
.myshow-list-meta .myshow-eps-left-badge.myshow-eps-left-behind {
  font-size: 10px;
  padding: 2px 6px;
}
/* "Almost done" variant — green/accent when 1-3 eps left */
.myshow-eps-left-badge.myshow-eps-almost-done {
  color: var(--green);
  background: rgba(74,222,128,0.14);
  border: 1px solid rgba(74,222,128,0.28);
  animation: almostDonePulse 2.5s ease-in-out infinite;
}
@keyframes almostDonePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .myshow-eps-almost-done { animation: none; }
}

/* ══════════════════════════════════════════════
   CONTINUE WATCHING — SNOOZE
══════════════════════════════════════════════ */

.progress-card-snooze {
  opacity: 0.55;
  transition: opacity 0.15s;
  font-size: 13px;
  padding: 4px 8px;
}
.progress-card:hover .progress-card-snooze,
.progress-card-snooze:focus {
  opacity: 1;
}
.progress-snoozed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 13px;
  color: var(--text-muted);
}
.progress-snoozed-unsnooze-all {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.progress-snoozed-unsnooze-all:hover { color: var(--accent3); }

.progress-card-last-watched {
  color: var(--text-muted);
  font-size: 11px;
  opacity: 0.75;
}

/* ══════════════════════════════════════════════
   MY LIST — COMPACT LIST VIEW
══════════════════════════════════════════════ */

/* Layout toggle button */
.mylist-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mylist-layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.mylist-layout-btn:hover {
  background: rgba(124,111,255,0.15);
  color: var(--accent);
  border-color: var(--accent);
}
.mylist-layout-btn svg {
  width: 16px;
  height: 16px;
}

/* List view grid override */
.myshows-grid--list {
  grid-template-columns: 1fr !important;
  gap: 8px;
}

/* Compact list row */
.myshow-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  animation: fadeInUp 0.2s ease both;
}
.myshow-list-row:hover {
  background: var(--bg-card-hover);
  border-color: rgba(124,111,255,0.3);
  transform: translateX(2px);
}
.myshow-list-row:active {
  transform: scale(0.99);
}
.myshow-list-poster {
  width: 52px;
  height: 78px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.myshow-list-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.myshow-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.myshow-list-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.myshow-list-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.myshow-list-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}
.myshow-list-rating {
  font-size: 11px;
  color: var(--text-tertiary);
}
.mylist-time-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent3);
  background: rgba(112,194,200,0.08);
  border: 1px solid rgba(112,194,200,0.16);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.6;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.myshow-list-overview {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.myshow-list-note {
  font-size: 11.5px;
  color: var(--accent3);
  line-height: 1.4;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.9;
}
.myshow-list-progress {
  margin-top: 2px;
}
.myshow-list-chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.myshow-list-chevron svg {
  width: 16px;
  height: 16px;
}

/* near-done in list mode */
.myshow-list-row.myshow-card--near-done {
  border-color: rgba(112,194,200,0.28);
}
.myshow-list-row.myshow-card--near-done::after {
  display: none; /* handled via border */
}

/* List-row action area: stacks season-mark + next-ep buttons */
.myshow-list-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

/* Bulk season mark button — list mode */
.mylist-season-mark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(122,121,218,0.3);
  background: rgba(122,121,218,0.1);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  white-space: nowrap;
  letter-spacing: 0.01em;
  min-width: 44px;
  min-height: 28px;
}
.mylist-season-mark-btn:hover {
  background: rgba(122,121,218,0.2);
  border-color: rgba(122,121,218,0.5);
  transform: scale(1.04);
}
.mylist-season-mark-btn:active { transform: scale(0.93); }
.mylist-season-mark-btn:disabled { opacity: 0.55; cursor: default; transform: none; }

/* Mark-next button in list mode — size up for tap */
.mylist-mark-next-btn {
  min-width: 36px;
  min-height: 36px;
}


/* ══════════════════════════════════════════════
   MY LIST — NEXT EPISODE BADGE
══════════════════════════════════════════════ */

/* Grid card: next episode badge row */
.myshow-card-next-ep {
  margin-top: 3px;
}
.myshow-next-ep-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent3);
  letter-spacing: 0.2px;
  background: rgba(112,194,200,0.12);
  border: 1px solid rgba(112,194,200,0.2);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* In list mode the badge is inline in meta row */
.myshow-list-meta .myshow-next-ep-badge {
  background: rgba(112,194,200,0.1);
  border-color: rgba(112,194,200,0.18);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   RELATED ROW LABELS — MOVIE DETAIL
══════════════════════════════════════════════ */
/* No extra CSS needed — reuses existing similar-row / recommendation-row styles */

/* ══════════════════════════════════════════════
   PROFILE — TOP SHOW THIS MONTH CARD
══════════════════════════════════════════════ */
.profile-highlight-card.is-top-show {
  background: linear-gradient(
    135deg,
    rgba(251,191,36,0.12) 0%,
    rgba(251,146,60,0.08) 60%,
    rgba(255,255,255,0.03) 100%
  );
  border-color: rgba(251,191,36,0.22);
}
.profile-highlight-card.is-top-show .profile-highlight-value {
  color: #fbbf24;
  font-size: 28px;
}
.profile-highlight-card.is-top-show .profile-highlight-label {
  color: rgba(251,191,36,0.9);
}
.profile-highlight-card.is-pattern {
  background: linear-gradient(135deg, rgba(112,194,200,0.1) 0%, rgba(112,194,200,0.04) 100%);
  border-color: rgba(112,194,200,0.22);
}
.profile-highlight-card.is-pattern .profile-highlight-value {
  color: var(--accent3);
}
.profile-highlight-card.is-pattern .profile-highlight-label {
  color: rgba(112,194,200,0.8);
}
/* All-time most-watched card */
.profile-highlight-card.is-all-time {
  background: linear-gradient(
    135deg,
    rgba(122,121,218,0.12) 0%,
    rgba(201,127,149,0.07) 100%
  );
  border-color: rgba(122,121,218,0.22);
}
.profile-highlight-card.is-all-time .profile-highlight-value {
  color: var(--accent);
  font-size: 20px;
}
.profile-highlight-card.is-all-time .profile-highlight-label {
  color: rgba(122,121,218,0.9);
}

/* ══════════════════════════════════════════════
   MY LIST — QUICK MARK NEXT EPISODE BUTTON
══════════════════════════════════════════════ */
.mylist-mark-next-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(122,121,218,0.3);
  background: rgba(122,121,218,0.1);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
}
.mylist-mark-next-btn:hover {
  background: rgba(122,121,218,0.22);
  border-color: var(--accent);
  transform: scale(1.08);
}
.mylist-mark-next-btn:active { transform: scale(0.92); }
.mylist-mark-next-btn.marked {
  background: rgba(74,222,128,0.15);
  border-color: rgba(74,222,128,0.4);
  color: var(--green);
}
/* On mobile, keep button always visible */
@media (max-width: 480px) {
  .mylist-mark-next-btn { width: 34px; height: 34px; font-size: 13px; }
}

/* ══════════════════════════════════════════════
   TV PAGE — AIRING TODAY FROM YOUR LIST BANNER
══════════════════════════════════════════════ */
.tv-airing-today-strip {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.06);
  animation: fadeInUp 0.25s ease;
}
.tv-airing-today-label {
  font-size: 11px;
  font-weight: 700;
  color: #f87171;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.tv-airing-today-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.tv-airing-today-chips::-webkit-scrollbar { display: none; }
.tv-airing-today-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.tv-airing-today-chip:hover {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.4);
  transform: translateY(-1px);
}
.tv-airing-today-chip:active { transform: scale(0.95); }
.tv-airing-chip-poster {
  width: 28px;
  height: 42px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.tv-airing-chip-icon {
  width: 28px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--bg-tertiary);
  border-radius: 5px;
  flex-shrink: 0;
}
.tv-airing-chip-name {
  font-size: 12px;
  font-weight: 700;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════
   HOME — TIME-OF-DAY GREETING BAR
══════════════════════════════════════════════ */
.home-greeting-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 4px;
  animation: fadeInUp 0.28s ease;
  flex-wrap: wrap;
}
.home-greeting-jump-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(122,121,218,0.15);
  border: 1px solid rgba(122,121,218,0.28);
  border-radius: 20px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.home-greeting-jump-btn:hover {
  background: rgba(122,121,218,0.28);
  border-color: rgba(122,121,218,0.5);
  transform: scale(1.02);
}
.home-greeting-jump-btn:active { transform: scale(0.96); }
@media (max-width: 380px) {
  .home-greeting-jump-btn {
    margin-left: 0;
    font-size: 10px;
    padding: 5px 10px;
    max-width: 140px;
  }
}
.home-greeting-emoji {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}
.home-greeting-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.home-greeting-text {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.home-greeting-sub {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
@media (max-width: 380px) {
  .home-greeting-text { font-size: 15px; }
}

/* Streak milestone progress bar in home greeting */
.home-streak-progress {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  max-width: 200px;
}
.home-streak-progress-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.home-streak-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.home-streak-progress-fill.at-risk {
  background: linear-gradient(90deg, var(--orange), rgba(251,146,60,0.7));
}
.home-streak-progress-fill.near-done {
  background: linear-gradient(90deg, var(--accent3), rgba(74,222,128,0.8));
}
.home-streak-progress-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════
   CONTINUE WATCHING — BINGE PACE ESTIMATE
══════════════════════════════════════════════ */
.progress-card-pace {
  color: var(--accent3) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════
   PROFILE — 7-DAY ACTIVITY SPARKLINE
══════════════════════════════════════════════ */
.profile-highlight-card.is-spark .profile-highlight-copy {
  overflow: visible;
  padding-top: 4px;
}
.spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 42px;
  margin-top: 6px;
}
.spark-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  cursor: default;
}
.spark-bar {
  width: 100%;
  max-width: 14px;
  border-radius: 3px 3px 0 0;
  background: rgba(122,121,218,0.5);
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1);
  min-height: 4px;
}
.spark-bar-label {
  font-size: 9px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

/* ══════════════════════════════════════════════
   MY LIST — GRID CARD QUICK-MARK BUTTON (OVERLAY)
   Appears on hover (desktop) or long-visible touch (mobile)
══════════════════════════════════════════════ */
.myshow-card-mark-btn {
  position: absolute;
  bottom: 34px;
  right: 7px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(122,121,218,0.5);
  background: rgba(9,9,18,0.82);
  backdrop-filter: blur(6px);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, opacity 0.18s;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}
/* Show on card hover (desktop) */
.myshow-card:hover .myshow-card-mark-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
/* Always visible on mobile — easier tap */
@media (hover: none) and (pointer: coarse) {
  .myshow-card-mark-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}
.myshow-card-mark-btn:hover {
  background: rgba(122,121,218,0.32);
  border-color: var(--accent);
  transform: scale(1.12);
}
.myshow-card-mark-btn:active { transform: scale(0.9); }
.myshow-card-mark-btn.marked {
  background: rgba(74,222,128,0.22);
  border-color: rgba(74,222,128,0.5);
  color: var(--green);
}
/* Movie quick-mark button: use pink/movie accent color */
.myshow-card-movie-mark-btn {
  border-color: rgba(201,127,149,0.5);
  color: var(--accent2);
  bottom: 10px;
}
.myshow-card-movie-mark-btn:hover {
  background: rgba(201,127,149,0.22);
  border-color: var(--accent2);
}
/* On very small cards (3-col mobile) keep button slightly smaller */
@media (max-width: 480px) {
  .myshow-card-mark-btn {
    width: 24px;
    height: 24px;
    font-size: 10px;
    bottom: 30px;
    right: 5px;
  }
}

/* ══════════════════════════════════════════════
   MY LIST — IMPROVED MOBILE CARD BOTTOM AREA
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Slightly taller gradient fade on small cards so title is legible */
  .myshow-card .card-bottom {
    padding: 32px 8px 8px;
    background: linear-gradient(0deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
  }
  .myshow-card .card-title {
    font-size: 10.5px;
    -webkit-line-clamp: 2;
  }
  .myshow-year {
    font-size: 9.5px;
  }
  .myshow-card-next-ep {
    margin-top: 2px;
  }
  .myshow-next-ep-badge {
    font-size: 8.5px;
    padding: 1px 4px;
  }
}

/* ══════════════════════════════════════════════
   HORIZONTAL ROWS — FADE-IN CONTENT REPLACE
   Smooth fade when skeleton placeholders are replaced
══════════════════════════════════════════════ */
.horizontal-scroll .show-card {
  animation: cardReveal 0.28s cubic-bezier(0.4,0,0.2,1) both;
}
.horizontal-scroll .show-card:nth-child(1) { animation-delay: 0s; }
.horizontal-scroll .show-card:nth-child(2) { animation-delay: 0.05s; }
.horizontal-scroll .show-card:nth-child(3) { animation-delay: 0.1s; }
.horizontal-scroll .show-card:nth-child(4) { animation-delay: 0.15s; }
.horizontal-scroll .show-card:nth-child(5) { animation-delay: 0.2s; }
.horizontal-scroll .show-card:nth-child(6) { animation-delay: 0.25s; }
.horizontal-scroll .show-card:nth-child(n+7) { animation-delay: 0.3s; }
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .horizontal-scroll .show-card { animation: none; }
}

/* ══════════════════════════════════════════════
   SKELETON ROW — ASPECT-RATIO AWARE PLACEHOLDERS
══════════════════════════════════════════════ */
/* Season loading skeletons use correct 2:3 ratio */
.season-skeleton {
  aspect-ratio: auto; /* override if set elsewhere */
  height: 74px;
  border-radius: 10px;
  background: var(--bg-secondary);
}
.season-skeleton.skeleton {
  background: linear-gradient(
    105deg,
    var(--bg-secondary) 0%,
    rgba(255,255,255,0.045) 40%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.045) 60%,
    var(--bg-secondary) 100%
  );
  background-size: 300% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* ══════════════════════════════════════════════
   CLIFF v2 — 2026-03-21 BATCH IMPROVEMENTS
   Season bulk-mark · Mobile My List · Skeleton polish
══════════════════════════════════════════════ */

/* ── (A) Card season quick-mark button (Continue Watching overlay) ── */
.card-mark-season-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  color: rgba(255,255,255,0.88);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s, transform 0.22s, background 0.18s, border-color 0.18s;
  white-space: nowrap;
  line-height: 1;
}
/* Show on card hover (desktop) */
.show-card:hover .card-mark-season-btn {
  opacity: 1;
  transform: translateY(0);
}
/* Always show on touch devices (mobile) */
@media (hover: none) {
  .card-mark-season-btn {
    opacity: 1;
    transform: translateY(0);
  }
}
.card-mark-season-btn:hover {
  background: rgba(74,222,128,0.22);
  border-color: rgba(74,222,128,0.5);
  color: #4ade80;
}
.card-mark-season-btn:active {
  transform: scale(0.94);
}
.card-mark-season-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ── Snooze button on Continue Watching cards ── */
.card-snooze-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s, transform 0.2s, background 0.15s;
  line-height: 1;
}
.show-card:hover .card-snooze-btn {
  opacity: 1;
  transform: scale(1);
}
@media (hover: none) {
  .card-snooze-btn {
    opacity: 0.75;
    transform: scale(1);
  }
}
.card-snooze-btn:hover {
  background: rgba(50,50,80,0.82);
  border-color: rgba(255,255,255,0.25);
}
.card-snooze-btn:active {
  transform: scale(0.9);
}

/* ── (B) Mobile My List — 2-column grid with cleaner cards ── */
@media (max-width: 390px) {
  .myshows-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 4px 12px 8px;
  }
  .myshow-card .card-bottom {
    padding: 32px 8px 8px;
    background: linear-gradient(0deg, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.65) 55%, transparent 100%);
  }
  .myshow-card .card-title {
    font-size: 11.5px;
    font-weight: 700;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
  .myshow-year {
    font-size: 10px;
    opacity: 0.75;
  }
  .myshow-progress {
    height: 3px;
    margin-top: 4px;
  }
  /* Slightly tighten badges on very small screens */
  .myshow-airing-badge {
    font-size: 9px;
    padding: 2px 5px;
  }
  .myshow-eps-left-badge {
    font-size: 9px;
    padding: 2px 5px;
  }
  .myshow-next-ep-badge {
    font-size: 9px;
  }
}

/* ── (C) Skeleton shimmer polish — darker base, cleaner sweep ── */
.skeleton {
  background: linear-gradient(
    100deg,
    var(--bg-secondary) 0%,
    rgba(255,255,255,0.02) 35%,
    rgba(255,255,255,0.07) 50%,
    rgba(255,255,255,0.02) 65%,
    var(--bg-secondary) 100%
  );
  background-size: 400% 100%;
  animation: shimmerV2 1.9s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmerV2 {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
/* Card skeleton: keep poster aspect ratio so layout doesn't jump */
.card-skeleton {
  aspect-ratio: 2/3;
  min-width: 130px;
  height: auto;
}
/* Skeleton stagger (extended to 8 children) */
.skeleton:nth-child(7) { animation-delay: 0.9s; }
.skeleton:nth-child(8) { animation-delay: 1.05s; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bg-secondary); opacity: 0.6; }
}

/* ── (D) Horizontal row scroll-snap — snapping is set at .horizontal-scroll base ── */
/* First card explicit snap alignment (reinforces left-edge snap with padding) */
.horizontal-scroll > *:first-child {
  scroll-snap-align: start;
}

/* ── (E) Watched-by-year bars — always show when signed in with data ── */
#watchedByYearSection {
  /* Section is unhidden by JS; ensure smooth reveal */
  transition: opacity 0.3s ease;
}
.watched-by-year-bar-fill {
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}


/* ── Profile streak banner ── */
.profile-streak-banner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 20px;
  margin: 0 20px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(251,191,36,0.2);
  background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(251,191,36,0.03) 100%);
  position: relative;
  overflow: hidden;
}
.profile-streak-banner.is-active {
  border-color: rgba(251,191,36,0.25);
  background: linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(251,191,36,0.04) 100%);
}
.profile-streak-banner.is-milestone {
  border-color: rgba(248,113,113,0.28);
  background: linear-gradient(135deg, rgba(248,113,113,0.1) 0%, rgba(251,191,36,0.05) 100%);
}
.profile-streak-banner.is-legendary {
  border-color: rgba(122,121,218,0.35);
  background: linear-gradient(135deg, rgba(122,121,218,0.14) 0%, rgba(201,127,149,0.08) 100%);
}
/* No-streak nudge: muted style */
.profile-streak-banner.is-nudge {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  opacity: 0.75;
}
/* Streak-at-risk: pulsing orange border when streak may break today */
.psb-sub:has-text,
.psb-sub {
  font-size: 11.5px;
}
.profile-streak-banner .psb-sub[data-at-risk="true"] {
  color: var(--orange);
  font-weight: 700;
  animation: streakRiskPulse 2.5s ease-in-out infinite;
}
@keyframes streakRiskPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.psb-cal { margin-top: 5px; }
/* Streak banner layout */
.psb-top { display: flex; align-items: center; gap: 14px; }
.psb-cal-wrap { margin-top: 12px; }
.psb-mini-cal { display: none; } /* hidden - use full cal instead */
/* 16-week contribution-style calendar */
.psb-full-cal { overflow-x: auto; scrollbar-width: none; }
.psb-full-cal::-webkit-scrollbar { display: none; }
.cal-grid {
  display: grid;
  grid-template-rows: repeat(7, 10px);
  grid-auto-flow: column;
  gap: 2px;
  width: max-content;
}
.cal-cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  transition: transform 0.1s;
  cursor: default;
}
.cal-cell[data-intensity="1"] { background: rgba(122,121,218,0.28); }
.cal-cell[data-intensity="2"] { background: rgba(122,121,218,0.5); }
.cal-cell[data-intensity="3"] { background: rgba(122,121,218,0.74); }
.cal-cell[data-intensity="4"] { background: var(--accent); }
.cal-cell.is-today { outline: 1px solid rgba(255,255,255,0.4); outline-offset: 1px; }
.cal-cell:hover { transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .cal-cell:hover { transform: none; } }
.psb-flame {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  animation: streakFlicker 1.8s ease-in-out infinite;
}
@keyframes streakFlicker {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%       { transform: scale(1.12) rotate(3deg); }
}
.psb-body {
  flex: 1;
  min-width: 0;
}
.psb-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--yellow);
  margin-bottom: 2px;
}
.psb-count {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.psb-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.psb-badge {
  font-size: 18px;
  font-weight: 900;
  color: var(--yellow);
  flex-shrink: 0;
  text-shadow: 0 0 16px rgba(251,191,36,0.4);
}
@media (prefers-reduced-motion: reduce) {
  .psb-flame { animation: none; }
}


/* ── Recently watched: watch-time pill on poster ── */
.card-watch-time-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.82);
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 10px;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.1);
}
/* Don't conflict with mark-season-btn which is also bottom-left */
.card-mark-season-btn + .card-watch-time-pill,
.card-watch-time-pill:has(~ .card-mark-season-btn) {
  bottom: 32px; /* lift pill if season btn present */
}

/* Next episode chip on show poster for in-progress shows */
.card-next-ep-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(122,121,218,0.9);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  z-index: 4;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255,255,255,0.2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}


/* ══════════════════════════════════════════════
   OVERNIGHT BUILD — 2026-03-21 v2
   (1) Progress overview: streak + today stats
   (2) Improved mobile My List (320-480px)
   (3) Rich skeleton card title lines
   (4) Scroll-snap scroll-stop improvements
   (5) Card-mark-season-btn touch discoverability
══════════════════════════════════════════════ */

/* ── (1) Progress overview: streak stat pill ── */
.progress-overview-stat.is-streak-stat .progress-overview-stat-value {
  color: #fb923c;
  text-shadow: 0 0 12px rgba(251,146,60,0.3);
}
.progress-overview-stat.is-today .progress-overview-stat-value {
  color: var(--green);
}

/* ── (2) Improved mobile My List layout ── */
/* 3-col at 480-768px (existing), 2-col at 320-479px — improve readability */
@media (max-width: 479px) {
  .myshows-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    padding: 4px 14px 8px;
  }
  .myshow-card {
    border-radius: 14px;
  }
  .myshow-card .card-bottom {
    padding: 36px 9px 9px;
    background: linear-gradient(0deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
  }
  .myshow-card .card-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .myshow-year {
    font-size: 10.5px;
    opacity: 0.78;
    margin-top: 1px;
  }
  .myshow-progress {
    height: 3px;
    margin-top: 5px;
  }
  /* Status badge icon only on small screens to save space */
  .myshow-card-top-badges .myshow-status-badge {
    font-size: 11px;
    padding: 2px 4px;
  }
  /* Keep next-ep badge readable */
  .myshow-next-ep-badge {
    font-size: 9.5px;
  }
  .myshow-eps-left-badge {
    font-size: 9.5px;
    padding: 2px 5px;
  }
  /* Quick-mark button: bigger tap area on mobile */
  .myshow-card-mark-btn {
    bottom: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}

/* ── (3) Rich skeleton card: title/sub lines are siblings to the shimmer parent ── */
/* The card-skeleton-lines children inherit no background so they show as distinct lines */
.card-skeleton-lines {
  /* Defined in base section above, this ensures no shimmer bleed */
  isolation: isolate;
}
.card-skeleton-title-line,
.card-skeleton-sub-line {
  /* These get their own shimmer animation from .skeleton class,
     but we override background to be a semi-transparent bar */
  background: rgba(255,255,255,0.12) !important;
  background-size: 400% 100% !important;
  animation: shimmerV2 1.9s ease-in-out infinite !important;
}
.card-skeleton-sub-line {
  background: rgba(255,255,255,0.07) !important;
  animation-delay: 0.25s !important;
}

/* ── (4) Scroll-snap: use scroll-snap-stop: always on mobile for definitive snapping ── */
@media (hover: none) {
  /* On touch devices, enforce snap-stop so each swipe lands on a card */
  .horizontal-scroll > * {
    scroll-snap-stop: always;
  }
  /* Also tighten the snap alignment so no partial cards visible at edges */
  .horizontal-scroll {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
  }
}

/* ── (5) Card-mark-season-btn: better touch visibility ── */
/* On mobile, make the season-mark button stand out more with a subtle glow */
@media (hover: none) {
  .card-mark-season-btn {
    opacity: 1;
    background: rgba(0,0,0,0.78);
    border-color: rgba(74,222,128,0.3);
    color: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  /* Quick-mark season pulse on newly watchable show */
  .show-card:not([data-progress]) .card-mark-season-btn {
    animation: subtlePulse 3s ease-in-out infinite;
  }
}

/* ── (6) Smooth scroll-behavior override for programmatic scroll ── */
/* Ensure snap containers decelerate nicely on iOS */
.horizontal-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── (7) Recently-watched section: stronger visual weight ── */
#recentlyWatchedSection .section-title {
  /* Give the recently-watched section a subtle differentiation */
}
/* Watch-time pill gets a slight accent tint when content is "just now" */
.card-watch-time-pill[data-fresh] {
  background: rgba(74,222,128,0.18);
  border-color: rgba(74,222,128,0.3);
  color: #4ade80;
}


/* ══════════════════════════════════════════════
   KEYBOARD SHORTCUTS HELP OVERLAY
══════════════════════════════════════════════ */

.keyboard-help-overlay {
  position: fixed;
  bottom: calc(var(--nav-height) + 16px + var(--safe-bottom));
  right: 16px;
  z-index: 9000;
  background: rgba(17,17,28,0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 16px;
  min-width: 240px;
  opacity: 0.9;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: fadeInUp 0.2s ease;
}
.keyboard-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.keyboard-help-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.keyboard-help-close:hover { color: var(--text-primary); }
.keyboard-help-list { display: flex; flex-direction: column; gap: 7px; }
.keyboard-help-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.keyboard-help-key {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-family: monospace;
  color: var(--accent3);
  min-width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.keyboard-help-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Home: today's episode counter stat ── */
.home-week-stat.is-today-stat .home-week-stat-num {
  color: var(--accent3);
}
.home-week-stat.is-today-stat .home-week-stat-label {
  color: rgba(112,194,200,0.7);
}


/* ── My List grid: bulk season mark button ── */
.myshow-card-season-btn {
  position: absolute;
  bottom: 32px; /* above the mark-next-ep btn */
  right: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 14px;
  color: rgba(74,222,128,0.9);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s, transform 0.22s, background 0.18s, border-color 0.18s;
  white-space: nowrap;
  line-height: 1.2;
}
/* Show on hover (desktop) */
.myshow-card:hover .myshow-card-season-btn {
  opacity: 1;
  transform: translateY(0);
}
/* Always visible on touch */
@media (hover: none) {
  .myshow-card-season-btn {
    opacity: 1;
    transform: translateY(0);
    font-size: 9px;
    padding: 3px 6px;
  }
}
.myshow-card-season-btn:hover {
  background: rgba(74,222,128,0.18);
  border-color: rgba(74,222,128,0.5);
}
.myshow-card-season-btn:active {
  transform: scale(0.93);
}
.myshow-card-season-btn:disabled {
  opacity: 0.5;
  cursor: default;
}


/* ══════════════════════════════════════════════
   NETWORK LOGOS IN DETAIL FACTS
══════════════════════════════════════════════ */

.network-logos-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.network-logo-img {
  height: 20px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  vertical-align: middle;
  max-width: 64px;
}

/* Episode finale badge */
.ep-finale-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(251,191,36,0.15);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
  margin-left: 3px;
}
.ep-top-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--accent4);
  background: rgba(207,159,99,0.15);
  border: 1px solid rgba(207,159,99,0.3);
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
  margin-left: 3px;
}
.episode-card.is-top-rated > .episode-summary {
  background: linear-gradient(90deg, rgba(207,159,99,0.04) 0%, transparent 60%);
}
.episode-card.is-top-rated > .episode-summary .ep-thumb {
  box-shadow: 0 0 0 1.5px rgba(207,159,99,0.4);
}

/* ══════════════════════════════════════════════
   WATCH TIME MILESTONE BANNER
══════════════════════════════════════════════ */

.watch-time-milestone-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin: 0 20px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(112,194,200,0.22);
  background: linear-gradient(135deg, rgba(112,194,200,0.1) 0%, rgba(122,121,218,0.06) 100%);
}
.wtm-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.wtm-body { flex: 1; min-width: 0; }
.wtm-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent3);
  margin-bottom: 2px;
}
.wtm-hours {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
}
.wtm-copy {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════
   MY LIST — QUICK STATS BAR
══════════════════════════════════════════════ */

.mylist-quick-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px 10px;
  flex-wrap: wrap;
}
.mylist-qs-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.mylist-qs-chip.is-watching {
  background: rgba(74,222,128,0.12);
  color: var(--green);
  border: 1px solid rgba(74,222,128,0.25);
}
.mylist-qs-chip.is-completed {
  background: rgba(122,121,218,0.12);
  color: var(--accent);
  border: 1px solid rgba(122,121,218,0.25);
}
.mylist-qs-chip.is-plan {
  background: rgba(251,191,36,0.1);
  color: var(--yellow);
  border: 1px solid rgba(251,191,36,0.2);
}
.mylist-qs-chip.is-airing-today {
  background: rgba(248,113,113,0.12);
  color: var(--red);
  border: 1px solid rgba(248,113,113,0.28);
  animation: airingTodayPulse 2.2s ease-in-out infinite;
}
@keyframes airingTodayPulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 8px rgba(248,113,113,0.3); }
}
.mylist-qs-chip.is-behind {
  background: rgba(251,146,60,0.1);
  color: var(--orange);
  border: 1px solid rgba(251,146,60,0.22);
}
.mylist-qs-chip.is-time {
  background: rgba(112,194,200,0.1);
  color: var(--accent3);
  border: 1px solid rgba(112,194,200,0.22);
}
.mylist-qs-total {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   CONTINUE WATCHING — ALMOST DONE STRIP
══════════════════════════════════════════════ */

.almost-done-strip {
  margin: 0 16px 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(74,222,128,0.2);
  background: linear-gradient(135deg, rgba(74,222,128,0.08) 0%, rgba(74,222,128,0.03) 100%);
}
.almost-done-header {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  margin-bottom: 10px;
}
.almost-done-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.almost-done-chips::-webkit-scrollbar { display: none; }
.almost-done-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 10px;
  border: 1px solid rgba(74,222,128,0.2);
  background: rgba(74,222,128,0.06);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
  font-family: inherit;
}
.almost-done-chip:hover {
  background: rgba(74,222,128,0.12);
  transform: translateY(-1px);
}
.almost-done-chip:active { transform: scale(0.97); }
.almost-done-chip img, .almost-done-chip span {
  width: 36px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.almost-done-chip-body { display: flex; flex-direction: column; gap: 2px; }
.almost-done-chip-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.almost-done-chip-eps {
  font-size: 10.5px;
  color: var(--green);
  font-weight: 700;
}

/* ══════════════════════════════════════════════
   OVERNIGHT BUILD v3 — 2026-03-21
   (1) Continue Watching: next-ep quick-mark button
   (2) Voice search: always visible on touch/mobile
   (3) My List mobile: 2-col improvement at 320px
   (4) Scroll-snap: smoother mandatory snap on mobile
   (5) Skeleton: improved shimmer pulse
   (6) Season mark button: episode count label
══════════════════════════════════════════════ */

/* ── (1) Continue Watching: next-ep quick-mark button ── */
/* Positioned bottom-right, below the season mark btn if both present */
.card-next-ep-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(122,121,218,0.3);
  border-radius: 14px;
  color: rgba(122,121,218,0.95);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s, transform 0.22s, background 0.18s, border-color 0.18s;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
}
/* Show on card hover (desktop) */
.show-card:hover .card-next-ep-btn {
  opacity: 1;
  transform: translateY(0);
}
/* Always show on touch devices */
@media (hover: none) {
  .card-next-ep-btn {
    opacity: 1;
    transform: translateY(0);
    font-size: 9px;
    padding: 3px 6px;
  }
}
.card-next-ep-btn:hover {
  background: rgba(122,121,218,0.22);
  border-color: rgba(122,121,218,0.6);
  color: #fff;
}
.card-next-ep-btn:active {
  transform: scale(0.92);
  transition-duration: 0.08s;
}
.card-next-ep-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* When both buttons present: stack them */
.card-mark-season-btn ~ .card-next-ep-btn {
  bottom: 8px;
  right: 8px;
}

/* ── (2) Voice search: better mobile visibility ── */
/* On touch devices, always show voice btn if the JS added display:'' */
@media (hover: none) {
  .voice-search-btn[style*="display: none"] {
    /* JS hides it if SpeechRecognition isn't supported — respect that */
  }
  .voice-search-btn {
    /* Slightly larger tap target on mobile */
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
  }
  .voice-search-btn.listening {
    /* Glow more on mobile so it's visible */
    box-shadow: 0 0 0 5px rgba(248,113,113,0.2);
  }
}

/* ── (3) Improved My List at very small screens (320px phones) ── */
@media (max-width: 359px) {
  .myshows-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    padding: 4px 10px 8px;
  }
  .myshow-card .card-bottom {
    padding: 30px 8px 8px;
  }
  .myshow-card .card-title {
    font-size: 11px;
    -webkit-line-clamp: 2;
  }
  .myshow-card-top-badges {
    gap: 3px;
  }
  .myshow-status-badge {
    font-size: 10px;
    padding: 2px 4px;
  }
}

/* ── (4) Scroll-snap: fine-tune mandatory snap on mobile ── */
/* Ensure horizontal rows feel crispy when swiping on iOS/Android */
@media (hover: none) and (pointer: coarse) {
  .horizontal-scroll {
    scroll-snap-type: x mandatory;
    /* Slightly tighter padding so first card anchor is right at the edge */
    scroll-padding-left: 16px;
  }
  .horizontal-scroll > * {
    scroll-snap-stop: always;
  }
  /* Prevent over-bounce after snapping */
  .horizontal-scroll {
    overscroll-behavior-x: none;
  }
}

/* ── (5) Improved skeleton: pulse that feels more "alive" ── */
/* Overlay a moving highlight on top of base skeleton background */
@keyframes skeletonPulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}
.card-skeleton {
  /* Subtle breathing pulse on top of shimmer */
  animation: skeletonPulse 2s ease-in-out infinite;
}
/* Grid skeleton (search/discover) */
.grid-skeleton.skeleton {
  animation: skeletonPulse 2.2s ease-in-out infinite;
}
.grid-skeleton.skeleton:nth-child(2) { animation-delay: 0.2s; }
.grid-skeleton.skeleton:nth-child(3) { animation-delay: 0.4s; }
.grid-skeleton.skeleton:nth-child(4) { animation-delay: 0.1s; }
.grid-skeleton.skeleton:nth-child(5) { animation-delay: 0.3s; }
.grid-skeleton.skeleton:nth-child(6) { animation-delay: 0.5s; }
/* Season skeleton */
.season-skeleton.skeleton {
  animation: skeletonPulse 1.9s ease-in-out infinite;
}
/* Reduce animations for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .card-skeleton,
  .grid-skeleton.skeleton,
  .season-skeleton.skeleton {
    animation: none;
  }
}

/* ── (6) Season mark button: episode count label tweaks ── */
/* When label includes ·Nep, ensure it fits on small cards */
.card-mark-season-btn span {
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  /* On small mobile, limit even more */
  .card-mark-season-btn span {
    max-width: 52px;
  }
}

/* ── (7) My List list-view: cleaner row on mobile ── */
@media (max-width: 480px) {
  .myshow-list-row {
    gap: 10px;
    padding: 10px 12px;
  }
  .myshow-list-poster {
    width: 44px;
    flex-shrink: 0;
  }
  .myshow-list-poster img {
    width: 44px;
    height: 66px;
    border-radius: 8px;
  }
  .myshow-list-title {
    font-size: 13px;
  }
  .myshow-list-meta {
    flex-wrap: wrap;
    gap: 4px;
  }
  .myshow-list-overview {
    display: none; /* hide overview snippet on small mobile to save space */
  }
}

/* ── (8) Profile streak banner: better mobile layout ── */
@media (max-width: 480px) {
  .psb-top {
    gap: 10px;
  }
  .psb-full-cal {
    display: none; /* hide 16-week cal on small mobile, show mini-cal only */
  }
  .psb-badge {
    font-size: 18px;
  }
  .psb-count {
    font-size: 20px;
  }
}

/* ── (9) Recently watched section: fresh-watched glow ── */
/* When last watched < 2h ago, give the section a subtle live indicator */
#recentlyWatchedSection.has-fresh-watch .section-title::after {
  content: ' 🔴';
  font-size: 10px;
  vertical-align: middle;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ══════════════════════════════════════════════
   THEME PICKER
══════════════════════════════════════════════ */

.theme-picker {
  display: flex;
  gap: 8px;
  align-items: center;
}
.theme-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.theme-swatch:hover {
  transform: scale(1.15);
}
.theme-swatch.active {
  border-color: rgba(255,255,255,0.8);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
  transform: scale(1.1);
}

/* ══════════════════════════════════════════════
   PROFILE — YEAR BREAKDOWN "BEST YEAR" CALLOUT
══════════════════════════════════════════════ */

.year-best-callout {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.year-best-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--yellow);
  white-space: nowrap;
}
.year-best-year {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 6px;
  padding: 1px 7px;
}
.year-best-count {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}
@media (max-width: 400px) {
  .year-best-callout {
    display: none; /* hide on very small screens to avoid overflow */
  }
}

/* ══════════════════════════════════════════════
   CONTINUE WATCHING — SEASON MARK EPISODE COUNT
══════════════════════════════════════════════ */

/* The season mark button now includes episode count like "S2 · 10ep"
   Make sure the label renders cleanly */
.card-mark-season-btn span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* Dim the · Nep suffix slightly for visual hierarchy */
.card-mark-season-btn span::after {
  content: '';
}

/* ══════════════════════════════════════════════
   PROFILE — STREAK BANNER: MILESTONE RING
══════════════════════════════════════════════ */

/* When streak reaches 7+ days, add a subtle glow ring around the flame */
.profile-streak-banner.is-milestone .psb-flame {
  filter: drop-shadow(0 0 8px rgba(248,113,113,0.5));
}
.profile-streak-banner.is-legendary .psb-flame {
  filter: drop-shadow(0 0 12px rgba(122,121,218,0.6));
  animation: streakFlicker 1.2s ease-in-out infinite;
}
/* Streak count — make it pop more on milestone */
.profile-streak-banner.is-milestone .psb-count {
  color: #fb923c;
  font-size: 20px;
}
.profile-streak-banner.is-legendary .psb-count {
  color: var(--accent);
  font-size: 22px;
  text-shadow: 0 0 16px rgba(122,121,218,0.4);
}

/* ══════════════════════════════════════════════
   SEARCH — VOICE SEARCH BUTTON MOBILE POLISH
══════════════════════════════════════════════ */

/* Voice search button animation during active recording */
.voice-search-btn.listening svg {
  animation: voiceBounce 0.6s ease-in-out infinite alternate;
}
@keyframes voiceBounce {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}
/* Ripple effect on click for better mobile feedback */
.voice-search-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.voice-search-btn:active::after {
  opacity: 0.15;
  transform: scale(1);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.voice-search-btn {
  position: relative;
  overflow: hidden;
}

/* ══════════════════════════════════════════════
   HOME — GREETING STREAK DOTS
══════════════════════════════════════════════ */

.home-greeting-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.greet-streak-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
}

.greet-streak-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  transition: background 0.2s;
}

.greet-streak-dot.active {
  background: linear-gradient(135deg, #fb923c, #fbbf24);
  border-color: rgba(251,146,60,0.4);
  box-shadow: 0 0 4px rgba(251,146,60,0.4);
}

.greet-streak-dot.today {
  outline: 1.5px solid rgba(255,255,255,0.35);
  outline-offset: 1px;
}

.greet-streak-dot.today.active {
  outline-color: rgba(251,146,60,0.7);
}

@media (max-width: 360px) {
  .greet-streak-dots { display: none; }
}

/* Series complete banner */
.series-complete-banner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  margin: 0 20px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(251,191,36,0.3);
  background: linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(251,191,36,0.04) 60%, rgba(122,121,218,0.06) 100%);
  font-size: 13px;
  position: relative;
  overflow: hidden;
}
.series-complete-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(251,191,36,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.scb-top {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.scb-trophy { font-size: 22px; flex-shrink: 0; }
.scb-body { display: flex; flex-direction: column; gap: 2px; }
.scb-text { font-weight: 800; color: var(--yellow); font-size: 14px; }
.scb-sub { color: var(--text-secondary); font-size: 12px; }
.scb-stats {
  display: flex;
  gap: 16px;
  position: relative;
}
.scb-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.scb-stat-val {
  font-weight: 800;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.2;
}
.scb-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 480px) {
  .series-complete-banner { padding: 12px 14px; }
  .scb-stats { gap: 12px; }
  .scb-stat-val { font-size: 14px; }
}

/* Watch History v2 */
.wh-group { margin-bottom: 0.25rem; }
.wh-date-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text3); padding: 0.8rem 0 0.35rem; border-top: 1px solid var(--border); }
.wh-group:first-child .wh-date-label { border-top: none; padding-top: 0; }
.wh-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0; }
.wh-poster { width: 36px; height: 54px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--surface2); }
.wh-poster-ph { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--surface2); }
.wh-info { flex: 1; min-width: 0; }
.wh-title { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text1); }
.wh-sub { font-size: 0.73rem; color: var(--text3); margin-top: 0.1rem; }
.wh-time { font-size: 0.68rem; color: var(--text3); flex-shrink: 0; white-space: nowrap; }

/* ══════════════════════════════════════════════
   IMPROVEMENT BATCH — 2026-03-21
   (1) List-row actions layout
   (2) My List tablet 3-col grid
   (3) Skeleton shimmer polish
   (4) Horizontal row scroll improvements
   (5) Mobile My List grid improvements
══════════════════════════════════════════════ */

/* ── (1) List-row actions — ensure season+next buttons stack cleanly ── */
.myshow-list-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
  min-width: 44px;
}
.myshow-list-actions .myshow-list-chevron {
  margin: 0;
}
/* On very narrow screens, inline the actions */
@media (max-width: 360px) {
  .myshow-list-actions {
    flex-direction: row;
    gap: 4px;
  }
  .mylist-season-mark-btn {
    font-size: 9px;
    padding: 3px 5px;
    min-width: 36px;
  }
}

/* ── (2) My List grid — 3 col on tablets (481–767px) ── */
@media (min-width: 481px) and (max-width: 767px) {
  .myshows-grid:not(.myshows-grid--list) {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* ── (3) Skeleton shimmer polish — slower, more cinematic sweep ── */
.card-skeleton::after {
  animation-duration: 2.4s;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.03) 38%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.03) 62%,
    transparent 100%
  );
  background-size: 400% 100%;
}
/* Skeleton cards — slightly warmer base tone */
.card-skeleton {
  background: linear-gradient(160deg, var(--bg-tertiary) 60%, rgba(122,121,218,0.04) 100%);
}
/* Stagger skeleton cards in a row for a wave effect */
.horizontal-scroll .card-skeleton:nth-child(2)::after  { animation-delay: 0.15s; }
.horizontal-scroll .card-skeleton:nth-child(3)::after  { animation-delay: 0.30s; }
.horizontal-scroll .card-skeleton:nth-child(4)::after  { animation-delay: 0.45s; }
.horizontal-scroll .card-skeleton:nth-child(5)::after  { animation-delay: 0.60s; }
.horizontal-scroll .card-skeleton:nth-child(6)::after  { animation-delay: 0.75s; }

/* ── (4) Horizontal row scroll — snap momentum & overscroll feel ── */
@media (hover: none) and (pointer: coarse) {
  .horizontal-scroll {
    /* Slightly looser snap on touch: lets momentum carry but snaps to card */
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 14px;
  }
  /* Individual card: always stop (prevents skipping cards on fast swipe) */
  .horizontal-scroll .show-card {
    scroll-snap-stop: always;
  }
  .horizontal-scroll .card-skeleton {
    scroll-snap-stop: always;
  }
}

/* ── (5) Mobile My List grid — full-bleed cards with deeper gradient ── */
@media (max-width: 480px) {
  .myshows-grid:not(.myshows-grid--list) {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    padding: 4px 12px 8px;
  }
  /* Deeper bottom gradient for small cards — title stays legible */
  .myshow-card .card-bottom {
    background: linear-gradient(
      0deg,
      rgba(0,0,0,0.97) 0%,
      rgba(0,0,0,0.75) 50%,
      transparent 100%
    );
  }
  /* Bigger poster on small screens — 2 columns, more space */
  .myshow-card .card-title {
    font-size: 12px;
    font-weight: 800;
    -webkit-line-clamp: 2;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Slightly taller card so poster image shows better */
  .myshow-card {
    aspect-ratio: 2 / 3.1;
  }
}

/* ── Improved list-row on small screens ── */
@media (max-width: 480px) {
  .myshow-list-row {
    padding: 9px;
    gap: 10px;
    border-radius: 12px;
  }
  .myshow-list-poster {
    width: 46px;
    height: 69px;
  }
  .myshow-list-title {
    font-size: 13.5px;
  }
  .myshow-list-meta {
    gap: 4px;
  }
  .myshow-list-overview {
    display: none; /* hide overview snippet on small screens to save space */
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CLIFF BUILD 20260321 — OVERNIGHT POLISH PASS
   (1) Horizontal row skeleton stagger per-card
   (2) Scroll-progress dots for mobile horizontal rows
   (3) Next-ep runtime sub-line in continue-watching cards
   (4) My List compact grid improvements for 360px phones
   (5) Season mark button in CW cards — better contrast on AMOLED
   ═══════════════════════════════════════════════════════════════════ */

/* ── (1) Horizontal row skeleton per-card stagger ─────────────────── */
/* Each skeleton card in a horizontal scroll gets a progressive delay
   so the shimmer wave ripples left→right across the row. */
.horizontal-scroll > .card-skeleton:nth-child(1)  { animation-delay: 0s; }
.horizontal-scroll > .card-skeleton:nth-child(2)  { animation-delay: 0.12s; }
.horizontal-scroll > .card-skeleton:nth-child(3)  { animation-delay: 0.24s; }
.horizontal-scroll > .card-skeleton:nth-child(4)  { animation-delay: 0.36s; }
.horizontal-scroll > .card-skeleton:nth-child(5)  { animation-delay: 0.48s; }
.horizontal-scroll > .card-skeleton:nth-child(6)  { animation-delay: 0.60s; }
.horizontal-scroll > .card-skeleton:nth-child(7)  { animation-delay: 0.72s; }
.horizontal-scroll > .card-skeleton:nth-child(8)  { animation-delay: 0.84s; }
/* Also stagger the shimmer overlay on each card */
.horizontal-scroll > .card-skeleton:nth-child(2)::after  { animation-delay: 0.12s; }
.horizontal-scroll > .card-skeleton:nth-child(3)::after  { animation-delay: 0.24s; }
.horizontal-scroll > .card-skeleton:nth-child(4)::after  { animation-delay: 0.36s; }
.horizontal-scroll > .card-skeleton:nth-child(5)::after  { animation-delay: 0.48s; }
.horizontal-scroll > .card-skeleton:nth-child(6)::after  { animation-delay: 0.60s; }
.horizontal-scroll > .card-skeleton:nth-child(7)::after  { animation-delay: 0.72s; }
.horizontal-scroll > .card-skeleton:nth-child(8)::after  { animation-delay: 0.84s; }
/* Matching stagger for title/sub lines within each card */
.horizontal-scroll > .card-skeleton:nth-child(2) .card-skeleton-title-line  { animation-delay: 0.12s; }
.horizontal-scroll > .card-skeleton:nth-child(3) .card-skeleton-title-line  { animation-delay: 0.24s; }
.horizontal-scroll > .card-skeleton:nth-child(4) .card-skeleton-title-line  { animation-delay: 0.36s; }
.horizontal-scroll > .card-skeleton:nth-child(5) .card-skeleton-title-line  { animation-delay: 0.48s; }
.horizontal-scroll > .card-skeleton:nth-child(2) .card-skeleton-sub-line    { animation-delay: 0.37s; }
.horizontal-scroll > .card-skeleton:nth-child(3) .card-skeleton-sub-line    { animation-delay: 0.49s; }
.horizontal-scroll > .card-skeleton:nth-child(4) .card-skeleton-sub-line    { animation-delay: 0.61s; }
.horizontal-scroll > .card-skeleton:nth-child(5) .card-skeleton-sub-line    { animation-delay: 0.73s; }

/* ── (2) Scroll-progress dots for horizontal rows on mobile ───────── */
/* A row of tiny dots beneath each horizontal section showing scroll position.
   Dots are driven by JS via --scroll-pct and --row-item-count CSS vars. */
.horizontal-scroll-wrap {
  position: relative;
}
/* Progress track at the bottom of each scrollable row — thin accent line */
.horizontal-scroll-track {
  position: absolute;
  bottom: 4px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.horizontal-scroll:not(.at-end).has-scroll-fade ~ .horizontal-scroll-track,
.horizontal-scroll-wrap:has(.horizontal-scroll.has-scroll-fade) .horizontal-scroll-track {
  opacity: 1;
}
.horizontal-scroll-track-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transform-origin: left center;
  transition: transform 0.15s ease-out;
}
@media (hover: none) {
  .horizontal-scroll-track {
    opacity: 1;
    height: 2.5px; /* slightly thicker on touch */
  }
  .horizontal-scroll-track-fill {
    background: linear-gradient(90deg, var(--accent), var(--accent3));
  }
}

/* ── (3) Next-ep runtime sub-line in Continue Watching cards ─────── */
/* The extraSub line added to CW cards showing "⏱ 45m · next ep" */
.show-card-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.show-card-meta-accent {
  color: var(--accent3);
}

/* ── (4) My List compact grid — 360px phone improvements ─────────── */
@media (max-width: 359px) {
  /* 2-column grid at very small screens: slightly smaller gap */
  .myshows-grid,
  .myshows-grid--compact {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    padding: 4px 10px 8px;
  }
  /* Reduce badge font so they don't overflow */
  .myshow-status-badge {
    font-size: 9px;
    padding: 2px 5px;
  }
  .myshow-card-mark-btn {
    width: 28px;
    height: 28px;
    font-size: 10px;
    bottom: 30px;
    right: 5px;
  }
  .myshow-card-season-btn {
    font-size: 8px;
    padding: 2px 5px;
    bottom: 62px;
    right: 5px;
  }
  /* Slightly more compact card title */
  .myshow-card .card-title {
    font-size: 11px;
  }
}

/* ── (5) Season mark btn CW — better contrast on AMOLED dark ─────── */
.card-mark-season-btn {
  /* Slightly bolder border for ultra-dark displays */
  border-color: rgba(74,222,128,0.22);
}
.card-mark-season-btn:active {
  background: rgba(74,222,128,0.25);
  border-color: rgba(74,222,128,0.55);
  transform: scale(0.91);
}
/* CW card: show runtime sub cleanly when present */
.show-card-info .show-card-meta {
  color: rgba(241,242,251,0.42);
  font-size: 10.5px;
  margin-top: 2px;
}

/* ── (6) Scroll-snap desktop — visual "peek" of next card ─────────── */
/* On desktop, keep a sliver of the next card visible at the right edge
   by adding a right-side padding peek to the container */
@media (hover: hover) and (pointer: fine) {
  .horizontal-scroll {
    /* Wider scroll padding so first card aligns flush */
    scroll-padding-inline: 20px;
  }
  /* Desktop scroll arrows: slightly larger hit target */
  .row-scroll-arrow {
    width: 34px;
    height: 34px;
  }
}

/* ── (7) Progress page bulk-season button — cleaner look ─────────── */
[data-mark-season] {
  position: relative;
  overflow: hidden;
}
[data-mark-season]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74,222,128,0.08) 0%, transparent 60%);
  pointer-events: none;
}


/* ── Show Complete Banner ─────────────────────────────────────────── */
.show-complete-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  border: 1px solid rgba(74,222,128,0.3);
  background: linear-gradient(135deg, rgba(74,222,128,0.1) 0%, rgba(74,222,128,0.04) 100%);
  animation: showCompleteFadeIn 0.5s ease-out;
}
@keyframes showCompleteFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.show-complete-emoji {
  font-size: 28px;
  flex-shrink: 0;
}
.show-complete-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.show-complete-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--green);
}
.show-complete-sub {
  font-size: 12px;
  color: var(--text-secondary);
}


/* ══════════════════════════════════════════════════════════════════════
   CLIFF OVERNIGHT BUILD — 2026-03-21/22
   (A) Profile streak stat card
   (B) My List mobile — always-visible progress bar on cards
   (C) Season runtime chips — improved styling
   (D) Continue Watching subtitle — queued eps count
   (E) Recently Watched — today's episode count sub-label
   (F) Voice search button — always prominent on mobile
   (G) Episode card runtime badge — visible without expand
   ══════════════════════════════════════════════════════════════════════ */

/* ── (A) Profile streak stat card ──────────────────────────────────── */
/* Streak card: fire orange gradient background, shows when streak >= 2 */
.stat-card--streak {
  cursor: default;
  position: relative;
  overflow: hidden;
}
.stat-card--streak::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(251,146,60,0.08) 0%, transparent 60%);
  pointer-events: none;
}
/* Animate streak number on first show — pop in */
@keyframes streakCardPop {
  0%   { transform: scale(0.7); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.stat-card--streak .stat-num--streak {
  animation: streakCardPop 0.5s var(--spring) both;
  font-size: clamp(15px, 4vw, 22px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}
/* Stats row: when streak card is shown alongside "this year", auto-expand */
.profile-page .stats-row.stats-row--has-streak.stats-row--5col {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 480px) {
  .profile-page .stats-row.stats-row--has-streak {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Streak card spans full row on very small screens only if it's the sole extra card */
  .profile-page .stats-row.stats-row--has-streak:not(.stats-row--5col) .stat-card--streak {
    grid-column: auto;
  }
}

/* ── (B) My List — progress bar always visible on active shows ──────── */
/* On mobile, always render progress bar; not conditional on hover */
@media (max-width: 640px) {
  /* Show progress bar on all cards that have progress */
  .myshow-card .myshow-progress {
    display: block;
    height: 3px;
    margin-top: 4px;
    opacity: 1;
  }
  /* Next-ep badge: slightly larger tap target on mobile */
  .myshow-next-ep-badge {
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(122,121,218,0.2);
    color: var(--accent);
    display: inline-block;
    margin-top: 3px;
  }
  /* Episodes-left badge: always visible */
  .myshow-eps-left-badge {
    font-size: 10px;
  }
  /* Deeper card-bottom gradient for better text legibility */
  .myshow-card .card-bottom {
    background: linear-gradient(
      0deg,
      rgba(0,0,0,0.97) 0%,
      rgba(0,0,0,0.80) 45%,
      rgba(0,0,0,0.20) 80%,
      transparent 100%
    );
    padding-bottom: 10px;
  }
}

/* ── (C) Season runtime chips ───────────────────────────────────────── */
.season-runtime-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.season-runtime-est {
  opacity: 0.8;
}
/* "Binge left" chip — time to finish the season */
.season-binge-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--accent3);
  font-weight: 700;
  margin-left: 4px;
  background: rgba(112,194,200,0.10);
  border: 1px solid rgba(112,194,200,0.18);
  border-radius: 4px;
  padding: 1px 5px;
}
.season-binge-chip-est {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* ── (D) Continue Watching subtitle — queued count ──────────────────── */
/* The subtitle text update is handled in JS; just ensure the element
   truncates gracefully on small screens */
#continueWatchingSubtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 380px) {
  #continueWatchingSubtitle {
    font-size: 11.5px;
  }
}

/* ── (E) Recently Watched — today's count badge in section title ────── */
/* If the subtitle includes "today" info, accent that part */
#recentlyWatchedSubtitle {
  font-size: 13px;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}
#recentlyWatchedSection.has-fresh-watch #recentlyWatchedSubtitle {
  color: var(--accent3);
}

/* ── (F) Voice search — always visible + pulse ring on mobile ────────── */
@media (hover: none) {
  /* Always show voice btn on touch — give it more breathing room */
  #voiceSearchBtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(122,121,218,0.08);
    border: 1px solid rgba(122,121,218,0.15);
    color: var(--accent);
    transition: background 0.2s, box-shadow 0.2s;
  }
  #voiceSearchBtn svg {
    width: 18px;
    height: 18px;
  }
  #voiceSearchBtn.listening {
    background: rgba(248,113,113,0.12);
    border-color: rgba(248,113,113,0.28);
    color: var(--red);
    box-shadow: 0 0 0 4px rgba(248,113,113,0.12), 0 0 0 8px rgba(248,113,113,0.05);
  }
}

/* ── (G) Episode card runtime — always visible in summary row ────────── */
/* Make the runtime inline chip slightly more visible */
.ep-runtime-inline {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
/* Short episodes: teal accent */
.ep-runtime[data-short] {
  color: var(--accent3);
}
/* Long episodes: amber */
.ep-runtime[data-long] {
  color: var(--yellow);
}
/* Episode date+runtime row: space-between on summary */
.ep-date-runtime {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}
/* Fan-fave badge */
.ep-top-badge {
  display: inline-block;
  font-size: 9px;
  background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(251,191,36,0.08));
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--yellow);
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}
/* Finale badge */
.ep-finale-badge {
  display: inline-block;
  font-size: 9px;
  background: linear-gradient(135deg, rgba(122,121,218,0.25), rgba(122,121,218,0.1));
  border: 1px solid rgba(122,121,218,0.3);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--accent);
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── (H) Streak counter in stat card: tooltip on hover ──────────────── */
.stat-card--streak:hover .stat-label {
  color: #fb923c;
  transition: color 0.2s;
}

/* ── (I) My List — quick-stats bar improvements ─────────────────────── */
/* The quick-stats bar shows watching/completed/plan/dropped counts */
.mylist-quick-stats {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mylist-quick-stats::-webkit-scrollbar { display: none; }

/* ── (J) Watching streak dots on home greeting — improved size ───────── */
.greet-streak-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.greet-streak-dot.active {
  box-shadow: 0 0 5px rgba(251,146,60,0.5);
}

/* ══════════════════════════════════════════════════════════════════════
   CLIFF — My List Smart Sort: Top Pick badge
   ══════════════════════════════════════════════════════════════════════ */

/* Smart #1 pick card: subtle glow border */
.myshow-card--smart-top {
  box-shadow:
    0 0 0 1.5px rgba(122,121,218,0.45),
    0 8px 28px rgba(0,0,0,0.42),
    0 0 24px rgba(122,121,218,0.12);
}

/* Smart top badge */
.myshow-smart-top-badge {
  font-size: 10px;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(122,121,218,0.85), rgba(201,127,149,0.75));
  color: white;
  border-radius: 5px;
  padding: 2px 5px;
  backdrop-filter: blur(4px);
  line-height: 1.2;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   CLIFF — Profile: 4-Week Pace card
   ══════════════════════════════════════════════════════════════════════ */

/* Pace card: same is-spark styling but with a slight green tint */
.profile-highlight-card.is-pace {
  background: linear-gradient(135deg, rgba(74,222,128,0.06) 0%, rgba(74,222,128,0.02) 100%);
  border-color: rgba(74,222,128,0.14);
}
.profile-highlight-card.is-pace .profile-highlight-value {
  color: var(--green);
}
.profile-highlight-card.is-pace .profile-highlight-copy {
  overflow: visible;
  padding-top: 4px;
}
/* Current week bar: accent glow */
.profile-highlight-card.is-pace .spark-bar.is-current {
  background: rgba(74,222,128,0.65);
  box-shadow: 0 0 6px rgba(74,222,128,0.4);
}
/* Current week label: white */
.profile-highlight-card.is-pace .spark-bar-wrap:last-child .spark-bar-label {
  color: var(--green);
  font-weight: 800;
}

/* ══════════════════════════════════════════════════════════════════════
   CLIFF — Home Week Stats: monthly trend indicator
   ══════════════════════════════════════════════════════════════════════ */

.home-week-month-trend {
  font-size: 11px;
  font-weight: 800;
  margin-left: 2px;
  vertical-align: middle;
  opacity: 0.8;
}
.home-week-stat.is-month.is-up .home-week-month-trend { color: var(--green); }
.home-week-stat.is-month.is-down .home-week-month-trend { color: var(--orange); }
.home-week-stat.is-month { }

/* ══════════════════════════════════════════════════════════════════════
   CLIFF — OVERNIGHT IMPROVEMENTS (2026-03-22)
   ══════════════════════════════════════════════════════════════════════ */

/* ── (1) Season mark "Undo" toast CTA: additional hover/transition ─── */
.toast-cta-btn {
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.toast-cta-btn:hover {
  background: var(--accent3);
  transform: scale(1.03);
}
.toast-cta-btn:active {
  transform: scale(0.95);
}

/* ── (2) My List mobile grid: bigger quick-mark + season-mark buttons ── */
@media (hover: none) and (pointer: coarse) {
  /* Make quick-mark circle bigger on touch devices */
  .myshow-card-mark-btn {
    width: 32px;
    height: 32px;
    font-size: 13px;
    bottom: 36px;
    right: 6px;
    border-width: 2px;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  /* Season mark button: always visible, larger tap target */
  .myshow-card-season-btn {
    opacity: 1;
    pointer-events: auto;
    font-size: 9px;
    padding: 4px 7px;
    min-height: 24px;
  }
}

/* ── (3) My List 2-col mobile: cleaner title hierarchy ──────────────── */
@media (max-width: 480px) {
  /* Deeper gradient so bottom text always readable */
  .myshow-card .card-bottom {
    padding: 40px 9px 9px;
    background: linear-gradient(
      0deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.82) 45%,
      rgba(0,0,0,0.4) 70%,
      transparent 100%
    );
  }
  /* Show 2 lines of title on mobile grid cards */
  .myshow-card .card-title {
    font-size: 11.5px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }
  /* Sub-info: tighten spacing */
  .myshow-year {
    font-size: 9px;
    margin-top: 1px;
  }
  .myshow-last-watch-chip {
    font-size: 8.5px;
    padding: 1px 4px;
  }
  .myshow-progress {
    margin-top: 4px;
    height: 2.5px;
  }
  /* Status badge: icon-only on small grid cards to save space */
  .myshow-status-badge {
    font-size: 0; /* hide text */
    padding: 3px 5px;
    min-width: 20px;
    text-align: center;
  }
  /* Restore emoji visibility inside badge */
  .myshow-status-badge::first-letter {
    font-size: 11px;
  }
}

/* ── (4) Skeleton: richer dark-minimal shimmer ──────────────────────── */
/* Increase shimmer contrast for the card skeleton */
.card-skeleton::after {
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0.025) 40%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.14) 53%,
    rgba(255,255,255,0.08) 56%,
    rgba(255,255,255,0.025) 65%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: shimmer 1.7s cubic-bezier(0.4,0,0.6,1) infinite;
}
/* Vary speeds for organic feel */
.card-skeleton:nth-child(2)::after { animation-duration: 1.9s; }
.card-skeleton:nth-child(3)::after { animation-duration: 1.6s; }
.card-skeleton:nth-child(4)::after { animation-duration: 2.0s; }
.card-skeleton:nth-child(5)::after { animation-duration: 1.8s; }
/* Softer base color */
.card-skeleton {
  background: color-mix(in srgb, var(--bg-secondary) 90%, var(--accent) 10%);
}
/* Title shimmer lines: tighten animation */
.card-skeleton-title-line {
  animation-duration: 1.6s;
}
.card-skeleton-sub-line {
  animation-duration: 1.8s;
}

/* ── (5) Horizontal row scroll: momentum & overscroll improvements ───── */
/* iOS: better scroll momentum without jank */
.horizontal-scroll {
  -webkit-overflow-scrolling: touch;
  /* On iOS 15+, smooth momentum without rubber-band end-snap */
  overscroll-behavior-x: contain;
}
/* Snap precision: proximity on desktop, mandatory on touch */
@media (hover: hover) and (pointer: fine) {
  .horizontal-scroll {
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
  }
}
/* Touch: always crisp snapping */
@media (hover: none) and (pointer: coarse) {
  .horizontal-scroll {
    scroll-snap-type: x mandatory;
    scroll-behavior: auto; /* let native inertia control deceleration */
  }
}

/* ── (6) Profile streak banner: show best streak in sub-text ──────────── */
/* The .psb-copy already shows best streak via JS; style it better */
.psb-best {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--yellow);
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 6px;
  padding: 2px 7px;
  margin-top: 4px;
}
.psb-best-icon { font-size: 12px; }

/* ── (7) My List: "eps left" overlay badge — enhanced styling ─────────── */
/* The overlay is already positioned top-right; enhance the badge itself */
.myshow-eps-left-badge {
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.3;
}
/* When near done (high progress), tint badge green */
.myshow-card[data-progress-hi] .myshow-eps-left-badge:not(.myshow-eps-left-behind):not(.myshow-eps-almost-done) {
  color: rgba(74,222,128,0.9);
  background: rgba(0,40,12,0.8);
  border-color: rgba(74,222,128,0.2);
}

/* ── (8) My List: near-done glow ──────────────────────────────────────── */
.myshow-card--near-done {
  box-shadow:
    0 0 0 1px rgba(74,222,128,0.2),
    0 8px 24px rgba(0,0,0,0.4),
    0 0 18px rgba(74,222,128,0.08);
}

/* ── (9) Episode runtime: color-coded ────────────────────────────────── */
/* Short episodes (<30min): cooler tint; Long (>60min): warm tint */
.ep-runtime[data-short] {
  color: var(--accent3);
}
.ep-runtime[data-long] {
  color: var(--orange);
}
.ep-runtime-inline[data-short] {
  color: var(--accent3);
}
.ep-runtime-inline[data-long] {
  color: var(--orange);
}

/* ── (10) Season binge chip: more prominent ──────────────────────────── */
.season-binge-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent3);
  background: rgba(112,194,200,0.1);
  border: 1px solid rgba(112,194,200,0.2);
  border-radius: 6px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 4px;
}
.season-binge-chip-est {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
.season-runtime-chip {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── (11) Up Next: "last watched" label in meta row ─────────────────── */
.up-next-last-watched {
  color: var(--text-tertiary);
  font-size: 10px;
  font-style: italic;
  opacity: 0.75;
}

/* ── (12) Up Next: mark button — success state ──────────────────────── */
.up-next-btn:disabled {
  background: rgba(74,222,128,0.2);
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* ── (13) Profile insights: binge pace card — accent tint ───────────── */
.profile-insight-card:last-child .profile-insight-value {
  color: var(--accent3);
}

/* ── (14) Continue Watching: subtle row fade-in stagger ─────────────── */
#continueWatchingRow .show-card:nth-child(1) { animation-delay: 0s; }
#continueWatchingRow .show-card:nth-child(2) { animation-delay: 0.06s; }
#continueWatchingRow .show-card:nth-child(3) { animation-delay: 0.12s; }
#continueWatchingRow .show-card:nth-child(4) { animation-delay: 0.18s; }
#continueWatchingRow .show-card:nth-child(5) { animation-delay: 0.24s; }
#continueWatchingRow .show-card:nth-child(n+6) { animation-delay: 0.3s; }

/* ══════════════════════════════════════════════════════════════════════
   CLIFF — EPISODE REACTIONS (NEW)
   ══════════════════════════════════════════════════════════════════════ */

/* Reaction row in the expanded episode detail panel */
.ep-reaction-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}

/* Individual reaction emoji buttons */
.ep-reaction-btn {
  font-size: 16px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.ep-reaction-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: scale(1.12);
}
.ep-reaction-btn:active {
  transform: scale(0.9);
}
.ep-reaction-btn.active {
  background: rgba(122,121,218,0.2);
  border-color: rgba(122,121,218,0.45);
  box-shadow: 0 0 8px rgba(122,121,218,0.25);
}

/* Currently selected reaction display (next to buttons) */
.ep-reaction-current {
  font-size: 18px;
  line-height: 1;
  margin-left: 6px;
  flex-shrink: 0;
}

/* Reaction badge in the episode summary line */
.ep-reaction-badge {
  display: inline-block;
  font-size: 12px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}

/* Episode card with a reaction: subtle left accent */
.episode-card.has-reaction > summary {
  border-left: 2px solid rgba(122,121,218,0.35);
}

/* Mobile: bigger tap targets */
@media (hover: none) and (pointer: coarse) {
  .ep-reaction-btn {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   CLIFF — OVERNIGHT BUILD IMPROVEMENTS (2026-03-22)
   ══════════════════════════════════════════════════════════════════════ */

/* ── (A) Skeleton: richer dark-minimal shimmer with accent-tinted highlight ── */
.skeleton {
  background: linear-gradient(
    105deg,
    var(--bg-secondary) 0%,
    rgba(255,255,255,0.015) 30%,
    rgba(122,121,218,0.055) 48%,
    rgba(255,255,255,0.015) 66%,
    var(--bg-secondary) 100%
  ) !important;
  background-size: 420% 100% !important;
  animation: shimmerAccent 2.1s cubic-bezier(0.4,0,0.6,1) infinite !important;
}
@keyframes shimmerAccent {
  0%   { background-position: 160% 0; }
  100% { background-position: -160% 0; }
}
.card-skeleton::after {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.03) 40%,
    rgba(122,121,218,0.09) 50%,
    rgba(255,255,255,0.03) 60%,
    transparent 100%
  ) !important;
  background-size: 400% 100% !important;
  animation: shimmerAccent 2.1s cubic-bezier(0.4,0,0.6,1) infinite !important;
}
.card-skeleton-title-line,
.card-skeleton-sub-line {
  animation: shimmerAccent 2.1s cubic-bezier(0.4,0,0.6,1) infinite !important;
}
/* Stagger the accent shimmer for each sibling */
.skeleton:nth-child(2) { animation-delay: 0.15s !important; }
.skeleton:nth-child(3) { animation-delay: 0.30s !important; }
.skeleton:nth-child(4) { animation-delay: 0.45s !important; }
.skeleton:nth-child(5) { animation-delay: 0.60s !important; }
.skeleton:nth-child(6) { animation-delay: 0.75s !important; }
.skeleton:nth-child(7) { animation-delay: 0.90s !important; }
.skeleton:nth-child(8) { animation-delay: 1.05s !important; }
/* Card skeleton: subtle inner glow at bottom */
.card-skeleton {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(122,121,218,0.06),
    0 6px 18px rgba(0,0,0,0.42) !important;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none !important; background: var(--bg-secondary) !important; }
  .card-skeleton::after { animation: none !important; }
}

/* ── (B) Horizontal scroll-snap: tighter padding, better momentum ── */
.horizontal-scroll {
  scroll-padding-inline-start: 20px !important;
  /* Prevent over-shoot on iOS */
  overscroll-behavior-x: contain !important;
}
/* Desktop: proximity snap feels more natural for fast mouse scrolling */
@media (hover: hover) and (pointer: fine) {
  .horizontal-scroll {
    scroll-snap-type: x proximity !important;
  }
  .show-card,
  .card-skeleton {
    scroll-snap-stop: normal !important;
  }
}
/* Touch: mandatory snap, always stop at each card */
@media (hover: none) and (pointer: coarse) {
  .horizontal-scroll {
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline-start: 16px !important;
  }
  .show-card,
  .card-skeleton {
    scroll-snap-stop: always !important;
  }
}
/* Smooth fade-out on right edge shows there's more to scroll */
.horizontal-scroll.has-scroll-fade::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── (C) My List mobile: richer card bottom for 2-col layout ── */
@media (max-width: 480px) {
  /* Slightly taller gradient for more readable bottom area */
  .myshow-card .card-bottom {
    padding: 40px 8px 8px !important;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 55%, transparent 100%) !important;
  }
  /* Progress bar: slightly thicker and more visible */
  .myshow-progress {
    height: 4px !important;
    margin-top: 4px !important;
  }
  /* Status badge: ensure it shows in grid */
  .myshow-status-badge {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
    letter-spacing: 0.3px !important;
  }
  /* Next-ep badge: compact but readable */
  .myshow-next-ep-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 1px 4px !important;
    background: rgba(122,121,218,0.2) !important;
    border-radius: 4px !important;
    color: var(--accent) !important;
  }
  /* Last-watch chip: smaller */
  .myshow-last-watch-chip {
    font-size: 8px !important;
    padding: 1px 4px !important;
  }
  /* Episodes-left badge: prominent */
  .myshow-eps-left-badge {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
  }
  /* Quick mark button: bigger tap target on mobile */
  .myshow-card-mark-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
    bottom: 6px !important;
    right: 6px !important;
  }
  /* Season bulk-mark button: slightly smaller */
  .myshow-card-season-btn {
    font-size: 9px !important;
    padding: 3px 5px !important;
    bottom: 38px !important;
    right: 5px !important;
  }
  /* Top badges row on grid card: more compact */
  .myshow-card-top-badges {
    padding: 5px 5px 0 !important;
    gap: 3px !important;
  }
  /* Airing badge: smaller */
  .myshow-card-airing-badge {
    top: 26px !important;
    left: 5px !important;
  }
  .myshow-airing-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
  }
}

/* ── (D) Profile: year-breakdown bar chart — top show chip ── */
.year-bar-top-show {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.year-bar-top-show-name {
  color: var(--text-secondary);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  white-space: nowrap;
  display: inline-block;
}
/* Bars container: tighter spacing */
.watched-by-year-bars {
  display: flex;
  flex-direction: column;
  gap: 10px !important;
  padding: 4px 20px 8px;
}
.watched-by-year-bar-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.watched-by-year-bar-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.watched-by-year-bar-year {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 38px;
  flex-shrink: 0;
}
.watched-by-year-bar-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.watched-by-year-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.watched-by-year-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  border-radius: 4px;
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
  min-width: 4px;
}
/* Current year: accent glow */
.watched-by-year-bar-row.is-current-year .watched-by-year-bar-fill {
  background: linear-gradient(90deg, var(--accent), #a78bfa);
  box-shadow: 0 0 8px rgba(122,121,218,0.35);
}
.watched-by-year-bar-row.is-current-year .watched-by-year-bar-year {
  color: var(--accent);
  font-weight: 800;
}
/* Best year: gold tint */
.watched-by-year-bar-row.is-best-year .watched-by-year-bar-fill {
  background: linear-gradient(90deg, var(--yellow), var(--orange));
}
.watched-by-year-bar-row.is-best-year .watched-by-year-bar-year {
  color: var(--yellow);
}

/* ── (E) Recently Watched section: subtle "pulse" border on fresh watch ── */
#recentlyWatchedSection.has-fresh-watch {
  position: relative;
}
#recentlyWatchedSection.has-fresh-watch .section-title::after {
  content: '●';
  display: inline-block;
  font-size: 8px;
  color: var(--green);
  vertical-align: super;
  margin-left: 4px;
  animation: freshPulse 2s ease-in-out infinite;
}
@keyframes freshPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── (F) Episode runtime in season view: per-episode runtime pill ── */
/* When episode has runtime, show a small inline pill in summary */
.ep-runtime-inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.ep-runtime-inline[data-short] {
  color: var(--accent3);
  background: rgba(112,194,200,0.08);
}
.ep-runtime-inline[data-long] {
  color: var(--orange);
  background: rgba(251,146,60,0.08);
}
/* Season runtime chip: slightly more prominent */
.season-runtime-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary) !important;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 1px 5px;
}


/* ── (C) My List swipe-to-reveal: visual indicator ── */
/* Green "check" peek on right edge during swipe-left gesture */
.myshow-list-row.swipe-reveal-ready {
  border-color: rgba(74,222,128,0.3);
  background: linear-gradient(to left, rgba(74,222,128,0.06), transparent 40%);
}
/* Swipe action hint: subtle right-side affordance on touch devices */
@media (hover: none) and (pointer: coarse) {
  .myshow-list-row[class*="mylist-mark-next"] {
    /* Tiny swipe indicator on far right */
    position: relative;
  }
}

/* ── (D-1) Season header: reaction summary chips ── */
.season-reaction-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.season-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1;
  transition: transform 0.15s;
}
.season-reaction-chip:hover {
  transform: scale(1.1);
}
.season-reaction-count {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-left: 1px;
}

/* ── (D) Streak stat card: milestone progress bar ── */
.streak-stat-progress {
  height: 2.5px;
  background: rgba(251,146,60,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
  width: 100%;
}
.streak-stat-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fb923c, #f97316);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.streak-stat-milestone-hint {
  font-size: 10px;
  color: rgba(251,146,60,0.7);
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ── (E) Watch History: local feed styles ── */
.wh-item--local {
  cursor: pointer;
  transition: background 0.15s;
}
.wh-item--local:hover {
  background: var(--bg-card-hover);
  border-radius: 10px;
}
.wh-local-signin-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 4px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ── (F) My List compact mode: 3-col dense grid ── */
.myshows-grid--compact {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 12px 8px;
}
.myshows-grid--compact .myshow-card .card-bottom {
  padding: 32px 7px 9px;
  background: linear-gradient(0deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.72) 55%, transparent 100%);
}
.myshows-grid--compact .myshow-card .card-title {
  font-size: 10.5px;
  font-weight: 700;
  white-space: normal;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.myshows-grid--compact .myshow-year,
.myshows-grid--compact .myshow-last-watch-chip,
.myshows-grid--compact .myshow-time-chip,
.myshows-grid--compact .myshow-stars {
  display: none;
}
.myshows-grid--compact .myshow-card-mark-btn {
  width: 26px;
  height: 26px;
  font-size: 12px;
  bottom: 7px;
  right: 6px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.myshows-grid--compact .myshow-card-season-btn {
  font-size: 8px;
  padding: 2px 4px;
  bottom: 35px;
  right: 4px;
}
.myshows-grid--compact .myshow-next-ep-badge {
  font-size: 8.5px;
  padding: 1px 4px;
  background: rgba(122,111,255,0.35);
  border-radius: 3px;
  color: rgba(255,255,255,0.9);
  margin-top: 3px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Progress bar always on in compact mode — thicker + colored */
.myshows-grid--compact .myshow-progress {
  display: block;
  height: 3px;
  margin-top: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
.myshows-grid--compact .myshow-progress .myshow-progress-fill {
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
/* Compact status badge: icon only */
.myshows-grid--compact .myshow-card-top-badges .myshow-status-badge {
  font-size: 13px;
  padding: 2px;
  min-width: 20px;
  justify-content: center;
}
/* Compact: airing badge smaller */
.myshows-grid--compact .myshow-airing-badge {
  font-size: 8.5px;
  padding: 1px 5px;
}
/* Compact: eps-left badge fits in card */
.myshows-grid--compact .myshow-eps-left-overlay {
  bottom: auto;
  top: 36px;
  left: 4px;
  right: auto;
}
.myshows-grid--compact .myshow-eps-left-badge {
  font-size: 8.5px;
  padding: 1px 5px;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Compact: smart top badge smaller */
.myshows-grid--compact .myshow-smart-top-badge {
  font-size: 8px;
  padding: 1px 5px;
}
@media (min-width: 481px) {
  .myshows-grid--compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}
@media (min-width: 768px) {
  .myshows-grid--compact {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
}

/* ── (G-2) My List: "New episode" badge ── */
.myshow-new-ep-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, rgba(122,111,255,0.8), rgba(74,222,128,0.6));
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  animation: newEpPulse 2s ease-in-out 3;
}
@keyframes newEpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.myshow-card-new-ep-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
}
.myshow-card-new-ep-badge .myshow-new-ep-badge {
  font-size: 9px;
  padding: 1px 5px;
  background: linear-gradient(135deg, rgba(122,111,255,0.9), rgba(74,222,128,0.7));
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* compact mode: hide new-ep badge text, show icon only */
.myshows-grid--compact .myshow-card-new-ep-badge .myshow-new-ep-badge {
  font-size: 8px;
}

/* ── (G) My List grid card: time-to-finish chip ── */
.myshow-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 2px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Near-done shows: tint time chip green */
.myshow-card--near-done .myshow-time-chip,
.myshow-card[data-progress-hi] .myshow-time-chip {
  color: rgba(74,222,128,0.75);
  background: rgba(74,222,128,0.08);
}

/* ═══════════════════════════════════════════════
   PROFILE PAGE v2 — Hero + Tabs + Panels
   ═══════════════════════════════════════════════ */

/* Hero card */
.prof-hero {
  margin: 12px 16px 0;
  padding: 16px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prof-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.prof-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface2), var(--surface3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.08);
}
.prof-identity { min-width: 0; }
.prof-name-row { display: flex; align-items: center; gap: 6px; }
.prof-name { font-size: 1.1rem; font-weight: 800; margin: 0; letter-spacing: -0.3px; color: var(--text1); }
.prof-edit-btn { background: none; border: none; padding: 2px 4px; cursor: pointer; font-size: 0.85rem; opacity: 0.6; }
.prof-edit-btn:hover { opacity: 1; }
.prof-email { font-size: 0.78rem; color: var(--text3); margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-meta-pill { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(255,255,255,0.07); border-radius: 99px; padding: 2px 8px; color: var(--text3); }

/* Stat pills row */
.prof-stat-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.prof-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px 8px;
  min-width: 56px;
  max-height: 80px;
  flex: 1;
}
.prof-stat-num {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text1);
  letter-spacing: -0.5px;
  line-height: 1;
}
.prof-stat-lbl {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  margin-top: 3px;
}
.prof-stat-pill--streak .prof-stat-num { color: #f97316; }
.prof-stat-pill--year .prof-stat-num { color: var(--text-primary); }

/* Tab nav */
.prof-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 16px 0;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 4px;
}
.prof-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 10px;
  padding: 8px 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.prof-tab.active {
  background: rgba(255,255,255,0.1);
  color: var(--text1);
}
.prof-tab:hover:not(.active) { color: var(--text2); }

/* Panels */
.prof-panel { display: none; }
.prof-panel.active { display: block; }

/* Section inside panel */
.prof-section {
  margin: 16px 16px 0;
  padding-bottom: 4px;
}

/* Collapse sections with no content (empty grid/list) */
.prof-section:has(> div:empty) { display: none; }
.prof-section-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.prof-section-header h3 {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text2);
  margin: 0;
}
.prof-section-sub {
  font-size: 0.72rem;
  color: var(--text3);
}

/* Account actions */
.prof-account-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Social: Share button ── */
.prof-share-btn {
  background: rgba(139,111,245,0.18);
  border: 1px solid rgba(139,111,245,0.28);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  margin-left: auto;
  transition: background 0.18s ease;
}
.prof-share-btn:hover { background: rgba(139,111,245,0.3); }
.prof-share-btn:active { opacity: 0.8; }

/* ── Social: Follow button ── */
.prof-follow-btn {
  background: rgba(139,111,245,0.25);
  border: 1px solid rgba(139,111,245,0.4);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.1s ease;
}
.prof-follow-btn:hover { background: rgba(139,111,245,0.4); transform: scale(1.03); }
.prof-follow-btn.following {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--text2);
}
.prof-follow-btn.following:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); color: #ef4444; }

/* ── Social: Follower pill ── */
.prof-follower-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 52px;
  flex: 1;
  cursor: default;
}
.prof-follower-pill a {
  color: inherit;
  text-decoration: none;
}
.prof-follower-pill a:hover { color: var(--accent); }

/* ── Social: Activity Feed ── */
.social-feed-section {
  padding: 0 0 16px;
}
.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
.feed-avatar {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.feed-content {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.45;
}
.feed-content strong { color: var(--text1); }
.feed-content em { color: var(--accent); font-style: normal; }
.feed-time {
  font-size: 0.7rem;
  color: var(--text3);
  flex-shrink: 0;
  margin-top: 2px;
}
.feed-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text3);
  font-size: 0.85rem;
}


/* Desktop adjustments */
@media (min-width: 600px) {
  .prof-hero { flex-direction: row; align-items: center; justify-content: space-between; }
  .prof-stat-pills { flex-wrap: nowrap; }
  .prof-stat-pill { min-width: 60px; }
}

/* ── Season runtime summary bar ── */
.season-runtime-summary {
  margin: 0 12px 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}
.season-runtime-summary-bar-track {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}
.season-runtime-summary-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
  min-width: 3px;
}
.season-runtime-summary-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.season-runtime-summary-watched {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent3);
}
.season-runtime-summary-total {
  font-size: 10.5px;
  color: var(--text-secondary);
}

/* ── Year breakdown: YoY comparison + avg-per-month chips ── */
.year-bar-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 1px 0 2px;
}
.year-yoy-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.year-yoy-up {
  color: var(--green);
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.18);
}
.year-yoy-down {
  color: var(--red, #f87171);
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.16);
}
.year-avg-month-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* ── My List: quick-stats airing-today filter chip ── */
.mylist-qs-chip.is-airing-today {
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.mylist-qs-chip.is-airing-today:hover {
  background: rgba(239,68,68,0.2);
  box-shadow: 0 0 8px rgba(239,68,68,0.25);
}
/* Airing-this-week chip */
.mylist-qs-chip.is-airing-week {
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.mylist-qs-chip.is-airing-week:hover {
  background: rgba(99,179,237,0.2);
  box-shadow: 0 0 8px rgba(99,179,237,0.2);
}
/* Highlight pulse: applied briefly to airing-today cards on chip click */
@keyframes highlightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%  { box-shadow: 0 0 0 8px rgba(239,68,68,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.highlight-pulse {
  animation: highlightPulse 0.7s cubic-bezier(0.4,0,0.2,1) forwards !important;
  outline: 2px solid rgba(239,68,68,0.4);
  outline-offset: 2px;
}

/* ── My List: All caught up badge ── */
.myshow-caught-up-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--green, #4ade80);
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── Skeleton improvements: wave + pulse combo ── */
.card-skeleton-lines {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 10px 10px;
}
.card-skeleton-title-line {
  height: 9px;
  border-radius: 99px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 5px;
  animation: shimmer 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
}
.card-skeleton-sub-line {
  height: 7px;
  width: 60%;
  border-radius: 99px;
  background: rgba(255,255,255,0.07);
  animation: shimmer 1.6s cubic-bezier(0.4,0,0.6,1) 0.12s infinite;
}

/* ── Batch 10: Progress ring on My List grid cards ── */
.myshow-status-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sized to hold the badge + ring comfortably */
  min-width: 30px;
  min-height: 30px;
}
.myshow-progress-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  /* Slight drop shadow to make ring pop against poster */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.myshow-status-badge-wrap .myshow-status-badge {
  position: relative;
  z-index: 2;
  margin-bottom: 0; /* override default 3px bottom margin when wrapped */
}

/* ── Batch 10: Year view toggle button ── */
.year-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(122,121,218,0.12);
  border: 1px solid rgba(122,121,218,0.22);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.year-view-toggle:hover {
  background: rgba(122,121,218,0.22);
  transform: scale(1.04);
}
.year-view-toggle:active { transform: scale(0.96); }

/* ── Batch 10: Continue Watching mark-season time label ── */
.card-mark-season-btn span {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  line-height: 1.2;
}
/* Highlight the time portion in the season btn */
.card-mark-season-btn .season-time-hint {
  color: rgba(255,255,255,0.55);
  font-size: 9px;
  font-weight: 400;
}

/* ── Batch 11: Voice search interim hint ── */
.voice-interim-hint {
  display: block;
  font-size: 11px;
  color: var(--accent);
  padding: 3px 8px;
  min-height: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  opacity: 0.85;
  pointer-events: none;
}
.voice-interim-hint:empty {
  display: none;
}
/* Pulse animation when interim text is showing */
@keyframes voiceHintPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.voice-interim-hint:not(:empty) {
  animation: voiceHintPulse 1.2s ease infinite;
}

/* ── Batch 11: Recently watched — episode title in card meta shown by existing .show-card-meta style ── */

/* ── Batch 12: Random pick chip in My List quick stats ── */
button.mylist-qs-chip.is-random {
  background: rgba(122,121,218,0.08);
  color: var(--accent);
  border: 1px dashed rgba(122,121,218,0.35);
  cursor: pointer;
  transition: background 0.16s, transform 0.1s;
  font-family: inherit;
}
button.mylist-qs-chip.is-random:hover {
  background: rgba(122,121,218,0.18);
  transform: scale(1.05);
}
button.mylist-qs-chip.is-random:active { transform: scale(0.95); }

/* ── Batch 13: Jump to unwatched button in season episode list ── */
.jump-to-unwatched-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  margin: 6px 12px 4px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(122,121,218,0.35);
  background: rgba(122,121,218,0.06);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
  text-align: left;
}
.jump-to-unwatched-btn:hover {
  background: rgba(122,121,218,0.14);
  transform: translateY(-1px);
}
.jump-to-unwatched-btn:active { transform: scale(0.98); }

/* ── Batch 13: Tab swipe gesture (no CSS needed, JS-only) ── */

/* ── Year compact summary text row ── */
.year-compact-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}
.year-compact-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.year-compact-pill:first-child {
  color: var(--text-primary);
  background: rgba(122,121,218,0.1);
  border-color: rgba(122,121,218,0.2);
}
.year-compact-pill.is-current-year {
  color: var(--accent);
  background: rgba(122,121,218,0.12);
  border-color: rgba(122,121,218,0.25);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   CLIFF BUILD 20260322 — OVERNIGHT POLISH PASS B
   (1) Streak milestone progress bar in home greeting
   (2) Better mobile list-mode cards: tighter padding + cleaner meta
   (3) Card skeleton: poster silhouette shimmer structure
   (4) Similar/recommendation row smooth scroll
   ═══════════════════════════════════════════════════════════════════ */

/* ── (2) Mobile list-mode card improvements ── */
@media (max-width: 480px) {
  .myshow-list-row {
    gap: 10px;
    padding: 9px 10px;
  }
  /* More readable title on mobile */
  .myshow-list-title {
    font-size: 13px;
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
  }
  /* Stack next-ep + status badge more cleanly */
  .myshow-list-meta {
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 3px;
  }
  /* Slightly bigger poster for touchability */
  .myshow-list-poster {
    width: 50px;
    height: 75px;
    border-radius: 9px;
  }
  /* Hide chevron icon on mobile (save space) */
  .myshow-list-chevron {
    display: none;
  }
  /* Show mark-next button more prominently */
  .mylist-mark-next-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
    border-radius: 10px;
  }
}

/* ── (3) Card skeleton: subtle poster silhouette ── */
/* Add a tiny centered icon ghost to make skeleton feel more like a poster card */
.card-skeleton::before {
  /* Override existing gradient with a richer dark area */
  background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, transparent 40%);
}

/* ── (4) Detail recommendation / similar row: pointer cursors and gap ── */
.detail-similar-row .similar-card,
.detail-cast-row > * {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Ensure similar-card hover state is crisp */
.similar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(122,121,218,0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.similar-card:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* ── My List: better action buttons on touch ── */
@media (hover: none) and (pointer: coarse) {
  /* Season mark button always visible on mobile */
  .myshow-card-season-btn {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Quick-mark button bigger on mobile */
  .myshow-card-mark-btn {
    min-width: 32px;
    min-height: 32px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   BATCH: Mobile My List · Skeleton Depth · Scroll-Snap Smoothness
   ══════════════════════════════════════════════════════════════════ */

/* ── Mobile My List (2-col) — richer card bottom ── */
@media (max-width: 480px) {
  /* Deeper, taller card bottom gradient so text is always readable */
  .myshow-card .card-bottom {
    padding: 56px 9px 10px !important;
    background: linear-gradient(
      0deg,
      rgba(0,0,0,0.98) 0%,
      rgba(0,0,0,0.88) 44%,
      rgba(0,0,0,0.55) 72%,
      transparent 100%
    ) !important;
    gap: 3px;
  }
  /* Allow 3-line title on mobile — more content visible */
  .myshow-card .card-title {
    -webkit-line-clamp: 3 !important;
    font-size: 12px !important;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  /* Progress bar thicker for easier visual scanning */
  .myshow-progress {
    height: 4px !important;
    margin-top: 5px !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 99px !important;
  }
  /* Last-watch chip: make it slightly bolder */
  .myshow-last-watch-chip {
    font-size: 9.5px !important;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  /* Next-ep badge: always show even at 2-col width */
  .myshow-next-ep-badge {
    font-size: 9.5px !important;
    font-weight: 700;
  }
  /* Episodes-left badge smaller on 2-col */
  .myshow-eps-left-badge {
    font-size: 9px !important;
    padding: 1.5px 4px !important;
  }
  /* Quick-mark btn: ensure it's always tap-reachable */
  .myshow-card-mark-btn {
    width: 32px !important;
    height: 32px !important;
    bottom: 8px !important;
    right: 7px !important;
    font-size: 15px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Season bulk-mark btn: stable position above mark btn */
  .myshow-card-season-btn {
    bottom: 44px !important;
    right: 6px !important;
    font-size: 9px !important;
    padding: 3px 5px !important;
    opacity: 1 !important;
  }
  /* Year label: hide on very narrow cards to save vertical space */
  .myshow-year {
    display: none;
  }
  /* Eps-left overlay: nudge to not overlap top-badges */
  .myshow-eps-left-overlay {
    top: 36px !important;
  }
  /* Airing badges: smaller */
  .myshow-airing-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
  }
  /* New-ep badge: compact */
  .myshow-card-new-ep-badge .myshow-new-ep-badge {
    font-size: 9px !important;
    padding: 1.5px 4px !important;
  }
}

/* ── My List skeleton: richer card with top-badge + poster shimmer ── */
.mylist-skeleton-card {
  background: linear-gradient(
    160deg,
    #14141f 0%,
    #12121c 60%,
    #0f0f1a 100%
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 20px rgba(0,0,0,0.44) !important;
}
/* Top-badge placeholder inside skeleton */
.mylist-skeleton-card::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 17px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
/* Diagonal shimmer: more visible sweep */
.mylist-skeleton-card::before {
  background: linear-gradient(
    118deg,
    transparent 0%,
    rgba(122,111,255,0.04) 28%,
    rgba(255,255,255,0.10) 48%,
    rgba(112,194,200,0.04) 68%,
    transparent 100%
  ) !important;
  background-size: 380% 100% !important;
  animation: shimmer 1.8s cubic-bezier(0.4,0,0.6,1) infinite !important;
}
/* Stagger more skeleton cards */
.mylist-skeleton-card:nth-child(4)::before { animation-delay: 0.20s !important; }
.mylist-skeleton-card:nth-child(5)::before { animation-delay: 0.38s !important; }
.mylist-skeleton-card:nth-child(6)::before { animation-delay: 0.55s !important; }
/* Skeleton text lines: add a third very short line */
.mylist-skeleton-bottom {
  padding: 44px 9px 10px !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, transparent 100%) !important;
  gap: 6px !important;
}
.mylist-skeleton-line {
  height: 8px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,0.09) !important;
}
.mylist-skeleton-line.short { width: 48% !important; }
/* Add a progress-bar-like line at bottom */
.mylist-skeleton-card .mylist-skeleton-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(122,121,218,0.22), rgba(112,194,200,0.12));
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ── Horizontal row card skeletons: richer poster placeholder ── */
.card-skeleton {
  background: linear-gradient(
    155deg,
    #141420 0%,
    #111119 55%,
    #0d0d17 100%
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.52) !important;
}
/* Stronger shimmer sweep on card-skeleton */
.card-skeleton::after {
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(122,111,255,0.045) 26%,
    rgba(255,255,255,0.12) 46%,
    rgba(112,194,200,0.04) 64%,
    transparent 100%
  ) !important;
  background-size: 380% 100% !important;
  animation: shimmer 1.75s cubic-bezier(0.4,0,0.6,1) infinite !important;
}
/* Shimmer line text height variation (7th+ cards) */
.card-skeleton:nth-child(7) .card-skeleton-title-line { width: 75%; }
.card-skeleton:nth-child(7) .card-skeleton-sub-line { width: 40%; }
.card-skeleton:nth-child(8) .card-skeleton-title-line { width: 85%; }
.card-skeleton:nth-child(8) .card-skeleton-sub-line { width: 60%; }

/* ── Scroll-snap: smooth momentum + consistent padding ── */
.horizontal-scroll {
  scroll-padding-inline-start: 20px !important;
  /* Smoother deceleration on iOS */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-inline: contain !important;
}
/* Touch: snap to each card, always stop */
@media (hover: none) and (pointer: coarse) {
  .horizontal-scroll {
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline-start: 16px !important;
  }
  .horizontal-scroll .show-card,
  .horizontal-scroll .card-skeleton {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
}
/* Fade-in effect when row finishes loading (replaces skeleton) */
.horizontal-scroll .show-card:first-child {
  animation: fadeInContent 0.22s ease both;
}

/* ── Scroll arrow buttons: smoother show/hide transition ── */
.row-scroll-arrow {
  transition: opacity 0.2s cubic-bezier(0.4,0,0.2,1),
              transform 0.2s cubic-bezier(0.4,0,0.2,1),
              background 0.18s,
              box-shadow 0.18s !important;
}
.row-scroll-arrow:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,0.52), 0 0 0 1px rgba(255,255,255,0.1) !important;
}
.row-with-arrows:hover .row-scroll-arrow.left-arrow:not([disabled]),
.row-with-arrows:hover .row-scroll-arrow.right-arrow:not([disabled]) {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── Voice search: always render on mobile (no flash) ── */
@media (hover: none) {
  /* Override inline style display:none — always show on touch */
  #voiceSearchBtn {
    display: flex !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(122,121,218,0.08);
    border: 1px solid rgba(122,121,218,0.14);
    color: var(--accent);
  }
  #voiceSearchBtn.listening {
    animation: voicePulse 1.1s ease-in-out infinite;
    background: rgba(248,113,113,0.12);
    border-color: rgba(248,113,113,0.28);
    color: var(--red);
  }
}

/* ── Home recently-watched section: fresh-watch accent border ── */
#recentlyWatchedSection.has-fresh-watch {
  position: relative;
}
#recentlyWatchedSection.has-fresh-watch::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(112,194,200,0.35), transparent);
  border-radius: 99px;
  pointer-events: none;
}

/* ── My List: search-filter active highlight ── */
.mylist-search-input:not(:placeholder-shown) {
  border-color: rgba(122,121,218,0.35) !important;
  background: rgba(122,121,218,0.06) !important;
  box-shadow: 0 0 0 2px rgba(122,121,218,0.12) !important;
}

/* ── Continue Watching row: mark-season btn hover glow ── */
.card-mark-season-btn:hover {
  background: rgba(122,121,218,0.28) !important;
  border-color: rgba(122,121,218,0.5) !important;
  box-shadow: 0 0 12px rgba(122,121,218,0.22) !important;
}

/* ── Season runtime summary: improved mobile spacing ── */
@media (max-width: 600px) {
  .season-runtime-summary {
    margin: 4px 0 8px;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }
  .season-runtime-summary-labels {
    font-size: 11px !important;
  }
}

/* ── "Previously On" recap banner in show detail ── */
.previously-on-recap {
  margin: 12px 0 4px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(122,121,218,0.2);
  background: linear-gradient(135deg, rgba(122,121,218,0.08), rgba(112,194,200,0.05));
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeInContent 0.28s ease both;
}
.por-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.por-kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.por-dismiss {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.por-dismiss:hover { color: var(--text-primary); }
.por-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.por-away {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}
.por-eps {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .previously-on-recap {
    margin: 8px 0 2px;
    padding: 10px 14px;
  }
}

/* ── Continue Watching: time-budget filter row ── */
.progress-time-budget-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 0;
  flex-wrap: wrap;
}
.progress-time-budget-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.progress-time-budget-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.progress-time-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
}
.progress-time-chip:hover {
  background: rgba(122,121,218,0.14);
  border-color: rgba(122,121,218,0.28);
  color: var(--text-primary);
}
.progress-time-chip.active {
  background: rgba(122,121,218,0.2);
  border-color: rgba(122,121,218,0.45);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(122,121,218,0.14);
}
@media (max-width: 480px) {
  .progress-time-budget-row {
    padding: 4px 14px 0;
    gap: 6px;
  }
  .progress-time-chip {
    font-size: 11px;
    padding: 3.5px 10px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   BATCH: Status Ring Cards · Streak Cal Labels · Streak Dots Nav
   ══════════════════════════════════════════════════════════════════ */

/* ── My List: status accent top-border indicator by status ── */
/* Use box-shadow top inset to avoid pseudo-element conflicts */
.myshow-card[data-status="watching"] {
  box-shadow: var(--shadow-card), inset 0 2.5px 0 rgba(74,222,128,0.55);
}
.myshow-card[data-status="completed"] {
  box-shadow: var(--shadow-card), inset 0 2.5px 0 rgba(122,121,218,0.5);
}
.myshow-card[data-status="paused"] {
  box-shadow: var(--shadow-card), inset 0 2.5px 0 rgba(251,191,36,0.4);
}
.myshow-card[data-status="dropped"] {
  box-shadow: var(--shadow-card), inset 0 2.5px 0 rgba(248,113,113,0.3);
}
.myshow-card[data-status="plan"] {
  box-shadow: var(--shadow-card), inset 0 2.5px 0 rgba(255,255,255,0.15);
}
.myshow-card[data-status="watched"] {
  box-shadow: var(--shadow-card), inset 0 2.5px 0 rgba(112,194,200,0.45);
}
.myshow-card[data-status="want"] {
  box-shadow: var(--shadow-card), inset 0 2.5px 0 rgba(201,159,99,0.35);
}
/* Near-done: accent outline overrides generic status ring */
.myshow-card[data-status].myshow-card--near-done,
.myshow-card[data-status].myshow-card[data-progress-hi] {
  box-shadow: var(--shadow-card), inset 0 2.5px 0 rgba(112,194,200,0.6), 0 0 0 0;
}
/* Airing today: red top ring */
.myshow-card[data-status].myshow-card--airs-today {
  box-shadow: var(--shadow-card), inset 0 2.5px 0 rgba(248,113,113,0.65);
}

/* ── Streak calendar: day labels (S M T W T F S) ── */
.psb-cal-row-wrap {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  overflow: hidden;
}
.psb-day-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  padding-top: 0;
}
.psb-day-labels span {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-tertiary);
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.psb-cal-row-wrap .psb-full-cal {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.psb-cal-row-wrap .psb-full-cal::-webkit-scrollbar { display: none; }

/* ── Greeting streak dots: clickable button style ── */
button.greet-streak-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 2px 4px;
  margin: 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.18s;
  vertical-align: middle;
}
button.greet-streak-dots:hover {
  background: rgba(255,255,255,0.06);
}
button.greet-streak-dots:active {
  background: rgba(122,121,218,0.12);
}
/* Keep existing dot visual styles working on button variant */
button.greet-streak-dots .greet-streak-dot {
  display: inline-block;
}

/* ── My List compact: status bar already inherited from box-shadow approach ── */

/* ── Profile streak banner: slightly larger on wide screens ── */
@media (min-width: 768px) {
  .profile-streak-banner {
    padding: 20px 24px;
  }
  .psb-count { font-size: 20px; }
  .psb-badge { font-size: 22px; }
  .psb-flame { font-size: 36px; }
  .cal-cell {
    width: 11px;
    height: 11px;
  }
  .psb-day-labels span {
    width: 11px;
    height: 11px;
    font-size: 8.5px;
  }
}

/* ── Year breakdown: highlight current-year bar ── */
.year-bar-fill.is-current-year {
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  opacity: 1;
}

/* ── My List: season-mark btn more visible on grid ── */
.myshow-card-season-btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ── Continue Watching: next-ep btn accent glow on hover ── */
.card-next-ep-btn:hover {
  background: rgba(74,222,128,0.22) !important;
  border-color: rgba(74,222,128,0.5) !important;
  color: var(--green) !important;
  box-shadow: 0 0 10px rgba(74,222,128,0.18) !important;
}


/* ── My List: list-row left-border status indicator ── */
.myshow-list-row[data-status="watching"] {
  border-left: 3px solid rgba(74,222,128,0.5);
}
.myshow-list-row[data-status="completed"] {
  border-left: 3px solid rgba(122,121,218,0.45);
}
.myshow-list-row[data-status="paused"] {
  border-left: 3px solid rgba(251,191,36,0.4);
}
.myshow-list-row[data-status="dropped"] {
  border-left: 3px solid rgba(248,113,113,0.35);
}
.myshow-list-row[data-status="plan"] {
  border-left: 3px solid rgba(255,255,255,0.12);
}
.myshow-list-row[data-status="watched"] {
  border-left: 3px solid rgba(112,194,200,0.45);
}
.myshow-list-row[data-status="want"] {
  border-left: 3px solid rgba(201,159,99,0.38);
}
/* Adjust padding to account for the status border */
.myshow-list-row[data-status] .myshow-list-poster {
  margin-left: 0;
}

/* ── Season: per-episode avg runtime chip ── */
.season-avg-ep-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: rgba(112,194,200,0.85);
  background: rgba(112,194,200,0.08);
  border: 1px solid rgba(112,194,200,0.15);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 1.7;
  white-space: nowrap;
}

/* ── Profile: "This Year" featured card ── */
.year-featured-card {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(122,121,218,0.2);
  background: linear-gradient(
    135deg,
    rgba(122,121,218,0.1) 0%,
    rgba(112,194,200,0.06) 60%,
    rgba(122,121,218,0.04) 100%
  );
  position: relative;
  overflow: hidden;
}
.year-featured-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  border-radius: 99px 99px 0 0;
}
.year-featured-year {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 10px;
}
.year-featured-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.year-featured-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.year-featured-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.year-featured-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.year-featured-pace {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
  font-weight: 600;
}
.year-featured-pacing {
  font-size: 11px;
  color: var(--accent3);
  margin-top: 3px;
  font-weight: 700;
}
@media (max-width: 480px) {
  .year-featured-stat-val { font-size: 17px; }
  .year-featured-stats { gap: 12px; }
}

/* ── My List quick-stat chips: watching/completed/plan are now clickable filters ── */
.mylist-qs-chip.is-watching,
.mylist-qs-chip.is-completed,
.mylist-qs-chip.is-plan {
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s, background 0.14s;
  user-select: none;
}
.mylist-qs-chip.is-watching:hover {
  background: rgba(74,222,128,0.2) !important;
  box-shadow: 0 0 10px rgba(74,222,128,0.2);
  transform: scale(1.04);
}
.mylist-qs-chip.is-completed:hover {
  background: rgba(122,121,218,0.22) !important;
  box-shadow: 0 0 10px rgba(122,121,218,0.2);
  transform: scale(1.04);
}
.mylist-qs-chip.is-plan:hover {
  background: rgba(251,191,36,0.2) !important;
  box-shadow: 0 0 10px rgba(251,191,36,0.16);
  transform: scale(1.04);
}
.mylist-qs-chip.is-watching:active,
.mylist-qs-chip.is-completed:active,
.mylist-qs-chip.is-plan:active {
  transform: scale(0.96);
}

/* ── Episode cards: estimated runtime chip (fallback when no individual runtime) ── */
.ep-runtime[data-est],
.ep-runtime-inline[data-est] {
  opacity: 0.7;
  font-style: italic;
}

/* ── Continue Watching: streak-at-risk subtitle pulse ── */
.streak-at-risk-subtitle {
  color: var(--orange) !important;
  font-weight: 700;
  animation: streakRiskPulse 2.5s ease-in-out infinite;
}

/* ── Skeleton card: centered placeholder icon ── */
.card-skeleton-center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  opacity: 0.09;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  /* Pulse with shimmer */
  animation: skeletonIconPulse 1.65s ease-in-out infinite;
}
@keyframes skeletonIconPulse {
  0%, 100% { opacity: 0.06; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.13; transform: translate(-50%, -50%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .card-skeleton-center-icon { animation: none; opacity: 0.07; }
}

/* ── Continue Watching: "Live" watch-time pill for very recent activity ── */
.card-watch-time-pill[data-fresh] {
  /* Existing fresh state — accent border */
}
/* Special "Live" red pulse for watched in last hour */
.card-watch-time-pill:has(.live-indicator),
.show-card .card-watch-time-pill[data-fresh*="Live"] {
  border-color: rgba(248,113,113,0.4) !important;
  color: var(--red) !important;
  background: rgba(248,113,113,0.14) !important;
  animation: liveWatchPulse 2s ease-in-out infinite;
}
@keyframes liveWatchPulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 8px rgba(248,113,113,0.3); }
}

/* Minimal approach: target pill that starts with "🔴" content */
.card-watch-time-pill[data-fresh] {
  border-color: rgba(112,194,200,0.3);
}

/* ── Continue Watching: "🔴 Live" pill for shows watched within last hour ── */
.card-watch-time-pill[data-live] {
  border-color: rgba(248,113,113,0.45) !important;
  color: rgba(255,150,150,0.95) !important;
  background: rgba(248,113,113,0.15) !important;
  animation: liveWatchPulse 2s ease-in-out infinite;
}

/* ── Profile: Share stats button ── */
.prof-share-stats-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
}
.prof-share-stats-btn:hover {
  background: rgba(122,121,218,0.12);
  border-color: rgba(122,121,218,0.22);
  color: var(--accent);
}
.prof-share-stats-btn:active {
  transform: scale(0.94);
}

/* ── Show detail: Season quick-jump chip bar (4+ seasons) ── */
.season-jump-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 16px 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.season-jump-bar::-webkit-scrollbar { display: none; }
.season-jump-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.4,0,0.2,1);
  scroll-snap-align: start;
}
.season-jump-chip:hover {
  background: rgba(122,121,218,0.14);
  border-color: rgba(122,121,218,0.3);
  color: var(--text-primary);
}
.season-jump-chip.is-done {
  background: rgba(74,222,128,0.08);
  border-color: rgba(74,222,128,0.2);
  color: rgba(74,222,128,0.75);
}
.season-jump-chip.is-current {
  background: rgba(122,121,218,0.18);
  border-color: rgba(122,121,218,0.4);
  color: var(--accent);
  font-weight: 800;
}
.season-jump-chip.is-active {
  background: rgba(122,121,218,0.25);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(122,121,218,0.2);
}
.season-jump-chip:active { transform: scale(0.94); }

/* ── Continue Watching cards: airing-today meta line pulse ── */
/* The airingTodayPulse animation is defined above in global CSS */
.show-card .show-card-meta-accent:not(:empty) {
  /* Remove any accidental red override from earlier rules */
}

/* ── Profile: activity heatmap clickable bars ── */
.heatmap-bar.is-clickable {
  cursor: pointer;
  transition: transform 0.14s, filter 0.14s;
}
.heatmap-bar.is-clickable:hover {
  transform: scaleY(1.06);
  filter: brightness(1.2);
}
.heatmap-bar.is-clickable:active {
  transform: scaleY(0.96);
}

/* ══════════════════════════════════════════════
   CLIFF — 2026-03-22 UX BATCH
   (1) Week-day mini bar chart on home stats
   (2) Detail hero pre-populate loading polish
══════════════════════════════════════════════ */

/* ── (1) 7-day episode bar chart in home week stats ── */
.week-day-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 4px 16px 10px;
  height: 42px;
}
.week-day-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  cursor: default;
}
.week-day-bar-track {
  width: 100%;
  height: 24px;
  display: flex;
  align-items: flex-end;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
}
.week-day-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent3));
  border-radius: 3px;
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1);
  min-height: 0;
}
.week-day-bar-col.is-today .week-day-bar-fill {
  background: linear-gradient(180deg, var(--accent3), var(--green));
  box-shadow: 0 0 6px rgba(74,222,128,0.4);
}
.week-day-bar-col.is-empty .week-day-bar-track {
  background: rgba(255,255,255,0.03);
}
.week-day-bar-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1;
}
.week-day-bar-col.is-today .week-day-bar-label {
  color: var(--accent);
}

/* ── (2) Detail hero pre-populate: smooth transition from skeleton to loaded ── */
.modal-backdrop.is-preloaded {
  animation: detail-backdrop-fade-in 0.4s ease forwards;
}
.modal-poster.is-preloaded {
  animation: detail-poster-fade-in 0.35s ease forwards;
}
@keyframes detail-backdrop-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes detail-poster-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Loading tag in meta row during detail fetch */
.detail-loading-tag {
  opacity: 0.5;
  font-style: italic;
  animation: blink-loading 1.2s ease-in-out infinite;
}
@keyframes blink-loading {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.15; }
}

/* ── Detail quick-stat skeleton (loading state) ── */
.detail-stat-skeleton {
  min-height: 88px;
}
.detail-stat-skeleton.skeleton {
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.06) 40%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.06) 60%,
    rgba(255,255,255,0.03) 100%
  );
  background-size: 300% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}
.detail-stat-skeleton:nth-child(2) { animation-delay: 0.12s; }
.detail-stat-skeleton:nth-child(3) { animation-delay: 0.24s; }
.detail-stat-skeleton:nth-child(4) { animation-delay: 0.36s; }

/* ══════════════════════════════════════════════
   CLIFF IMPROVEMENTS — 2026-03-22
   (1) Streak card prominence
   (2) Mobile My List layout polish
   (3) Skeleton shimmer refinement
   (4) Voice search always visible on mobile
   (5) Scroll-snap momentum improvements
══════════════════════════════════════════════ */

/* ── (1) Streak card: full-width + bigger number when streak is active ── */
.profile-highlight-card.is-streak {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 16px;
  align-items: start;
}
.profile-highlight-card.is-streak .profile-highlight-label {
  grid-column: 1;
  grid-row: 1;
}
.profile-highlight-card.is-streak .profile-highlight-value {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: 52px;
  letter-spacing: -3px;
  margin-top: 0;
  align-self: center;
  text-align: right;
  line-height: 1;
  min-width: 80px;
}
.profile-highlight-card.is-streak .profile-highlight-copy {
  grid-column: 1;
  grid-row: 2;
  margin-top: 6px;
}
/* Streak milestone: even more prominent */
.profile-highlight-card.is-streak-milestone .profile-highlight-value {
  font-size: 60px;
  letter-spacing: -4px;
  text-shadow: 0 0 30px rgba(251,146,60,0.35);
}
/* On narrow screens, stack streak card back to single layout */
@media (max-width: 360px) {
  .profile-highlight-card.is-streak {
    grid-column: span 2;
    display: block;
  }
  .profile-highlight-card.is-streak .profile-highlight-value {
    font-size: 38px;
    text-align: left;
    margin-top: 8px;
  }
}

/* ── (2) Mobile My List layout: compact mode improved ── */
/* On mobile, compact mode gets 3 columns for better density */
@media (max-width: 480px) {
  .myshows-grid--compact {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    padding: 4px 10px 8px;
  }
  .myshows-grid--compact .myshow-card .card-title {
    font-size: 9.5px;
    font-weight: 700;
    -webkit-line-clamp: 2;
  }
  .myshows-grid--compact .myshow-card .card-bottom {
    padding: 28px 5px 7px;
  }
  .myshows-grid--compact .myshow-card-mark-btn {
    width: 22px;
    height: 22px;
    font-size: 11px;
    bottom: 5px;
    right: 5px;
    border-radius: 7px;
  }
  .myshows-grid--compact .myshow-airing-badge {
    font-size: 8px;
    padding: 1px 3px;
  }
}
/* On mobile, standard grid gets deeper gradient for better readability */
@media (max-width: 480px) {
  .myshows-grid:not(.myshows-grid--compact):not(.myshows-grid--list) .myshow-card .card-bottom {
    background: linear-gradient(
      0deg,
      rgba(0,0,0,0.98) 0%,
      rgba(0,0,0,0.8) 45%,
      rgba(0,0,0,0.1) 75%,
      transparent 100%
    );
    padding: 44px 10px 10px;
  }
  .myshows-grid:not(.myshows-grid--compact):not(.myshows-grid--list) .myshow-card .card-title {
    font-size: 12.5px;
    font-weight: 800;
  }
}

/* ── (3) Skeleton shimmer: smoother, more cinematic ── */
/* Redefine shimmer keyframes for a softer sweep */
@keyframes shimmerV3 {
  0%   { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}
.card-skeleton::after {
  animation-name: shimmerV3;
  animation-duration: 2.2s;
  animation-timing-function: linear;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,0.025) 30%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.025) 70%,
    transparent 100%
  );
  background-size: 500% 100%;
}
/* Deeper, warmer skeleton base */
.card-skeleton {
  background: linear-gradient(
    160deg,
    #0f0f1c 0%,
    #141426 60%,
    rgba(122,121,218,0.03) 100%
  );
}
/* Hero skeleton: same treatment */
.hero-skeleton {
  background: linear-gradient(
    135deg,
    #0a0a14 0%,
    #0f0f20 100%
  );
}
.hero-skeleton::before {
  animation-name: shimmerV3;
  animation-duration: 2.6s;
  animation-timing-function: linear;
}
/* Grid skeletons */
.grid-skeleton {
  background: linear-gradient(160deg, #0f0f1c 0%, #141426 100%);
}
.grid-skeleton::after {
  animation-name: shimmerV3;
  animation-duration: 2.2s;
  animation-timing-function: linear;
  background-size: 500% 100%;
}
/* MyList skeleton cards */
.mylist-skeleton-card {
  background: linear-gradient(160deg, #0f0f1c 0%, #131322 100%);
}
.mylist-skeleton-card::before {
  animation-name: shimmerV3;
  animation-duration: 2.2s;
  animation-timing-function: linear;
}

/* ── (4) Voice search: always visible on mobile ── */
@media (hover: none) and (pointer: coarse) {
  /* On touch devices, always show the mic button regardless of JS toggle */
  .voice-search-btn {
    display: flex !important;
    opacity: 1;
  }
  /* Slightly larger tap target */
  .voice-search-btn {
    width: 36px;
    height: 36px;
  }
}

/* ── (5) Scroll-snap: polished momentum scrolling on all devices ── */
/* Smooth momentum deceleration on iOS */
.horizontal-scroll {
  -webkit-overflow-scrolling: touch;
  /* Use 'smooth' behavior for programmatic scroll, but let touch inertia handle swipe */
  overscroll-behavior-x: contain;
}
/* On mobile: snap stops at card, but allow momentum to carry past if swiping fast */
@media (hover: none) and (pointer: coarse) {
  .horizontal-scroll {
    /* proximity allows fast swipes to carry, mandatory requires deliberate stop */
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 16px;
  }
  /* Cards snap to start */
  .horizontal-scroll > .show-card,
  .horizontal-scroll > .card-skeleton {
    scroll-snap-align: start;
    scroll-snap-stop: normal;  /* 'normal' allows fast swipe to skip, feels more native */
  }
}
/* On desktop: mandatory snap for arrow-key and programmatic navigation */
@media (hover: hover) and (pointer: fine) {
  .horizontal-scroll {
    scroll-snap-type: x mandatory;
  }
  .horizontal-scroll > .show-card {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

/* ── prefers-reduced-motion: global kill-switch ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══ Empty Watchlist CTA ══════════════════════════════════ */
.empty-cta-section {
  padding: 0 16px;
  margin-bottom: 8px;
}
.empty-cta-card {
  border-radius: var(--radius-lg, 24px);
  padding: 2rem 1.75rem;
  text-align: center;
  border: 1px solid rgba(139,111,245,0.2);
  background: rgba(139,111,245,0.05);
}
.empty-cta-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}
.empty-cta-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.empty-cta-body {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.empty-cta-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.empty-cta-note {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin: 0;
}

/* ── Google sign-in button ──────────────────────────── */
.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: #fff;
  color: #3c4043;
  border: none;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.12);
}
.auth-google-btn:hover {
  background: #f8f8f8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}
.auth-google-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.auth-social-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  color: var(--text-tertiary, rgba(255,255,255,0.35));
  font-size: 0.72rem;
}
.auth-social-divider span:first-child,
.auth-social-divider span:last-child {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}
.auth-social-divider-text {
  flex: none;
  white-space: nowrap;
}


/* Provider badge in profile */
#profileProviderBadge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.07);
  color: var(--text-tertiary);
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════
   AUTH LANDING — MINIMAL REDESIGN
   ════════════════════════════════════════════════════ */

.auth-landing {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 24px 16px;
}

.auth-landing-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 30% 40%, rgba(139,111,245,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.auth-landing-glow {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(139,111,245,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   AUTH / MARKETING LANDING
   Two-column: brand left, auth column right
   ═══════════════════════════════════════════════════ */

.auth-landing {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
}

.auth-landing-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(88, 60, 180, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(60, 100, 200, 0.12) 0%, transparent 60%),
    var(--bg-base);
}

.auth-landing-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 80px);
  max-width: 1000px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Left: brand column */
.auth-landing-left {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
}

.auth-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--accent);
}

.auth-brand-mark svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.auth-brand-name {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.auth-landing-headline {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.auth-landing-sub {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--text-secondary);
  margin: 0 0 28px;
  line-height: 1.65;
  max-width: 340px;
}

.auth-landing-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.auth-pill-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* Right: auth column (stacks card + showcase) */
.auth-landing-right {
  flex: 0 0 380px;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Auth card */
.auth-card {
  border-radius: 24px;
  padding: 32px 28px;
  border: 1px solid rgba(255,255,255,0.07);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139,111,245,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.auth-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.auth-card-brand {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.auth-card-tagline {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

/* Google button */
.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #fff;
  color: #1f1f1f;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
}

.auth-google-btn:hover {
  background: #f5f5f5;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.auth-google-btn:active {
  transform: translateY(0);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-tertiary);
  font-size: 0.78rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* Auth fields */
.auth-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.auth-gate-field { position: relative; }

.auth-gate-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}

.auth-gate-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.07);
}

.auth-gate-input::placeholder { color: var(--text-tertiary); }

.auth-gate-password-wrap { position: relative; }

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.auth-gate-field-error {
  display: block;
  font-size: 0.75rem;
  color: #ff6b6b;
  margin-top: 4px;
  min-height: 16px;
}

.auth-gate-message {
  font-size: 0.82rem;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  background: rgba(255,100,100,0.12);
  border: 1px solid rgba(255,100,100,0.25);
  color: #ff8080;
}

.auth-email-confirm-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(100,220,120,0.08);
  border: 1px solid rgba(100,220,120,0.2);
  margin-bottom: 12px;
}

.auth-email-confirm-icon { font-size: 1.4rem; }

.auth-email-confirm-title {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.auth-email-confirm-kicker {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6eea8a;
}

/* Submit button */
.btn-primary.auth-landing-submit {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
}

.btn-primary.auth-landing-submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139,111,245,0.35);
}

.btn-primary.auth-landing-submit:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.auth-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

.auth-landing-submit.loading .auth-submit-label { opacity: 0.4; }
.auth-landing-submit.loading .auth-submit-spinner { display: block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

/* Toggle row (Sign in · Create account) */
.auth-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.auth-toggle-sep { color: var(--text-tertiary); font-size: 0.8rem; }

.auth-landing-toggle-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s;
  font-family: inherit;
}

.auth-landing-toggle-btn:hover { color: var(--text-primary); }
.auth-landing-toggle-btn.active { color: var(--text-primary); font-weight: 600; }

.auth-landing-link {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 0.78rem;
  cursor: pointer;
  margin-top: 8px;
  padding: 4px;
  font-family: inherit;
  transition: color 0.15s;
}
.auth-landing-link:hover { color: var(--text-secondary); }

/* App Preview Showcase */
.auth-showcase {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.auth-showcase-card {
  border-radius: 20px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}

.auth-showcase-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(88,60,180,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.auth-showcase-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.auth-showcase-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.auth-showcase-preview-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(139,111,245,0.2);
  color: #b09aff;
  letter-spacing: 0.03em;
}

.auth-showcase-badge {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 20px;
}

.auth-showcase-show {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.auth-showcase-poster {
  width: 42px;
  height: 62px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a1a4a, #1a1030);
  flex-shrink: 0;
}

.auth-showcase-info { flex: 1; min-width: 0; }

.auth-showcase-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-showcase-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.auth-showcase-progress {
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.auth-showcase-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s;
}

.auth-showcase-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
  cursor: pointer;
}

.auth-showcase-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0 12px;
}

.auth-showcase-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-showcase-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-showcase-queue-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-showcase-queue-sub {
  font-size: 0.68rem;
  color: var(--text-tertiary);
}

.auth-showcase-caption {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-align: center;
  margin: 8px 0 0;
  font-style: italic;
}

/* Mobile: stack everything vertically */
@media (max-width: 719px) {
  .auth-landing-inner {
    flex-direction: column;
    gap: 28px;
    align-items: center;
  }

  .auth-landing-left {
    max-width: 100%;
    text-align: center;
  }

  .auth-landing-sub { max-width: 100%; }
  .auth-landing-pills { align-items: center; }

  .auth-landing-right {
    flex: none;
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 400px) {
  .auth-landing-right { width: 100%; }
  .auth-card { padding: 24px 20px; }
}