@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-SemiboldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-Heavy.otf') format('opentype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Mono';
  src: url('/fonts/SF-Mono-HeavyItalic.otf') format('opentype');
  font-weight: 800 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'FzBonestay';
  src: url('/fonts/Fz-Bonestay.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '1KHighSpirited';
  src: url('/fonts/1KHighSpirited.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '1K High Spirited';
  src: url('/fonts/1KHighSpirited.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FzThuPhapButBi';
  src: url('/fonts/Fz-ThuPhapButBi-Full.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FzThuPhapGiaoLong';
  src: url('/fonts/Fz-ThuPhapButBi-Full.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FzRatInfested';
  src: url('/fonts/Fz-rat-infested.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FzKingshare';
  src: url('/fonts/Fz-rat-infested.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FzBeautySalon';
  src: url('/fonts/Fz-Beauty-Salon.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. DESIGN TOKENS & THEMING (STRICT DARK MODE ONLY)
   ========================================================================== */
:root {
  /* Color Palette - Premium Obsidian Cinematic */
  --color-surface-base: #07080a;
  --color-surface-raised: #0d0f14;
  --color-surface-card: #13161f;
  --color-surface-hover: #1c202d;
  --color-surface-muted: #10121a;
  --color-surface-glass: rgba(13, 15, 20, 0.85);

  --color-text-primary: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;

  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-border-glow: rgba(255, 45, 141, 0.4);

  --color-accent: #ff2d8d;
  --color-accent-hover: #ff57a5;
  --color-accent-dim: rgba(255, 45, 141, 0.15);
  --color-accent-glass-soft: rgba(255, 45, 141, 0.28);
  --color-accent-glass: rgba(255, 45, 141, 0.62);
  --color-accent-gradient: linear-gradient(135deg, #ff2d8d 0%, #ff6b4a 100%);

  --color-focus-ring: #ff2d8d;
  --color-focus-glow: rgba(255, 45, 141, 0.55);

  /* Typography Scale - Fluid clamp() */
  --font-family-primary: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-heading: var(--font-family-primary);
  --font-family-korean: "1KHighSpirited", "1K High Spirited", "FzBonestay", "Fz Bonestay", var(--font-family-primary);
  --font-family-chinese: "FzThuPhapButBi", "Fz ThuPhapButBi Full", "Fz-ThuPhapButBi-Full", "FzThuPhapGiaoLong", var(--font-family-primary);
  --font-family-japanese: "FzRatInfested", "Fz Rat Infested", "Fz-rat-infested", "FzKingshare", var(--font-family-primary);
  --font-family-thai: "FzBeautySalon", "Fz Beauty Salon", var(--font-family-primary);
  --font-size-2xs: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);   /* 10-12px */
  --font-size-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);     /* 11-13px */
  --font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.92rem);     /* 12-14.5px */
  --font-size-base: clamp(0.88rem, 0.82rem + 0.3vw, 1.02rem);   /* 14-16.3px */
  --font-size-md: clamp(1rem, 0.92rem + 0.4vw, 1.15rem);        /* 16-18.4px */
  --font-size-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);     /* 18-21.6px */
  --font-size-xl: clamp(1.4rem, 1.25rem + 0.8vw, 1.75rem);      /* 22-28px */
  --font-size-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.35rem);     /* 28-37.6px */
  --font-size-3xl: clamp(2.2rem, 1.8rem + 2.2vw, 3.8rem);       /* 35-60px */

  /* Fluid Spacing Scale */
  --space-1: clamp(3px, 0.3vw, 5px);
  --space-2: clamp(6px, 0.6vw, 10px);
  --space-3: clamp(10px, 1vw, 16px);
  --space-4: clamp(16px, 1.6vw, 26px);
  --space-5: clamp(24px, 2.5vw, 40px);
  --space-6: clamp(36px, 3.8vw, 64px);

  /* Container & Layout Constraints */
  /* Match the standalone watch page: narrow, fluid side gutters. */
  --container-max-width: 100%;
  --container-padding: clamp(12px, 1vw, 18px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --radius-xl: 6px;
  --radius-full: 9999px;

  /* Motion & Transitions */
  --motion-instant: 120ms;
  --motion-fast: 180ms;
  --motion-base: 260ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  /* Base Styles */
  color: var(--color-text-primary);
  background-color: var(--color-surface-base);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Ẩn scrollbar trên toàn bộ trang và tất cả các thẻ con */
*,
*::before,
*::after {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

*::-webkit-scrollbar {
  display: none !important; /* WebKit: Chrome, Safari, Edge */
  width: 0 !important;
  height: 0 !important;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  background: var(--color-surface-base);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
}

html.modal-open,
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

input, textarea, [contenteditable], [contenteditable="true"], [contenteditable=""] {
  -webkit-user-select: text !important;
  user-select: text !important;
}

button {
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img, a img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-drag: none;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   3. FOCUS SYSTEM (ACCESSIBILITY & SMART TV REMOTE D-PAD)
   ========================================================================== */
:focus {
  outline: none;
}

:focus-visible,
.tv-focused {
  outline: 3px solid var(--color-accent) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 25px var(--color-focus-glow) !important;
  border-radius: inherit;
  transition: outline-offset var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.movie-card:focus-visible,
.movie-card.tv-focused {
  transform: translateY(-6px) scale(1.05) !important;
  z-index: 10;
}

.movie-card:focus-visible .play-badge,
.movie-card.tv-focused .play-badge {
  opacity: 1;
}

.movie-card:focus-visible .poster-wrap,
.movie-card.tv-focused .poster-wrap {
  border-color: var(--color-accent);
  box-shadow: 0 16px 40px rgba(255, 45, 141, 0.35);
}

/* Touch & tap feedback */
button,
.movie-card,
.option-btn,
.rail-arrow,
.filter-panel select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ==========================================================================
   4. FLUID CONTAINER SYSTEM
   ========================================================================== */
.topbar-inner,
.hero-inner,
.section-container,
.detail-cinematic {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ==========================================================================
   5. HEADER & NAVIGATION (TOPBAR)
   ========================================================================== */
.topbar {
  position: relative;
  z-index: 40;
  width: 100%;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--motion-base), box-shadow var(--motion-base);
}

body.home-topbar-overlay .topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(7, 8, 10, 0.9) 0%, rgba(7, 8, 10, 0.4) 65%, transparent 100%);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
  min-height: clamp(48px, 3.4vw, 56px);
  padding-top: calc(2px + var(--safe-top));
  padding-bottom: 2px;
}

.settings-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 38px;
  height: 38px;
  width: 38px;
  min-width: 38px;
  padding: 0 !important;
  border: none !important;
  border-radius: 6px;
  background: transparent !important;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none !important;
  cursor: pointer;
  outline: none !important;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}
.settings-btn:hover,
.settings-btn:focus-visible {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px);
  outline: none !important;
}
.settings-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.settings-btn:hover .settings-icon-img,
.settings-btn:focus-visible .settings-icon-img {
  transform: rotate(60deg);
}
.settings-current-server {
  display: none !important;
}

/* Brand Logo */
.brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-emphasized), opacity var(--motion-fast);
}

.brand:hover {
  transform: scale(1.03);
}

.brand-logo,
.footer-brand-logo {
  display: block;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.brand-logo {
  width: clamp(122px, 10vw, 160px);
  max-height: 42px;
  filter: drop-shadow(0 3px 14px rgba(255, 45, 141, 0.18));
}

.brand-text {
  display: inline-flex;
  align-items: baseline;
  font-family: "Huninn", var(--font-family-primary);
  font-size: clamp(24px, 2.35vw, 32px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.48);
}

.brand-main {
  color: var(--color-text-primary);
  -webkit-text-stroke: 0.7px currentColor;
}

.brand-accent {
  color: var(--color-accent);
  -webkit-text-stroke: 0.7px currentColor;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Desktop Navigation */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.4vw, 8px);
  margin-left: auto;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-trigger,
.nav-direct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: clamp(38px, 3vw, 44px);
  padding: 0 clamp(10px, 1vw, 16px);
  border-radius: var(--radius-sm);
  color: rgba(248, 250, 252, 0.76);
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast);
}

.nav-trigger:hover,
.nav-direct:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface-hover);
}

.nav-trigger.active,
.nav-direct.active {
  color: rgba(248, 250, 252, 0.76);
}

.nav-trigger span {
  font-size: 10px;
  color: var(--color-text-muted);
  transition: transform var(--motion-fast);
}

.nav-item.is-open .nav-trigger span {
  transform: rotate(180deg);
}

/* Navigation Dropdowns & Mega Menus */
.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 8px);
  z-index: 50;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  display: grid;
  gap: 4px 10px;
  padding: clamp(10px, 1vw, 14px);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: rgba(13, 15, 20, 0.76);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: opacity var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-emphasized),
              visibility var(--motion-fast);
}

.nav-item.is-open .nav-trigger {
  color: #fff;
  background-color: var(--color-surface-hover);
}

.nav-item.is-open .nav-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-menu button {
  min-height: 34px;
  padding: 5px 6px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast);
}

.nav-menu button:hover,
.nav-menu button:focus-visible {
  background: var(--color-surface-hover);
  color: #fff;
  transform: translateX(3px);
}

.mega-menu {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(600px, calc(100vw - 48px));
}

.country-menu {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(580px, calc(100vw - 48px));
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.05);
  padding-right: 6px;
}

.country-menu::-webkit-scrollbar {
  width: 6px;
}

.country-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.country-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 4px;
}

.country-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
}

.year-menu {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(320px, calc(100vw - 48px));
}

.compact-menu {
  grid-template-columns: 1fr;
  width: min(160px, calc(100vw - 48px));
}

.filter-link span,
.badge-moi {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: #ff1155;
  color: #fff;
  font-size: var(--font-size-2xs);
  font-weight: 900;
  margin-left: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--font-size-2xs);
  font-weight: 800;
  line-height: 1;
}

/* Search Form */
.search-shell {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  width: clamp(230px, 24vw, 380px);
  min-width: 0;
}

.search-shell .search-form {
  width: 100%;
}

.search-source-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0 0 14px;
}

.search-source-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: #252833;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast), opacity var(--motion-fast);
}

.search-source-btn:hover,
.search-source-btn:focus-visible,
.search-source-btn.is-active {
  background: #3d414e;
  color: #fff;
}

.search-source-btn:hover {
  transform: translateY(-1px);
}

.search-source-btn:focus-visible {
  outline: 2px solid rgba(255, 123, 187, 0.9);
  outline-offset: 2px;
}

.search-source-hint {
  flex: 1 1 240px;
  min-width: 0;
  color: #ff526d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 0 10px rgba(255, 82, 109, 0.35);
  animation: searchSourceHintBlink 1.15s ease-in-out infinite;
}

@keyframes searchSourceHintBlink {
  0%, 100% {
    opacity: 1;
    color: #ff526d;
  }
  50% {
    opacity: 0.38;
    color: #ff1f46;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-source-hint {
    animation: none;
  }
}

.search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(230px, 24vw, 380px);
  min-height: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 2px 3px 2px 10px;
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast), backdrop-filter var(--motion-fast);
}

.search-form:focus-within {
  border-color: rgba(255, 123, 187, 0.82);
  background: rgba(20, 22, 32, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 3px rgba(245, 77, 154, 0.15), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.search-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.search-form input {
  flex: 1;
  min-width: 0;
  padding: 2px 8px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ff6bb4;
  caret-color: #ff6bb4;
  font-size: 12.5px;
  font-weight: 600;
}

.search-form input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.search-form input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

.search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  min-height: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ff5298;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast);
}

.search-form button:hover {
  background: var(--color-accent-hover);
  transform: scale(1.04);
}

/* Search History Dropdown */
.search-history-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: 290px;
  max-width: 420px;
  background: rgba(16, 18, 27, 0.96);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 8px 6px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
  animation: searchHistoryFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.search-history-dropdown.hidden {
  display: none !important;
}

.search-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}

.search-history-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.45);
}

.search-history-clear-btn,
.search-form .search-history-clear-btn {
  all: unset;
  box-sizing: border-box;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ff7bbb !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  min-height: auto !important;
  height: auto !important;
  transform: none !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

.search-history-clear-btn:hover,
.search-form .search-history-clear-btn:hover {
  color: #ff3b88 !important;
  background: rgba(245, 77, 154, 0.14) !important;
  text-decoration: underline !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.search-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  gap: 8px;
}

.search-history-item:hover,
.search-history-item:focus-within {
  background: rgba(255, 255, 255, 0.09);
}

.search-history-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.search-history-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.search-history-query {
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-history-item:hover .search-history-query {
  color: #ff7bbb;
}

.search-history-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.search-history-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  font-weight: 400;
}

.search-history-delete-btn,
.search-form .search-history-delete-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  border-radius: 50% !important;
  border: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 0 !important;
  transform: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

.search-history-delete-btn:hover,
.search-form .search-history-delete-btn:hover {
  background: rgba(245, 77, 154, 0.22) !important;
  color: #ff6bb4 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: scale(1.12) !important;
}


/* Topbar User Utilities */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-accent);
}

.noti-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff2d8d;
  box-shadow: 0 0 8px #ff2d8d;
}

.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 20px;
  border-radius: 999px;
  background: #fca5d5;
  color: #1e1018;
  font-size: 13px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--motion-fast), background var(--motion-fast);
}

.btn-login:hover {
  background: #ff85c6;
  transform: scale(1.04);
}

.topbar-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.account-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 5px 4px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.account-name {
  max-width: 150px;
  overflow: hidden;
  color: #f5f5f5;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-admin-link,
.account-logout {
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  color: #160d18;
  background: #fca5d5;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.account-logout {
  color: #f5f5f5;
  background: rgba(255,255,255,.1);
}

.account-admin-link:hover,
.account-logout:hover {
  filter: brightness(1.12);
}

.settings-account-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.settings-account-actions .topbar-account {
  display: block;
  margin: 0;
}

.settings-account-actions #login-btn {
  width: 100%;
  min-height: 44px;
}

.settings-account-actions .account-user {
  justify-content: space-between;
  min-height: 44px;
  padding: 5px 6px 5px 13px;
  border-radius: 12px;
}

.settings-account-actions .account-name {
  display: block;
  max-width: 135px;
}

#auth-modal .auth-shell {
  /* Keep the account form compact; .modal-shell later sets a wide default. */
  width: min(calc(100% - 32px), 460px);
  padding: 26px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(35, 25, 38, .98), rgba(11, 13, 18, .98));
  box-shadow: 0 26px 90px rgba(0,0,0,.55), 0 0 44px rgba(255,77,154,.12);
}

.auth-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.auth-modal-title {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(24px, 5vw, 32px);
  letter-spacing: -.03em;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 20px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}

.auth-tab {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  color: #a9a1ad;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.auth-tab.is-active {
  color: #1c101a;
  background: #fca5d5;
}

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

.auth-form-intro {
  margin: 0 0 3px;
  color: #c5bac7;
  font-size: 12px;
  line-height: 1.55;
}

.auth-inline-actions {
  display: flex;
  justify-content: flex-end;
  min-height: 44px;
  align-items: center;
}

.auth-link {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  color: #fca5d5;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.auth-link:hover,
.auth-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.auth-forgot-password-fields {
  display: grid;
  gap: 9px;
}

.auth-forgot-back-row {
  justify-content: flex-start;
}

.auth-form label {
  margin-top: 5px;
  color: #e8e0e9;
  font-size: 12px;
  font-weight: 800;
}

.auth-form input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  outline: none;
  color: #fff;
  background: rgba(0,0,0,.28);
  font: inherit;
}

.auth-form input:focus {
  border-color: #fca5d5;
  box-shadow: 0 0 0 3px rgba(252,165,213,.14);
}

.auth-otp-group {
  display: grid;
  gap: 9px;
  margin-top: 4px;
  padding: 13px;
  border: 1px solid rgba(252, 165, 213, .26);
  border-radius: 12px;
  background: rgba(252, 165, 213, .07);
}

.auth-otp-group input {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .3em;
}

.auth-field-hint {
  color: #c5bac7;
  font-size: 11px;
  line-height: 1.45;
}

.auth-password-field {
  position: relative;
}

.auth-password-field input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #b9afbb;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--motion-fast), background var(--motion-fast);
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.password-toggle:focus-visible {
  outline: 2px solid #fca5d5;
  outline-offset: 1px;
}

.auth-submit {
  min-height: 46px;
  margin-top: 13px;
  border: 0;
  border-radius: 11px;
  color: #1c101a;
  background: linear-gradient(135deg, #fca5d5, #ff69b4);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.auth-submit:disabled {
  opacity: .6;
  cursor: wait;
}

.auth-google-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.auth-google-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a9a1ad;
  font-size: 11px;
  text-align: center;
}

.auth-google-divider::before,
.auth-google-divider::after {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.14);
  content: "";
}

.auth-google-button {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px;
  color: #25212a;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast);
}

.auth-google-button:hover,
.auth-google-button:focus-visible {
  background: #f2f2f2;
}

.auth-google-button:active { transform: scale(.99); }

.auth-google-button:focus-visible {
  outline: 2px solid #fca5d5;
  outline-offset: 3px;
}

.auth-status {
  min-height: 20px;
  margin: 15px 0 0;
  color: #bbb2bd;
  font-size: 12px;
  line-height: 1.5;
}

.auth-status.is-error { color: #ff9a9a; }
.auth-status.is-success { color: #92edbe; }

@media (max-width: 840px) {
  .topbar-account { margin-left: auto; }
  .account-name { display: none; }
  .account-user { padding-left: 5px; }
}

@media (max-width: 560px) {
  .topbar-account { gap: 5px; }
  .btn-login { min-height: 34px; padding: 7px 12px; font-size: 11px; }
  .account-admin-link, .account-logout { min-height: 30px; padding: 5px 8px; font-size: 10px; }
  .auth-shell { padding: 20px; }
}

/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(720px, 85vh, 1020px);
  padding-top: clamp(90px, 9vw, 120px);
  padding-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 0;
  background-color: #07080a;
  background-image:
    linear-gradient(to top, #07080a 0%, rgba(7, 8, 10, 0.35) 5%, transparent 14%),
    var(--hero-image, linear-gradient(115deg, #161822 0%, #08090d 100%));
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: background-image 0.5s ease-in-out;
  cursor: pointer;
}

/* Hero Background Trailer Video (Layer 1) */
.hero-trailer-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
  background: transparent;
}

.hero-trailer-wrap.is-visible {
  opacity: 1;
}

.hero-trailer-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.35);
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  pointer-events: none;
  border: 0;
  background: transparent;
}

.hero-trailer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, #07080a 0%, rgba(7, 8, 10, 0.35) 5%, transparent 14%);
}

/* Hero Backdrop Image (Layer 2 - che phủ video trailer trong 3s đầu) */
.hero-backdrop-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background-color: #07080a;
  background-image:
    linear-gradient(to top, #07080a 0%, rgba(7, 8, 10, 0.35) 5%, transparent 14%),
    var(--hero-image, linear-gradient(115deg, #161822 0%, #08090d 100%));
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}

.hero-backdrop-img.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Hero Inner Controls (Layer 3) */
.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  width: 100%;
  pointer-events: none;
}

.hero-inner button,
.hero-inner a,
.hero-inner input,
.hero-inner select,
.hero-inner textarea,
.hero-inner #featured-name,
#featured-name,
.hero-actions,
.hero-actions *,
.hero-thumbs-container,
.hero-thumbs-container * {
  pointer-events: auto;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(720px, 100%);
  margin-left: 0;
}

@keyframes heroCopySlideFade {
  0% {
    opacity: 0.15;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.watch-comment-replies {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 8px;
  margin-left: clamp(24px, 5vw, 48px);
  padding-left: 15px;
}

.watch-comment-replies::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.76);
  content: "";
}

.watch-comment-item.is-reply {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
  border-radius: 0;
}

@media (max-width: 560px) {
  .watch-comment-replies {
    margin-left: 20px;
    padding-left: 12px;
  }
}

.hero-copy.is-entering {
  animation: heroCopySlideFade 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.featured-original {
  display: block;
  width: fit-content;
  margin: 0 0 16px 0;
  color: #ff77a9;
  font-size: clamp(8px, 1.5vw, 12px);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-shadow: none !important;
}

.featured-original:empty {
  display: none !important;
  margin: 0 !important;
}

.featured-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: -7px 0 16px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.featured-meta:empty {
  display: none;
}

.featured-meta i {
  color: rgba(255, 255, 255, 0.42);
  font-style: normal;
}

.featured-tagline {
  display: block;
  width: min(calc(620px + 1cm), 100%);
  max-width: min(calc(620px + 1cm), 100%);
  margin: -4px 0 24px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(10px, 1.2vw, 13px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  text-overflow: ellipsis;
  text-shadow: none;
}

.featured-tagline.is-two-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.featured-tagline-line {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.featured-tagline.is-two-line .featured-tagline-line:first-child {
  width: calc(100% - 1cm);
}

.featured-tagline.is-two-line .featured-tagline-line:last-child {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trang chủ: khung nội dung cố định 19cm / 20cm cho hai dòng. */
#featured-tagline {
  width: min(20cm, 100%);
  max-width: min(20cm, 100%);
}

#featured-tagline.is-two-line .featured-tagline-line:first-child {
  width: min(19cm, 100%);
}

.featured-tagline:empty {
  display: none;
}

#featured-name {
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px 0;
  font-family: var(--font-family-heading);
  font-size: clamp(35px, 4.2vw, 59px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.9);
  user-select: none;
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}

#featured-name:hover {
  opacity: 0.88;
}

#featured-name:active {
  transform: scale(0.995);
}

.featured-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.badge-meta {
  background: rgba(22, 24, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
}

.badge-icon {
  font-size: 12px;
}

.badge-vs {
  background: #14532d;
  color: #4ade80;
  border: 1px solid #22c55e;
}

.badge-sn {
  background: #881337;
  color: #fda4af;
  border: 1px solid #f43f5e;
}

.badge-tm {
  background: #4c1d95;
  color: #d8b4fe;
  border: 1px solid #a855f7;
}

.badge-fhd {
  background: rgba(10, 10, 14, 0.7);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

#featured-description {
  margin: 0 0 24px 0;
  max-width: 620px;
  color: #cbd5e1;
  font-size: var(--font-size-base);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-actions .hero-watch-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 20px !important;
  border-radius: var(--radius-full) !important;
  background: linear-gradient(135deg, #ff80bc 0%, #ff4d9a 100%) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 6px 20px rgba(255, 77, 154, 0.45) !important;
  cursor: pointer !important;
  transition: transform var(--motion-fast) var(--ease-emphasized), box-shadow var(--motion-fast), filter var(--motion-fast) !important;
}

.hero-actions .hero-watch-text:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 10px 26px rgba(255, 77, 154, 0.65) !important;
  filter: brightness(1.08) !important;
}

.hero-actions .btn-hero-watchlist,
.detail-primary-actions .btn-hero-watchlist,
.btn-hero-watchlist,
.detail-bookmark,
#hero-watchlist,
[data-hero-watchlist],
[data-detail-bookmark] {
  position: static;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0;
  border-radius: var(--radius-full) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #fff;
  font-size: 19px !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform var(--motion-fast) var(--ease-emphasized), color var(--motion-fast), filter var(--motion-fast);
}

.hero-actions .btn-hero-watchlist:hover,
.hero-actions .btn-hero-watchlist:focus-visible,
.hero-actions .btn-hero-watchlist:active,
.detail-primary-actions .btn-hero-watchlist:hover,
.detail-primary-actions .btn-hero-watchlist:focus-visible,
.detail-primary-actions .btn-hero-watchlist:active,
.btn-hero-watchlist:hover,
.btn-hero-watchlist:focus-visible,
.btn-hero-watchlist:active,
.detail-bookmark:hover,
.detail-bookmark:focus-visible,
.detail-bookmark:active,
#hero-watchlist:hover,
#hero-watchlist:focus-visible,
#hero-watchlist:active,
[data-hero-watchlist]:hover,
[data-hero-watchlist]:focus-visible,
[data-hero-watchlist]:active,
[data-detail-bookmark]:hover,
[data-detail-bookmark]:focus-visible,
[data-detail-bookmark]:active {
  transform: scale(1.12);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ff3333 !important;
}

.hero-actions .btn-hero-watchlist .bookmark-icon,
.detail-primary-actions .btn-hero-watchlist .bookmark-icon,
.btn-hero-watchlist .bookmark-icon,
.detail-bookmark .bookmark-icon,
#hero-watchlist .bookmark-icon,
[data-hero-watchlist] .bookmark-icon,
[data-detail-bookmark] .bookmark-icon {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
  transition: color var(--motion-fast), transform var(--motion-fast), filter var(--motion-fast);
}

.hero-actions .btn-hero-watchlist.is-bookmarked,
.detail-primary-actions .btn-hero-watchlist.is-bookmarked,
.btn-hero-watchlist.is-bookmarked,
.detail-bookmark.is-bookmarked,
#hero-watchlist.is-bookmarked,
[data-hero-watchlist].is-bookmarked,
[data-detail-bookmark].is-bookmarked {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.hero-actions .btn-hero-watchlist.is-bookmarked .bookmark-icon,
.detail-primary-actions .btn-hero-watchlist.is-bookmarked .bookmark-icon,
.btn-hero-watchlist.is-bookmarked .bookmark-icon,
.detail-bookmark.is-bookmarked .bookmark-icon,
#hero-watchlist.is-bookmarked .bookmark-icon,
[data-hero-watchlist].is-bookmarked .bookmark-icon,
[data-detail-bookmark].is-bookmarked .bookmark-icon {
  color: #ff3333 !important;
  text-shadow: 0 0 12px rgba(255, 51, 51, 0.9), 0 0 24px rgba(255, 51, 51, 0.55);
  filter: drop-shadow(0 0 6px rgba(255, 51, 51, 0.75));
  display: inline-block;
  transform: scale(1.08);
}

.hero-actions .btn-hero-watchlist.is-bookmarked:hover,
.hero-actions .btn-hero-watchlist.is-bookmarked:focus-visible,
.hero-actions .btn-hero-watchlist.is-bookmarked:active,
.detail-primary-actions .btn-hero-watchlist.is-bookmarked:hover,
.detail-primary-actions .btn-hero-watchlist.is-bookmarked:focus-visible,
.detail-primary-actions .btn-hero-watchlist.is-bookmarked:active,
.btn-hero-watchlist.is-bookmarked:hover,
.btn-hero-watchlist.is-bookmarked:focus-visible,
.btn-hero-watchlist.is-bookmarked:active,
.detail-bookmark.is-bookmarked:hover,
.detail-bookmark.is-bookmarked:focus-visible,
.detail-bookmark.is-bookmarked:active,
#hero-watchlist.is-bookmarked:hover,
#hero-watchlist.is-bookmarked:focus-visible,
#hero-watchlist.is-bookmarked:active,
[data-hero-watchlist].is-bookmarked:hover,
[data-hero-watchlist].is-bookmarked:focus-visible,
[data-hero-watchlist].is-bookmarked:active,
[data-detail-bookmark].is-bookmarked:hover,
[data-detail-bookmark].is-bookmarked:focus-visible,
[data-detail-bookmark].is-bookmarked:active {
  transform: scale(1.12);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.hero-actions .btn-hero-watchlist.is-bookmarked:hover .bookmark-icon,
.hero-actions .btn-hero-watchlist.is-bookmarked:focus-visible .bookmark-icon,
.hero-actions .btn-hero-watchlist.is-bookmarked:active .bookmark-icon,
.detail-primary-actions .btn-hero-watchlist.is-bookmarked:hover .bookmark-icon,
.detail-primary-actions .btn-hero-watchlist.is-bookmarked:focus-visible .bookmark-icon,
.detail-primary-actions .btn-hero-watchlist.is-bookmarked:active .bookmark-icon,
.btn-hero-watchlist.is-bookmarked:hover .bookmark-icon,
.btn-hero-watchlist.is-bookmarked:focus-visible .bookmark-icon,
.btn-hero-watchlist.is-bookmarked:active .bookmark-icon,
.detail-bookmark.is-bookmarked:hover .bookmark-icon,
.detail-bookmark.is-bookmarked:focus-visible .bookmark-icon,
.detail-bookmark.is-bookmarked:active .bookmark-icon,
#hero-watchlist.is-bookmarked:hover .bookmark-icon,
#hero-watchlist.is-bookmarked:focus-visible .bookmark-icon,
#hero-watchlist.is-bookmarked:active .bookmark-icon,
[data-hero-watchlist].is-bookmarked:hover .bookmark-icon,
[data-hero-watchlist].is-bookmarked:focus-visible .bookmark-icon,
[data-hero-watchlist].is-bookmarked:active .bookmark-icon,
[data-detail-bookmark].is-bookmarked:hover .bookmark-icon,
[data-detail-bookmark].is-bookmarked:focus-visible .bookmark-icon,
[data-detail-bookmark].is-bookmarked:active .bookmark-icon {
  color: #ff3333 !important;
  text-shadow: 0 0 16px rgba(255, 51, 51, 1), 0 0 30px rgba(255, 51, 51, 0.75) !important;
  filter: drop-shadow(0 0 8px rgba(255, 51, 51, 0.9)) !important;
  display: inline-block;
  transform: scale(1.12);
}

.hero-actions .btn-hero-sound {
  position: static;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-radius: var(--radius-full) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-emphasized), filter var(--motion-fast);
}

.hero-actions .btn-hero-sound:hover,
.hero-actions .btn-hero-sound:focus-visible {
  transform: scale(1.12);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.hero-actions .btn-hero-sound.is-unmuted {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.hero-actions .btn-hero-sound .speaker-icon {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  width: 20px;
  height: 20px;
}

.hero-actions .btn-hero-sound .sound-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
  transition: filter var(--motion-fast), transform var(--motion-fast);
}

.hero-actions .btn-hero-sound:hover .sound-icon-img {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85)) brightness(1.2);
}

.hero-actions .btn-hero-sound.is-unmuted .sound-icon-img {
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

.hero-actions .btn-hero-sound.is-unmuted:hover .sound-icon-img {
  filter: brightness(0) invert(1) drop-shadow(0 0 9px rgba(255, 255, 255, 0.95));
}

.btn-watch-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 30px;
  border-radius: 999px;
  background: #ff77a9;
  color: #12141a;
  font-size: 15px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 119, 169, 0.45);
  transition: transform 0.2s var(--ease-emphasized), background 0.2s, box-shadow 0.2s;
}

.btn-watch-now:hover {
  background: #ff5da0;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px rgba(255, 119, 169, 0.6);
}

/* Play Badge Button (Round play button style for Hero & Continue Watching) */
.btn-play-badge,
.hero-actions .btn-watch-now.btn-play-badge,
.continue-card .btn-play-badge {
  display: inline-grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  border-radius: var(--radius-full) !important;
  background: linear-gradient(135deg, rgba(255, 121, 187, 0.96), rgba(221, 53, 139, 0.9)) !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 19px !important;
  box-shadow: 0 12px 28px rgba(245, 77, 154, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--motion-fast) var(--ease-emphasized), box-shadow var(--motion-fast), filter var(--motion-fast);
}

.btn-play-badge span {
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
  margin-left: 2px;
}

.btn-play-badge:hover,
.btn-play-badge:focus-visible {
  transform: scale(1.08) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 16px 36px rgba(245, 77, 154, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.btn-play-badge:active {
  transform: scale(0.96) !important;
}

.btn-speaker,
.btn-circle-secondary {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 20, 26, 0.7);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
}

.btn-speaker:hover,
.btn-circle-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--color-accent);
  transform: scale(1.06);
}

.btn-circle-secondary.is-bookmarked {
  border-color: var(--color-accent);
  background: rgba(255, 45, 141, 0.25);
  color: var(--color-accent);
}

/* ==========================================================================
   Featured Thumbnails Carousel (Bottom-Right of Hero)
   ========================================================================== */
.hero-thumbs-container {
  flex-shrink: 0;
  margin-bottom: 6px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-thumbs {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-thumb {
  width: clamp(50px, 4.8vw, 90px);
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #11131a;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.25s var(--ease-emphasized), border-color 0.25s, box-shadow 0.25s, opacity 0.25s;
  opacity: 0.68;
}

.hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-thumb:hover {
  opacity: 0.95;
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-3px) scale(1.03);
  z-index: 10;
}

.hero-thumb:focus,
.hero-thumb:focus-visible,
.hero-thumb:active {
  outline: none !important;
}

.hero-thumb.is-active {
  opacity: 1;
  border-color: #ff2d8d !important;
  box-shadow: 0 0 16px rgba(255, 45, 141, 0.75), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  transform: scale(1.05);
  position: relative;
  z-index: 100 !important;
  outline: none !important;
}

@media (max-width: 900px) {
  .hero-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;
  }
  .hero-copy {
    position: relative;
    z-index: 1 !important;
  }
  .hero-thumbs-container {
    position: relative;
    z-index: 50 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 16px 8px 18px !important;
    margin-top: 6px;
  }
  .hero-thumbs-container::-webkit-scrollbar {
    display: none;
  }
  .hero-thumbs {
    position: relative;
    z-index: 50;
    width: max-content;
    gap: 12px;
    padding: 2px 6px;
    align-items: center;
  }
  .hero-thumb {
    position: relative;
    z-index: 2;
    width: 78px;
    border-radius: 10px;
    flex-shrink: 0;
  }
  .hero-thumb:hover {
    z-index: 20;
  }
  .hero-thumb:focus,
  .hero-thumb:focus-visible,
  .hero-thumb:active {
    outline: none !important;
  }
  .hero-thumb.is-active {
    position: relative !important;
    z-index: 100 !important;
    transform: scale(1.05) !important;
    outline: none !important;
    border-color: #ff2d8d !important;
    box-shadow: 0 0 16px rgba(255, 45, 141, 0.75), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  }
}

/* Button Component Standards (Touch-target friendly >= 44px) */
.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(44px, 3.2vw, 50px);
  padding: 10px clamp(18px, 1.8vw, 26px);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}

.primary {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 6px 20px rgba(255, 45, 141, 0.35);
}

.primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 45, 141, 0.5);
}

.primary:active {
  transform: translateY(1px);
}

.secondary {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
}

.secondary:hover {
  background: var(--color-surface-hover);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.secondary:active {
  transform: translateY(1px);
}

.watchlist-heart {
  color: var(--color-accent);
  font-size: 1.12em;
  line-height: 1;
}

/* ==========================================================================
   7. CONTENT SECTIONS & HEADINGS
   ========================================================================== */
.content-section {
  padding-block: clamp(32px, 4vw, 64px);
}

#continue-section {
  padding-block: clamp(18px, 2vw, 28px);
  background: #07080a !important;
}

#continue-section .section-heading {
  margin-bottom: clamp(12px, 1.3vw, 18px);
}

#continue-section .section-heading h2 {
  font-size: var(--font-size-xl);
}

#continue-section .eyebrow,
.continue-card .eyebrow {
  color: #94a3b8 !important;
}

#continue-section:not(.hidden) + #browser {
  padding-top: clamp(16px, 2vw, 28px);
}

.topbar-inner,
body.home-topbar-overlay .topbar-inner,
body:not(.home-topbar-overlay) .topbar-inner,
body.detail-view .topbar-inner {
  min-height: clamp(48px, 3.4vw, 56px);
}

body:not(.home-topbar-overlay) #browser {
  padding-top: clamp(8px, 1.2vw, 16px);
}

.listing-back-row {
  display: none !important;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(18px, 2vw, 32px);
}

.section-heading.has-filter-toggle {
  align-items: stretch;
  margin-bottom: 12px;
}

.section-heading.has-filter-toggle .heading-text {
  display: grid;
  grid-template-rows: min-content minmax(44px, 1fr);
}

.section-heading.has-filter-toggle .heading-text h2 {
  align-self: center;
}

.list-filter-panel {
  margin-top: calc(var(--space-3) * -1);
}

.list-filter-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.list-filter-heading .eyebrow {
  color: var(--color-accent);
}

.section-heading h2 {
  margin: 4px 0 0;
  font-size: var(--font-size-2xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
}

.listing-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.listing-actions.has-filter-toggle {
  display: grid;
  grid-template-rows: min-content minmax(44px, 1fr);
  align-items: center;
  justify-items: end;
}

.count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.btn-toggle-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all var(--motion-fast) var(--ease-standard);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.btn-toggle-filter:hover {
  color: #fff;
  border-color: rgba(255, 123, 187, 0.65);
  background: rgba(245, 77, 154, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 45, 141, 0.25);
}

.btn-toggle-filter:focus-within {
  color: #fff;
  border-color: rgba(255, 123, 187, 0.65);
  background: rgba(245, 77, 154, 0.12);
  box-shadow: 0 0 16px rgba(255, 45, 141, 0.28);
}

.btn-toggle-filter:active {
  transform: translateY(0);
}

.btn-toggle-filter.is-active {
  color: #ff98c9;
  border-color: var(--color-accent);
  background: rgba(255, 45, 141, 0.14);
  box-shadow: 0 0 16px rgba(255, 45, 141, 0.28);
}

.btn-toggle-filter .filter-btn-icon {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform var(--motion-fast);
}

.btn-toggle-filter:hover .filter-btn-icon {
  transform: scale(1.12);
}

.btn-toggle-filter .sort-prefix {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: inherit;
  pointer-events: none;
  white-space: nowrap;
}

.sort-dropdown-wrap {
  position: relative;
  display: inline-flex;
}

.sort-dropdown-wrap.hidden {
  display: none !important;
}

.sort-current-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
}

.sort-dropdown-wrap .sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  transform: translateY(8px);
  min-width: 175px;
  z-index: 60;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  transition: opacity var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-emphasized),
              visibility var(--motion-fast);
}

.sort-dropdown-wrap.is-open .sort-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sort-dropdown-wrap.is-open .filter-arrow {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.sort-dropdown-wrap.is-open .btn-toggle-filter {
  color: #fff;
  border-color: rgba(255, 123, 187, 0.65);
  background: rgba(245, 77, 154, 0.14);
}

.sort-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border: 0;
  white-space: nowrap;
  transition: all var(--motion-fast);
}

.sort-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateX(2px);
}

.sort-menu-item.active {
  background: rgba(245, 77, 154, 0.16);
  color: #ff80bc;
  font-weight: 700;
}

.btn-toggle-filter .filter-arrow {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: transform var(--motion-fast) var(--ease-standard), color var(--motion-fast);
}

.btn-toggle-filter:hover .filter-arrow {
  color: #fff;
}

.btn-toggle-filter.is-active .filter-arrow {
  color: var(--color-accent);
}

.filter-panel.is-collapsed {
  display: none !important;
}

.filter-panel.is-open {
  animation: filter-panel-expand 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes filter-panel-expand {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .section-heading {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .section-heading.has-filter-toggle {
    align-items: center;
  }
  .listing-actions,
  .listing-actions.has-filter-toggle {
    display: flex;
    align-items: center;
    margin-left: auto;
  }
  .btn-toggle-filter {
    padding: 6px 10px;
    gap: 4px;
  }
  .btn-toggle-filter .sort-prefix {
    display: none;
  }
}

/* ==========================================================================
   8. FLUID MOVIE GRID & CARDS
   ========================================================================== */
/* Fluid Movie Grid: strictly 2-columns on mobile, scaling up cleanly */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px) clamp(10px, 1.4vw, 20px);
}

@media (min-width: 480px) {
  .movie-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .movie-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .movie-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(16px, 1.6vw, 28px) clamp(10px, 1.1vw, 16px);
  }
}

@media (min-width: 1920px) {
  .movie-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 28px 18px;
  }
}

/* Movie Card Standard */
.movie-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  transition: transform var(--motion-base) var(--ease-emphasized);
}

.movie-card:hover {
  z-index: 20;
  transform: none;
}

body.is-scrolling .movie-card {
  pointer-events: none;
}

body.is-scrolling .movie-card:hover {
  transform: none !important;
}

body.is-scrolling .movie-card:hover .poster-wrap img {
  transform: none !important;
}

/* Poster Aspect Ratio 2:3 */
.poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  isolation: isolate;
}

.poster-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--motion-slow) var(--ease-emphasized);
}

.movie-card:hover .poster-wrap {
  border-color: var(--color-border-strong);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

.movie-card:hover .poster-wrap img {
  transform: scale(1.03);
}

/* Episode Badge - Ultra Compact Knockout (Transparent text showing poster colors) */
.episode-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 4;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 4.5px;
  border-radius: 2px;
  background: #ffffff;
  color: #000000;
  mix-blend-mode: screen;
  border: none;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.3px;
  line-height: 1;
  pointer-events: none;
}

/* Compact Bookmark Button in Movie Card - Perfectly aligned with episode-badge */
.card-bookmark {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 15px;
  min-height: 15px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-full);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff;
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform var(--motion-fast) var(--ease-emphasized), color var(--motion-fast), filter var(--motion-fast);
}

.card-bookmark::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
  cursor: pointer;
}

.card-bookmark .bookmark-icon,
.card-bookmark .watchlist-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
  transition: color var(--motion-fast), transform var(--motion-fast), filter var(--motion-fast);
}

.card-bookmark:hover,
.card-bookmark:focus-visible,
.card-bookmark:active {
  transform: scale(1.18);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ff3333 !important;
}

.card-bookmark.is-bookmarked {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.card-bookmark.is-bookmarked .bookmark-icon,
.card-bookmark.is-bookmarked .watchlist-heart {
  color: #ff3333 !important;
  text-shadow: 0 0 10px rgba(255, 51, 51, 0.9), 0 0 20px rgba(255, 51, 51, 0.6) !important;
  filter: drop-shadow(0 0 5px rgba(255, 51, 51, 0.85)) !important;
  display: inline-block;
  transform: scale(1.08);
}

.card-bookmark.is-bookmarked:hover,
.card-bookmark.is-bookmarked:focus-visible,
.card-bookmark.is-bookmarked:active {
  transform: scale(1.18);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.card-bookmark.is-bookmarked:hover .bookmark-icon,
.card-bookmark.is-bookmarked:focus-visible .bookmark-icon,
.card-bookmark.is-bookmarked:active .bookmark-icon,
.card-bookmark.is-bookmarked:hover .watchlist-heart,
.card-bookmark.is-bookmarked:focus-visible .watchlist-heart,
.card-bookmark.is-bookmarked:active .watchlist-heart {
  color: #ff3333 !important;
  text-shadow: 0 0 14px rgba(255, 51, 51, 1), 0 0 28px rgba(255, 51, 51, 0.75) !important;
  filter: drop-shadow(0 0 7px rgba(255, 51, 51, 0.9)) !important;
  display: inline-block;
  transform: scale(1.12);
}

/* Play Badge Overlay */
.play-badge {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: opacity var(--motion-fast);
}

.play-badge span {
  display: grid;
  place-items: center;
  width: clamp(42px, 4vw, 54px);
  height: clamp(42px, 4vw, 54px);
  border-radius: var(--radius-full);
  background: var(--color-accent-glass);
  border: 0;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 6px 20px rgba(255, 45, 141, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: scale(0.85);
  transition: transform var(--motion-fast) var(--ease-emphasized);
}

.movie-card:hover .play-badge {
  opacity: 1;
}

.movie-card:hover .play-badge span {
  transform: scale(1);
}

/* Card Meta Information */
.movie-meta {
  padding: 10px 2px 4px;
}

.movie-meta h3,
.movie-card .movie-meta h3,
.history-card .movie-meta h3,
.watchlist-card .movie-meta h3,
.continue-card h3,
.movie-card h3 {
  margin: 0 0 4px;
  font-family: var(--font-family-heading) !important;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #E36B98;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-meta p {
  margin: 0;
  font-size: var(--font-size-xs);
  color: #ffffff !important;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-meta p:first-of-type,
.movie-meta .movie-original-name {
  color: #ffffff !important;
}

.movie-meta .movie-meta-sub {
  color: #ffffff !important;
}

/* Watchlist card action button */
.watchlist-card-actions {
  margin-top: 8px;
}

.watchlist-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}

.watchlist-remove-btn:hover {
  border-color: var(--color-accent);
  background: rgba(255, 45, 141, 0.15);
  color: var(--color-accent);
}

/* ==========================================================================
   Collection & Watch History Toolbar & Cards
   ========================================================================== */
.collection-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--space-4);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
}

.collection-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-base);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
}

.collection-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--motion-fast);
}

.collection-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}

.collection-tab.active {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 45, 141, 0.4);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.collection-tab.active .tab-badge {
  background: rgba(255, 255, 255, 0.25);
}

.collection-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--motion-fast);
}

.collection-clear-btn:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* History Card Specifics */
.history-sub {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-xs);
  margin-top: 2px !important;
}

.history-ep {
  color: #ff8fc8;
}

.history-time {
  color: var(--color-text-muted) !important;
  font-size: var(--font-size-2xs);
  margin-top: 2px !important;
}

.history-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.history-resume-btn {
  flex: 1;
  min-height: 34px !important;
  padding: 6px 12px !important;
  font-size: var(--font-size-xs) !important;
  border-radius: 6px !important;
}

.history-remove-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px !important;
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--motion-fast);
}

.history-remove-btn:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* ==========================================================================
   9. HOME RAILS & HORIZONTAL TRACKS
   ========================================================================== */
.home-rails {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
}

.home-rail {
  min-width: 0;
  position: relative;
  z-index: 1;
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
}

.home-rail:hover,
.home-rail:focus-within {
  z-index: 10;
}

.rail-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(6px, 0.9vw, 10px);
  background: transparent;
  box-shadow: none;
}

.rail-heading h2 {
  margin: 4px 0 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.rail-cyan .rail-heading h2 { color: #38bdf8; }
.rail-pink .rail-heading h2 { color: #f472b6; }
.rail-violet .rail-heading h2 { color: #a78bfa; }
.rail-amber .rail-heading h2 { color: #fbbf24; }
.rail-emerald .rail-heading h2 { color: #34d399; }

.rail-see-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  transition: color var(--motion-fast), transform var(--motion-fast);
}

.rail-see-all:hover {
  color: var(--color-text-primary);
  transform: translateX(2px);
}

.rail-see-all span {
  font-size: 16px;
}

.rail-shell {
  position: relative;
  min-width: 0;
  z-index: 1;
}

.rail-track {
  display: grid;
  grid-auto-flow: column;
  /* Tăng mỗi thẻ phim lớn thêm 1cm; poster tự tăng chiều cao theo tỉ lệ 2:3. */
  grid-auto-columns: clamp(calc(140px + 1cm), calc(16vw + 1cm), calc(230px + 1cm));
  gap: clamp(10px, 1.2vw, 18px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 4px 6px;
  margin-top: -8px;
  scroll-behavior: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.rail-track::-webkit-scrollbar {
  display: none;
}

.rail-card {
  scroll-snap-align: start;
  position: relative;
}

.rail-card:hover,
.rail-card:focus-visible {
  z-index: 20;
}

.rail-arrow {
  position: absolute;
  top: calc(50% - 10px);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.5vw, 48px);
  height: clamp(38px, 3.5vw, 48px);
  padding: 0;
  border-radius: 50%;
  background: rgba(8, 10, 15, 0.45);
  border: 1px solid var(--color-border-strong);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease, background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.home-rail .rail-arrow {
  opacity: 0.38;
  visibility: visible;
  pointer-events: auto;
}

.rail-shell:hover .rail-arrow,
.home-rail:hover .rail-arrow,
.rail-shell:focus-within .rail-arrow,
.rail-arrow:focus-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.rail-arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.rail-arrow:hover,
.rail-arrow:focus-visible {
  background: var(--color-accent-glass);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(255, 45, 141, 0.35);
  transform: translateY(-50%) scale(1.08);
  opacity: 1 !important;
}

.rail-arrow:active {
  transform: translateY(-50%) scale(0.94);
  background: rgba(255, 45, 141, 0.5) !important;
}

.rail-prev {
  left: 6px;
  padding-bottom: 3px;
  padding-right: 2px;
}

.rail-next {
  right: 6px;
  padding-bottom: 3px;
  padding-left: 2px;
}

.rail-arrow:disabled {
  display: none !important;
}

/* On mobile & touch devices: always show responsive, interactive arrow buttons */
@media (hover: none) and (pointer: coarse), (max-width: 860px) {
  .rail-arrow {
    display: inline-flex !important;
    opacity: 0.88 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 36px;
    height: 36px;
    font-size: 22px;
    background: rgba(11, 13, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
  }
  .rail-arrow:active {
    background: var(--color-accent-pink, #ff2d8d) !important;
    transform: translateY(-50%) scale(0.92);
  }
  .rail-prev {
    left: 4px;
  }
  .rail-next {
    right: 4px;
  }
}

/* See All Card */
.see-all-card {
  min-height: 100%;
}

.see-all-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  padding: var(--space-4);
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
  background: transparent;
  text-align: center;
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

.see-all-poster span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-accent);
  font-size: 22px;
  margin-bottom: 8px;
  transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}

.see-all-poster strong {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.see-all-poster small {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
}

.see-all-card:hover .see-all-poster,
.see-all-card:focus-visible .see-all-poster {
  border-color: transparent;
  background: var(--color-accent-glass-soft);
  box-shadow: 0 12px 30px rgba(255, 45, 141, 0.2);
}

.see-all-card:hover .see-all-poster span,
.see-all-card:focus-visible .see-all-poster span {
  background: var(--color-accent-glass);
  color: #fff;
  box-shadow: 0 6px 20px rgba(255, 45, 141, 0.35);
}

/* ==========================================================================
   10. TOOLBAR, FILTERS & OPTIONS GRID
   ========================================================================== */
.filter-panel {
  --filter-control-width: clamp(180px, 14vw, 230px);
  --filter-control-height: 42px;
  position: relative;
  z-index: 12;
  overflow: visible;
  margin-bottom: var(--space-5);
  padding: clamp(12px, 1.1vw, 18px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.filter-field {
  width: 100%;
}

@media (min-width: 600px) {
  .filter-grid {
    grid-template-columns: repeat(2, var(--filter-control-width));
    justify-content: start;
  }

  .filter-field {
    width: var(--filter-control-width);
  }
}

@media (min-width: 1024px) {
  .filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.field label {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.filter-field > label {
  font-size: var(--font-size-sm);
}

.field select,
.filter-select {
  width: 100%;
  min-height: 42px;
  height: 42px;
  padding: 0 34px 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(18, 21, 28, 0.85);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.field select:hover,
.field select:focus,
.filter-select:hover,
.filter-select:focus {
  border-color: var(--color-accent);
  background-color: rgba(25, 29, 38, 0.95);
  box-shadow: 0 0 12px rgba(255, 45, 141, 0.2);
}

.filter-select option {
  background: #11141c;
  color: #fff;
  padding: 8px 12px;
}

.filter-dropdown {
  position: relative;
  width: 100%;
}

.filter-dropdown[open] {
  z-index: 40;
}

.filter-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--filter-control-height);
  min-height: var(--filter-control-height);
  padding: 0 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

.filter-dropdown summary::-webkit-details-marker {
  display: none;
}

.filter-dropdown summary:hover,
.filter-dropdown[open] summary {
  border-color: var(--color-accent);
  background: var(--color-surface-hover);
  box-shadow: 0 0 12px rgba(255, 45, 141, 0.18);
}

.filter-chevron {
  color: var(--color-text-muted);
  transition: transform var(--motion-fast) var(--ease-standard), color var(--motion-fast);
}

.filter-dropdown[open] .filter-chevron {
  color: var(--color-accent);
  transform: rotate(180deg);
}

.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 100%;
  max-height: 250px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: rgba(13, 15, 20, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(20px);
  animation: dropdown-enter var(--motion-fast) var(--ease-emphasized) both;
}

/* The dropdown is intentionally elevated above the result cards below it. */
.movie-grid {
  position: relative;
  z-index: 1;
}

.filter-dropdown-menu button {
  display: block;
  width: 100%;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: left;
  transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}

.filter-dropdown-menu button:hover,
.filter-dropdown-menu button[aria-selected="true"] {
  color: var(--color-text-primary);
  background: var(--color-accent-dim);
  transform: translateX(2px);
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.filter-actions .primary,
.filter-actions .secondary {
  width: auto;
  min-width: 96px;
  max-width: 125px;
  height: var(--filter-control-height);
  min-height: var(--filter-control-height);
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 600px) {
  .filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

@media (min-width: 1200px) {
  .filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
  }

  .filter-panel .list-filter-heading {
    width: 100%;
    margin-bottom: 0;
  }

  .filter-panel .filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .filter-panel .filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 0;
    padding-bottom: 0;
    flex-shrink: 0;
  }

  .filter-panel .filter-field {
    width: 100%;
    min-width: 0;
  }
}

/* Options Grid for Genres, Countries, Years */
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  margin-top: var(--space-3);
}

@media (min-width: 600px) {
  .option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .option-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .option-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.option-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}

.option-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-hover);
  transform: translateY(-2px);
}

.option-btn-special {
  border-color: rgba(255, 45, 141, 0.45);
  background: rgba(255, 45, 141, 0.12);
  color: #fff;
}

.option-btn-special:hover {
  border-color: var(--color-accent);
  background: rgba(255, 45, 141, 0.22);
  box-shadow: 0 4px 20px rgba(255, 45, 141, 0.35);
}

.genre-highlight {
  color: var(--color-accent) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   11. PAGINATION
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(28px, 4vw, 56px);
}

.pagination button,
.page-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px clamp(14px, 1.5vw, 22px);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.pagination button {
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.pagination button:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}

.pagination button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==========================================================================
   12. CONTINUE WATCHING CARD
   ========================================================================== */
#continue-card {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.continue-card {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
  width: fit-content;
  max-width: min(390px, 100%);
  padding: 12px 16px 12px 12px;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #090a0e !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer;
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}

.continue-card:hover {
  background: #0f1016 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-2px);
}

.continue-card img {
  width: 96px;
  min-width: 96px;
  height: 142px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px !important;
  flex-shrink: 0;
}

.continue-card .continue-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

.continue-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.continue-card .eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.continue-card h3 {
  margin: 2px 0 4px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

.continue-card p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.continue-card .btn-play-badge {
  margin-top: 10px;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-gradient) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(245, 77, 154, 0.35) !important;
  cursor: pointer;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}

.continue-card .btn-play-badge:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(245, 77, 154, 0.55) !important;
}

@media (max-width: 640px) {
  .continue-card {
    width: 100%;
    max-width: 100%;
    gap: 12px;
    padding: 10px 14px 10px 10px;
  }
  .continue-card img {
    width: 84px;
    min-width: 84px;
    height: 124px;
  }
}

/* ==========================================================================
   13. MOVIE DETAIL PAGE (DUAL IMAGES: THUMB_URL & POSTER_URL)
   ========================================================================== */
.detail-page {
  position: relative;
  min-height: calc(100vh - 84px);
  background: var(--color-surface-base);
  padding-bottom: clamp(60px, 8vw, 100px);
}

.detail-page-topbar {
  height: 0;
}

.detail-back,
.detail-back-floating {
  display: none !important;
}

/* Detail 2-Column Responsive Layout */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3.5vw, 60px);
}

/* Left Sidebar: thumb_url portrait image & metadata */
.movie-sidebar {
  position: sticky;
  top: 100px;
  z-index: 10;
  min-width: 0;
}

.sidebar-card {
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.sidebar-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-base);
}

.sidebar-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar-quality {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  background: rgba(7, 8, 10, 0.85);
  border: 1px solid var(--color-border-strong);
  color: #fff;
  font-size: var(--font-size-2xs);
  font-weight: 800;
}

.detail-page .sidebar-quality,
.detail-page .wide-frame-badge {
  display: none;
}

.sidebar-card h1 {
  margin: 18px 0 4px;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: 900;
  line-height: 1.2;
}

.sidebar-original {
  margin: 0 0 14px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sidebar-facts,
.sidebar-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.sidebar-facts span,
.sidebar-genres span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs);
  font-weight: 600;
}

.sidebar-genres span {
  color: #f472b6;
}

.sidebar-facts .fact-year {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.1);
}

.sidebar-facts .fact-episodes {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(167, 139, 250, 0.1);
}

.sidebar-facts .fact-language {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.1);
}

.sidebar-progress {
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 179, 0, 0.35);
  background: rgba(255, 179, 0, 0.08);
  color: #fbbf24;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.sidebar-description {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
}

.sidebar-description > span {
  font-weight: 800;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary);
}

.sidebar-description p {
  margin: 8px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.7;
}

.sidebar-metadata {
  margin-top: 16px;
  border-top: 1px solid var(--color-border-default);
}

.sidebar-metadata div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: var(--font-size-xs);
}

.sidebar-metadata dt {
  color: var(--color-text-muted);
  line-height: 1.5;
}

.sidebar-metadata dd {
  margin: 0;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* Right Stage: poster_url wide banner frame & episode console */
.detail-stage {
  min-width: 0;
}

/* Wide Frame Banner with 16:9 Landscape Poster */
.detail-wide-frame {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.wide-frame-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  overflow: hidden;
}

.wide-frame-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform var(--motion-slow) var(--ease-emphasized);
}

.wide-frame-shell:hover .wide-frame-img {
  transform: scale(1.03);
}

.wide-frame-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 8, 10, 0.9) 0%, rgba(7, 8, 10, 0.3) 50%, transparent 100%);
  pointer-events: none;
}

.wide-frame-content {
  position: absolute;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  left: clamp(16px, 2vw, 28px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.wide-frame-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(7, 8, 10, 0.8);
  color: #fff;
  font-size: var(--font-size-2xs);
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.wide-frame-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  border: 0;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(255, 45, 141, 0.5);
  cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast);
}

.wide-frame-play:hover {
  background: var(--color-accent-hover);
  transform: scale(1.04);
}

/* Detail Stage Intro */
.detail-stage-intro {
  margin-bottom: var(--space-4);
}

.detail-stage-intro h2 {
  margin: 8px 0 12px;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -1px;
}

.detail-stage-intro p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.detail-primary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.detail-tabs {
  display: none; /* Only show on mobile */
}

.watch-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.watch-tabs [data-watch-tab] { position: relative; min-height: 48px; padding: 12px 8px; text-align: center; transition: color 220ms ease, background-color 220ms ease; }
.watch-tabs [data-watch-tab]::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--color-accent); transform: scaleX(0); transition: transform 260ms ease; }
.watch-tabs [data-watch-tab].is-active::after { transform: scaleX(1); }
.watch-footer-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.watch-footer-btn { display: inline-grid; width: 38px; height: 38px; min-width: 38px; min-height: 38px; padding: 7px; place-items: center; }

/* Episode Console */
.episode-console {
  margin-top: var(--space-5);
  padding: clamp(16px, 2.5vw, 32px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4);
}

.source-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
  color: #34d399;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.source-notice span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
  flex-shrink: 0;
}

.console-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.console-heading h3 {
  margin: 4px 0 0;
  font-size: var(--font-size-md);
  font-weight: 800;
}

.console-heading span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.detail-version-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-4);
}

.detail-version-tabs .version-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
}

.version-tab {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-base);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}

.version-tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.version-tab.active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.episode-heading {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}

.detail-episodes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.episode {
  min-height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.episode:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}

.episode.current {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.detail-episodes .episode {
  flex: 0 0 clamp(96px, 9vw, 126px);
  min-height: 38px;
  padding: 8px 10px;
}

/* Detail Loading State */
.detail-page-loading {
  min-height: 60vh;
  padding: var(--space-5);
  display: grid;
  place-content: center;
}

.detail-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--color-text-secondary);
}

.spinner-ring {
  width: 44px;
  height: 44px;
  border: 4px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spinner 0.8s linear infinite;
}

.kinetic-text-loader {
  display: grid;
  justify-items: center;
  gap: 0;
  color: rgba(255, 255, 255, 0.88);
}

.kinetic-text-loader-art {
  position: relative;
  transform: scale(0.75);
  transform-origin: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.kinetic-text-loader-art p {
  position: relative;
  margin: 0;
  color: inherit;
  font-size: 3.75rem;
  line-height: 1.2;
  white-space: nowrap;
}

.kinetic-text-loader-art p > span {
  position: relative;
  display: inline-block;
  letter-spacing: 8px;
}

.kinetic-text-loader-dot {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 85px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: ktl-dot-move 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
}

.kinetic-text-loader-letter-l {
  transform-origin: 100% 70%;
  animation: ktl-letter-bounce 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
}

.kinetic-text-loader-letter-i {
  transform-origin: 100% 70%;
  animation: ktl-letter-stretch 1800ms cubic-bezier(0.25, 0.23, 0.73, 0.75) infinite;
}

.kinetic-text-loader--compact .kinetic-text-loader-art {
  transform: scale(0.52);
}

@keyframes ktl-dot-move {
  0%, 100% { transform: rotate(180deg) translate(-80px, -10px) rotate(-180deg); }
  50% { transform: rotate(0deg) translate(-81px, 10px) rotate(0deg); }
}

@keyframes ktl-letter-stretch {
  0%, 100% { transform: scale(1, 0.35); transform-origin: 100% 75%; }
  8%, 28% { transform: scale(1, 1.4); transform-origin: 100% 67%; }
  37% { transform: scale(1, 0.875); transform-origin: 100% 75%; }
  46% { transform: scale(1, 1.03); transform-origin: 100% 75%; }
  50%, 97% { transform: scale(1); transform-origin: 100% 75%; }
}

@keyframes ktl-letter-bounce {
  0%, 45%, 70%, 100% { transform: scaleY(1.11); }
  49% { transform: scaleY(0.31); }
  50% { transform: scaleY(0.16); }
  53% { transform: scaleY(0.63); }
  60% { transform: scaleY(1.275); }
  68% { transform: scaleY(1.04); }
}

@media (min-width: 768px) {
  .kinetic-text-loader-art { transform: scale(0.9); }
}

@media (min-width: 1024px) {
  .kinetic-text-loader-art { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-text-loader-dot,
  .kinetic-text-loader-letter-l,
  .kinetic-text-loader-letter-i { animation: none; }
}

/* Tablet & Mobile Detail Responsive Adjustments */
@media (max-width: 860px) {
  .detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .movie-sidebar {
    position: static;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

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

  .sidebar-poster-wrap {
    width: 100%;
    aspect-ratio: 2 / 3;
  }

  .detail-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: var(--space-4);
    border-bottom: 1px solid var(--color-border-default);
  }

  .detail-tabs button {
    min-height: 48px;
    font-weight: 800;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
  }

  .detail-tabs button.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
}

/* ==========================================================================
   14. VIDEO PLAYER MODAL
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vw, 24px);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard);
  overscroll-behavior: contain !important;
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal.hidden {
  display: none !important;
}

.modal-shell {
  position: relative;
  width: min(1160px, 100%);
  max-height: 92vh;
  max-height: 92dvh;
  overflow: auto;
  overscroll-behavior: contain !important;
  border-radius: var(--radius-xl);
  border: none !important;
  background: var(--color-surface-raised);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
}

#player-modal .player-shell,
#player-modal .modal-shell,
.player-shell,
#movie-detail-modal .modal-shell {
  background: #000000 !important;
  border: none !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.95) !important;
}

.player-header {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #000000 !important;
  border: none !important;
  border-bottom: none !important;
}

.player-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.player-nav-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0 !important;
  border-radius: 6px !important;
  overflow: hidden;
}

.player-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  border: none !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

.player-nav-btn img, .watch-footer-btn img { width: 22px; height: 22px; object-fit: contain; filter: invert(1); }
.player-prev img, #watch-prev img { transform: scaleX(-1); }

.player-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.player-prev {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: none !important;
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  transform: none !important;
}

.player-prev:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  transform: none !important;
}

.player-next {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  transform: none !important;
}

.player-next:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: none !important;
}

.player-prev:only-child,
.player-next:only-child,
.player-prev[hidden] + .player-next,
.player-prev.hidden + .player-next,
.player-nav-group:has(.player-next[hidden]) .player-prev,
.player-nav-group:has(.player-next.hidden) .player-prev {
  border-radius: 6px !important;
}

.player-nav-group:has(#player-prev[hidden]):has(#player-next[hidden]),
.player-nav-group:has(#player-prev.hidden):has(#player-next.hidden) {
  display: none !important;
}

#player-modal.is-mini-player .player-nav-group,
#player-modal.is-lights-off .player-nav-group {
  display: none !important;
  pointer-events: none !important;
}

.player-lights-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.85));
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  transition: all var(--motion-fast);
}

.player-lights-btn .lights-icon {
  font-size: 16px;
  line-height: 1;
  transition: transform var(--motion-fast), filter var(--motion-fast);
}

.player-lights-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff;
  border: none !important;
}

.player-lights-btn:hover .lights-icon {
  transform: scale(1.15);
}

.player-lights-btn.is-active {
  background: rgba(250, 204, 21, 0.22) !important;
  border: none !important;
  color: #fde047;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.28);
}

.player-lights-btn.is-active .lights-icon {
  filter: drop-shadow(0 0 5px #facc15);
  transform: scale(1.1);
}

.player-lights-btn.is-active:hover {
  background: rgba(250, 204, 21, 0.32) !important;
  border: none !important;
}

/* Player Options Button & Dropdown Menu */
.player-options-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 45;
}

.player-options-btn {
  position: relative;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.85));
  cursor: pointer;
  user-select: none;
  transition: all var(--motion-fast);
}

.player-options-btn::after {
  content: "Ghim nổi trên máy tính (Always-on-Top)";
  position: absolute;
  top: calc(100% + 10px);
  bottom: auto;
  right: 0;
  left: auto;
  transform: translateY(-4px);
  background: rgba(12, 14, 20, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 16px rgba(255, 45, 141, 0.35);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
}

.player-options-btn::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  bottom: auto;
  right: 13px;
  left: auto;
  transform: translateY(-4px);
  border-width: 0 5px 6px 5px;
  border-style: solid;
  border-color: transparent transparent rgba(12, 14, 20, 0.98) transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
}

.player-options-btn:hover::after,
.player-options-btn:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.player-options-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff;
  border: none !important;
  box-shadow: 0 0 12px rgba(255, 45, 141, 0.25);
  transform: translateY(-1px);
}

.player-options-btn.is-active {
  background: rgba(255, 45, 141, 0.25) !important;
  border: none !important;
  color: #ff4d9d;
  box-shadow: 0 0 14px rgba(255, 45, 141, 0.35);
}

.pip-tv-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
  transition: transform var(--motion-fast), filter var(--motion-fast);
}

.player-options-btn:hover .pip-tv-icon,
.player-options-btn.is-active .pip-tv-icon {
  filter: drop-shadow(0 0 8px rgba(255, 45, 141, 0.75));
  transform: scale(1.1);
}

.options-icon-badge .pip-tv-icon {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 4px rgba(255, 45, 141, 0.5));
}

.player-restore-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 45, 141, 0.22) !important;
  border: none !important;
  color: #ff4d9d;
  cursor: pointer;
  user-select: none;
  transition: all var(--motion-fast);
}

.player-restore-btn:hover {
  background: #ff2d8d !important;
  border: none !important;
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 45, 141, 0.5);
  transform: scale(1.08);
}

/* Options Modal Overlay (inside player) */
.player-shell {
  position: relative !important;
}

.player-options-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(5, 7, 12, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  border-radius: inherit;
  animation: optionsFadeIn 0.2s ease;
}

.player-options-overlay.hidden {
  display: none !important;
}

@keyframes optionsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.player-options-dialog {
  position: relative;
  width: min(560px, 100%);
  background: #0d1017;
  border: none !important;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 45, 141, 0.2);
  overflow: hidden;
  animation: optionsPopUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes optionsPopUp {
  from {
    transform: scale(0.92) translateY(12px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.options-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.options-dialog-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.options-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 45, 141, 0.15);
  border: 1px solid rgba(255, 45, 141, 0.35);
  color: #ff2d8d;
}

.options-dialog-title {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.2px;
}

.options-dialog-body {
  padding: 20px 22px 24px;
}

.options-dialog-desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
}

.pip-options-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pip-option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s ease;
}

.pip-option-card:hover {
  background: rgba(255, 45, 141, 0.07);
  border-color: rgba(255, 45, 141, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 45, 141, 0.2);
}

.pip-card-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
}

.pip-card-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}

.pip-card-icon-box.icon-web {
  background: rgba(255, 45, 141, 0.15);
  border: 1px solid rgba(255, 45, 141, 0.35);
  color: #ff2d8d;
}

.pip-card-icon-box.icon-desktop {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.pip-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pip-card-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pip-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.pip-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.pip-pill-web {
  background: rgba(255, 45, 141, 0.2);
  color: #ff85be;
  border: 1px solid rgba(255, 45, 141, 0.35);
}

.pip-pill-desktop {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.pip-card-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #94a3b8;
}

.pip-card-desc strong {
  color: #e2e8f0;
}

.pip-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.pip-option-card:hover .pip-action-btn {
  background: #ff2d8d;
  border-color: #ff2d8d;
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 45, 141, 0.4);
}

/* Mini Player Mode (In-Page Floating Video) */
#player-modal.is-mini-player {
  position: fixed !important;
  right: 24px;
  bottom: 24px;
  left: auto;
  top: auto;
  width: 440px;
  height: 248px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  z-index: 99990 !important;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  padding: 0 !important;
  transition: none !important;
}

#player-modal.is-mini-player .player-shell {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  pointer-events: auto !important;
  background: #000000 !important;
  border: none !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.88), 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  animation: miniPlayerShrink 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  min-width: 240px;
  min-height: 135px;
}

@keyframes miniPlayerShrink {
  from {
    transform: scale(1.14) translateY(28px);
    opacity: 0.5;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Floating overlay header inside mini-player: ẩn các button khi chuột ở ngoài, hiển thị khi di chuột vào popup */
#player-modal.is-mini-player .player-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 60 !important;
  padding: 8px 10px !important;
  background: linear-gradient(180deg, rgba(3, 5, 10, 0.75) 0%, transparent 100%) !important;
  border: none !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
}

#player-modal.is-mini-player:hover .player-header,
#player-modal.is-mini-player .player-shell:hover .player-header {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hide movie title completely in mini-player */
#player-modal.is-mini-player .player-header > div:first-child,
#player-modal.is-mini-player .player-title-box,
#player-modal.is-mini-player .player-header h2,
#player-modal.is-mini-player .player-header .eyebrow {
  display: none !important;
}

/* 4 Corner Resize Handles (Strictly proportional 16:9, completely borderless & transparent) */
.player-corner-handle {
  display: none;
}

#player-modal.is-mini-player .player-corner-handle,
.player-overlay.is-mini-player .player-corner-handle {
  display: block !important;
  position: absolute !important;
  width: 32px !important;
  height: 32px !important;
  z-index: 55 !important;
  touch-action: none !important;
  user-select: none !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#player-modal.is-mini-player .player-corner-handle.corner-tl,
.player-overlay.is-mini-player .player-corner-handle.corner-tl {
  top: 0 !important;
  left: 0 !important;
  cursor: nwse-resize !important;
}

#player-modal.is-mini-player .player-corner-handle.corner-tr,
.player-overlay.is-mini-player .player-corner-handle.corner-tr {
  display: none !important;
  pointer-events: none !important;
}

#player-modal.is-mini-player .player-corner-handle.corner-bl,
.player-overlay.is-mini-player .player-corner-handle.corner-bl {
  bottom: 0 !important;
  left: 0 !important;
  cursor: nesw-resize !important;
}

#player-modal.is-mini-player .player-corner-handle.corner-br,
.player-overlay.is-mini-player .player-corner-handle.corner-br {
  bottom: 0 !important;
  right: 0 !important;
  cursor: nwse-resize !important;
}

#player-modal.is-mini-player .player-corner-handle:hover,
#player-modal.is-resizing .player-corner-handle,
.player-overlay.is-mini-player .player-corner-handle:hover,
.player-overlay.is-resizing .player-corner-handle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Drag overlay covering the entire video in mini mode (no video click/pause/seek) */
.player-mini-drag-overlay {
  display: none;
}

#player-modal.is-mini-player .player-mini-drag-overlay,
.player-overlay.is-mini-player .player-mini-drag-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 35 !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  background: transparent !important;
}

#player-modal.is-mini-player .player-mini-drag-overlay:active,
#player-modal.is-dragging .player-mini-drag-overlay,
.player-overlay.is-mini-player .player-mini-drag-overlay:active,
.player-overlay.is-dragging .player-mini-drag-overlay {
  cursor: grabbing !important;
}
.player-overlay.is-mini-player .player-mini-drag-overlay:active,
.player-overlay.is-dragging .player-mini-drag-overlay {
  cursor: grabbing !important;
}

/* Floating actions directly over video in top-right */
#player-modal.is-mini-player .player-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  pointer-events: auto !important;
  margin-left: auto !important;
  z-index: 70 !important;
}

#player-modal.is-mini-player #player-prev,
#player-modal.is-mini-player #player-next,
#player-modal.is-mini-player #player-lights,
#player-modal.is-mini-player #player-options-btn,
#player-modal.is-mini-player #player-options-modal,
#player-modal.is-mini-player #player-episodes {
  display: none !important;
}

#player-modal.is-mini-player #player-restore-btn,
#player-modal.is-mini-player .modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 9999px !important;
  background: rgba(12, 14, 20, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s ease !important;
  z-index: 80 !important;
  position: relative !important;
}

#player-modal.is-mini-player #player-restore-btn:hover {
  background: #ff2d8d !important;
  border-color: #ff2d8d !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 12px rgba(255, 45, 141, 0.6) !important;
}

#player-modal.is-mini-player .modal-close:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
}

#player-modal.is-mini-player .video-frame {
  position: relative !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16/9 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

#player-modal.is-mini-player .video-frame iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  pointer-events: none !important;
}

/* While dragging/resizing, disable pointer-events on iframe so cursor doesn't get captured */
#player-modal.is-dragging iframe,
#player-modal.is-resizing iframe,
.player-overlay.is-dragging iframe,
.player-overlay.is-resizing iframe {
  pointer-events: none !important;
}

/* When lights off, hide options button too */
#player-modal.is-lights-off #player-options-btn,
#player-modal.is-lights-off #player-options-modal {
  display: none !important;
}

/* Hide options and mini-player only on mobile screens <= 640px */
@media (max-width: 640px) {
  #player-options-btn,
  .player-options-btn,
  #player-options-modal,
  .player-options-overlay,
  #player-restore-btn,
  .player-restore-btn {
    display: none !important;
  }
  #player-modal.is-mini-player {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(3, 4, 9, 0.74) !important;
    pointer-events: auto !important;
    padding: clamp(8px, 2vw, 24px) !important;
  }
}

.player-header .eyebrow {
  display: none !important;
}

.player-title-box {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}

.player-header h2,
#player-title,
.player-header-title {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  color: #fff;
  line-height: 1.25;
}

#player-title,
#player-title *,
.player-title-name,
.player-title-sep,
.player-title-ep {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
}

.player-title-name {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(15px, 1.35vw, 20px) !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  color: #fff !important;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

.player-title-sep {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  font-weight: 400 !important;
  opacity: 0.55 !important;
  margin: 0 clamp(6px, 0.6vw, 10px) !important;
  user-select: none;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
  color: #fff !important;
}

.player-title-ep {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: normal !important;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .player-title-box {
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
  }
  .player-title-name {
    font-size: 14px !important;
  }
  .player-title-sep {
    font-size: 12px !important;
    margin: 0 4px !important;
  }
  .player-title-ep {
    font-size: 12px !important;
  }
  .player-header-actions {
    flex-shrink: 0;
  }
}

.modal-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: background var(--motion-fast);
}

.modal-close:hover {
  background: var(--color-surface-hover);
}

.player-header .modal-close,
#player-modal .modal-close {
  border: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  font-size: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--motion-fast) !important;
}

#player-back-to-watch {
  border: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: var(--radius-full) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all var(--motion-fast) !important;
}

#player-back-to-watch:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateX(-2px) !important;
}

.player-header .modal-close:hover,
#player-modal .modal-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.player-episodes {
  padding: var(--space-4) 24px;
  max-height: 240px;
  overflow-y: auto;
}

.player-episodes:empty {
  display: none;
}

/* Confirm Modal Dialog */
.confirm-modal {
  z-index: 1100;
}

.confirm-shell {
  width: min(92vw, 420px);
  padding: clamp(22px, 4vw, 30px);
  border-radius: 22px;
  text-align: center;
  border: none !important;
  background: linear-gradient(155deg, rgba(26, 28, 40, 0.96), rgba(12, 13, 20, 0.98));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: modal-pop 240ms var(--ease-emphasized) both;
}

@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.confirm-icon {
  font-size: 38px;
  margin-bottom: 12px;
  line-height: 1;
}

.confirm-title {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.confirm-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-bottom: 22px;
  word-break: break-word;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-btn {
  flex: 1;
  min-height: 44px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: transform var(--motion-fast), filter var(--motion-fast);
}

.confirm-btn:hover {
  transform: translateY(-2px);
}

.confirm-btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fff;
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.35);
}

.confirm-btn-danger:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 10px 26px rgba(239, 68, 68, 0.5);
}

/* Settings Modal & Server Selection */
.settings-modal .modal-shell {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 0;
  border-radius: 24px;
  border: none !important;
  background: rgba(15, 17, 26, 0.94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.settings-icon-badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(245, 77, 154, 0.15);
  border: 1px solid rgba(245, 77, 154, 0.35);
  flex-shrink: 0;
}

.settings-icon-badge img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.settings-title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.settings-modal-body {
  padding: 20px 24px 24px;
}

.settings-desc {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}

.server-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.server-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.server-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 77, 154, 0.45);
  transform: translateY(-2px);
}

.server-card.is-active {
  border-color: rgba(245, 77, 154, 0.75);
  background: rgba(245, 77, 154, 0.12);
  box-shadow: 0 8px 26px rgba(245, 77, 154, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.server-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.server-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}

.server-card.is-active .server-status-dot {
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}

.server-info {
  min-width: 0;
}

.server-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.server-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.server-pill {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.server-pill-primary {
  background: rgba(245, 77, 154, 0.25);
  color: #ff8bba;
  border: 1px solid rgba(245, 77, 154, 0.4);
}

.server-pill-secondary {
  background: rgba(83, 183, 255, 0.18);
  color: #6fd0ff;
  border: 1px solid rgba(83, 183, 255, 0.35);
}

.server-detail {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.server-card-right {
  flex-shrink: 0;
}

.server-action-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
}

.server-action-badge.is-current {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.5);
  color: #4ade80;
}

.server-card:hover:not(.is-active) .server-action-badge {
  background: rgba(245, 77, 154, 0.3);
  border-color: rgba(245, 77, 154, 0.6);
  color: #fff;
}

/* Responsive Settings Modal & Cards */
.settings-modal {
  padding: clamp(12px, 3.5vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-modal .modal-shell {
  width: min(520px, calc(100vw - 28px));
  height: auto !important;
  max-height: min(88vh, calc(100vh - 60px)) !important;
  overflow-y: auto;
  margin: auto !important;
  padding: 0;
  border-radius: 24px !important;
  border: none !important;
  background: rgba(15, 17, 26, 0.96);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

@media (max-width: 580px) {
  .settings-modal {
    padding: 12px;
  }
  .settings-modal .modal-shell {
    width: min(480px, calc(100vw - 20px)) !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    border-radius: 20px !important;
  }
  .settings-modal-header {
    padding: 16px 18px 12px;
  }
  .settings-title-group {
    gap: 10px;
  }
  .settings-icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .settings-icon-badge img {
    width: 18px;
    height: 18px;
  }
  .settings-title {
    font-size: 16px;
  }
  .settings-modal-body {
    padding: 14px 18px 18px;
  }
  .settings-desc {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .server-cards-list {
    gap: 10px;
  }
  .server-card {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 14px;
  }
  .server-card-left {
    gap: 10px;
  }
  .server-name {
    font-size: 13.5px;
  }
  .server-detail {
    font-size: 11px;
    line-height: 1.4;
  }
  .server-action-badge {
    min-height: 28px;
    padding: 0 9px;
    font-size: 11px;
  }
}

body.modal-open .page-back,
body.modal-open .detail-back,
body.modal-open .scroll-top {
  display: none !important;
}

.version-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-3);
}

.episodes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 640px) {
  .episodes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .episodes {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .player-modal {
    padding: 0;
  }
  .player-modal .modal-shell {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: 0;
  }
}

/* Spotlight-style mobile bottom navigation */
.mobile-nav { display: none; }

@media (max-width: 860px) {
  body {
    padding-bottom: calc(78px + max(12px, var(--safe-bottom, env(safe-area-inset-bottom, 0px))));
  }

  .desktop-nav { display: none; }

  .mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 85;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 clamp(8px, 2.5vw, 14px) max(10px, env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    border: 0;
    background: transparent;
  }
}

/* Mobile Topbar: Single-Row Layout (BotPhim - Search Form - Server Switch) */
@media (max-width: 860px) {
  .topbar-inner,
  body.home-topbar-overlay .topbar-inner,
  body:not(.home-topbar-overlay) .topbar-inner,
  body.detail-view .topbar-inner {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
    min-height: 48px !important;
    padding-top: calc(3px + var(--safe-top));
    padding-bottom: 3px;
    padding-inline: clamp(10px, 3vw, 18px);
  }

  .brand {
    order: 1 !important;
    flex-shrink: 0;
    height: auto;
  }

  .brand-text {
    font-size: clamp(20px, 4.5vw, 26px);
  }

  .brand-logo {
    width: clamp(108px, 27vw, 132px);
    max-height: 34px;
  }

  .search-shell {
    order: 2 !important;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .search-shell .search-form {
    width: 100% !important;
  }

  .search-source-switch {
    margin: 0 0 12px;
  }

  .search-source-btn {
    min-width: 30px;
    min-height: 25px;
  }

  .search-form {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 2px 3px 2px 8px;
    margin: 0;
  }

  .search-form input {
    font-size: 16px;
    height: 100%;
    padding: 0 4px;
    line-height: 1.2;
    box-sizing: border-box;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .search-form input::placeholder {
    font-size: 16px;
    line-height: 1.2;
    text-overflow: ellipsis;
  }

  .search-form button {
    padding: 0 10px;
    min-height: 26px !important;
    height: 26px !important;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .search-history-dropdown {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding: 5px 4px !important;
  }
  .search-history-item {
    padding: 5px 6px !important;
    gap: 6px !important;
  }
  .search-history-item-left {
    gap: 6px !important;
  }
  .search-history-query {
    font-size: 11.5px !important;
  }
  .search-history-time {
    font-size: 10px !important;
  }
  .search-history-delete-btn,
  .search-form .search-history-delete-btn {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    font-size: 11px !important;
  }

  .settings-btn {
    order: 3 !important;
    margin-left: 0 !important;
    flex-shrink: 0;
    min-height: 34px !important;
    height: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 0 !important;
    justify-content: center !important;
  }
  .settings-icon-img {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 680px) {
  .settings-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 0 !important;
    justify-content: center !important;
  }
  .settings-current-server {
    display: none !important;
  }
}

@media (max-width: 440px) {
  .topbar-inner {
    gap: 6px;
    padding-inline: 8px;
  }

  .brand-text {
    font-size: 20px;
  }

  .search-form {
    min-height: 29px !important;
    height: 29px !important;
    padding: 1px 2px 1px 7px;
  }

  .search-form input {
    font-size: 16px;
    height: 100%;
    padding: 0 3px;
    line-height: 1.2;
    box-sizing: border-box;
  }

  .search-form input::placeholder {
    font-size: 16px;
    line-height: 1.2;
  }

  .search-form button {
    padding: 0 8px;
    min-height: 24px !important;
    height: 24px !important;
    font-size: 10px;
  }

  .search-source-btn {
    min-width: 28px;
    min-height: 23px;
    padding-inline: 7px;
    font-size: 10px;
  }

  .settings-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .settings-current-server {
    display: none !important;
  }
}

/* SpotlightNavbar and GooeySearch styling for the mobile navigation */
@property --spotlight-x {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

@property --ambience-x {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

@media (max-width: 860px) {
  .search-shell {
    display: none !important;
  }

  .mobile-nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(520px, 100%);
    pointer-events: auto;
  }

  .mobile-spotlight-nav {
    --spotlight-color: rgba(255, 255, 255, 0.15);
    --ambience-color: rgba(255, 255, 255, 1);
    position: relative;
    flex: 0 1 auto;
    width: max-content;
    max-width: calc(100% - 110px);
    height: 44px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    background: rgba(12, 12, 14, 0.48);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    transition: --spotlight-x 460ms cubic-bezier(0.16, 1, 0.3, 1), --ambience-x 460ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-spotlight-nav.is-pointer-moving {
    transition: none;
  }

  .spotlight-nav-items {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
    margin: 0;
    padding: 0 8px;
    list-style: none;
  }

  .spotlight-nav-items li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .spotlight-nav-items a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: color 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .spotlight-nav-items a:hover,
  .spotlight-nav-items a:focus-visible,
  .spotlight-nav-items a.active {
    color: #fff;
  }

  .spotlight-nav-items a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.34);
    outline-offset: -2px;
  }

  .spotlight-nav-light {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: radial-gradient(120px circle at var(--spotlight-x) 100%, var(--spotlight-color), transparent 50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }

  .mobile-spotlight-nav.is-hovering .spotlight-nav-light {
    opacity: 1;
  }

  .spotlight-nav-ambience {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: radial-gradient(60px circle at var(--ambience-x) 0%, var(--ambience-color) 0%, transparent 100%);
    pointer-events: none;
  }

  .mobile-nav .mobile-search-trigger {
    position: relative;
    z-index: 3;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    background: rgba(12, 12, 14, 0.48);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav .mobile-search-trigger[aria-expanded="true"] {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
  }

  .mobile-nav .mobile-search-trigger:active {
    transform: scale(0.95);
  }

  .mobile-search-icon {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .mobile-search-panel {
    position: fixed;
    z-index: 1200;
    top: max(8px, calc(clamp(64px, 16vh, 160px) - 2cm));
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(560px, calc(100vw - 28px));
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.96);
    transform-origin: center top;
    pointer-events: none;
    transition: opacity 220ms ease, transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-search-panel.is-open {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
  }

  .mobile-gooey-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .mobile-search-gooey {
    position: relative;
    padding-inline: 12px;
    filter: url("#mobile-gooey-filter");
  }

  .mobile-search-panel.gooey-unsupported .mobile-search-gooey {
    filter: none;
  }

  .mobile-search-form {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    padding: 5px 6px 5px 24px;
    border: 0;
    border-radius: 9999px;
    background: #fff;
    box-shadow: none;
    opacity: 0;
    transform: scale(0.88);
    transform-origin: center;
    transition: opacity 220ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-search-panel.is-open .mobile-search-form {
    opacity: 1;
    transform: scale(1);
  }

  .mobile-search-form:focus-within {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
  }

  .mobile-search-form input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    padding: 3px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111;
    caret-color: #111;
    font-size: 14px;
    font-weight: 500;
  }

  .mobile-search-form input::placeholder {
    color: rgba(17, 17, 17, 0.55);
  }

  .mobile-search-form input:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
  }

  .mobile-search-form .mobile-search-submit {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    box-shadow: none;
    color: #111;
    cursor: pointer;
  }

  .mobile-search-form .mobile-search-submit img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0);
  }

  .mobile-nav .mobile-search-submit {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    box-shadow: none;
    color: #111;
    cursor: pointer;
  }

  .mobile-nav .mobile-search-submit svg {
    width: 19px;
    height: 19px;
  }

  .mobile-nav .mobile-search-submit {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 12, 14, 0.9);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    color: #fff;
  }

  .mobile-nav .mobile-search-submit img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  .mobile-search-history {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: min(42vh, 290px);
    overflow-y: auto;
    margin-top: 4px;
    padding: 0 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    animation: none;
    filter: none;
  }

  .mobile-search-history .search-history-list {
    gap: 1px;
  }

  .mobile-search-history .search-history-item {
    width: 66.666%;
    min-height: 42px;
    align-self: center;
    margin: 0;
    padding: 9px 14px !important;
    border-radius: 40px;
    background: #fff;
    color: #111;
    animation: mobileGooeyHistoryIn 0.68s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .mobile-search-history .search-history-item:nth-child(1) { animation-delay: 40ms; }
  .mobile-search-history .search-history-item:nth-child(2) { animation-delay: 90ms; }
  .mobile-search-history .search-history-item:nth-child(3) { animation-delay: 140ms; }
  .mobile-search-history .search-history-item:nth-child(4) { animation-delay: 190ms; }
  .mobile-search-history .search-history-item:nth-child(5) { animation-delay: 240ms; }

  @keyframes mobileGooeyHistoryIn {
    0% { opacity: 0; filter: blur(7px); transform: translateY(-7px) scale(0.72); }
    72% { opacity: 1; filter: blur(0); transform: translateY(1px) scale(1.025); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  }

  .mobile-search-history .search-history-query,
  .mobile-search-history .search-history-icon {
    color: #111;
  }

  .mobile-search-history .search-history-time {
    display: none;
  }

  .mobile-search-history .search-history-delete-btn {
    background: rgba(0, 0, 0, 0.08) !important;
    color: rgba(0, 0, 0, 0.55) !important;
  }

  .mobile-search-history .search-history-item:hover {
    background: #f3f3f3;
  }

  .mobile-search-history .search-history-item:hover .search-history-query {
    color: #111;
  }
}

@media (max-width: 380px) {
  .mobile-nav-inner { gap: 6px; }
  .mobile-spotlight-nav { max-width: calc(100% - 96px); }
  .spotlight-nav-items { padding-inline: 4px; }
  .spotlight-nav-items a { padding-inline: 10px; font-size: 13px; }
  .mobile-nav .mobile-search-trigger { width: 44px; min-width: 44px; padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-spotlight-nav,
  .spotlight-nav-items a,
  .mobile-search-trigger,
  .mobile-search-panel,
  .mobile-search-history .search-history-item {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   16. TOAST, SCROLL TO TOP & SKELETONS
   ========================================================================== */
.toast {
  position: fixed;
  bottom: clamp(24px, 4vw, 40px);
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  background: #ffffff;
  color: #07080a;
  font-size: var(--font-size-sm);
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base), transform var(--motion-base);
}

.toast.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.toast.hidden {
  display: none !important;
}

.page-back {
  position: fixed;
  left: clamp(16px, 2.5vw, 32px);
  right: auto;
  top: auto;
  bottom: clamp(24px, 3.5vw, 40px);
  z-index: 35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0 15px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(17, 18, 27, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
  transition: transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}

.page-back .back-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform var(--motion-fast);
}

.page-back:hover,
.page-back:focus-visible {
  background: rgba(245, 77, 154, 0.72);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(255, 45, 141, 0.35);
  transform: translateY(-4px);
}

.page-back:hover .back-arrow {
  transform: translateX(-3px);
}

.page-back.hidden {
  display: none !important;
}

.scroll-top {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  left: auto;
  top: auto;
  bottom: clamp(24px, 3.5vw, 40px);
  z-index: 35;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(17, 18, 27, 0.68);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
  transition: transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}

.scroll-top:hover,
.scroll-top:focus-visible {
  background: rgba(245, 77, 154, 0.72);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(255, 45, 141, 0.35);
  transform: translateY(-4px);
}

.scroll-top.hidden {
  display: none !important;
}

@media (max-width: 860px) {
  .page-back {
    left: clamp(16px, 2.5vw, 32px);
    right: auto;
    bottom: calc(76px + max(8px, var(--safe-bottom)));
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
    gap: 5px;
  }

  .scroll-top {
    right: clamp(16px, 2.5vw, 32px);
    left: auto;
    bottom: calc(76px + max(8px, var(--safe-bottom)));
    width: 42px;
    height: 42px;
    min-height: 42px;
    font-size: 18px;
  }

  .toast {
    bottom: calc(76px + max(8px, var(--safe-bottom)));
  }
}

/* Skeleton Loading Shimmer */
.skeleton {
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background: linear-gradient(90deg, #0d0f14 25%, #181c26 45%, #0d0f14 65%);
  background-size: 300% 100%;
  animation: shine 1.5s infinite;
}

.loading,
.empty {
  grid-column: 1 / -1;
  padding: clamp(48px, 8vw, 96px) 20px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

.empty .primary {
  margin-top: var(--space-3);
}

.search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.search-empty-state small {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Unified Animations */
@keyframes dropdown-enter {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes shine {
  to {
    background-position: -150% 0;
  }
}

@keyframes spinner {
  to {
    transform: rotate(1turn);
  }
}

@keyframes content-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.motion-item {
  opacity: 1;
}

.content-enter .motion-item {
  animation: content-arrive var(--motion-slow) var(--ease-emphasized) backwards;
  animation-delay: var(--item-delay, 0ms);
}

/* ==========================================================================
   17. ULTRA-WIDE & 4K SMART TV DISTANCE VIEWING MEDIA QUERIES
   ========================================================================== */
@media (min-width: 1920px) {
  :root {
    --container-max-width: 100%;
  }
  .movie-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 36px 24px;
  }
  .rail-track {
    grid-auto-columns: calc(240px + 1cm);
  }
}

@media (min-width: 2560px) {
  :root {
    --container-max-width: 100%;
    font-size: 18px;
  }
  .movie-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 40px 28px;
  }
  .rail-track {
    grid-auto-columns: calc(280px + 1cm);
  }
}

/* TV 10-foot Viewing Enhancements for large heights/resolutions */
@media (min-width: 1920px) and (min-height: 1000px) {
  .movie-card:hover,
  .movie-card:focus-visible,
  .movie-card.tv-focused {
    z-index: 20;
    transform: translateY(-8px) scale(1.06);
  }
  .rail-arrow {
    width: 56px;
    height: 56px;
    font-size: 32px;
  }
  .primary,
  .secondary {
    min-height: 54px;
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   18. ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  .motion-item,
  .poster-wrap img,
  .sidebar-poster,
  .wide-frame-img {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================================
   LIQUID GLASS UI UPGRADE
   Visual-only layer — preserves the existing DOM, interactions, API and routes.
   ======================================================================== */
:root {
  --color-surface-base: #07070b;
  --color-surface-raised: #101118;
  --color-surface-card: rgba(21, 23, 33, 0.72);
  --color-surface-hover: rgba(43, 46, 62, 0.82);
  --color-surface-muted: rgba(14, 15, 23, 0.76);
  --color-surface-glass: rgba(17, 18, 27, 0.64);
  --color-text-primary: #f8f8fb;
  --color-text-secondary: #b9bfd1;
  --color-text-muted: #858da3;
  --color-border-default: rgba(255, 255, 255, 0.11);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --color-accent: #f54d9a;
  --color-accent-hover: #ff6bad;
  --color-accent-dim: rgba(245, 77, 154, 0.15);
  --color-accent-glass-soft: rgba(245, 77, 154, 0.28);
  --color-accent-glass: rgba(245, 77, 154, 0.7);
  --color-accent-gradient: linear-gradient(135deg, #ff6bb4 0%, #f23f91 46%, #c734e5 100%);
  --color-focus-ring: #ff7abb;
  --color-focus-glow: rgba(245, 77, 154, 0.44);
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --motion-fast: 160ms;
  --motion-base: 260ms;
  --motion-slow: 460ms;
  --ease-standard: cubic-bezier(.2,.75,.3,1);
  --ease-emphasized: cubic-bezier(.16,1,.3,1);
}

body {
  background-color: var(--color-surface-base);
  background: var(--color-surface-base);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.topbar {
  position: sticky;
  top: 0;
  background: rgba(7, 8, 10, 0.88);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.home-topbar-overlay .topbar {
  position: absolute;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar-inner { min-height: clamp(48px, 3.4vw, 56px); }
.brand-text { letter-spacing: -1.7px; text-shadow: 0 3px 20px rgba(0,0,0,.55); }
.brand-accent { text-shadow: 0 0 18px rgba(245,77,154,.38); }
.brand:hover { transform: translateY(-1px) scale(1.025); }

.search-form {
  min-height: 34px;
  height: 34px;
  border-color: rgba(255,255,255,.14);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.search-form:focus-within {
  border-color: rgba(255,123,187,.82);
  background: rgba(20, 22, 32, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 3px rgba(245,77,154,.15), inset 0 1px 0 rgba(255,255,255,.1), 0 12px 32px rgba(0,0,0,.25);
}
.search-form > button[type="submit"], .primary, .btn-watch-now {
  background: var(--color-accent-gradient);
  box-shadow: 0 10px 26px rgba(245,77,154,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.search-form > button[type="submit"]:hover, .primary:hover, .btn-watch-now:hover { filter: brightness(1.06); box-shadow: 0 14px 32px rgba(245,77,154,.4), inset 0 1px 0 rgba(255,255,255,.3); }

.nav-trigger, .nav-direct { border-radius: var(--radius-full); transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast); }
.nav-trigger:hover, .nav-direct:hover, .nav-trigger.active { color: #fff; background: rgba(255,255,255,.07); transform: translateY(-1px); }
.nav-menu {
  border-color: rgba(255,255,255,.13);
  background: rgba(18, 19, 28, .74);
  box-shadow: 0 22px 56px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(30px) saturate(135%);
  -webkit-backdrop-filter: blur(30px) saturate(135%);
}
.nav-menu button:hover, .nav-menu button:focus-visible { background: rgba(255,255,255,.1); color: #fff; }

.hero {
  min-height: clamp(720px, 85vh, 1020px);
  padding-top: clamp(90px, 9vw, 120px);
  padding-bottom: clamp(36px, 4vw, 56px);
  isolation: isolate;
  background-position: center top;
  background-image:
    linear-gradient(to top, #07080a 0%, rgba(7, 8, 10, 0.35) 5%, transparent 14%),
    var(--hero-image, linear-gradient(115deg, #1a1a29 0%, #08080d 100%));
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: min(1050px, 86vw); padding-bottom: clamp(6px, 1vw, 14px); }
#featured-name { position: relative; z-index: 5; pointer-events: auto !important; cursor: pointer !important; display: block; width: fit-content; max-width: 100%; font-size: clamp(43px, 4.8vw, 69px); font-weight: 800; -webkit-text-stroke: 0; letter-spacing: -.025em; text-transform: none; }
.badge-pill {
  min-height: 28px;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(12px);
  transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), filter var(--motion-fast);
}

.badge-pill:hover {
  transform: translateY(-1.5px) scale(1.03);
  filter: brightness(1.15);
}

/* 1. Episode Badge (Tập): Neon Cyan / Sky Blue */
.badge-ep,
.featured-badges .badge-meta:first-child {
  background: rgba(14, 165, 233, 0.16) !important;
  border: 1px solid rgba(56, 189, 248, 0.75) !important;
  color: #e0f2fe !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* 2. Year Badge (Năm): Vibrant Amber / Golden Yellow */
.badge-year,
.featured-badges .badge-meta:nth-child(2) {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid rgba(251, 191, 36, 0.75) !important;
  color: #fef3c7 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* 3. Language / Sub (VS/TM/LT): Hot Pink / Rose */
.badge-sn,
.badge-vs,
.badge-lang,
.featured-badges .badge-sn {
  background: rgba(244, 63, 94, 0.18) !important;
  border: 1px solid rgba(244, 63, 94, 0.75) !important;
  color: #ffe4e6 !important;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* 4. Quality (FHD/4K/HD): Emerald Neon Green */
.badge-fhd,
.badge-quality,
.featured-badges .badge-fhd,
.featured-badges .badge-quality {
  background: rgba(34, 197, 94, 0.16) !important;
  border: 1px solid rgba(34, 197, 94, 0.75) !important;
  color: #dcfce7 !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.hero-thumbs-container {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.hero-thumb { border-radius: 6px; border-color: rgba(255,255,255,.14); box-shadow: 0 8px 18px rgba(0,0,0,.26); }
.hero-thumb:focus, .hero-thumb:focus-visible { outline: none !important; }
.hero-thumb.is-active {
  position: relative !important;
  z-index: 100 !important;
  border-color: #ff2d8d !important;
  box-shadow: 0 0 16px rgba(255, 45, 141, 0.75), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  outline: none !important;
}

.content-section { position: relative; }
.section-heading, .rail-heading { margin-bottom: clamp(8px, 1vw, 12px); }
.section-heading h2, .rail-heading h2 { letter-spacing: -.045em; }
.section-heading .eyebrow, .rail-heading .eyebrow { color: #ff98c9; letter-spacing: .12em; }
.filter-panel, .option-btn, .sidebar-card, .episode-console, .modal-shell {
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(29,31,44,.76), rgba(14,15,23,.7));
  box-shadow: 0 20px 55px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.movie-card { border-radius: 6px; transition: filter var(--motion-base); }
.movie-card:hover { z-index: 20; transform: none; filter: none; }
.poster-wrap { border-radius: 6px; border-color: rgba(255,255,255,.13); box-shadow: 0 12px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.1); }
.movie-card:hover .poster-wrap { border-color: rgba(255,255,255,.13); box-shadow: 0 12px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.1); }
.episode-badge { position: absolute; top: 5px !important; left: 5px !important; height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; border-radius: 2px !important; background: #ffffff !important; color: #000000 !important; mix-blend-mode: screen !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-size: 8.5px !important; font-weight: 900 !important; letter-spacing: 0.3px !important; line-height: 1 !important; padding: 0 4.5px !important; pointer-events: none !important; }
.card-bookmark { position: absolute; top: 5px !important; right: 5px !important; width: 18px !important; height: 15px !important; min-height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; font-size: 13.5px !important; line-height: 1 !important; }
.card-bookmark:hover, .card-bookmark:focus-visible, .card-bookmark:active { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; color: #ff3333 !important; }
.card-bookmark.is-bookmarked { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; }
.card-bookmark.is-bookmarked .bookmark-icon, .card-bookmark.is-bookmarked .watchlist-heart { color: #ff3333 !important; text-shadow: 0 0 10px rgba(255,51,51,.9), 0 0 20px rgba(255,51,51,.6) !important; filter: drop-shadow(0 0 5px rgba(255,51,51,.85)) !important; }
.card-bookmark.is-bookmarked:hover, .card-bookmark.is-bookmarked:focus-visible, .card-bookmark.is-bookmarked:active { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; }
.card-bookmark.is-bookmarked:hover .bookmark-icon, .card-bookmark.is-bookmarked:hover .watchlist-heart, .card-bookmark.is-bookmarked:focus-visible .bookmark-icon, .card-bookmark.is-bookmarked:focus-visible .watchlist-heart { color: #ff3333 !important; text-shadow: 0 0 14px rgba(255,51,51,1), 0 0 28px rgba(255,51,51,.75) !important; filter: drop-shadow(0 0 7px rgba(255,51,51,.9)) !important; }
.card-bookmark.btn-hero-watchlist, .card-bookmark.detail-bookmark, .btn-hero-watchlist, .detail-bookmark, #hero-watchlist { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; }
.play-badge span { background: linear-gradient(135deg, rgba(255,121,187,.96), rgba(221,53,139,.9)); box-shadow: 0 12px 28px rgba(245,77,154,.42), inset 0 1px 0 rgba(255,255,255,.38); }
.movie-meta { padding: 11px 3px 6px; }.movie-meta h3 { color: #f48ab9; font-weight:800; }.movie-meta p:first-of-type, .movie-meta p { color:#ffffff !important; }
.see-all-poster { border-radius: 6px; border-color: rgba(255,255,255,.16); background: rgba(17,18,26,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }

.filter-panel { border-radius: 6px; }.filter-dropdown summary, .field select { border-color: rgba(255,255,255,.13); background: rgba(6,7,11,.48); border-radius: 6px; }.filter-dropdown-menu { border-color: rgba(255,255,255,.16); background: rgba(17,18,27,.88); border-radius: 6px; box-shadow: 0 20px 52px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); }.filter-actions .secondary, .secondary { background: rgba(255,255,255,.06); border-radius: 6px; }.option-btn { border-radius: 6px; transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast); }.option-btn:hover { transform: translateY(-3px); border-color: rgba(255,123,187,.65); background: rgba(245,77,154,.12); }

.detail-page { background: transparent; }.detail-cinematic { position:relative; }.movie-sidebar { top: 112px; }.sidebar-card { border-radius: 6px; }.sidebar-poster-wrap { border-radius: 6px; }.detail-wide-frame { border-radius: 6px; }.wide-frame-shell:hover .wide-frame-img { transform: scale(1.045); }.version-tab, .episode { border-color: rgba(255,255,255,.12); background: rgba(5,6,10,.48); border-radius: 6px; }.version-tab.active, .episode.current { background: var(--color-accent-gradient); box-shadow: 0 8px 20px rgba(245,77,154,.25); }.detail-episodes .episode { transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast); }.detail-episodes .episode:hover { transform: translateY(-2px); border-color: rgba(255,123,187,.7); }

.modal { background: rgba(0, 0, 0, 0.55); backdrop-filter: none; -webkit-backdrop-filter: none; }.modal-shell { border-radius: 6px; overflow:hidden; }.player-header { background: rgba(10,11,17,.66); }.player-prev, .player-next { background: rgba(255,255,255,.12) !important; border: none !important; color: #fff !important; }.player-prev:hover:not(:disabled), .player-next:hover:not(:disabled) { background: rgba(255,255,255,.22) !important; color: #fff !important; }.modal-close { background: rgba(255,255,255,.08); border-radius: 50% !important; }.modal-close:hover { background: rgba(245,77,154,.26); }

.page-back, .detail-back { border-color: rgba(255,255,255,.16); background: rgba(17,18,27,.68); border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(18px); }
.scroll-top { border-color: rgba(255,255,255,.16); background: rgba(17,18,27,.68); border-radius: 50% !important; box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(18px); }
.page-back:hover, .detail-back:hover, .scroll-top:hover { background: rgba(245,77,154,.72); border-color: transparent; }
.toast { border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(25,26,36,.85); color: #fff; box-shadow: 0 18px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(22px); }

@media (max-width: 860px) {
  .topbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-bottom-color: transparent; }
  body.home-topbar-overlay .topbar { background: transparent; }
  .hero { min-height: 680px; }.hero-thumbs-container { max-width:100%; }.movie-card:hover { transform:none; }
}

@media (prefers-reduced-motion: no-preference) {
  .topbar, .hero, .filter-panel, .modal-shell { animation: glass-enter 420ms var(--ease-emphasized) both; }
  @keyframes glass-enter { from { opacity:.001; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
}

/* ==========================================================================
   DETAIL PAGE COMPOSITION
   The global topbar stays untouched. This layer only changes the detail
   page composition: poster rail, cinematic backdrop, intro copy and console.
   ========================================================================== */
body.detail-view #detail-page {
  min-height: calc(100vh - 76px);
  padding-bottom: clamp(72px, 8vw, 120px);
  background: #07080a;
  overflow: clip;
}

/* ==========================================================================
   GLOBAL DESKTOP TOPBAR SLIDE-DOWN BEHAVIOR & OLED BLACK
   Applies across all pages on desktop (min-width: 861px).
   Hidden by default, slides down smoothly on cursor hover / dropdown interaction.
   Does NOT apply to mobile screens.
   ========================================================================== */
@media (min-width: 861px) {
  .topbar-hover-sensor {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 32px !important;
    z-index: 99 !important;
    pointer-events: auto !important;
    background: transparent !important;
  }

  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    animation: none !important;
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none;
    background: #000000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }

  /* Keep the topbar available on catalog and utility pages. The homepage
     and movie detail page intentionally retain the hover-to-reveal behavior. */
  body:not(.home-topbar-overlay):not(.detail-view) .topbar {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto;
  }

  .topbar-inner,
  body.home-topbar-overlay .topbar-inner,
  body:not(.home-topbar-overlay) .topbar-inner,
  body.detail-view .topbar-inner {
    min-height: clamp(48px, 3.4vw, 56px) !important;
  }

  .topbar::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  }

  .topbar-hover-sensor:hover + .topbar,
  .topbar:hover,
  .topbar:focus-within,
  .topbar.is-dropdown-open,
  .topbar.is-hovered,
  .topbar:has(.nav-item.is-open),
  .topbar:has([aria-expanded="true"]) {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto;
  }

  body:not(.home-topbar-overlay):not(.detail-view) #browser {
    padding-top: clamp(48px, 5vw, 76px);
  }
}

body.detail-view .detail-cinematic {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   DETAIL HERO SECTION (AUTHENTIC CINEMATIC LAYOUT)
   ========================================================================== */
.detail-hero {
  position: relative;
  width: 100%;
  min-height: clamp(720px, 85vh, 1020px);
  padding: clamp(90px, 9vw, 120px) 0 clamp(24px, 3.2vw, 42px);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.detail-hero-inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  align-items: flex-end;
  gap: clamp(32px, 5vw, 76px);
  box-sizing: border-box;
}

.movie-aside {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
}

.movie-aside-poster-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: #11141c;
}

.movie-aside-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--motion-slow) var(--ease-emphasized);
}

.movie-aside-poster-shell:hover .movie-aside-poster {
  transform: scale(1.04);
}

.movie-aside-quality {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.movie-aside-title {
  margin: 18px 0 4px;
  font-family: var(--font-family-heading);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.movie-aside-original {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.fact-pills {
  display: flex !important;
  width: fit-content !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin-bottom: 12px;
  border-radius: 3px !important;
  overflow: hidden;
  align-items: stretch;
}

.fact-pills b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.fact-pills b:first-child {
  border-top-left-radius: 3px !important;
  border-bottom-left-radius: 3px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.fact-pills b:last-child {
  border-top-right-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.fact-pills b:only-child {
  border-radius: 3px !important;
}

.fact-pills .fact-year,
.fact-pills b:nth-child(1) {
  color: #ffffff !important;
  background: #ff6b00 !important; /* Cam tươi rực rỡ */
  border: none !important;
}

.fact-pills .fact-episodes,
.fact-pills b:nth-child(2) {
  color: #ffffff !important;
  background: #8a4fff !important; /* Tím neon tươi sáng */
  border: none !important;
}

.fact-pills .fact-quality,
.fact-pills b:nth-child(3) {
  color: #ffffff !important;
  background: #05c46b !important; /* Xanh lục bảo tươi */
  border: none !important;
}

.fact-pills .fact-language,
.fact-pills b:nth-child(4) {
  color: #ffffff !important;
  background: #00a2ff !important; /* Xanh biển tươi sáng */
  border: none !important;
}

.detail-back-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 9999px;
  background: rgba(20, 20, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.detail-back-pill:hover {
  background: rgba(255, 45, 141, 0.16);
  border-color: rgba(255, 45, 141, 0.5);
  color: #fff;
  transform: translateX(-3px);
  box-shadow: 0 6px 20px rgba(255, 45, 141, 0.25);
}

.detail-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(1350px, 100%);
  width: 100%;
  margin-bottom: 6px;
}

.detail-eyebrow-pink {
  display: block;
  width: fit-content;
  color: #ff77a9 !important;
  font-family: var(--font-family-primary);
  font-size: clamp(8px, 1.5vw, 12px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: none !important;
  text-shadow: none !important;
  margin: 0 0 16px;
}

.detail-main-title {
  margin: 0 0 16px;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-family-heading);
  font-size: clamp(43px, 4.8vw, 69px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.9);
}

.detail-description {
  display: block;
  width: min(calc(620px + 1cm), 100%);
  max-width: min(calc(620px + 1cm), 100%);
  margin: -4px 0 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(10px, 1.2vw, 13px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: none;
}

.genre-pills {
  display: flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
  align-items: stretch;
}

.genre-pills b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 15px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: filter 0.18s ease;
}

.genre-pills b:first-child {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.genre-pills b:last-child {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.genre-pills b:only-child {
  border-radius: 6px !important;
}

.genre-pills b:hover {
  filter: brightness(1.15);
  transform: none;
}

/* Fallback colors by position */
.genre-pills b:nth-child(1) { background: #05c46b; }
.genre-pills b:nth-child(2) { background: #0077ff; }
.genre-pills b:nth-child(3) { background: #ff2d75; }
.genre-pills b:nth-child(4) { background: #9d4edd; }
.genre-pills b:nth-child(5) { background: #ff7425; }
.genre-pills b:nth-child(6) { background: #00b4d8; }
.genre-pills b:nth-child(7) { background: #d946ef; }
.genre-pills b:nth-child(8) { background: #ffa801; }

/* Predefined Genre Specific Colors */
.genre-pills b[data-genre*="Chính Kịch" i],
.genre-pills b[data-genre*="chinh-kich" i],
.genre-pills b[data-genre*="Drama" i] {
  background: #05c46b !important; /* Xanh lục bảo tươi */
}

.genre-pills b[data-genre*="Hài" i],
.genre-pills b[data-genre*="phim-hai" i],
.genre-pills b[data-genre*="Comedy" i] {
  background: #0077ff !important; /* Xanh dương rực rỡ */
}

.genre-pills b[data-genre*="Lãng Mạn" i],
.genre-pills b[data-genre*="Tình Cảm" i],
.genre-pills b[data-genre*="lang-man" i],
.genre-pills b[data-genre*="tinh-cam" i],
.genre-pills b[data-genre*="Romance" i] {
  background: #ff2d75 !important; /* Đỏ hồng tươi rực rỡ */
}

.genre-pills b[data-genre*="Hành Động" i],
.genre-pills b[data-genre*="hanh-dong" i],
.genre-pills b[data-genre*="Action" i] {
  background: #ff3b30 !important; /* Đỏ tươi năng động */
}

.genre-pills b[data-genre*="Hình Sự" i],
.genre-pills b[data-genre*="hinh-su" i],
.genre-pills b[data-genre*="Crime" i] {
  background: #4361ee !important; /* Xanh coban hoàng gia tươi */
}

.genre-pills b[data-genre*="Bí Ẩn" i],
.genre-pills b[data-genre*="bi-an" i],
.genre-pills b[data-genre*="Mystery" i] {
  background: #9d4edd !important; /* Tím thạch anh tươi sáng */
}

.genre-pills b[data-genre*="Kinh Dị" i],
.genre-pills b[data-genre*="kinh-di" i],
.genre-pills b[data-genre*="Horror" i] {
  background: #e11d48 !important; /* Đỏ ruby tươi */
}

.genre-pills b[data-genre*="Khoa Học" i],
.genre-pills b[data-genre*="Viễn Tưởng" i],
.genre-pills b[data-genre*="Sci-Fi" i] {
  background: #00b4d8 !important; /* Xanh cyan biển tươi sáng */
}

.genre-pills b[data-genre*="Phiêu Lưu" i],
.genre-pills b[data-genre*="phieu-luu" i],
.genre-pills b[data-genre*="Adventure" i] {
  background: #ff7425 !important; /* Cam quýt tươi */
}

.genre-pills b[data-genre*="Cổ Trang" i],
.genre-pills b[data-genre*="co-trang" i] {
  background: #ffa801 !important; /* Vàng hổ phách tươi */
}

.genre-pills b[data-genre*="Hoạt Hình" i],
.genre-pills b[data-genre*="hoat-hinh" i],
.genre-pills b[data-genre*="Anime" i] {
  background: #c084fc !important; /* Tím hoạt hình tươi */
}

.genre-pills b[data-genre*="Tâm Lý" i],
.genre-pills b[data-genre*="tam-ly" i] {
  background: #6c5ce7 !important; /* Tím chàm sáng tươi */
}

.genre-pills b[data-genre*="Gia Đình" i],
.genre-pills b[data-genre*="gia-dinh" i] {
  background: #10b981 !important; /* Xanh ngọc tươi sáng */
}

.genre-pills b[data-genre*="Tài Liệu" i],
.genre-pills b[data-genre*="tai-lieu" i] {
  background: #14b8a6 !important; /* Xanh mòng két tươi */
}

.genre-pills b[data-genre*="Chiến Tranh" i],
.genre-pills b[data-genre*="chien-tranh" i] {
  background: #84cc16 !important; /* Xanh lá rực */
}

.genre-pills b[data-genre*="Giả Tưởng" i],
.genre-pills b[data-genre*="gia-tuong" i] {
  background: #b5179e !important; /* Tím phong lan rực rỡ */
}

.genre-pills b[data-genre*="Gây Cấn" i],
.genre-pills b[data-genre*="gay-can" i] {
  background: #ff5722 !important; /* Cam neon rực rỡ */
}

.genre-pills b[data-genre*="Nhạc" i],
.genre-pills b[data-genre*="phim-nhac" i] {
  background: #f43f5e !important; /* Hồng neon tươi sáng */
}

.detail-primary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   DETAIL CONTENT BODY & EPISODES & METADATA
   ========================================================================== */
.detail-meta-pills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 24px;
}

.detail-meta-pills-row .fact-pills,
.detail-meta-pills-row .genre-pills {
  margin-bottom: 0;
}

.detail-body-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: clamp(24px, 3vw, 44px) auto 0;
  padding: 0 var(--container-padding);
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.detail-rails {
  margin-top: clamp(36px, 4vw, 56px);
}

body.detail-view .episode-console {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  box-sizing: border-box;
}

body.detail-view .episode-console > .console-heading {
  margin-bottom: 14px;
}

body.detail-view .episode-console .eyebrow {
  color: var(--color-accent);
  letter-spacing: .13em;
  font-weight: 800;
}

body.detail-view .detail-version-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

body.detail-view .detail-version-tabs .version-tab {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 6, 10, 0.48);
  color: #e5e5e5;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--motion-fast);
}

body.detail-view .detail-version-tabs .version-tab.active,
body.detail-view .detail-version-tabs .version-tab:hover {
  background: var(--color-accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(245, 77, 154, 0.25);
}

body.detail-view .episode-heading {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.detail-view .detail-episodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 92px));
  gap: 8px;
}

body.detail-view .detail-episodes .episode {
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 6, 10, 0.48);
  color: #e5e5e5;
  font-size: var(--font-size-xs);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}

body.detail-view .detail-episodes .episode:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 123, 187, 0.7);
  color: #fff;
}

body.detail-view .detail-episodes .episode.current {
  background: var(--color-accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(245, 77, 154, 0.25);
}

.detail-meta-panel {
  display: none !important;
}

@media (max-width: 960px) {
  .detail-hero {
    min-height: 0;
    padding-top: clamp(84px, 10vw, 110px);
    padding-bottom: 28px;
  }
  .detail-hero-inner {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .detail-hero {
    padding: clamp(80px, 12vw, 96px) 0 28px;
  }
  .detail-hero-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .movie-aside {
    display: flex;
    justify-content: flex-start;
    max-width: 140px;
    margin: 0;
  }
  .movie-aside-poster-shell {
    width: 130px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
  }
  .movie-aside-title {
    margin: 0;
    font-size: 19px;
  }
  .movie-aside-original {
    margin: 0;
    font-size: 12px;
  }
  .fact-pills {
    margin-bottom: 0;
    gap: 6px;
  }
  .fact-pills b {
    font-size: 11.5px;
    padding: 4px 10px;
  }
  .detail-back-pill {
    margin-top: 4px;
    padding: 6px 14px;
    font-size: 12px;
  }
  .detail-copy {
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
  }
  .detail-main-title {
    font-size: clamp(31px, 7.0vw, 43px);
  }
  .detail-description {
    font-size: 13.5px;
    -webkit-line-clamp: 2;
    margin-bottom: 10px;
  }
  .genre-pills {
    gap: 6px;
    margin-bottom: 20px;
  }
  .genre-pills b {
    font-size: 11.5px;
    padding: 4px 10px;
  }
  .detail-body-container {
    padding: 0 16px;
    margin-top: 24px;
  }
  body.detail-view .detail-episodes {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.detail-view .episode-console,
  body.detail-view .detail-back-pill {
    transition: none !important;
    animation: none !important;
  }
}

body.detail-view .detail-cinematic::before,
body.detail-view .detail-cinematic::after {
  display: none !important;
}

/* Sidebar Cast (Aligned in right column of metadata) */
.sidebar-metadata .sidebar-cast-dd {
  margin: 0;
  min-width: 0;
}

.sidebar-metadata .sidebar-cast-text {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sidebar-cast-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.sidebar-cast-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sidebar-cast-thumb {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.sidebar-cast-name {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Keep the page visibly behind the player without blurring the video itself. */
.player-modal,
#player-modal {
  z-index: 1200;
  background: rgba(3, 4, 9, 0.74);
  backdrop-filter: blur(12px) saturate(0.72);
  -webkit-backdrop-filter: blur(12px) saturate(0.72);
  transition: background 300ms ease, backdrop-filter 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .player-modal {
    backdrop-filter: blur(6px) saturate(0.72);
    -webkit-backdrop-filter: blur(6px) saturate(0.72);
  }
}

/* Theater mode: Tắt đèn làm tối xung quanh */
#player-modal.is-lights-off,
.player-modal.is-lights-off {
  background: rgba(0, 0, 0, 0.985) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  cursor: default !important;
}

#player-modal.is-lights-off .player-shell {
  background: #000000 !important;
  border: none !important;
  box-shadow: 0 0 100px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, 0.9) !important;
}

#player-modal.is-lights-off .player-header {
  background: #000000 !important;
  border: none !important;
  border-bottom: none !important;
}

#player-modal.is-lights-off .player-header h2 {
  color: rgba(255, 255, 255, 0.65);
}

#player-modal.is-lights-off .player-header .eyebrow {
  color: rgba(255, 255, 255, 0.35);
}

/* Ẩn hoàn toàn các chức năng khác khi tắt đèn */
#player-modal.is-lights-off #player-prev,
#player-modal.is-lights-off #player-next,
#player-modal.is-lights-off .modal-close,
#player-modal.is-lights-off #player-episodes {
  display: none !important;
  pointer-events: none !important;
}

@media (max-width: 640px) {
  .player-header {
    padding: 10px 14px;
    gap: 8px;
  }
  .player-header-actions {
    gap: 6px;
  }
  .player-nav-btn {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 11px;
  }
  .player-lights-btn {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
  }
  .player-lights-btn .lights-icon {
    font-size: 14px;
  }
  .modal-close.static {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
}

/* ==========================================================================
   Intro Preloader (Framekit UI style Ink Curtain)
   ========================================================================== */
.intro-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
  transition: opacity 0.3s ease;
  will-change: transform;
}

.intro-preloader.is-lifting {
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
  transform: translateY(-120%);
  pointer-events: none;
}

.intro-preloader.is-done {
  display: none !important;
}

/* Morphing SVG ink curtain */
.preloader-curtain-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.9));
}

.preloader-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 5vw, 56px);
  color: #ffffff;
  z-index: 2;
  pointer-events: none;
}

.preloader-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.preloader-word-box {
  position: relative;
  height: 44px;
  overflow: hidden;
}

.preloader-word {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family-primary);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
}

.preloader-word.word-anim-out {
  transform: translateY(-36px);
  opacity: 0;
}

.preloader-word.word-anim-in {
  transform: translateY(36px);
  opacity: 0;
}

.preloader-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent, #ff2d8d);
  box-shadow: 0 0 12px var(--color-accent, #ff2d8d), 0 0 24px rgba(255, 45, 141, 0.4);
}

.preloader-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.preloader-counter {
  font-family: var(--font-family-primary);
  font-size: clamp(80px, 20vw, 190px);
  font-weight: 900;
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  color: #ffffff;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
}

.preloader-track {
  display: none;
  flex: 1;
  height: 2px;
  margin-bottom: clamp(10px, 2vw, 18px);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  overflow: hidden;
}

@media (min-width: 640px) {
  .preloader-track {
    display: block;
  }
}

.preloader-bar {
  width: 100%;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, #ff2d8d 0%, #ff6b4a 100%);
  box-shadow: 0 0 16px rgba(255, 45, 141, 0.7);
  transition: transform 0.08s linear;
}

/* Background content settle zoom effect */
body.preloader-active #app,
body.preloader-active .mobile-nav,
body.preloader-active .site-footer {
  transform: scale(1.05);
  opacity: 0.35;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.preloader-settled #app,
body.preloader-settled .mobile-nav,
body.preloader-settled .site-footer {
  transform: scale(1);
  opacity: 1;
}

/* ==========================================================================
   16. SITE FOOTER (CINEMATIC OBSIDIAN DESIGN SYSTEM)
   ========================================================================== */
.site-footer {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #07080a 0%, #040507 100%);
  border-top: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.08));
  color: var(--color-text-secondary, #94a3b8);
  font-family: var(--font-family-primary);
  margin-top: auto;
  overflow: hidden;
}

.footer-ambient-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1200px);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 45, 141, 0.6) 50%, transparent 100%);
  box-shadow: 0 0 20px rgba(255, 45, 141, 0.4);
  pointer-events: none;
}

.footer-container {
  width: min(100%, var(--container-max-width, 1920px));
  max-width: var(--container-max-width, 1920px);
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 44px) var(--container-padding, clamp(16px, 3.5vw, 54px)) clamp(18px, 2.5vw, 26px);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) repeat(4, minmax(130px, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.footer-brand-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: fit-content;
}

.footer-brand-link:focus-visible {
  outline: 2px solid var(--color-focus-ring, #ff2d8d);
  outline-offset: 4px;
  border-radius: var(--radius-xs, 4px);
}

.footer-brand-link .brand-text {
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 900;
  letter-spacing: -1.2px;
}

.footer-brand-logo {
  width: clamp(150px, 13vw, 190px);
  max-height: 54px;
  filter: drop-shadow(0 5px 18px rgba(255, 45, 141, 0.2));
}

.footer-brand-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-text-secondary, #94a3b8);
  max-width: 440px;
}

.footer-features-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.2px;
  transition: all 0.25s ease;
}

.feature-pill:hover {
  background: rgba(255, 255, 255, 0.06);
}

.feature-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  background: var(--color-accent, #ff2d8d);
  box-shadow: 0 0 8px var(--color-accent, #ff2d8d);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-pill:hover .feature-dot {
  transform: scale(1.2);
}

/* 1. Full HD & 4K - Neon Pink / Rose */
.feature-pill:nth-child(1) .feature-dot,
.feature-dot.dot-hd,
.feature-dot.dot-pink {
  background: #ff2d8d;
  box-shadow: 0 0 8px rgba(255, 45, 141, 0.9);
}
.feature-pill:nth-child(1):hover,
.feature-pill.pill-hd:hover {
  border-color: rgba(255, 45, 141, 0.4);
}
.feature-pill:nth-child(1):hover .feature-dot,
.feature-pill:hover .feature-dot.dot-hd,
.feature-pill:hover .feature-dot.dot-pink {
  box-shadow: 0 0 12px rgba(255, 45, 141, 1);
}

/* 2. Tốc độ cao - Amber / Lightning Gold */
.feature-pill:nth-child(2) .feature-dot,
.feature-dot.dot-speed,
.feature-dot.dot-amber {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.9);
}
.feature-pill:nth-child(2):hover,
.feature-pill.pill-speed:hover {
  border-color: rgba(245, 158, 11, 0.4);
}
.feature-pill:nth-child(2):hover .feature-dot,
.feature-pill:hover .feature-dot.dot-speed,
.feature-pill:hover .feature-dot.dot-amber {
  box-shadow: 0 0 12px rgba(245, 158, 11, 1);
}

/* 3. Miễn phí 100% - Emerald / Mint Green */
.feature-pill:nth-child(3) .feature-dot,
.feature-dot.dot-free,
.feature-dot.dot-green {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.9);
}
.feature-pill:nth-child(3):hover,
.feature-pill.pill-free:hover {
  border-color: rgba(16, 185, 129, 0.4);
}
.feature-pill:nth-child(3):hover .feature-dot,
.feature-pill:hover .feature-dot.dot-free,
.feature-pill:hover .feature-dot.dot-green {
  box-shadow: 0 0 12px rgba(16, 185, 129, 1);
}

/* 4. Đa thiết bị - Bright Cyan / Sky Blue */
.feature-pill:nth-child(4) .feature-dot,
.feature-dot.dot-devices,
.feature-dot.dot-cyan {
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.9);
}
.feature-pill:nth-child(4):hover,
.feature-pill.pill-devices:hover {
  border-color: rgba(56, 189, 248, 0.4);
}
.feature-pill:nth-child(4):hover .feature-dot,
.feature-pill:hover .feature-dot.dot-devices,
.feature-pill:hover .feature-dot.dot-cyan {
  box-shadow: 0 0 12px rgba(56, 189, 248, 1);
}

.footer-community {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.community-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.footer-tg-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(41, 182, 246, 0.12);
  border: 1px solid rgba(41, 182, 246, 0.25);
  color: #38bdf8;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--motion-fast, 180ms) var(--ease-standard, ease);
}

.footer-tg-link:hover {
  background: rgba(41, 182, 246, 0.22);
  border-color: rgba(41, 182, 246, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(41, 182, 246, 0.25);
}

.footer-tg-link:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
}

.footer-nav-column {
  display: flex;
  flex-direction: column;
}

.footer-nav-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-text-primary, #f8fafc);
  position: relative;
  padding-bottom: 6px;
}

.footer-nav-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--color-accent, #ff2d8d);
  border-radius: 2px;
}

.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-nav-link {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 2px 0;
  margin: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary, #94a3b8);
  cursor: pointer;
  text-align: left;
  transition: all var(--motion-fast, 180ms) var(--ease-standard, ease);
  width: fit-content;
}

.footer-nav-link:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.footer-nav-link:focus-visible {
  outline: 2px solid var(--color-focus-ring, #ff2d8d);
  outline-offset: 3px;
  border-radius: var(--radius-xs, 4px);
}

.footer-nav-highlight {
  color: var(--color-accent, #ff2d8d);
  font-weight: 700;
}

.footer-nav-highlight:hover {
  color: var(--color-accent-hover, #ff57a5);
}

/* Disclaimer Box */
.footer-disclaimer-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md, 12px);
  padding: 12px 18px;
  margin-bottom: clamp(14px, 2vw, 22px);
}

.disclaimer-header {
  margin-bottom: 6px;
}

.disclaimer-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f472b6;
}

.disclaimer-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-muted, #64748b);
  text-align: justify;
}

/* Bottom Bar */
.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-copyright {
  font-size: 12.5px;
  color: var(--color-text-muted, #64748b);
}

.footer-copyright p {
  margin: 0;
}

.footer-copyright strong {
  color: var(--color-text-primary, #f8fafc);
}

.footer-status-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
  font-size: 12px;
  font-weight: 600;
}

.status-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: footerStatusPulse 2s infinite ease-in-out;
}

@keyframes footerStatusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.footer-scroll-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text-primary, #f8fafc);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--motion-fast, 180ms) var(--ease-standard, ease);
}

.footer-scroll-top-btn:hover {
  background: rgba(255, 45, 141, 0.16);
  border-color: rgba(255, 45, 141, 0.35);
  color: #ff57a5;
  transform: translateY(-2px);
}

.footer-scroll-top-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #ff2d8d);
  outline-offset: 3px;
}

.scroll-arrow {
  transition: transform var(--motion-fast, 180ms) ease;
}

.footer-scroll-top-btn:hover .scroll-arrow {
  transform: translateY(-2px);
}

/* Responsive Footer Breakpoints */
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-brand-column {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .footer-brand-desc {
    max-width: 100%;
  }
}

@media (max-width: 860px) {
  .footer-hide-mobile,
  .footer-nav-explore,
  .footer-nav-genres,
  .footer-nav-countries,
  [data-footer-col="explore"],
  [data-footer-col="genres"],
  [data-footer-col="countries"] {
    display: none !important;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-status-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .footer-container {
    padding-top: 36px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .footer-features-pills {
    gap: 6px;
  }
  .feature-pill {
    font-size: 11px;
    padding: 4px 9px;
  }
}

/* Gộp poster, ảnh nền và ảnh từng tập vào một gallery trong trang xem phim. */
.watch-collection-section {
  margin-top: 34px;
}

.watch-collection-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.watch-collection-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #08090c;
  color: #fff;
  text-align: left;
  transition: border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}

.watch-collection-card:hover,
.watch-collection-card:focus-visible {
  border-color: rgba(255, 91, 157, 0.72);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.watch-collection-media,
.watch-collection-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.watch-collection-media img {
  object-fit: cover;
  transition: transform var(--motion-slow);
}

.watch-collection-card.is-poster .watch-collection-media img {
  object-fit: contain;
  background: #050608;
}

.watch-collection-card:hover .watch-collection-media img,
.watch-collection-card:focus-visible .watch-collection-media img {
  transform: scale(1.035);
}

.watch-collection-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 12px;
}

.watch-image-lightbox {
  z-index: 1400;
  padding: 18px;
  background: #000;
}

.watch-image-lightbox-shell {
  display: flex;
  flex-direction: column;
  width: min(1120px, 100%);
  max-height: min(920px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #000;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.watch-image-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.watch-image-lightbox-header h2 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.watch-image-lightbox-stage {
  display: grid;
  min-height: 240px;
  padding: 18px;
  place-items: center;
  background: #000;
}

.watch-image-lightbox-stage img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(68vh, 720px);
  object-fit: contain;
}

.watch-image-lightbox-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.watch-image-download {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 91, 157, 0.58);
  border-radius: 50%;
  background: rgba(255, 45, 141, 0.12);
  color: #ff9bc3;
  text-decoration: none;
  transition: background var(--motion-fast), color var(--motion-fast);
}

.watch-image-download img {
  display: block;
  width: 19px;
  height: 19px;
}

.watch-image-download:hover,
.watch-image-download:focus-visible {
  background: rgba(255, 45, 141, 0.28);
  color: #fff;
  outline: none;
}

@media (max-width: 1080px) {
  .watch-collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .watch-collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .watch-image-lightbox {
    padding: 10px;
  }

  .watch-image-lightbox-shell {
    max-height: calc(100vh - 20px);
  }

  .watch-image-lightbox-header {
    padding: 12px;
  }

  .watch-image-lightbox-stage {
    padding: 10px;
  }
}

@media (max-width: 420px) {
  .watch-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .watch-image-download {
    justify-content: center;
  }
}

/* Detail page: information and episodes stay side by side on desktop. */
.detail-two-column-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(22px, 3vw, 42px);
}

.detail-info-column,
.detail-episodes-column {
  min-width: 0;
}

.detail-info-column .detail-overview-section {
  margin-bottom: 26px;
}

.detail-info-column .detail-overview-card {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(15, 16, 21, 0.72);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.detail-info-column .detail-overview-text {
  display: block;
  margin-bottom: 18px;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.detail-info-column .detail-overview-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.detail-info-column .overview-meta-item {
  display: block;
  min-width: 0;
}

.detail-info-column .overview-meta-item .meta-label,
.detail-info-column .overview-meta-item .meta-value {
  display: block;
}

.detail-info-column .overview-meta-item .meta-label {
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-info-column .overview-meta-item .meta-value {
  line-height: 1.55;
}

.detail-info-column .overview-meta-full {
  grid-column: 1 / -1;
}

.detail-info-column .detail-studios {
  margin: 0 0 28px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(15, 16, 21, 0.72);
}

.detail-info-column .detail-cast-rail {
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(15, 16, 21, 0.72);
}

.detail-info-column .detail-cast-rail .rail-heading {
  margin-bottom: 8px;
}

.detail-info-column .detail-cast-rail .rail-heading h2 {
  font-size: clamp(17px, 1.5vw, 21px);
}

.detail-info-column .tmdb-cast-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 10px;
  padding: 12px 0 4px;
}

.detail-info-column .tmdb-cast-card {
  min-width: 0;
  cursor: pointer;
}

.detail-info-column .tmdb-cast-avatar-shell {
  width: clamp(54px, 5.7vw, 78px);
  height: clamp(54px, 5.7vw, 78px);
}

.detail-info-column .tmdb-cast-name,
.detail-info-column .tmdb-cast-role {
  width: 100%;
  max-width: 100%;
}

.detail-info-column .tmdb-cast-name {
  margin-top: 8px;
  font-size: 12px;
}

.detail-info-column .tmdb-cast-role {
  font-size: 10.5px;
}

.detail-episodes-column {
  position: sticky;
  top: 24px;
  display: flex;
  max-height: calc(100vh - 112px);
  flex-direction: column;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(12, 13, 17, 0.78);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}

.detail-episodes-column > .console-heading {
  flex: 0 0 auto;
}

.detail-episodes-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 10px 8px 0;
  scrollbar-color: rgba(255, 87, 157, 0.62) rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
}

.detail-episodes-scroll::-webkit-scrollbar {
  width: 7px;
}

.detail-episodes-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.detail-episodes-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 87, 157, 0.62);
}

.detail-episodes-scroll .server-selection-bar {
  position: sticky;
  z-index: 2;
  top: 0;
  padding-bottom: 12px;
  background: rgba(12, 13, 17, 0.96);
}

.detail-episodes-scroll #server-episodes-container {
  min-height: 120px;
}

@media (max-width: 980px) {
  .detail-two-column-layout {
    grid-template-columns: 1fr;
  }

  .detail-episodes-column {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .detail-episodes-scroll {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .detail-episodes-scroll .server-selection-bar {
    position: static;
  }
}

@media (max-width: 560px) {
  .detail-info-column .detail-overview-meta-grid {
    grid-template-columns: 1fr;
  }

  .detail-info-column .tmdb-cast-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 6px;
  }

  .detail-episodes-column {
    padding: 14px;
  }
}

/* ========================================================
   TMDB FULL DETAIL DATA
   ======================================================== */
.tmdb-full-details {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  margin-top: clamp(28px, 4vw, 52px);
}

.tmdb-rich-section {
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.tmdb-rich-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}

.tmdb-rich-section-heading::before {
  content: "";
  display: block;
  width: 4px;
  min-width: 4px;
  height: 39px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff2d8d, #ff8fbd);
}

.tmdb-rich-kicker {
  display: block;
  color: rgba(255, 143, 189, 0.8);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tmdb-rich-section-heading h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.tmdb-rich-overview {
  margin: 0 0 20px;
  max-width: 78ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-line;
}

.tmdb-rich-tagline {
  margin: 0 0 13px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
}

.tmdb-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.tmdb-info-item {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.tmdb-info-item dt {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tmdb-info-item dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.55;
}

.tmdb-rich-subheading {
  margin: 20px 0 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 700;
}

.tmdb-rich-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tmdb-rich-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.tmdb-rating-tags span {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}

.tmdb-rating-tags b {
  margin-left: 4px;
  color: #fff;
}

.tmdb-company-grid,
.tmdb-season-grid,
.tmdb-next-episode-grid,
.tmdb-provider-grid,
.tmdb-review-grid,
.tmdb-translation-list {
  display: grid;
  gap: 12px;
}

.tmdb-company-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tmdb-company-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.tmdb-company-card img {
  width: 58px;
  max-height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.82;
}

.tmdb-company-card strong,
.tmdb-company-card small {
  display: block;
}

.tmdb-company-card strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.tmdb-company-card small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}

.tmdb-company-mark {
  display: grid;
  width: 58px;
  height: 28px;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #0a0a0d;
  font-size: 9px;
  font-weight: 900;
}

.tmdb-collection-box {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 45, 141, 0.22);
  border-radius: 13px;
  background: rgba(255, 45, 141, 0.06);
}

.tmdb-collection-box > span {
  color: rgba(255, 183, 215, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.tmdb-collection-box h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 18px;
}

.tmdb-collection-box p,
.tmdb-season-grid article > p,
.tmdb-next-episode-grid p,
.tmdb-review-card > p,
.tmdb-translation-card > p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
}

.tmdb-season-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tmdb-season-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.tmdb-season-grid article > div {
  display: flex;
  gap: 10px;
}

.tmdb-season-grid img {
  width: 48px;
  height: 70px;
  flex: 0 0 auto;
  border-radius: 7px;
  object-fit: cover;
}

.tmdb-season-grid h3 {
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}

.tmdb-season-grid h3 + p,
.tmdb-season-grid b,
.tmdb-next-episode-grid small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.tmdb-season-grid b {
  color: #fde68a;
}

.tmdb-next-episode-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.tmdb-next-episode-grid article,
.tmdb-crew-group,
.tmdb-provider-country,
.tmdb-review-card,
.tmdb-translation-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.tmdb-next-episode-grid header,
.tmdb-provider-country header,
.tmdb-review-card header,
.tmdb-translation-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tmdb-next-episode-grid h3,
.tmdb-provider-country h3,
.tmdb-review-card h3,
.tmdb-translation-card h3,
.tmdb-crew-group h3 {
  color: #fff;
  font-size: 14px;
}

.tmdb-next-episode-grid header span,
.tmdb-provider-country header a,
.tmdb-review-card time,
.tmdb-translation-card header span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}

.tmdb-next-episode-grid article > strong {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
}

.tmdb-crew-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tmdb-rich-crew-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.tmdb-rich-crew-list > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
}

.tmdb-rich-crew-list span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

.tmdb-rich-crew-list small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  text-align: right;
}

.tmdb-alt-title-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tmdb-alt-title-grid > div {
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.15);
}

.tmdb-alt-title-grid strong,
.tmdb-alt-title-grid span {
  display: block;
}

.tmdb-alt-title-grid strong {
  color: rgba(255, 255, 255, 0.83);
  font-size: 12px;
  line-height: 1.45;
}

.tmdb-alt-title-grid span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.tmdb-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.tmdb-video-card {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
  color: inherit;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.tmdb-video-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 45, 141, 0.45);
  background: rgba(255, 255, 255, 0.05);
}

.tmdb-video-thumb {
  display: grid;
  height: 104px;
  place-items: center;
  background: linear-gradient(135deg, rgba(255, 45, 141, 0.2), rgba(126, 87, 194, 0.14), rgba(255, 255, 255, 0.04));
}

.tmdb-video-thumb span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding-left: 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
}

.tmdb-video-copy {
  padding: 11px;
}

.tmdb-video-copy h3 {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tmdb-video-copy p {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
}

.tmdb-provider-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tmdb-provider-country header a,
.tmdb-review-card > a,
.tmdb-translation-card > a {
  color: #ff9dca;
  text-decoration: none;
}

.tmdb-provider-group {
  margin-top: 13px;
}

.tmdb-provider-group > strong {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tmdb-provider-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tmdb-provider-group span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.tmdb-provider-group img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
}

.tmdb-release-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
}

.tmdb-release-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.tmdb-release-table th,
.tmdb-release-table td {
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  vertical-align: top;
}

.tmdb-release-table th {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tmdb-release-table tr:last-child td {
  border-bottom: 0;
}

.tmdb-review-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tmdb-review-card header b {
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
  font-size: 11px;
}

.tmdb-review-card > a,
.tmdb-translation-card > a {
  display: inline-block;
  margin-top: 11px;
  font-size: 11px;
}

.tmdb-rich-media-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.tmdb-rich-media-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
}

.tmdb-rich-media-poster {
  position: relative;
  display: grid;
  aspect-ratio: 2 / 3;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.tmdb-rich-media-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.tmdb-rich-media-card:hover .tmdb-rich-media-poster img {
  transform: scale(1.05);
}

.tmdb-rich-media-poster span {
  padding: 10px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 10px;
  text-align: center;
}

.tmdb-rich-media-poster b {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.78);
  color: #fde68a;
  font-size: 9px;
}

.tmdb-rich-media-copy {
  padding: 9px;
}

.tmdb-rich-media-copy h3 {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tmdb-rich-media-copy p {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 10px;
}

.tmdb-rich-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tmdb-rich-gallery-posters {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.tmdb-rich-gallery-logos {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tmdb-rich-gallery-item {
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.tmdb-rich-gallery-posters .tmdb-rich-gallery-item {
  aspect-ratio: 2 / 3;
}

.tmdb-rich-gallery-logos .tmdb-rich-gallery-item {
  padding: 12px;
}

.tmdb-rich-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tmdb-rich-gallery-logos .tmdb-rich-gallery-item img {
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.tmdb-translation-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tmdb-translation-card header span {
  white-space: nowrap;
}

.tmdb-raw-details {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.2);
}

.tmdb-raw-details summary {
  padding: 18px 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
}

.tmdb-raw-details pre {
  max-height: 680px;
  overflow: auto;
  margin: 0;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.tmdb-rating-star {
  width: 10px;
  height: 10px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
}

@media (max-width: 1080px) {
  .tmdb-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tmdb-rich-media-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tmdb-rich-gallery-posters { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .tmdb-info-grid,
  .tmdb-company-grid,
  .tmdb-season-grid,
  .tmdb-next-episode-grid,
  .tmdb-crew-grid,
  .tmdb-alt-title-grid,
  .tmdb-video-grid,
  .tmdb-provider-grid,
  .tmdb-review-grid,
  .tmdb-translation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tmdb-rich-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tmdb-rich-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tmdb-rich-gallery-posters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tmdb-rich-gallery-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .tmdb-rich-section { padding: 16px; border-radius: 14px; }
  .tmdb-info-grid,
  .tmdb-company-grid,
  .tmdb-season-grid,
  .tmdb-next-episode-grid,
  .tmdb-crew-grid,
  .tmdb-alt-title-grid,
  .tmdb-video-grid,
  .tmdb-provider-grid,
  .tmdb-review-grid,
  .tmdb-translation-list { grid-template-columns: 1fr; }
  .tmdb-rich-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tmdb-rich-gallery-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tmdb-rich-gallery-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tmdb-release-table { min-width: 560px; }
}

/* Info Modal Styling */
.info-modal .modal-shell {
  width: min(620px, calc(100vw - 32px));
  max-height: min(88vh, calc(100vh - 60px));
  overflow-y: auto;
  padding: 0;
  border-radius: var(--radius-xl, 24px);
  background: #0f1118;
  border: none !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.95), 0 0 45px rgba(255, 45, 141, 0.14);
}

.info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.info-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-icon-badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md, 12px);
  background: rgba(255, 45, 141, 0.14);
  border: 1px solid rgba(255, 45, 141, 0.28);
  font-size: 20px;
}

.info-modal-title {
  margin: 2px 0 0;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 800;
  color: var(--color-text-primary, #ffffff);
}

.info-modal-body {
  padding: 22px 24px 28px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #cbd5e1;
}

.info-content-block {
  margin-bottom: 20px;
}

.info-content-block:last-child {
  margin-bottom: 0;
}

.info-content-block h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary, #ffffff);
}

.info-content-block p {
  margin: 0 0 8px;
}

.info-list {
  margin: 0 0 12px;
  padding-left: 20px;
}

.info-list li {
  margin-bottom: 4px;
}

.info-muted {
  font-size: 12px;
  color: var(--color-text-muted, #64748b);
  font-style: italic;
}

.info-link {
  color: #38bdf8;
  font-weight: 700;
  text-decoration: underline;
}

.info-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-accent-gradient, linear-gradient(135deg, #ff2d8d 0%, #ff6b4a 100%));
  border: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 4px 16px rgba(255, 45, 141, 0.35);
  transition: transform var(--motion-fast, 180ms) ease;
}

.info-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 45, 141, 0.5);
}

/* Telegram Selection Modal */
.telegram-modal .modal-shell {
  width: min(520px, calc(100vw - 28px));
  max-height: min(88vh, calc(100vh - 60px));
  overflow-y: auto;
  padding: 0;
  border-radius: var(--radius-xl, 24px);
  background: #0d1117;
  border: none !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 45px rgba(56, 189, 248, 0.15);
}

.telegram-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.telegram-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.telegram-icon-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  flex-shrink: 0;
}

.telegram-title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.telegram-modal-body {
  padding: 20px 24px 26px;
}

.telegram-desc {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.tele-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tele-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-fast, 180ms), background var(--motion-fast, 180ms), border-color var(--motion-fast, 180ms), box-shadow var(--motion-fast, 180ms);
}

.tele-card:hover {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.18);
}

.tele-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.tele-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.tele-avatar-bot {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.tele-avatar-admin {
  background: rgba(245, 77, 154, 0.15);
  border: 1px solid rgba(245, 77, 154, 0.35);
}

.tele-info {
  min-width: 0;
}

.tele-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.tele-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.tele-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.tele-pill-bot {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.tele-pill-admin {
  background: rgba(245, 77, 154, 0.2);
  color: #ff8bba;
  border: 1px solid rgba(245, 77, 154, 0.35);
}

.tele-detail {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

.tele-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 12px;
  font-weight: 700;
  transition: all var(--motion-fast, 180ms);
  white-space: nowrap;
  flex-shrink: 0;
}

.tele-card:hover .tele-action-badge {
  background: #38bdf8;
  color: #07080a;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4);
}

/* ==========================================================================
   DETAIL INFO ACTION BUTTON & HOVER TOOLTIP
   ========================================================================== */
.hero-actions .btn-detail-info,
.detail-primary-actions .btn-detail-info {
  position: relative;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0;
  border-radius: var(--radius-full) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-emphasized), color var(--motion-fast), filter var(--motion-fast);
}

.hero-actions .btn-detail-info:hover,
.hero-actions .btn-detail-info:focus-visible,
.detail-primary-actions .btn-detail-info:hover,
.detail-primary-actions .btn-detail-info:focus-visible {
  transform: scale(1.12);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ff4d9a !important;
  box-shadow: none !important;
}

.detail-primary-actions .detail-watch {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  font-size: 15px !important;
}

.btn-detail-info svg {
  display: block;
  pointer-events: none;
}

.btn-detail-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(12, 13, 20, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  z-index: 50;
}

.btn-detail-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(12, 13, 20, 0.94) transparent transparent transparent;
}

.btn-detail-info:hover .btn-detail-tooltip,
.btn-detail-info:focus-visible .btn-detail-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   MOVIE DETAIL MODAL DIALOG
   ========================================================================== */
.movie-detail-modal .modal-shell {
  width: min(800px, calc(100vw - 32px));
  max-height: min(90vh, calc(100vh - 48px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain !important;
  padding: 0;
  border-radius: 6px !important;
  background: #0b0d14;
  border: none !important;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.95), 0 8px 32px rgba(0, 0, 0, 0.8);
  position: relative;
}

.movie-detail-banner-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #12141e;
}

.movie-detail-banner-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 45%, transparent 75%, rgba(11, 13, 20, 0.55) 90%, #0b0d14 100%);
}

.movie-detail-close {
  position: sticky;
  top: 16px;
  margin-top: 16px;
  margin-right: 16px;
  margin-left: auto;
  margin-bottom: -52px;
  z-index: 25;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 11, 17, 0.82);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  transition: all var(--motion-fast);
}

.movie-detail-close:hover {
  background: rgba(245, 77, 154, 0.4);
  border-color: #f54d9a;
  transform: scale(1.08);
}

.movie-detail-modal-body {
  padding: 0 28px 32px;
  position: relative;
  margin-top: -70px;
  z-index: 2;
}

.movie-detail-content-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: flex-start;
}

.movie-detail-modal-aside {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.movie-detail-modal-poster-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12);
  aspect-ratio: 2 / 3;
  background: #151824;
  width: 100%;
}

.movie-detail-modal-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* Modal Poster Action Buttons (Play) */
.movie-detail-modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  width: 100% !important;
}

.movie-detail-modal-actions .modal-play-btn {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(255, 121, 187, 0.96), rgba(221, 53, 139, 0.9)) !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 8px 24px rgba(245, 77, 154, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  cursor: pointer;
  outline: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: transform var(--motion-fast) var(--ease-emphasized), filter var(--motion-fast), box-shadow var(--motion-fast);
}

.movie-detail-modal-actions .modal-play-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 12px 30px rgba(245, 77, 154, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.movie-detail-modal-actions .modal-play-btn:focus-visible {
  outline: 2px solid #ff4d9a !important;
  outline-offset: 3px !important;
}

/* Play Button */
.movie-detail-modal-actions .modal-play-btn {
  background: linear-gradient(135deg, rgba(255, 121, 187, 0.96), rgba(221, 53, 139, 0.9)) !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 19px !important;
  box-shadow: 0 12px 28px rgba(245, 77, 154, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.movie-detail-modal-actions .modal-play-btn span {
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
  margin-left: 2px;
}

.movie-detail-modal-actions .modal-play-btn:hover {
  transform: translateY(-2px) scale(1.08) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 16px 36px rgba(245, 77, 154, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.movie-detail-modal-actions .modal-play-btn:active,
.movie-detail-modal-actions .modal-trailer-btn:active {
  transform: scale(0.96) !important;
}

/* Trailer Button */
.movie-detail-modal-actions .modal-trailer-btn {
  background: rgba(16, 17, 25, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  font-size: 19px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.movie-detail-modal-actions .modal-trailer-btn .trailer-icon {
  line-height: 1;
  display: inline-block;
  transition: transform var(--motion-fast);
}

.movie-detail-modal-actions .modal-trailer-btn:hover {
  transform: translateY(-2px) scale(1.08) !important;
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important;
  border-color: #ff758c !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(255, 75, 43, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Trailer Modal Styling - OLED Black */
.trailer-modal .modal-shell {
  max-width: 860px;
  width: 92%;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.98) !important;
}

.trailer-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #000000 !important;
}

.trailer-title-group {
  display: flex;
  align-items: center;
  min-width: 0;
}

.trailer-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 650px;
}

.trailer-modal-body {
  padding: 0;
  background: #000000 !important;
}

.trailer-video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  background: #000000 !important;
}

.trailer-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.movie-detail-modal-text {
  min-width: 0;
}

#movie-detail-modal-eyebrow,
#movie-detail-modal .detail-eyebrow-pink {
  display: none !important;
}

.movie-detail-modal-title {
  margin: 0 0 4px;
  font-family: var(--font-family-heading);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.01em;
}

.movie-detail-modal-original {
  margin: 0 0 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.modal-badges-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  margin-bottom: 14px !important;
}

.modal-badges-wrap,
#movie-detail-modal-badges {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.modal-badges-wrap .detail-meta-pill,
#movie-detail-modal-badges .detail-meta-pill {
  margin: 0 !important;
}

.badge-trailer-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(255, 65, 108, 0.45) !important;
  transition: transform var(--motion-fast) var(--ease-emphasized), filter var(--motion-fast), box-shadow var(--motion-fast) !important;
}

.badge-trailer-pill:hover {
  transform: translateY(-1px) scale(1.04) !important;
  filter: brightness(1.12) !important;
  box-shadow: 0 6px 18px rgba(255, 65, 108, 0.65) !important;
}

.badge-trailer-pill .trailer-cam-icon-img {
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
  display: inline-block !important;
  filter: brightness(0) invert(1) !important;
}

.movie-detail-modal-text .genre-pills {
  display: flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-bottom: 16px;
}

.movie-detail-dl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 20px;
  padding: 14px 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  width: 100%;
}

.movie-detail-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.movie-detail-row dt {
  color: rgba(255, 255, 255, 0.52);
  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
}

.movie-detail-row dd {
  color: #f1f5f9;
  margin: 0;
  font-weight: 500;
  word-break: break-word;
  white-space: normal;
  overflow: visible;
}

.movie-detail-desc-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.movie-detail-desc-block h3 {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-accent-pink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.movie-detail-desc-block p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre-line;
}

@media (max-width: 640px) {
  .movie-detail-content-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .movie-detail-modal-aside {
    width: 140px;
    margin: 0 auto;
  }
  .movie-detail-modal-actions {
    display: none !important;
  }
  .movie-detail-modal-poster-wrap {
    width: 140px;
    margin: 0 auto;
  }
  .movie-detail-modal-body {
    padding: 0 18px 24px;
    margin-top: -80px;
  }
  .movie-detail-row {
    grid-template-columns: 80px 1fr;
    gap: 8px;
  }
  .movie-detail-close {
    width: 38px;
    height: 38px;
    top: 12px;
    margin-top: 12px;
    margin-right: 12px;
    margin-bottom: -50px;
    font-size: 22px;
    background: rgba(10, 11, 17, 0.88);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65);
  }
}

/* ==========================================================================
   COUNTRY-SPECIFIC MOVIE TITLES - CUSTOM FONTS (NO DROP SHADOW)
   Korean: Fz Bonestay
   Chinese: Fz Thu Phap Giao Long Full
   Japanese: Fz Kingshare
   Thai: Fz Beauty Salon
   ========================================================================== */

/* Korean (Fz Bonestay) */
.korean-title,
.country-font-korean {
  font-family: var(--font-family-korean) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
  text-transform: none !important;
}

#featured-name.korean-title,
#featured-name.country-font-korean,
.detail-main-title.korean-title,
.detail-main-title.country-font-korean {
  font-family: var(--font-family-korean) !important;
  font-size: clamp(44px, 5.2vw, 68px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

#movie-detail-modal-title.korean-title,
#movie-detail-modal-title.country-font-korean {
  font-family: var(--font-family-korean) !important;
  font-size: clamp(32px, 4.2vw, 50px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Chinese (Fz Thu Phap Giao Long Full) */
.chinese-title,
.country-font-chinese {
  font-family: var(--font-family-chinese) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
  text-transform: none !important;
}

#featured-name.chinese-title,
#featured-name.country-font-chinese,
.detail-main-title.chinese-title,
.detail-main-title.country-font-chinese {
  font-family: var(--font-family-chinese) !important;
  font-size: clamp(46px, 5.4vw, 72px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.12 !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

#movie-detail-modal-title.chinese-title,
#movie-detail-modal-title.country-font-chinese {
  font-family: var(--font-family-chinese) !important;
  font-size: clamp(33px, 4.4vw, 52px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Japanese (Fz Kingshare) */
.japanese-title,
.country-font-japanese {
  font-family: var(--font-family-japanese) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
  text-transform: none !important;
}

#featured-name.japanese-title,
#featured-name.country-font-japanese,
.detail-main-title.japanese-title,
.detail-main-title.country-font-japanese {
  font-family: var(--font-family-japanese) !important;
  font-size: clamp(47px, 5.5vw, 71px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.14 !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

#movie-detail-modal-title.japanese-title,
#movie-detail-modal-title.country-font-japanese {
  font-family: var(--font-family-japanese) !important;
  font-size: clamp(35px, 4.5vw, 53px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Thai (Fz Beauty Salon) */
.thai-title,
.country-font-thai {
  font-family: var(--font-family-thai) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
  text-transform: none !important;
}

#featured-name.thai-title,
#featured-name.country-font-thai,
.detail-main-title.thai-title,
.detail-main-title.country-font-thai {
  font-family: var(--font-family-thai) !important;
  font-size: clamp(42px, 5.0vw, 66px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

#movie-detail-modal-title.thai-title,
#movie-detail-modal-title.country-font-thai {
  font-family: var(--font-family-thai) !important;
  font-size: clamp(30px, 4.0vw, 48px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.18 !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

@media (max-width: 960px) {
  .detail-main-title.korean-title,
  .detail-main-title.country-font-korean,
  #featured-name.korean-title,
  #featured-name.country-font-korean {
    font-size: clamp(32px, 7.2vw, 46px) !important;
  }
  .detail-main-title.chinese-title,
  .detail-main-title.country-font-chinese,
  #featured-name.chinese-title,
  #featured-name.country-font-chinese {
    font-size: clamp(34px, 7.5vw, 48px) !important;
  }
  .detail-main-title.japanese-title,
  .detail-main-title.country-font-japanese,
  #featured-name.japanese-title,
  #featured-name.country-font-japanese {
    font-size: clamp(35px, 7.4vw, 48px) !important;
  }
  .detail-main-title.thai-title,
  .detail-main-title.country-font-thai,
  #featured-name.thai-title,
  #featured-name.country-font-thai {
    font-size: clamp(30px, 6.8vw, 42px) !important;
  }
}

/* ==========================================================================
   UNIFIED RADIUS (6PX) & CIRCULAR BUTTON PRESERVATION & TOPBAR SETTINGS
   ========================================================================== */
/* 1. All posters use uniform 6px radius matching list posters */
.poster-wrap,
.poster,
.movie-card,
.see-all-poster,
.movie-aside-poster-shell,
.movie-aside-poster,
.movie-aside img,
.movie-aside-card,
.sidebar-poster-wrap,
.sidebar-poster,
.detail-wide-frame,
.detail-wide-poster,
.wide-frame-shell,
.movie-detail-modal-poster-wrap,
.movie-detail-modal-poster,
.movie-detail-modal-poster-wrap img,
.hero-thumb,
.hero-thumb img,
.continue-card img,
.continue-card .poster-wrap,
.watchlist-card .poster-wrap,
.history-card .poster-wrap {
  border-radius: 6px !important;
}

/* 2. All modals & modal dialogs use uniform 6px radius */
.modal-shell,
.movie-detail-modal .modal-shell,
.settings-modal .modal-shell,
.player-shell,
.player-modal-dialog,
.options-dialog,
.telegram-modal .modal-shell,
.movie-detail-dl,
.filter-panel,
.filter-dropdown-menu,
.server-card,
.tele-card,
.pip-option-card,
.sidebar-card,
.watch-console,
.continue-card,
.collection-toolbar,
.collection-tabs {
  border-radius: 6px !important;
}

/* 2a. All modals & modal dialogs have all borders removed */
.modal,
.modal-shell,
.player-shell,
.confirm-shell,
.info-shell,
.telegram-shell,
.movie-detail-shell,
.movie-detail-modal .modal-shell,
.info-modal .modal-shell,
.telegram-modal .modal-shell,
.confirm-modal .modal-shell,
.settings-modal .modal-shell,
.player-modal-dialog,
.player-options-dialog,
.options-dialog,
.settings-sidebar-panel {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
}

/* 2b. Search input containers use uniform 6px radius */
#search-form,
.search-form,
.search {
  border-radius: 6px !important;
}

/* 2c. Segmented modal badge pills use uniform 3px radius on outer corners */
.fact-pills {
  border-radius: 3px !important;
}
.fact-pills b:first-child {
  border-top-left-radius: 3px !important;
  border-bottom-left-radius: 3px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.fact-pills b:last-child {
  border-top-right-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.fact-pills b:only-child {
  border-radius: 3px !important;
}
.genre-pills {
  border-radius: 4px !important;
}
.genre-pills b:first-child {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.genre-pills b:last-child {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.genre-pills b:only-child {
  border-radius: 4px !important;
}

/* 2d. Segmented player navigation buttons */
.player-nav-group {
  border-radius: 6px !important;
}

/* 3. All episode buttons use uniform 6px radius */
.episode,
.detail-episodes .episode,
.version-tab,
.server-tabs button,
.episode-list button,
.server-pill,
.episode-btn {
  border-radius: 6px !important;
}

/* 4. All standard buttons use uniform 6px radius */
.btn,
.btn-primary,
.btn-secondary,
.primary,
.secondary,
.search-form > button[type="submit"],
.search button,
.detail-back-pill,
.page-back,
.detail-back,
.fixed-back,
.rail-see-all,
.watchlist-remove-btn,
.option-btn,
.watchlist-tab,
.collection-tab,
.collection-clear-btn,
.history-resume-btn,
.history-remove-btn,
.hero-retry-btn,
[data-home-retry],
.filter-form .button-filter,
.filter-form .button-reset {
  border-radius: 6px !important;
}

.tab-badge {
  border-radius: 4px !important;
}

/* 5. PRESERVE FULLY CIRCULAR BUTTONS (50% / circle) */
.btn-play-badge,
.btn-watch-now.btn-play-badge,
.continue-card .btn-play-badge,
.card-bookmark,
.btn-hero-watchlist,
.btn-detail-info,
.detail-info-btn,
.rail-arrow,
.rail-prev,
.rail-next,
.modal-close,
.movie-detail-close,
.close-player,
.scroll-top,
.scroll-top-btn,
.btn-speaker,
.btn-circle-secondary {
  border-radius: 50% !important;
}

/* 6. Topbar Settings Button (no border, no label, icon only) */
#settings-btn,
.settings-btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#settings-btn:hover,
#settings-btn:focus-visible,
.settings-btn:hover,
.settings-btn:focus-visible {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.settings-current-server,
#settings-current-server {
  display: none !important;
}

.settings-icon-img {
  width: 19px !important;
  height: 19px !important;
  filter: brightness(0) invert(1) !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
}

#settings-btn.is-active .settings-icon-img {
  filter: drop-shadow(0 0 10px #ff2d8d) brightness(1.2) !important;
  transform: rotate(90deg) !important;
}

/* ==========================================================================
   SETTINGS LEFT SIDEBAR DRAWER
   ========================================================================== */
.settings-sidebar {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.45s ease;
}

.settings-sidebar.is-open {
  pointer-events: auto;
  visibility: visible;
}

.settings-sidebar-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.settings-sidebar.is-open .settings-sidebar-backdrop {
  opacity: 1;
}

.settings-sidebar-panel {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  width: min(390px, 86vw);
  height: 100%;
  max-height: 100vh;
  background: #08090d;
  border: none !important;
  border-left: none !important;
  border-radius: 0;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 10;
}

.settings-sidebar.is-open .settings-sidebar-panel {
  transform: translateX(0);
}

.settings-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  background: rgba(14, 17, 24, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.settings-sidebar-title {
  margin: 1px 0 0;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.settings-sidebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-sidebar-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 13px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.settings-sidebar-body::-webkit-scrollbar {
  width: 4px;
}
.settings-sidebar-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 2px;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-section-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-section-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff2d8d;
}

.settings-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.settings-section-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.55);
}

.settings-sidebar .server-cards-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.settings-sidebar .server-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
}

.settings-sidebar .server-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(245, 77, 154, 0.4);
}

.settings-sidebar .server-card.is-active {
  border-color: rgba(245, 77, 154, 0.7);
  background: rgba(245, 77, 154, 0.1);
}

.settings-sidebar .server-card-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.settings-sidebar .server-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.settings-sidebar .server-card.is-active .server-status-dot {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.settings-sidebar .server-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}

.settings-sidebar .server-pill {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
}

.settings-sidebar .server-detail {
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}

.settings-sidebar .server-action-badge {
  min-height: 25px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

/* Settings Items & Switch */
.settings-items-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color var(--motion-fast), background var(--motion-fast);
}

.setting-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.setting-item-column {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.setting-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.setting-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setting-item-label {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.setting-item-desc {
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.5);
}

/* Custom Toggle Switch - Compact */
.setting-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.setting-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.setting-switch-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.setting-switch-track::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.setting-switch input:checked + .setting-switch-track {
  background: linear-gradient(135deg, #ff2d8d 0%, #ff6b4a 100%);
  border-color: #ff80bc;
  box-shadow: 0 0 10px rgba(255, 45, 141, 0.45);
}

.setting-switch input:checked + .setting-switch-track::before {
  transform: translateX(16px);
}

.setting-switch:hover .setting-switch-track {
  border-color: rgba(255, 255, 255, 0.35);
}

/* Speed Badge & Range Slider */
.setting-speed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 45, 141, 0.15);
  border: 1px solid rgba(255, 45, 141, 0.4);
  color: #ff2d8d;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.setting-slider-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setting-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}

.setting-slider-input:hover {
  background: rgba(255, 255, 255, 0.2);
}

.setting-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d8d 0%, #ff6b4a 100%);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 45, 141, 0.6);
  transition: transform 0.18s ease;
}

.setting-slider-input::-webkit-slider-thumb:hover,
.setting-slider-input::-webkit-slider-thumb:active {
  transform: scale(1.18);
}

.setting-slider-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d8d 0%, #ff6b4a 100%);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 45, 141, 0.6);
}

.setting-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.settings-sidebar-footer {
  padding: 9px 16px;
  background: rgba(14, 17, 24, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  flex-shrink: 0;
}

/* ==========================================================================
   TMDB ENHANCEMENTS STYLING (RATING BADGE, CAST RAIL, RECOMMENDATIONS)
   ========================================================================== */
.detail-tagline {
  margin: 4px 0 12px;
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.5;
  font-weight: 400;
}

.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
  font-weight: 600;
}

.tmdb-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 2.5px 8.5px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.38);
  color: #fde68a;
  font-size: 9px;
  font-weight: 600;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tmdb-rating-badge:hover {
  transform: scale(1.03);
  border-color: rgba(245, 158, 11, 0.6);
}

.tmdb-rating-star {
  color: #f59e0b;
  font-size: 9px;
  line-height: 1;
}

.tmdb-rating-score {
  color: #ffffff;
  font-weight: 700;
  font-size: 9px;
}

.tmdb-rating-max {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  font-size: 7px;
}

.tmdb-rating-count {
  font-size: 7px;
  font-weight: 500;
  color: rgba(253, 230, 138, 0.85);
  border-left: 1px solid rgba(245, 158, 11, 0.3);
  padding-left: 6px;
  margin-left: 2px;
}

.detail-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 8.5px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
}

.detail-meta-pill.pill-year {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
}

.detail-meta-pill.pill-quality {
  background: rgba(255, 45, 141, 0.16);
  border: 1px solid rgba(255, 45, 141, 0.4);
  color: #ff77a9;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-meta-pill.pill-duration {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
}

.detail-meta-pill.pill-lang {
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}

.detail-meta-pill.pill-episode {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
}

.detail-meta-pill.pill-source {
  background: rgba(255, 45, 141, 0.14);
  border: 1px solid rgba(255, 45, 141, 0.32);
  color: #ff9dca;
  font-weight: 800;
}

/* TMDB Cast Rail */
.detail-cast-rail {
  margin-top: clamp(24px, 3.5vw, 42px);
  margin-bottom: clamp(20px, 3vw, 36px);
}

.tmdb-cast-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(96px, 11vw, 130px);
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  padding: 12px 4px 16px;
}

.tmdb-cast-track::-webkit-scrollbar {
  display: none;
}

.tmdb-cast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: default;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

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

.tmdb-cast-avatar-shell {
  position: relative;
  width: clamp(74px, 8.5vw, 98px);
  height: clamp(74px, 8.5vw, 98px);
  border-radius: 50%;
  overflow: hidden;
  background: #141418;
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tmdb-cast-card:hover .tmdb-cast-avatar-shell {
  border-color: #ff2d8d;
  box-shadow: 0 10px 30px rgba(255, 45, 141, 0.4);
  transform: scale(1.05);
}

.tmdb-cast-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tmdb-cast-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #181820 0%, #0d0e12 100%);
  color: rgba(255, 255, 255, 0.35);
}

.tmdb-cast-name {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  max-width: 116px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.tmdb-cast-card:hover .tmdb-cast-name {
  color: #ff2d8d;
}

.tmdb-cast-role {
  margin-top: 2px;
  font-size: 11.5px;
  color: #94a3b8;
  max-width: 116px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   DETAIL TRAILER BUTTON (Placed next to Chi tiết phim)
   ========================================================================== */
.btn-detail-trailer,
.detail-trailer-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 16px !important;
  margin: 0;
  border-radius: var(--radius-full) !important;
  background: rgba(16, 17, 25, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--motion-fast) var(--ease-emphasized),
              background var(--motion-fast),
              border-color var(--motion-fast),
              box-shadow var(--motion-fast),
              color var(--motion-fast);
}

.btn-detail-trailer:hover,
.btn-detail-trailer:focus-visible,
.detail-trailer-btn:hover,
.detail-trailer-btn:focus-visible {
  transform: translateY(-2px) scale(1.03) !important;
  background: linear-gradient(135deg, rgba(255, 65, 108, 0.95) 0%, rgba(255, 75, 43, 0.9) 100%) !important;
  border-color: #ff758c !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(255, 65, 108, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.btn-detail-trailer:active,
.detail-trailer-btn:active {
  transform: scale(0.97) !important;
}

.trailer-cam-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  transition: transform var(--motion-fast);
}

.btn-detail-trailer:hover .trailer-cam-icon-img,
.detail-trailer-btn:hover .trailer-cam-icon-img {
  transform: rotate(-6deg) scale(1.1);
}

.trailer-btn-label {
  white-space: nowrap;
  line-height: 1;
}

/* Share fan follows the supplied neumorphic radial button style. */
.detail-share {
  position: relative;
  z-index: 30;
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
}

.detail-share .buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: fit-content;
  height: fit-content;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}

.detail-share .share-options {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.detail-share.is-open .buttons,
.detail-share.is-hovered .buttons {
  padding: 60px;
}

.detail-hero:has(.detail-share.is-hovered),
.detail-hero:has(.detail-share.is-open),
.detail-hero:has(.detail-share.is-closing) {
  overflow: visible;
}

.detail-share .main-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  place-items: center !important;
  padding: 8px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #e8e8e8 !important;
  color: #222 !important;
  box-shadow: 2px 2px 6px rgba(202, 202, 202, 0.62), -2px -2px 6px rgba(255, 255, 255, 0.62) !important;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: 0.2s;
}

.detail-share .main-button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
}

.detail-share .button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  place-items: center !important;
  padding: 9px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #e8e8e8 !important;
  color: #222 !important;
  box-shadow: 5px 5px 12px rgba(202, 202, 202, 0), -5px -5px 12px rgba(255, 255, 255, 0) !important;
  cursor: pointer;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}

.detail-share.is-open .button,
.detail-share.is-hovered .button {
  pointer-events: auto;
  box-shadow: 2px 2px 6px rgba(202, 202, 202, 0.52), -2px -2px 6px rgba(255, 255, 255, 0.52) !important;
}

.detail-share.is-open .share-options,
.detail-share.is-hovered .share-options {
  pointer-events: auto;
}

.detail-share .button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 21px;
  height: 21px;
  transform: translate(-50%, -50%);
}

.detail-share .discord-button:hover { background: #5865f2 !important; color: #fff !important; }
.detail-share.is-open .discord-button,
.detail-share.is-hovered .discord-button { transform: translate(calc(-50% + 52px), -50%); }

.detail-share .messenger-button:hover { background: #0093ff !important; color: #fff !important; }
.detail-share.is-open .messenger-button,
.detail-share.is-hovered .messenger-button { transform: translate(calc(-50% + 26px), calc(-50% - 45px)); }

.detail-share .twitter-button:hover { background: #1ca1f1 !important; color: #fff !important; }
.detail-share.is-open .twitter-button,
.detail-share.is-hovered .twitter-button { transform: translate(calc(-50% - 26px), calc(-50% - 45px)); }

.detail-share .instagram-button:hover { background: #f914af !important; color: #fff !important; }
.detail-share.is-open .instagram-button,
.detail-share.is-hovered .instagram-button { transform: translate(calc(-50% - 52px), -50%); }

.detail-share .facebook-button:hover { background: #1877f2 !important; color: #fff !important; }
.detail-share.is-open .facebook-button,
.detail-share.is-hovered .facebook-button { transform: translate(calc(-50% - 26px), calc(-50% + 45px)); }

.detail-share .url-button:hover { background: #555 !important; color: #fff !important; }
.detail-share.is-open .url-button,
.detail-share.is-hovered .url-button { transform: translate(calc(-50% + 26px), calc(-50% + 45px)); }

.detail-share :is(.main-button, .button):focus-visible {
  outline: 2px solid #ff4d9a !important;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .detail-share .buttons,
  .detail-share .main-button,
  .detail-share .button {
    transition: none;
  }
}

.detail-season-scroller {
  width: 100%;
  min-width: 0;
}

.detail-season-buttons {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.detail-season-buttons::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.detail-season-scrollbar {
  position: relative;
  width: 100%;
  height: 20px;
  margin-top: 2px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.detail-season-scrollbar::before {
  position: absolute;
  top: 7px;
  right: 0;
  left: 0;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  content: "";
}

.detail-season-scrollbar[hidden] {
  display: none;
}

.detail-season-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  min-width: 32px;
  border-radius: 999px;
  background: transparent;
  cursor: grab;
}

.detail-season-scrollbar-thumb::after {
  position: absolute;
  top: 7px;
  right: 0;
  left: 0;
  height: 6px;
  border-radius: 999px;
  background: #ec4899;
  content: "";
}

.detail-season-scrollbar-thumb:hover::after {
  background: #f472b6;
}

.detail-season-scrollbar-thumb:active {
  cursor: grabbing;
}

.detail-season-btn {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform var(--motion-fast) var(--ease-emphasized), filter var(--motion-fast), box-shadow var(--motion-fast);
}

.detail-season-btn[data-season-color="pink"] {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
}

.detail-season-btn[data-season-color="blue"] {
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
}

.detail-season-btn[data-season-color="green"] {
  background: linear-gradient(135deg, #16a34a 0%, #14b8a6 100%);
}

.detail-season-btn[data-season-color="orange"] {
  background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
}

.detail-season-btn[data-season-color="purple"] {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.detail-season-btn[data-season-color="red"] {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

.detail-season-btn[data-season-color="cyan"] {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
}

.detail-season-btn[data-season-color="yellow"] {
  background: linear-gradient(135deg, #eab308 0%, #facc15 100%);
  color: #16120a;
}

.detail-season-btn:hover,
.detail-season-btn:focus-visible {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

.detail-season-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.86);
  outline-offset: 3px;
}

.detail-season-btn.active {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

@media (max-width: 640px) {
  .detail-season-buttons {
    flex: 1 1 100%;
  }

  .detail-season-btn {
    flex: 0 0 auto;
  }
}

/* ========================================================
   TMDB RICH ENHANCEMENTS STYLES
   ======================================================== */

/* 1. Title Logos (Hero & Detail) */
.hero-title-logo {
  display: block;
  max-height: 95px;
  max-width: min(85vw, 420px);
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.75));
  transition: transform var(--motion-medium);
}
@media (max-width: 640px) {
  .hero-title-logo {
    max-height: 65px;
    max-width: 280px;
  }
}

.detail-logo-wrap {
  margin: 0.5rem 0 1rem;
}
.detail-title-logo {
  display: block;
  max-height: 110px;
  max-width: min(90vw, 460px);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.85));
}
@media (max-width: 640px) {
  .detail-title-logo {
    max-height: 75px;
    max-width: 300px;
  }
}

/* 2. Age Rating Certification Badge */
.pill-age-cert {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

/* 3. Production Companies (Studios) */
.detail-studios {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.detail-studios .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}
.studios-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}
.studio-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  transition: all var(--motion-fast);
}
.studio-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-1px);
}
.studio-logo-img {
  height: 20px;
  max-width: 70px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.85);
  transition: opacity var(--motion-fast);
}
.studio-item:hover .studio-logo-img {
  filter: brightness(0) invert(1) opacity(1);
}

/* 4. Episode Still Cards Grid */
.episodes-still-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 640px) {
  .episodes-still-container {
    grid-template-columns: 1fr;
  }
}
.episode-still-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
.episode-still-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 107, 0, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
.episode-still-card.current {
  border-color: #ff6b00;
  background: rgba(255, 107, 0, 0.1);
}
.episode-still-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.episode-still-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-medium);
}
.episode-still-card:hover .episode-still-thumb img {
  transform: scale(1.05);
}
.episode-still-meta {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.episode-still-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.episode-still-card.current .episode-still-title {
  color: #ff8533;
}
.episode-still-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.episode-still-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 5. Artist Profile Modal */
.artist-modal {
  z-index: 10050;
}
.artist-shell {
  max-width: 780px !important;
  max-height: 88vh;
  padding: 2rem !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  color: #1f2937;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
  overflow-y: auto;
}
.artist-shell .modal-close {
  border: 0 !important;
  background: #f3f4f6;
  color: #374151;
}
.artist-shell .modal-close:hover { background: #e5e7eb; }
@media (max-width: 640px) {
  .artist-shell {
    padding: 1.25rem !important;
  }
}
.artist-profile-header {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 0.9rem;
  text-align: center;
}
@media (max-width: 640px) {
  .artist-profile-header {
    text-align: center;
  }
}
.artist-avatar-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: #f3f4f6;
}
.artist-avatar-wrap > div {
  color: #9ca3af !important;
}
.artist-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artist-info {
  width: 100%;
  min-width: 0;
}
.artist-name {
  font-size: 1.85rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.5px;
  margin-bottom: 0;
}
.artist-dept-badge {
  display: none !important;
}
.artist-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 1.2rem;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.artist-meta-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  column-gap: 2rem;
  row-gap: 0.75rem;
  font-size: 0.85rem;
  color: #4b5563;
  text-align: left;
}
.artist-meta-list > * {
  min-width: 0;
  text-align: left;
}
.artist-meta-list span strong {
  color: #111827;
}
.artist-bio-section {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
}
.artist-bio-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #4b5563;
  text-align: justify;
  margin: 0;
}
.artist-bio-text strong {
  color: #111827;
}
.artist-filmography-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.artist-filmography-heading h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
}
.artist-filmography-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.85rem;
}
@media (max-width: 640px) {
  .artist-details-grid {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
  .artist-meta-list {
    grid-column: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 0.65rem;
  }
  .artist-bio-section {
    grid-column: 1;
  }
  .artist-filmography-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }
}
.artist-movie-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  border: 0;
  cursor: pointer;
  transition: transform var(--motion-fast), background var(--motion-fast);
}
.artist-movie-card:hover {
  transform: translateY(-4px);
  background: #f3f4f6;
}
.artist-movie-poster-wrap {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: #f3f4f6;
  overflow: hidden;
}
.artist-movie-poster-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artist-movie-meta {
  padding: 0.5rem;
}
.artist-movie-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.artist-movie-sub {
  font-size: 0.7rem;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
}

/* 6. Collection / Franchise Rail */
.detail-collection-section {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.08) 0%, rgba(20, 20, 30, 0.6) 100%);
  border: 1px solid rgba(255, 107, 0, 0.25);
}
.detail-collection-header {
  margin-bottom: 1rem;
}
.detail-collection-header h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}

/* Movie detail modal: genre badges match the compact metadata pills above. */
.movie-detail-modal-text .genre-pills {
  display: flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.movie-detail-modal-text .genre-pills b,
.movie-detail-modal-text .genre-pills b:first-child,
.movie-detail-modal-text .genre-pills b:last-child,
.movie-detail-modal-text .genre-pills b:only-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 4px 10px !important;
  border: 1px solid var(--genre-color, rgba(255, 255, 255, 0.22)) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--genre-color, #e5e7eb) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, filter 0.18s ease !important;
}

.movie-detail-modal-text .genre-pills b:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Account identity in the top bar and settings drawer. */
.account-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.sidebar-avatar { width: 36px; height: 36px; border: none !important; }
.settings-account-section { margin-top: 0; padding-top: 0; border-top: 0; }
.settings-account-actions .account-user { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 7px; }
.settings-account-actions .account-user.hidden { display: none; }
.settings-account-actions .account-name { flex: 1; min-width: 90px; max-width: none; }
.settings-account-actions .account-admin-link, .settings-account-actions .account-logout { min-height: 36px; }
.avatar-upload-label { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; color: #8dded7; font-size: 12px; font-weight: 700; cursor: pointer; }
.avatar-upload-label:hover { color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.visually-hidden:focus-visible { position: static; width: auto; height: auto; clip: auto; }
#settings-btn:focus-visible { outline: 2px solid #3ce3d2 !important; outline-offset: 4px !important; }

/* Guest account CTA: keep the attached login artwork visible on dark surfaces. */
.settings-btn.is-guest {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 4px 0 6px !important;
  gap: 8px !important;
}
/* The ID-based icon-only rule above has higher specificity than the guest CTA. */
#settings-btn.is-guest {
  width: auto !important;
  min-width: max-content !important;
  padding: 0 4px 0 6px !important;
  gap: 8px !important;
}
.topbar-auth-guest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topbar-login-label {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.topbar-guest-avatar {
  width: 30px;
  height: 30px;
  background: transparent;
}
.topbar-guest-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@media (max-width: 680px) {
  .settings-btn.is-guest {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  #settings-btn.is-guest {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .topbar-auth-guest {
    gap: 0;
  }
  .topbar-login-label {
    display: none;
  }
}



/* ========================================================
   DUAL-SERVER & EMPTY NOTICE STYLES (TMDB + Server 1/2)
======================================================== */
.server-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.dual-server-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dual-server-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(14, 16, 25, 0.72);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--motion-fast);
  backdrop-filter: blur(12px);
}

.dual-server-btn:hover {
  background: rgba(245, 77, 154, 0.15);
  border-color: rgba(245, 77, 154, 0.5);
  color: #fff;
  transform: translateY(-2px);
}

.dual-server-btn.active {
  background: var(--color-accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px rgba(245, 77, 154, 0.35);
}

.dual-server-btn .server-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Server Groups / Audio Types (Vietsub, Lồng Tiếng, Thuyết Minh) */
.server-groups-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: var(--space-3) 0 var(--space-4) 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
}

.server-groups-label {
  display: inline-flex;
  align-items: center;
}

.group-title-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.server-group-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.server-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 16, 25, 0.68);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--motion-fast);
  user-select: none;
}

.server-group-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

.server-group-pill.active {
  background: linear-gradient(135deg, rgba(245, 77, 154, 0.28) 0%, rgba(255, 45, 141, 0.42) 100%);
  border-color: rgba(245, 77, 154, 0.7);
  color: #fff;
  box-shadow: 0 4px 16px rgba(245, 77, 154, 0.28);
}

.server-group-pill .grp-icon {
  font-size: 13px;
  line-height: 1;
}

.server-group-pill .grp-name {
  font-weight: 700;
  color: #fff;
}

.server-group-pill .grp-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.server-group-pill.active .grp-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-weight: 700;
}

.server-empty-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  margin: var(--space-4) 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 187, 0, 0.28);
  background: linear-gradient(135deg, rgba(35, 28, 12, 0.75) 0%, rgba(20, 18, 15, 0.9) 100%);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  flex-wrap: wrap;
}

.server-empty-notice.all-empty {
  border-color: rgba(56, 189, 248, 0.28);
  background: linear-gradient(135deg, rgba(12, 28, 45, 0.75) 0%, rgba(10, 18, 25, 0.9) 100%);
}

.server-empty-notice:not(.all-empty) {
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.server-empty-notice .empty-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.server-empty-notice .empty-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.server-empty-notice .empty-text h4 {
  font-size: 16px;
  font-weight: 700;
  color: #ffd666;
  margin: 0 0 4px 0;
}

.server-empty-notice.all-empty .empty-text h4 {
  color: #7dd3fc;
}

.server-empty-notice .empty-text p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.server-empty-notice .empty-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: var(--color-accent-gradient);
  color: #fff;
  transition: all var(--motion-fast);
  white-space: nowrap;
}

.server-empty-notice .empty-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 77, 154, 0.4);
}

.episodes-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* ==========================================================================
   DETAIL OVERVIEW & ENRICHED METADATA SECTION
   ========================================================================== */
.detail-overview-section {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.detail-overview-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.detail-overview-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #f1f5f9;
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.75;
  margin: 0 0 18px;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.detail-overview-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.overview-meta-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  min-width: 0;
}

.overview-meta-full {
  grid-column: 1 / -1;
}

.overview-meta-item .meta-label {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  flex-shrink: 0;
}

.overview-meta-item .meta-value {
  color: #ffffff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* ==========================================================================
   PLAYER MODAL QUICK EPISODES SWITCHER
   ========================================================================== */
.player-quick-episodes {
  padding: 12px 16px 14px;
  background: rgba(11, 13, 19, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.player-quick-ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.player-quick-ep-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.player-quick-ep-active {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent, #ff2d8d);
}

.player-quick-ep-track {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.player-quick-ep-track::-webkit-scrollbar {
  height: 4px;
}
.player-quick-ep-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.player-ep-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.player-ep-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.player-ep-chip.active {
  background: linear-gradient(135deg, #ff2d8d 0%, #ff5252 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(255, 45, 141, 0.4);
}

/* ==========================================================================
   STANDALONE WATCH PAGE
   Keeps the existing player/detail modals intact while giving deep episode
   links (/phim/:slug/tap-:episode) a full viewing layout.
   ========================================================================== */
html:has(body.watch-view),
body.watch-view,
body.watch-view .watch-page {
  background: #000;
}

/* Theater mode: make everything outside the inline video disappear while
   preserving the video's original brightness and appearance. */
body.watch-view.watch-lights-off::before {
  display: none;
}

body.watch-view.watch-lights-off > :not(#app),
body.watch-view.watch-lights-off > #app > :not(#watch-page),
body.watch-view.watch-lights-off #watch-page .watch-layout > .watch-main > :not(.watch-player-card),
body.watch-view.watch-lights-off #watch-page .watch-layout > .watch-sidebar,
body.watch-view.watch-lights-off #watch-page .watch-player-card > :not(.watch-video-shell) {
  visibility: hidden !important;
}

body.watch-view.watch-lights-off #watch-page .watch-video-shell {
  visibility: visible !important;
}

body.watch-view .watch-page {
  min-height: 100vh;
  padding: 60px clamp(12px, 1vw, 18px) 96px;
}

.watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 19vw, 360px);
  align-items: start;
  gap: clamp(18px, 2.4vw, 34px);
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.watch-main,
.watch-sidebar {
  min-width: 0;
}

.watch-player-card,
.watch-comments-section,
.watch-section,
.watch-movie-summary,
.watch-side-section {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.watch-player-card {
  overflow: hidden;
  border-radius: 0;
}

.watch-player-topline,
.watch-player-heading,
.watch-player-footer,
.watch-section-heading,
.watch-comments-heading,
.watch-side-heading,
.watch-comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.watch-player-topline {
  padding: 13px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.watch-back-btn,
.watch-footer-btn,
.watch-see-all-btn {
  min-height: 40px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 700;
  transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}

.watch-back-btn:hover,
.watch-footer-btn:hover,
.watch-see-all-btn:hover {
  color: #fff;
}

.watch-live-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff76af;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.watch-live-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff2d8d;
  box-shadow: 0 0 12px rgba(255, 45, 141, 0.85);
}

.watch-player-heading {
  padding: 7px 0 15px;
}

.watch-kicker,
.watch-section-kicker,
.watch-side-kicker {
  display: block;
  color: #ff72ad;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.watch-player-heading h1,
.watch-section-heading h2,
.watch-comments-heading h2,
.watch-side-heading h2 {
  margin: 4px 0 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.watch-player-heading h1 {
  font-size: clamp(20px, 2.1vw, 30px);
}

.watch-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.watch-nav-btn {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-weight: 700;
}

.watch-nav-btn:hover:not(:disabled) {
  border-color: rgba(255, 114, 173, 0.65);
  background: rgba(255, 45, 141, 0.13);
  color: #fff;
}

.watch-video-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.watch-video-shell iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.watch-video-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(45, 46, 52, 0.3), transparent 45%), #000;
}

.watch-video-loading > span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.watch-player-footer {
  min-height: 48px;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}

.watch-player-footer > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.watch-footer-btn {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 700;
}

.watch-footer-btn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
}

.watch-footer-btn.is-active {
  border-color: rgba(255, 221, 120, 0.62);
  background: rgba(255, 221, 120, 0.12);
  color: #ffe89a;
}

.watch-footer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.watch-tabs {
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 58px);
  min-height: 60px;
  margin: 16px 0 10px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.watch-tabs button {
  position: relative;
  min-height: 48px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.watch-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #ff3f98;
  content: "";
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}

.watch-tabs button:hover,
.watch-tabs button.is-active {
  color: #ff7ab7;
}

.watch-tabs button.is-active::after,
.watch-tabs button:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.watch-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 197, 145, 0.5);
  border-radius: 7px;
  background: rgba(0, 190, 138, 0.06);
  color: rgba(129, 242, 204, 0.78);
  font-size: 11px;
}

.watch-notice p {
  margin: 0;
}

.watch-section {
  margin-top: 26px;
  padding: 0;
  border-radius: 0;
}

.watch-section[hidden],
.watch-comments-section[hidden] {
  display: none !important;
}

.watch-section-heading h2,
.watch-comments-heading h2,
.watch-side-heading h2 {
  font-size: 18px;
}

.watch-side-heading h2 {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.watch-current-chip {
  padding: 6px 10px;
  border: 1px solid rgba(255, 45, 141, 0.38);
  border-radius: 999px;
  background: rgba(255, 45, 141, 0.09);
  color: #ff80ba;
  font-size: 11px;
  font-weight: 800;
}

.watch-server-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.watch-server-tabs .dual-server-btn {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.watch-server-tabs .dual-server-btn.active,
.watch-server-tabs .dual-server-btn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 45, 141, 0.12);
  color: #fff;
}

.watch-server-tabs .server-badge {
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 600;
}

.watch-episodes-loading,
.watch-empty-copy {
  padding: 20px 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
}

.watch-section .server-groups-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.watch-section .server-groups-label,
.watch-section .group-title-tag,
.watch-section .episode-heading,
.watch-section .episode-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.watch-section .server-group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.watch-section .server-group-pill,
.watch-section .episode {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.watch-section .server-group-pill.active,
.watch-section .episode.current,
.watch-section .episode:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 45, 141, 0.15);
  color: #fff;
}

.watch-section .detail-episodes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 17px;
}

.watch-section .detail-episodes .episode {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.watch-section .detail-episodes .episode:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.watch-section .detail-episodes .episode.current {
  border-color: transparent;
  background: linear-gradient(135deg, #ff2d8d 0%, #ff5252 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(255, 45, 141, 0.4);
}

.watch-episode-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.watch-episode-heading-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.watch-episode-sort {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}

button.watch-episode-sort {
  cursor: pointer;
  font: inherit;
  font-size: 9px;
}

button.watch-episode-sort:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
}

.watch-section .detail-episodes.watch-compact-episodes {
  display: flex;
}

.watch-section .episodes-still-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 17px;
}

.watch-section .episode-still-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.watch-section .episode-still-card.current,
.watch-section .episode-still-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.watch-section .episode-still-card.current {
  background: rgba(255, 255, 255, 0.04);
}

.watch-section .episode-still-card.current .episode-still-title {
  color: #fff;
}

.watch-section .episode-still-card.current .episode-still-thumb::after {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 8, 0.58);
  backdrop-filter: blur(1.5px);
  content: "";
}

.episode-still-watching {
  position: absolute;
  inset: 50% 0 auto;
  z-index: 2;
  display: block;
  padding: 0 12px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
.episode-still-play {
  position: absolute !important;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-grid !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
}

.watch-section .episode-still-thumb {
  aspect-ratio: 16 / 9;
}

.watch-section .episode-still-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-section .episode-still-meta {
  padding: 9px;
}

.watch-section .episode-still-title,
.watch-section .episode-still-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-section .episode-still-title {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.watch-section .episode-still-sub,
.watch-section .episode-still-desc {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

.watch-overview-section p {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.7;
}

.watch-comments-section {
  margin-top: 16px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(16, 17, 20, 0.48);
}

.watch-comments-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.watch-comments-heading h2 span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 600;
}

.watch-comment-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 15px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  text-align: left;
}

.watch-comment-login strong,
.watch-comment-login-action {
  color: #ff70ae;
}

.watch-comment-login-action {
  flex-shrink: 0;
  font-weight: 800;
}

.watch-comment-form {
  margin-top: 15px;
}

.watch-comment-form textarea {
  display: block;
  width: 100%;
  min-height: 78px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  outline: none;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
}

.watch-comment-form textarea:focus {
  border-color: rgba(255, 45, 141, 0.7);
}

.watch-comment-form-footer {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.watch-comment-submit {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff2d8d, #e849b5);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.watch-comment-submit:disabled {
  cursor: progress;
  opacity: 0.55;
}

.watch-comments-list {
  margin-top: 18px;
}

.watch-comments-empty {
  margin: 0;
  padding: 16px 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.watch-comment-item {
  display: flex;
  gap: 10px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.watch-comment-avatar {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d8d, #7654ff);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.watch-comment-main {
  min-width: 0;
  flex: 1;
}

.watch-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.watch-comment-meta strong {
  color: #fff;
  font-size: 12px;
}

.watch-comment-meta time {
  color: rgba(255, 255, 255, 0.36);
  font-size: 10px;
}

.watch-comment-main p {
  margin: 6px 0 7px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  line-height: 1.55;
}

.watch-comment-actions {
  display: flex;
  gap: 12px;
}

.watch-comment-actions button {
  color: rgba(255, 255, 255, 0.38);
  font-size: 10px;
}

.watch-sidebar {
  display: grid;
  gap: 28px;
}

.watch-movie-summary,
.watch-side-section {
  padding: 0 0 22px;
  border-radius: 0;
}

.watch-side-section {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.watch-summary-poster {
  width: 108px;
  aspect-ratio: 2 / 3;
  margin-bottom: 13px;
  border-radius: 7px;
  object-fit: cover;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.watch-summary-copy h2 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.watch-summary-copy p {
  margin: 4px 0 11px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.watch-summary-badges,
.watch-summary-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.watch-summary-badges {
  align-items: center;
  gap: 7px;
}

.watch-summary-genres .pill-genre {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.66);
}

.watch-summary-genres {
  margin-top: 9px;
}

.watch-summary-genres .pill-genre:first-child {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(255, 170, 0, 0.4);
  color: #fde68a;
}

.watch-summary-desc {
  display: -webkit-box;
  overflow: hidden;
  margin: 14px 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.watch-summary-meta {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.watch-summary-meta div {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  font-size: 10px;
}

.watch-summary-meta dt {
  color: rgba(255, 255, 255, 0.4);
}

.watch-summary-meta dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
}

.watch-cast-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 8px;
  margin-top: 16px;
}

.watch-cast-card {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.watch-cast-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: #23252c;
}

.watch-cast-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-cast-fallback {
  color: #ff76b4;
  font-size: 18px;
  font-weight: 800;
}

.watch-cast-card strong,
.watch-cast-card small {
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-cast-card strong {
  color: #fff;
  font-size: 10px;
}

.watch-cast-card small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
}

.watch-see-all-btn {
  display: inline-flex;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ff75b2;
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}

.watch-loading {
  display: grid;
  min-height: 55vh;
  place-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

@media (max-width: 1080px) {
  .watch-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 760px) {
  body.watch-view .watch-page {
    padding: 0 10px 76px;
  }

  .watch-layout {
    grid-template-columns: 1fr;
  }

  .watch-sidebar {
    grid-row: 1;
  }

  .watch-main {
    grid-row: 2;
  }

  .watch-player-topline,
  .watch-player-heading,
  .watch-player-footer {
    padding-right: 11px;
    padding-left: 11px;
  }

  .watch-player-heading {
    align-items: flex-start;
  }

  .watch-nav-actions {
    display: none;
  }

  .watch-player-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .watch-player-footer > div {
    width: 100%;
    justify-content: space-between;
  }

  .watch-tabs {
    gap: 14px;
    overflow-x: auto;
    margin-top: 9px;
  }

  .watch-tabs button {
    flex: 0 0 auto;
    font-size: 9px;
  }

  .watch-comment-login,
  .watch-comment-form-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .watch-comment-submit {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .watch-summary-poster {
    width: 90px;
  }

  .watch-cast-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px 5px;
  }

  .watch-cast-avatar {
    width: 45px;
    height: 45px;
  }

  .watch-cast-card strong {
    font-size: 9px;
  }
}

/* Keep compact watch-page episode buttons identical to the player-modal chips. */
.player-ep-chip,
body.watch-view .watch-section .detail-episodes.watch-compact-episodes .episode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.player-ep-chip:hover,
body.watch-view .watch-section .detail-episodes.watch-compact-episodes .episode:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.player-ep-chip.active,
body.watch-view .watch-section .detail-episodes.watch-compact-episodes .episode.current {
  background: linear-gradient(135deg, #ff2d8d 0%, #ff5252 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(255, 45, 141, 0.4);
}

/* Compact footer information layout */
.site-footer .footer-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.site-footer .footer-brand-column {
  width: 100%;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.site-footer .footer-brand-link {
  justify-content: flex-start;
}

.footer-homeland-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid rgba(229, 9, 20, 0.58);
  border-radius: 9999px;
  background: rgba(229, 9, 20, 0.1);
  color: #ff9298;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  align-self: flex-start;
}

.footer-info-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 4px;
  margin-top: 0;
}

.footer-info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.footer-info-link:hover,
.footer-info-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateY(-1px);
}

.footer-info-link:focus-visible {
  outline: 2px solid rgba(255, 45, 141, 0.85);
  outline-offset: 2px;
}

.site-footer .footer-brand-desc {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  line-height: 1.5;
}

.site-footer .footer-copyright {
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  line-height: 1.5;
}

.site-footer .footer-ambient-glow {
  display: none;
}

/* OLED information modal: pure black surface and almost no inner borders. */
.info-modal {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.info-modal .modal-shell {
  width: min(640px, calc(100vw - 28px));
  max-height: min(88vh, calc(100dvh - 40px));
  border: none !important;
  border-radius: 12px;
  background: #000 !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 1), 0 0 36px rgba(255, 45, 141, 0.08);
}

.info-modal .info-modal-header {
  padding: 14px 16px 6px;
  border-bottom: 0;
}

.info-modal .info-title-group {
  gap: 0;
}

.info-modal .info-icon-badge {
  display: none;
}

.info-modal .info-modal-title {
  font-size: 16px;
}

.info-modal .info-modal-body {
  padding: 6px 16px 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.7;
}

.info-modal .info-content-block {
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.info-modal .info-content-block h4 {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12.5px;
}

.info-modal .info-content-block p {
  margin-bottom: 5px;
}

.info-modal .info-list {
  margin-bottom: 6px;
  padding-left: 18px;
}

.info-modal .info-list li {
  margin-bottom: 1px;
}

.info-modal .info-contact-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 8px;
}

.info-modal .info-link {
  color: #ff8fbd;
  font-size: 12px;
}

.info-modal .modal-close {
  width: 36px;
  height: 36px;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 480px) {
  .footer-homeland-note {
    max-width: 100%;
    text-align: left;
  }

  .info-modal .info-modal-header {
    padding-inline: 16px;
  }

  .info-modal .info-modal-body {
    padding-inline: 16px;
  }
}

/* Shared detail-page tokens and final visual overrides. */
:root {
  --play-button-gradient: linear-gradient(135deg, rgba(255, 121, 187, 0.96), rgba(221, 53, 139, 0.9));
  --play-button-accent: #f54d9a;
  --oled-black: #000;
  --control-dark: #17181d;
}

.btn-play-badge,
.hero-actions .btn-watch-now.btn-play-badge,
.continue-card .btn-play-badge {
  background: var(--play-button-gradient) !important;
}

body.detail-view .detail-info-column .detail-overview-card,
body.detail-view .detail-info-column .detail-studios,
body.detail-view .detail-info-column .detail-cast-rail,
body.detail-view .detail-episodes-column {
  background: var(--oled-black) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.detail-view .detail-info-column .detail-overview-card,
body.detail-view .detail-info-column .detail-studios,
body.detail-view .detail-info-column .detail-cast-rail {
  padding-inline: 0 !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.16) !important;
}

body.detail-view .detail-info-column .detail-overview-card {
  padding-top: 0 !important;
  padding-bottom: 22px !important;
}

body.detail-view .detail-info-column .detail-studios {
  margin-bottom: 0 !important;
  padding: 20px 0 22px !important;
}

body.detail-view .detail-info-column .detail-cast-rail {
  padding: 22px 0 0 !important;
  border-bottom: 0 !important;
}

body.detail-view .detail-info-column .detail-cast-rail .eyebrow {
  display: none !important;
}

body.detail-view .detail-episodes-column {
  position: sticky;
  top: 24px;
  padding: 0 !important;
  overflow: hidden;
}

body.detail-view .detail-server-heading {
  color: rgba(255, 255, 255, 0.58) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em;
}

body.detail-view .detail-episodes-scroll {
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
  padding-top: 16px;
}

body.detail-view .detail-episodes-scroll .server-selection-bar {
  position: static !important;
  z-index: auto !important;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
  background: var(--oled-black) !important;
}

/* Cho phép cuộn tiếp ra toàn trang khi danh sách tập đã chạm đầu/cuối. */
body.detail-view .detail-episodes-scroll {
  overscroll-behavior: auto !important;
}

body.detail-view .detail-episodes-scroll .dual-server-btn,
body.detail-view .detail-episodes-scroll .server-group-pill,
body.detail-view .detail-episodes-scroll .toggle-mode-btn {
  border: 0 !important;
  border-radius: 6px;
  background: var(--control-dark) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  box-shadow: none !important;
  font-weight: 600;
}

body.detail-view .detail-episodes-scroll .dual-server-btn:hover,
body.detail-view .detail-episodes-scroll .server-group-pill:hover,
body.detail-view .detail-episodes-scroll .toggle-mode-btn:hover {
  background: #22242b !important;
  color: #fff !important;
  transform: none;
}

body.detail-view .detail-episodes-scroll .dual-server-btn.active,
body.detail-view .detail-episodes-scroll .server-group-pill.active,
body.detail-view .detail-episodes-scroll .toggle-mode-btn.active {
  border: 0 !important;
  background: var(--play-button-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(245, 77, 154, 0.28) !important;
}

body.detail-view .detail-episodes-scroll .server-badge,
body.detail-view .detail-episodes-scroll .grp-count {
  display: none !important;
}

body.detail-view .detail-server-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
}

body.detail-view .detail-server-group-row .detail-server-group-tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

body.detail-view .detail-server-group-tabs .server-group-pill {
  min-height: 40px;
  padding: 0 14px;
}

body.detail-view .detail-server-group-row .detail-episode-toggle {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 640px) {
  body.detail-view .detail-server-group-row .detail-episode-toggle {
    flex: 1 1 100%;
  }
}

body.detail-view .detail-episodes-column .episodes-still-container {
  gap: 10px;
}

body.detail-view .detail-episodes-column .episode-still-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--oled-black) !important;
  box-shadow: none !important;
}

body.detail-view .detail-episodes-column .episode-still-card:hover,
body.detail-view .detail-episodes-column .episode-still-card.current {
  border: 0 !important;
  background: var(--oled-black) !important;
}

body.detail-view .detail-episodes-column .episode-still-card:hover {
  transform: none;
}

body.detail-view .detail-episodes-column .episode-still-card.current .episode-still-title {
  color: #fff !important;
}

body.detail-view .detail-episodes-column .detail-episodes .episode {
  min-height: 40px;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--control-dark) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

body.detail-view .detail-episodes-column .detail-episodes .episode:hover {
  background: #22242b !important;
  color: #fff !important;
}

body.detail-view .detail-episodes-column .detail-episodes .episode.current {
  background: var(--play-button-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(245, 77, 154, 0.28) !important;
}

/* Delayed episode preview. It is moved inside the hovered card so it stays aligned with that episode. */
.episode-hover-preview {
  position: fixed;
  z-index: 1250;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  max-height: 240px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: #000;
  color: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.episode-hover-preview.hidden {
  display: none;
}

.episode-hover-preview.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.episode-hover-preview-media {
  aspect-ratio: 16 / 9;
  align-self: start;
  overflow: hidden;
  background: #000;
}

.episode-hover-preview-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.episode-hover-preview-kicker {
  color: #ff8fbd;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.episode-hover-preview-copy h3 {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.35;
}

.episode-hover-preview-copy p {
  max-height: 100px;
  margin: 0;
  overflow: auto;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  line-height: 1.5;
}

.episode-hover-preview-runtime {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
}

@media (max-width: 980px) {
  body.detail-view .detail-episodes-column {
    position: static;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .episode-hover-preview {
    display: none !important;
  }
}

/* Episode preview stays inside the hovered card instead of floating beside the grid. */
body.detail-view .detail-episodes-column .episode-still-card {
  position: relative;
}

body.detail-view .detail-episodes-column .episode-still-card.episode-hover-preview-active {
  min-height: 270px;
}

body.detail-view .detail-episodes-column .episode-still-card .episode-hover-preview {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100%;
  max-height: none;
  grid-template-columns: minmax(150px, 42%) minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
  padding: 18px;
  border-radius: inherit;
  background: #000;
  box-shadow: none;
}

body.detail-view .detail-episodes-column .episode-still-card .episode-hover-preview-media {
  height: 100%;
  aspect-ratio: auto;
}

body.detail-view .detail-episodes-column .episode-still-card .episode-hover-preview-copy {
  min-width: 0;
  align-self: center;
}

body.detail-view .detail-episodes-column .episode-still-card .episode-hover-preview-copy h3 {
  margin: 8px 0 10px;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.3;
}

body.detail-view .detail-episodes-column .episode-still-card .episode-hover-preview-copy p {
  max-height: 180px;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.65;
}

body.detail-view .detail-episodes-column .episode-still-card .episode-hover-preview-runtime {
  margin-top: 12px;
  font-size: 12px;
}

@media (max-width: 980px) {
  body.detail-view .detail-episodes-column .episode-still-card .episode-hover-preview {
    grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
}

/* Keep the cast rail flush with the information cards above it. */
body.detail-view .detail-info-column > #detail-tmdb-cast-container,
body.detail-view .detail-info-column .detail-cast-rail {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.detail-view .detail-info-column .tmdb-cast-grid {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start;
}

body.detail-view .detail-info-column .tmdb-cast-card {
  display: flex;
  align-items: center;
  text-align: center;
}

body.detail-view .detail-info-column .tmdb-cast-avatar-shell {
  margin-inline: auto;
}

/* Social comment identity, interactions and notification center. */
.settings-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.notification-btn svg {
  width: 16px;
  height: 16px;
}

.notification-btn:hover,
.notification-btn[aria-expanded="true"] {
  border-color: rgba(255, 45, 141, 0.52);
  background: rgba(255, 45, 141, 0.1);
  color: #fff;
}

.notification-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff2d8d;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.notifications-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.notifications-panel.hidden {
  display: none;
}

.notifications-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.notifications-read-all {
  min-height: 32px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: #ff83ba;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.notifications-read-all:hover {
  color: #fff;
}

.notifications-list {
  display: grid;
  gap: 5px;
  max-height: min(56vh, 480px);
  overflow-y: auto;
}

.notifications-empty {
  margin: 0;
  padding: 16px 4px 8px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.5;
}

.notification-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 7px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 58px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.notification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 4px;
}

.notification-item:hover,
.notification-row:focus-within .notification-item {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
}

.notification-item:focus-visible {
  border-color: transparent;
  outline: 2px solid rgba(255, 255, 255, 0.48);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.notification-item.is-unread {
  background: rgba(255, 255, 255, 0.045);
}

.notification-dismiss {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.52);
  font-size: 18px;
  line-height: 1;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.notification-dismiss:hover,
.notification-dismiss:focus-visible {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.notification-dismiss:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.48);
  outline-offset: 1px;
}

.notification-dismiss:disabled {
  cursor: wait;
  opacity: 0.5;
}

.notification-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d8d, #7654ff);
  font-size: 12px;
}

.notifications-panel .presence-avatar[data-presence-state="online"] .presence-indicator {
  box-shadow: 0 0 0 1px #fff;
}

.notification-avatar [hidden] {
  display: none !important;
}

.notification-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.notification-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.notification-copy strong,
.notification-copy small,
.notification-copy time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-copy strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  line-height: 1.35;
}

.notification-copy small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

.notification-copy time {
  color: rgba(255, 255, 255, 0.32);
  font-size: 9px;
}

.notification-unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff2d8d;
  opacity: 0;
}

.notification-item.is-unread .notification-unread-dot {
  opacity: 1;
}

.watch-comment-item {
  position: relative;
  border-radius: 10px;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.watch-comment-item.is-reply {
  margin-left: clamp(30px, 5vw, 48px);
  padding-left: 16px;
  border-left: 2px solid rgba(255, 45, 141, 0.38);
}

.watch-comment-item.is-target {
  animation: watchCommentTargetOutline 3s ease-out both;
  scroll-margin-block: 88px;
}

@keyframes watchCommentTargetOutline {
  0%, 72% {
    outline: 2px solid rgba(245, 77, 154, 0.9);
    outline-offset: 2px;
    box-shadow: 0 0 18px rgba(245, 77, 154, 0.22);
  }
  100% {
    outline-color: rgba(245, 77, 154, 0);
    box-shadow: 0 0 0 rgba(245, 77, 154, 0);
  }
}

.watch-comment-avatar {
  overflow: hidden;
}

.watch-comment-avatar-trigger {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.watch-comment-avatar-trigger:focus-visible {
  outline: 2px solid rgba(255, 45, 141, 0.72);
  outline-offset: 3px;
}

.watch-comment-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.watch-avatar-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.watch-comment-admin-badge {
  padding: 2px 5px;
  border-radius: 4px !important;
  background: rgba(255, 45, 141, 0.14);
  color: #ff8abe;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.watch-comment-mention {
  color: #39a9ff;
  font-weight: 800;
}

button.watch-comment-mention,
.watch-comment-author {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

button.watch-comment-mention {
  color: #39a9ff;
}

button.watch-comment-mention:hover,
button.watch-comment-mention:focus-visible,
.watch-comment-author:hover,
.watch-comment-author:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.watch-comment-author:focus-visible,
button.watch-comment-mention:focus-visible {
  outline: 2px solid rgba(57, 169, 255, 0.55);
  outline-offset: 3px;
  border-radius: 2px;
}

.watch-comment-more,
.watch-comments-more {
  min-height: 34px;
  margin: 6px 0 8px;
  padding: 0 10px;
  border: 1px solid rgba(57, 169, 255, 0.28);
  border-radius: 7px;
  background: rgba(57, 169, 255, 0.08);
  color: #62bcff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.watch-comments-more {
  display: block;
  width: min(100%, 260px);
  margin: 14px auto 4px;
}

.watch-comment-more:hover,
.watch-comments-more:hover,
.watch-comment-more:focus-visible,
.watch-comments-more:focus-visible {
  background: rgba(57, 169, 255, 0.16);
  color: #fff;
}

.watch-comment-replies {
  display: grid;
  gap: 0;
  margin-top: 4px;
}

.watch-comment-actions {
  align-items: center;
  gap: 8px;
}

.watch-comment-action {
  min-height: 34px;
  padding: 0 6px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.watch-comment-action:hover:not(:disabled),
.watch-comment-action:focus-visible,
.watch-comment-action.is-liked {
  background: rgba(255, 45, 141, 0.09);
  color: #ff83ba !important;
}

.watch-comment-action:disabled {
  cursor: progress;
  opacity: 0.55;
}

.watch-comment-delete {
  color: #ff9b9b !important;
}

.watch-comment-delete:hover:not(:disabled),
.watch-comment-delete:focus-visible {
  background: rgba(255, 92, 92, 0.12);
  color: #ffb0b0 !important;
}

.watch-comment-like-count {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.watch-comment-reply-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-left: 2px solid #ff2d8d;
  background: rgba(255, 45, 141, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.watch-comment-reply-context strong {
  color: #fff;
}

.watch-comment-reply-context button {
  min-height: 28px;
  color: #ff83ba;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 560px) {
  .notification-btn span:not(.notification-badge) {
    display: none;
  }

  .notification-btn {
    width: 36px;
    justify-content: center;
    padding: 0;
  }

  .watch-comment-item.is-reply {
    margin-left: 20px;
  }

  .watch-comment-form-footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* Compact account and notification controls in the top bar. */
.watch-comment-compose {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
}

.watch-comment-input-shell {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 6px;
  overflow: hidden;
}

.watch-comment-input-highlight {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  padding: 0 11px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 38px;
  white-space: pre;
  pointer-events: none;
}

.watch-comment-input-placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.watch-comment-input-shell input {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 11px;
  border: 0;
  border-radius: inherit;
  outline: none !important;
  background: transparent;
  color: transparent;
  caret-color: #fff;
  font: inherit;
  font-size: 13px;
  box-shadow: none !important;
}

.watch-comment-input-shell input::placeholder {
  color: transparent;
}

.watch-comment-input-shell:focus-within {
  border-color: rgba(255, 255, 255, 0.42);
}

.watch-comment-submit {
  display: inline-grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--play-button-accent);
  border-radius: 50%;
  background: var(--play-button-gradient);
  color: #fff;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: 0 3px 12px rgba(245, 77, 154, 0.2);
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.watch-comment-submit::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
  transform: translateX(2px);
}

.watch-comment-submit:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 4px 15px rgba(245, 77, 154, 0.34);
}

.watch-comment-submit:active:not(:disabled) {
  transform: scale(0.88);
}

.watch-comment-submit:disabled {
  background: var(--play-button-gradient);
  cursor: progress;
  opacity: 0.58 !important;
}

.watch-comment-submit:focus-visible,
.watch-comment-cancel:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.watch-comment-cancel {
  display: inline-grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.watch-comment-cancel span {
  font-size: 22px;
  line-height: 1;
}

.watch-comment-cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.watch-comment-cancel:active:not(:disabled) {
  transform: scale(0.9);
}

.watch-comment-cancel[hidden] {
  display: none !important;
}

.watch-mention-menu {
  position: absolute;
  z-index: 40;
  bottom: calc(100% + 7px);
  left: 0;
  display: grid;
  width: min(100%, 360px);
  max-height: 220px;
  gap: 3px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: #101014;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.watch-mention-menu[hidden] {
  display: none !important;
}

.watch-mention-option {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
  cursor: pointer;
}

.watch-mention-option:hover,
.watch-mention-option.is-active,
.watch-mention-option:focus-visible {
  background: rgba(255, 255, 255, 0.09);
}

.watch-mention-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-mention-option-avatar {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
}

.watch-mention-option-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-mention-option-name {
  flex: 1;
}

.watch-mention-relationship {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
  white-space: nowrap;
}

.watch-mention-menu-empty {
  padding: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.social-profile-modal {
  z-index: 75;
}

.social-profile-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.social-profile-shell {
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(82vh, 720px);
  overflow: auto;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px;
  background: linear-gradient(150deg, #1a1a22 0%, #101014 68%);
}

.social-profile-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
}

.social-profile-card {
  position: relative;
  display: grid;
  gap: 22px;
  padding-top: 34px;
}

.social-profile-requests {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 52px);
}

.social-profile-sent-link {
  position: static;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #ff83ba;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.social-profile-sent-link:hover,
.social-profile-sent-link:focus-visible {
  color: #fff;
  outline: none;
}

.social-profile-hero {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
  padding: 8px 28px 4px 0;
}

.social-profile-avatar {
  display: grid;
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  overflow: hidden;
  place-items: center;
  border: 2px solid rgba(255, 45, 141, 0.42);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 45, 141, 0.25), rgba(83, 74, 186, 0.3));
  color: #fff;
  font-size: 30px;
  font-weight: 800;
}

.social-profile-avatar.watch-avatar-has-image {
  border: 0;
  background: transparent;
}

.social-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-profile-identity {
  min-width: 0;
}

.social-profile-label {
  color: #ff7fb5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.social-profile-identity h2,
.social-friends-view h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 0 5px;
  color: #fff;
  font-size: clamp(18px, 4vw, 24px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.social-profile-verified {
  width: 18px;
  height: 18px;
}

.social-profile-identity p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.social-profile-identity .social-profile-age {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
}

.social-profile-admin-note {
  margin: -10px 0 0;
  color: #ffb4d3;
  font-size: 11px;
}

.social-profile-admin-privacy {
  margin: -18px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
}

.social-profile-lists {
  display: grid;
  gap: 13px;
  padding-top: 2px;
}

.social-profile-list-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.social-profile-list-tab {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
  cursor: pointer;
  transition: color 180ms ease;
}

.social-profile-list-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #ff2d8d;
  content: "";
  transform: scaleX(0);
  transition: transform 220ms ease;
}

.social-profile-list-tab:hover,
.social-profile-list-tab.is-active {
  color: #fff;
}

.social-profile-list-tab.is-active::after {
  transform: scaleX(1);
}

.social-profile-list-tab:focus-visible {
  outline: 2px solid rgba(255, 45, 141, 0.7);
  outline-offset: -3px;
}

.social-profile-list-tab small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.social-profile-list-tab.is-active small {
  color: #ff91c0;
}

.social-profile-list-panel {
  display: grid;
  gap: 8px;
}

.social-profile-list-private,
.social-profile-list-empty {
  margin: 0;
  padding: 24px 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  text-align: center;
}

.social-movie-row {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 11px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.social-movie-row:hover,
.social-movie-row:focus-visible {
  border-color: rgba(255, 45, 141, 0.36);
  background: rgba(255, 45, 141, 0.075);
  outline: none;
}

.social-movie-poster {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 54px;
  overflow: hidden;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 16px;
}

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

.social-movie-info {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.social-movie-info strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-movie-info small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
}

.social-profile-friends-count {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.68);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.social-profile-friends-count:hover,
.social-profile-friends-count:focus-visible {
  border-color: rgba(255, 45, 141, 0.45);
  background: rgba(255, 45, 141, 0.08);
  outline: none;
}

.social-profile-friends-count strong {
  color: #fff;
  font-size: 20px;
}

.social-profile-friends-count span:nth-child(2) {
  flex: 1;
}

.social-profile-friends-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 24px;
  line-height: 1;
}

.social-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.social-profile-primary,
.social-profile-secondary {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

.social-profile-primary {
  background: linear-gradient(110deg, #ff2d8d, #dd3aab);
}

.social-profile-secondary {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
}

.social-profile-primary:hover:not(:disabled),
.social-profile-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
}

.social-profile-secondary.is-friend {
  width: 100%;
  text-align: left;
}

.social-profile-primary:disabled,
.social-profile-secondary:disabled {
  cursor: wait;
  opacity: 0.6;
}

.social-profile-invites,
.social-profile-back {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #ff83ba;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.social-profile-invites:hover,
.social-profile-back:hover {
  color: #fff;
}

.social-profile-loading {
  margin: 0;
  padding: 48px 10px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  text-align: center;
}

.social-friends-view {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.social-profile-back {
  justify-self: start;
  margin-bottom: 4px;
}

.social-friends-view h2 {
  margin: 0 0 8px;
  font-size: 19px;
}

.social-friend-row {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.social-request-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-request-row .social-friend-row {
  flex: 1;
}

.social-request-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.social-request-respond {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.social-request-respond.is-accept {
  border-color: transparent;
  background: linear-gradient(110deg, #ff2d8d, #dd3aab);
  color: #fff;
}

.social-request-respond:hover:not(:disabled) {
  filter: brightness(1.1);
}

.social-request-respond:disabled {
  cursor: wait;
  opacity: 0.55;
}

.social-request-cancel {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.social-request-cancel:hover:not(:disabled) {
  border-color: rgba(255, 45, 141, 0.45);
  color: #fff;
}

.social-request-cancel:disabled {
  cursor: wait;
  opacity: 0.55;
}

.social-friend-row:hover,
.social-friend-row:focus-visible {
  border-color: rgba(255, 45, 141, 0.36);
  background: rgba(255, 45, 141, 0.075);
  outline: none;
}

.social-friend-avatar {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 800;
}

.social-friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-friend-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .social-profile-shell {
    padding: 24px 18px;
  }

  .social-profile-hero {
    gap: 12px;
  }

  .social-profile-avatar {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
    font-size: 24px;
  }
}

.topbar-inner {
  gap: clamp(8px, 1.1vw, 16px);
}

.search-shell {
  width: clamp(220px, 22vw, 360px);
  flex: 0 1 clamp(220px, 22vw, 360px);
}

.desktop-nav {
  gap: clamp(0px, 0.2vw, 4px);
  margin-left: 0;
}

.nav-trigger,
.nav-direct {
  padding-inline: clamp(7px, 0.7vw, 11px);
}

.topbar-actions {
  position: relative;
  flex: 0 0 auto;
  gap: 7px;
  margin-left: auto;
}

.topbar-notifications,
.account-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.notification-btn {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
}

.notification-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform 180ms ease, filter 180ms ease;
}

.notification-btn:hover img,
.notification-btn[aria-expanded="true"] img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(2082%) hue-rotate(297deg) brightness(101%) contrast(101%);
  transform: translateY(-1px);
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #09090d;
  font-size: 9px;
}

.notifications-panel {
  position: absolute;
  z-index: 120;
  top: calc(100% + 9px);
  right: -52px;
  width: min(390px, calc(100vw - 24px));
  max-height: min(72vh, 560px);
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: rgba(12, 13, 18, 0.98);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
}

.notifications-panel .notifications-list {
  max-height: min(58vh, 460px);
}

.account-trigger {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
}

.account-trigger:active {
  transform: scale(0.97);
}

.account-trigger:focus-visible,
.notification-btn:focus-visible {
  outline: 2px solid #ff4d9a;
  outline-offset: 3px;
}

.account-trigger.is-authenticated {
  width: 44px;
  padding: 0;
}

.topbar-user-avatar {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.topbar-guest-avatar {
  width: 30px;
  height: 30px;
}

.topbar-login-label {
  font-size: 12px;
}

.account-menu {
  position: absolute;
  z-index: 130;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 248px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(15, 16, 21, 0.98);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
}

.account-menu-identity {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-menu-identity strong,
.account-menu-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-identity strong {
  color: #fff;
  font-size: 13px;
}

.account-menu-identity span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.account-menu-item {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.account-menu-item.is-danger {
  color: rgba(255, 255, 255, 0.82);
}

.account-menu-item.is-danger:hover {
  background: #dc2626;
  color: #fff;
}

.profile-page {
  min-height: 56vh;
  padding: clamp(26px, 5vw, 56px) var(--container-padding, clamp(16px, 3.5vw, 54px)) 72px;
  color: #f7f7fa;
}

.profile-container {
  width: min(100%, 1080px);
  margin: 0 auto;
}

.profile-back-link,
.profile-text-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.profile-back-link:hover,
.profile-text-button:hover {
  color: #ff72ae;
}

.profile-heading {
  margin: 26px 0 27px;
}

.profile-eyebrow {
  color: #ff4d9a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.profile-heading h1 {
  margin: 7px 0 5px;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.04em;
}

.profile-heading p,
.profile-card-heading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  align-items: start;
  gap: 18px;
}

.profile-card {
  min-width: 0;
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(23, 24, 30, 0.96), rgba(12, 13, 18, 0.98));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

.profile-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 22px;
}

.profile-card-icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 77, 154, 0.22);
  border-radius: 12px;
  background: rgba(255, 45, 141, 0.11);
  color: #ff72ae;
  font-size: 22px;
}

.profile-card-heading h2 {
  margin: 0 0 4px;
  font-size: 17px;
}

.profile-card-heading p {
  font-size: 12px;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-form label:not(.profile-avatar-button) {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
}

.profile-form input:not([type="file"]) {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  outline: 0;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font: inherit;
  font-size: 14px;
}

.profile-form input:not([type="file"]):focus {
  border-color: rgba(255, 77, 154, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 77, 154, 0.12);
}

.profile-form input[readonly] {
  color: rgba(255, 255, 255, 0.56);
  cursor: not-allowed;
}

.profile-sharing-form {
  max-width: 760px;
}

.profile-social-intro {
  align-items: center;
}

.profile-social-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.profile-friends-summary,
.profile-sent-shortcut {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.profile-friends-summary:hover,
.profile-friends-summary:focus-visible,
.profile-sent-shortcut:hover,
.profile-sent-shortcut:focus-visible {
  border-color: rgba(255, 45, 141, 0.45);
  color: #fff;
  outline: none;
}

.profile-friends-summary strong {
  color: #fff;
  font-size: 16px;
}

.profile-sent-shortcut strong {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 45, 141, 0.2);
  color: #ff9bc5;
  font-size: 10px;
}

.profile-friends-summary span:last-child,
.profile-sent-shortcut span {
  color: #ff83ba;
  font-size: 17px;
}

.profile-form .profile-sharing-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 2px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.profile-form .profile-sharing-option input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  accent-color: #ff4d9c;
}

.profile-sharing-option span {
  display: grid;
  gap: 4px;
}

.profile-sharing-option strong {
  color: #f7f5f9;
  font-size: 12px;
}

.profile-sharing-option small {
  color: #aaa5b2;
  font-size: 11px;
  font-weight: 450;
  line-height: 1.45;
}

.profile-avatar-editor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-avatar {
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-editor > div {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.profile-avatar-button {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(255, 77, 154, 0.35);
  border-radius: 9px;
  background: rgba(255, 45, 141, 0.1);
  color: #ff9bc4;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.profile-avatar-button:hover {
  background: rgba(255, 45, 141, 0.18);
  color: #fff;
}

.profile-avatar-editor small,
.profile-helper {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.5;
}

.profile-helper {
  margin: -4px 0 3px;
}

.profile-helper strong {
  color: rgba(255, 255, 255, 0.78);
  overflow-wrap: anywhere;
}

.profile-form-status {
  min-height: 18px;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  line-height: 1.5;
}

.profile-form-status.is-error { color: #ff9a9a; }
.profile-form-status.is-success { color: #95e8b6; }

.profile-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 4px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff4d9a, #e92f83);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: filter 180ms ease, transform 180ms ease;
}

.profile-primary-button:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.profile-primary-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

@media (max-width: 1080px) and (min-width: 861px) {
  .topbar-inner { gap: 8px; }
  .search-shell { width: clamp(190px, 21vw, 250px); flex-basis: clamp(190px, 21vw, 250px); }
  .nav-trigger, .nav-direct { padding-inline: 6px; font-size: 11px; }
}

@media (max-width: 860px) {
  .topbar-actions { order: 3; gap: 2px; margin-left: auto; }
  .topbar-inner { gap: clamp(6px, 1.6vw, 12px); }
  .search-shell { flex: 1 1 auto; width: auto; min-width: 0; }
}

@media (max-width: 680px) {
  .account-trigger.is-guest { width: 42px; min-width: 42px; padding: 0; }
  .topbar-auth-guest { gap: 0; }
  .topbar-login-label { display: none; }
  .notification-btn { width: 42px; min-width: 42px; }
  .notifications-panel { right: -48px; }
}

@media (max-width: 760px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 440px) {
  .topbar-actions { gap: 0; }
  .account-trigger, .notification-btn { min-width: 38px; width: 38px; min-height: 40px; height: 40px; }
  .account-trigger.is-authenticated { width: 40px; }
  .topbar-user-avatar { width: 34px; height: 34px; }
  .notifications-panel { right: -42px; }
  .profile-page { padding-inline: 14px; }
}

/* Watch page visual language: OLED black, dashed separators and pink server controls. */
body.watch-view {
  --watch-oled: #000;
  --watch-control: #191a20;
  --watch-pink: #e24a98;
  --watch-pink-bright: #ef5ca8;
  --watch-divider: rgba(255, 255, 255, 0.18);
  background: var(--watch-oled) !important;
}

body.watch-view .watch-page,
body.watch-view .watch-main,
body.watch-view .watch-player-card,
body.watch-view .watch-section,
body.watch-view .watch-comments-section {
  background: var(--watch-oled) !important;
}

body.watch-view .watch-page {
  min-height: 100dvh;
  padding-top: clamp(24px, 3vw, 40px);
}

body.watch-view .watch-tabs {
  margin-top: 16px;
  border-bottom: 1px dashed var(--watch-divider);
}

body.watch-view .watch-tabs button {
  min-height: 48px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  letter-spacing: 0.1em;
}

body.watch-view .watch-tabs button.is-active,
body.watch-view .watch-tabs button:hover,
body.watch-view .watch-tabs button:focus-visible {
  color: var(--watch-pink-bright);
}

body.watch-view .watch-section {
  margin-top: 18px;
}

body.watch-view .watch-section-heading {
  min-height: 44px;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px dashed var(--watch-divider);
}

body.watch-view .watch-section-kicker {
  color: rgba(255, 255, 255, 0.64);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

body.watch-view .watch-server-tabs {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 18px 0 14px;
  border-bottom: 1px dashed var(--watch-divider);
}

body.watch-view .watch-server-tabs .dual-server-btn,
body.watch-view .watch-section .server-group-pill {
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 6px;
  background: var(--watch-control) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 12px;
  font-weight: 600;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.watch-view .watch-server-tabs .dual-server-btn {
  font-size: 11px;
}

body.watch-view .watch-server-tabs .dual-server-btn:hover,
body.watch-view .watch-section .server-group-pill:hover {
  background: #23242b !important;
  color: #fff !important;
  transform: translateY(-1px);
}

body.watch-view .watch-server-tabs .dual-server-btn.active,
body.watch-view .watch-section .server-group-pill.active {
  background: linear-gradient(135deg, var(--watch-pink-bright), var(--watch-pink)) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(226, 74, 152, 0.28) !important;
}

body.watch-view .watch-server-tabs .dual-server-btn:focus-visible,
body.watch-view .watch-section .server-group-pill:focus-visible,
body.watch-view .episode-still-card:focus-visible {
  outline: 3px solid rgba(239, 92, 168, 0.75);
  outline-offset: 3px;
}

body.watch-view .watch-server-tabs .server-badge {
  display: none;
}

body.watch-view .watch-section .server-groups-bar {
  display: block;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.watch-view .watch-section .server-group-tabs {
  gap: 8px;
}

body.watch-view .watch-section .server-group-pill {
  min-height: 32px;
  min-width: 0;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
}

body.watch-view .watch-section .server-group-pill .grp-count {
  display: none;
}

body.watch-view .watch-episode-list-heading {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
}

body.watch-view .watch-episode-sort {
  min-height: 28px;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.62);
}

body.watch-view .watch-section .episodes-still-container {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 12px;
  margin-top: 18px;
}

body.watch-view .watch-section .episode-still-card,
body.watch-view .watch-section .episode-still-card.current,
body.watch-view .watch-section .episode-still-card:hover {
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--watch-oled) !important;
  box-shadow: none !important;
  transform: none;
}

body.watch-view .watch-section .episode-still-card:hover .episode-still-thumb img {
  transform: none;
}

body.watch-view .watch-section .episode-still-thumb {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: #111;
}

body.watch-view .watch-section .episode-still-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 180ms ease;
}

body.watch-view .watch-section .episode-still-card:hover .episode-still-thumb img {
  filter: brightness(1.12);
}

body.watch-view .watch-section .episode-still-card.current .episode-still-thumb::after {
  background: rgba(226, 74, 152, 0.16);
  backdrop-filter: none;
}

body.watch-view .watch-section .episode-still-card.current .episode-still-thumb img,
body.watch-view .watch-section .episode-still-card.current:hover .episode-still-thumb img {
  filter: blur(3px) brightness(0.52);
  transform: scale(1.04);
}

body.watch-view .watch-section .episode-still-card.current .episode-still-thumb::after {
  background: rgba(5, 6, 8, 0.32);
}

body.watch-view .watch-section .episode-still-meta {
  padding: 10px 8px 0;
}

body.watch-view .watch-section .episode-still-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

body.watch-view .watch-section .episode-still-sub {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  line-height: 1.35;
}

body.watch-view .watch-section .episode-still-desc {
  display: none;
}

@media (max-width: 900px) {
  body.watch-view .watch-section .episodes-still-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }

  body.watch-view .watch-server-tabs .dual-server-btn,
  body.watch-view .watch-section .server-group-pill {
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.watch-view .watch-section .episodes-still-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body.watch-view .watch-page {
    padding-right: 12px;
    padding-left: 12px;
  }

  body.watch-view .watch-server-tabs,
  body.watch-view .watch-section .server-group-tabs {
    gap: 10px;
  }

  body.watch-view .watch-server-tabs .dual-server-btn,
  body.watch-view .watch-section .server-group-pill {
    flex: 1 1 140px;
    min-width: 0;
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
  }

  body.watch-view .watch-section .episodes-still-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.watch-view .watch-section .episode-still-meta {
    padding-right: 8px;
    padding-left: 8px;
  }

  body.watch-view .watch-section .episode-still-title {
    font-size: 13px;
  }
}

/* Compact episode mode: keep every episode column aligned, even when the
   labels change from one to three/four digits as the list wraps. */
body.watch-view .watch-section .detail-episodes.watch-compact-episodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 17px;
}

body.watch-view .watch-section .detail-episodes.watch-compact-episodes .episode {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 4px !important;
  line-height: 1.2;
  white-space: nowrap;
}

/* Keep the watch-page controls visually tighter than the rounded general UI. */
body.watch-view .watch-server-tabs .dual-server-btn,
body.watch-view .watch-section .server-group-pill,
body.watch-view .watch-episode-sort {
  border-radius: 4px !important;
}

/* Compact watch controls: keep the title and icon actions on one row. */
body.watch-view .watch-player-footer { flex-direction: row !important; align-items: center !important; gap: 8px !important; padding: 6px 0 !important; }
body.watch-view .watch-now-playing { min-width: 0; overflow: hidden; flex: 1 1 auto; text-overflow: ellipsis; white-space: nowrap; }
body.watch-view .watch-footer-actions { flex: 0 0 auto; gap: 4px; }
body.watch-view .watch-footer-btn { border: 0; background: transparent; }
body.watch-view .watch-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; overflow: visible !important; margin-top: 9px; }
body.watch-view .watch-tabs button { flex: 1 1 0 !important; }

/* iOS zooms focused inputs below 16px. Include touch devices in landscape. */
@media (any-pointer: coarse) {
  .search-form input {
    font-size: 16px;
  }
}

/* Smaller topbar footprint across desktop and mobile. */
.topbar-inner {
  min-height: clamp(42px, 3vw, 48px) !important;
  gap: clamp(6px, 0.85vw, 12px);
  padding-top: calc(1px + var(--safe-top));
  padding-bottom: 1px;
}

.brand-logo {
  width: clamp(108px, 8.8vw, 144px);
  max-height: 36px;
}

.search-shell {
  width: clamp(200px, 20vw, 330px);
  flex-basis: clamp(200px, 20vw, 330px);
}

.search-form {
  min-height: 30px !important;
  height: 30px !important;
  padding: 1px 3px 1px 8px;
}

.search-form input {
  font-size: 12px;
}

.search-form button {
  min-height: 24px;
  height: 24px;
  padding-inline: 10px;
  font-size: 11px;
}

.desktop-nav {
  gap: 0;
}

.nav-trigger,
.nav-direct {
  height: 34px;
  gap: 4px;
  padding-inline: clamp(5px, 0.55vw, 8px);
  font-size: 12px;
}

.topbar-actions {
  gap: 4px;
}

.notification-btn,
.account-trigger {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  height: 40px;
}

.account-trigger.is-authenticated {
  width: 40px;
}

.notification-btn img {
  width: 21px;
  height: 21px;
}

.topbar-user-avatar {
  width: 32px;
  height: 32px;
}

.topbar-guest-avatar {
  width: 27px;
  height: 27px;
}

.topbar-login-label {
  font-size: 11px;
}

@media (max-width: 1080px) and (min-width: 861px) {
  .search-shell {
    width: clamp(175px, 19vw, 225px);
    flex-basis: clamp(175px, 19vw, 225px);
  }

  .nav-trigger,
  .nav-direct {
    padding-inline: 5px;
    font-size: 10.5px;
  }
}

@media (max-width: 860px) {
  .topbar-inner {
    min-height: clamp(40px, 5vw, 44px) !important;
    gap: clamp(5px, 1.3vw, 9px);
    padding-top: calc(1px + var(--safe-top));
    padding-bottom: 1px;
  }

  .brand-logo {
    width: clamp(96px, 25vw, 120px);
    max-height: 31px;
  }

  .search-form {
    min-height: 28px !important;
    height: 28px !important;
  }

  .search-form input {
    font-size: 16px;
  }

  .search-form button {
    min-height: 22px !important;
    height: 22px !important;
    padding-inline: 8px;
    font-size: 10px;
  }

  .topbar-actions {
    gap: 1px;
  }

  .notification-btn,
  .account-trigger,
  .account-trigger.is-guest {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    height: 38px;
    padding: 0;
  }

  .topbar-user-avatar {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 440px) {
  .topbar-inner {
    gap: 5px;
    padding-inline: 10px;
  }

  .brand-logo {
    width: 92px;
    max-height: 27px;
  }

  .search-form {
    padding-right: 2px;
    padding-left: 5px;
  }

  .search-form button {
    padding-inline: 7px;
  }

  .notification-btn,
  .account-trigger,
  .account-trigger.is-guest,
  .account-trigger.is-authenticated {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    height: 36px;
  }

  .topbar-user-avatar {
    width: 28px;
    height: 28px;
  }
}

/* The notification control is intentionally smaller than the account button. */
.notification-btn {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  height: 34px;
}

.notification-btn img {
  width: 18px;
  height: 18px;
}

@media (max-width: 860px) {
  .notification-btn {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    height: 32px;
  }

  .notification-btn img {
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 440px) {
  .notification-btn {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    height: 30px;
  }
}

/* Make unread notifications visible without enlarging the topbar control. */
.notification-btn {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  height: 30px;
}

.notification-btn img {
  width: 16px;
  height: 16px;
}

@media (max-width: 860px) {
  .notification-btn {
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    height: 28px;
  }

  .notification-btn img {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 440px) {
  .notification-btn {
    width: 26px;
    min-width: 26px;
    min-height: 26px;
    height: 26px;
  }

  .notification-btn img {
    width: 14px;
    height: 14px;
  }
}

/* Profile page: cinematic account space with clear identity and settings hierarchy. */
.profile-page {
  --profile-accent: #ff68a9;
  --profile-accent-strong: #ed438d;
  --profile-accent-soft: rgba(255, 77, 154, 0.13);
  --profile-surface: rgba(17, 18, 24, 0.94);
  --profile-border: rgba(255, 255, 255, 0.1);
  --profile-text: #f8f7fa;
  --profile-muted: #b6b2bf;
  position: relative;
  isolation: isolate;
  min-height: 65vh;
  padding: clamp(26px, 4vw, 48px) var(--container-padding, clamp(16px, 4vw, 56px)) 88px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 86% 9%, rgba(143, 35, 91, 0.16), transparent 34rem),
    radial-gradient(ellipse at 5% 38%, rgba(52, 42, 91, 0.15), transparent 31rem),
    #09090d;
  color: var(--profile-text);
}

.profile-container {
  position: relative;
  width: min(100%, 1080px);
}

.profile-back-link {
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  color: #c4c1cb;
  font-size: 13px;
  transition: color 180ms ease, background-color 180ms ease;
}

.profile-back-link svg {
  width: 18px;
  height: 18px;
}

.profile-back-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.profile-back-link:focus-visible,
.profile-text-button:focus-visible,
.profile-avatar-button:focus-visible,
.profile-primary-button:focus-visible {
  outline: 3px solid rgba(255, 104, 169, 0.78);
  outline-offset: 3px;
}

.profile-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 20px 0 24px;
}

.profile-card-kicker,
.profile-section-kicker {
  color: var(--profile-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.profile-heading h1 {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.profile-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 172px;
  padding: clamp(22px, 3.2vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(31, 23, 34, 0.98) 0%, rgba(22, 20, 29, 0.96) 52%, rgba(25, 18, 31, 0.96) 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.06);
}

.profile-hero::before {
  position: absolute;
  top: -170px;
  right: 3%;
  width: 480px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(229, 62, 137, 0.2), rgba(137, 53, 136, 0.08) 38%, transparent 70%);
  content: "";
  pointer-events: none;
}

.profile-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(116deg, transparent 45%, rgba(255, 255, 255, 0.025) 68%, transparent 88%);
  content: "";
  pointer-events: none;
}

.profile-hero-main,
.profile-hero-action {
  position: relative;
  z-index: 1;
}

.profile-hero-main {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.profile-avatar--hero {
  width: 96px;
  height: 96px;
  flex-basis: 96px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 10px 28px rgba(0, 0, 0, 0.36);
  font-size: 34px;
}

.profile-hero-identity {
  min-width: 0;
}

.profile-identity-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e9c6d6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.profile-identity-label svg {
  width: 15px;
  height: 15px;
  color: var(--profile-accent);
}

.profile-hero-identity h2 {
  max-width: min(50vw, 520px);
  margin: 8px 0 4px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hero-identity p {
  max-width: min(50vw, 520px);
  margin: 0;
  overflow-wrap: anywhere;
  color: #c6c0cb;
  font-size: 14px;
  line-height: 1.5;
}

.profile-hero-action {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.profile-hero-action small {
  color: #c1bbc7;
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
}

.profile-hero-orbit {
  position: absolute;
  top: -90px;
  right: 19%;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.018), 0 0 0 58px rgba(255, 255, 255, 0.012);
  pointer-events: none;
}

.profile-avatar-button {
  gap: 8px;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--play-button-accent);
  border-radius: 12px;
  background: var(--play-button-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 8px 20px rgba(245, 77, 154, 0.18);
  transition: filter 180ms ease, box-shadow 180ms ease;
}

.profile-avatar-button svg {
  width: 17px;
  height: 17px;
}

.profile-avatar-button:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(245, 77, 154, 0.28);
}

.profile-section-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0 16px;
}

.profile-social-intro {
  align-items: center;
}

.profile-section-kicker {
  font-size: 9px;
}

.profile-section-intro h2 {
  margin: 5px 0 0;
  color: #f6f4f8;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.profile-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 18px;
}

.profile-card {
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--profile-border);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(21, 22, 29, 0.97), var(--profile-surface));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.035);
}

.profile-card-heading {
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.profile-card-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 1px solid rgba(255, 104, 169, 0.22);
  border-radius: 13px;
  background: var(--profile-accent-soft);
  color: var(--profile-accent);
}

.profile-card-icon svg {
  width: 21px;
  height: 21px;
}

.profile-card-kicker {
  display: block;
  margin: 0 0 4px;
  font-size: 9px;
  letter-spacing: 0.13em;
}

.profile-card-heading h2 {
  margin: 0 0 3px;
  color: #f7f5f9;
  font-size: 17px;
  font-weight: 750;
}

.profile-card-heading p {
  color: #b6b2bf;
  font-size: 12px;
}

.profile-form {
  gap: 11px;
}

.profile-form-fields {
  display: grid;
  gap: 10px;
}

.profile-form label:not(.profile-avatar-button) {
  margin-top: 2px;
  color: #dfdce5;
  font-size: 12px;
  font-weight: 700;
}

.profile-form input:not([type="file"]) {
  min-height: 48px;
  padding: 0 14px;
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  background: #0d0e13;
  color: #faf9fc;
  font-size: 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.profile-form input:not([type="file"]):focus {
  border-color: rgba(255, 255, 255, 0.38);
  background: #111118;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.profile-form input[readonly] {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: #c0bbc7;
  cursor: default;
}

.profile-helper,
.profile-avatar-editor small {
  color: #aaa5b2;
  font-size: 12px;
}

.profile-helper strong {
  color: #e8e3ec;
}

.profile-form-status {
  color: #c0bbc7;
}

.profile-form-status.is-error {
  color: #ffaaaa;
}

.profile-form-status.is-success {
  color: #a1e9bf;
}

.profile-primary-button {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border: 1px solid var(--play-button-accent);
  border-radius: 11px;
  background: var(--play-button-gradient);
  color: #fff;
  box-shadow: 0 8px 20px rgba(245, 77, 154, 0.24);
  font-size: 13px;
  transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.profile-primary-button:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(245, 77, 154, 0.32);
}

.profile-primary-button:active:not(:disabled) {
  transform: translateY(0);
}

.profile-text-button {
  justify-self: start;
  min-height: 44px;
  padding-inline: 4px;
  color: var(--play-button-accent);
}

@media (max-width: 820px) {
  .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-password-section {
    order: 2;
  }
}

@media (max-width: 600px) {
  .profile-page {
    padding: 22px 16px 64px;
  }

  .profile-heading {
    margin: 18px 0 20px;
  }

  .profile-heading h1 {
    font-size: clamp(30px, 9vw, 38px);
  }

  .profile-hero {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .profile-hero-main {
    gap: 16px;
  }

  .profile-avatar--hero {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
    font-size: 28px;
  }

  .profile-hero-identity h2 {
    max-width: 100%;
    font-size: 21px;
  }

  .profile-hero-identity p {
    max-width: 100%;
    font-size: 12px;
  }

  .profile-hero-action {
    justify-items: start;
    padding-left: 92px;
  }

  .profile-hero-action small {
    text-align: left;
  }

  .profile-hero-orbit {
    top: -130px;
    right: -180px;
  }

  .profile-section-intro {
    align-items: start;
    margin: 26px 0 13px;
  }

  .profile-social-intro {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-social-shortcuts {
    justify-content: flex-start;
  }

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

  .profile-form input:not([type="file"]) {
    font-size: 16px;
  }
}

@media (max-width: 380px) {
  .profile-page {
    padding-inline: 12px;
  }

  .profile-avatar--hero {
    width: 66px;
    height: 66px;
    flex-basis: 66px;
    font-size: 24px;
  }

  .profile-hero-main {
    gap: 13px;
  }

  .profile-hero-action {
    padding-left: 79px;
  }
}

/* Keep the existing topbar row on a straight dark bar, with its controls near
   the left and right edges. */
.topbar {
  isolation: isolate;
  overflow: visible;
  height: 48px;
  min-height: 48px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.topbar::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
  content: "";
  background: url("/assets/notch-navbar-topbar.svg") center top / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.48));
}

.topbar::after {
  content: none !important;
}

.topbar-inner {
  position: relative;
  z-index: 1;
  transform: translateY(-2px);
  height: 48px;
  min-height: 48px !important;
  align-items: center;
  padding-inline: clamp(12px, 1vw, 20px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.topbar .account-trigger.is-guest {
  width: max-content;
  min-width: max-content;
  padding-inline: 6px;
}

.topbar .topbar-auth-guest,
.topbar .topbar-login-label {
  white-space: nowrap;
}

@media (max-width: 860px) {
  .topbar-inner {
    padding-top: calc(1px + var(--safe-top)) !important;
  }
}

@media (min-width: 861px) {
  body:not(.home-topbar-overlay):not(.detail-view) #browser {
    padding-top: max(48px, clamp(48px, 5vw, 76px));
  }
}

.topbar .brand-logo {
  width: clamp(96px, 7.5vw, 124px);
  max-height: 38px;
  transform: translateY(0px);
  filter: drop-shadow(0 3px 14px rgba(255, 255, 255, 0.1));
}

.topbar .search-form {
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}

@media (min-width: 861px) {
  .topbar .search-shell {
    width: clamp(180px, 17vw, 280px);
    flex-basis: clamp(180px, 17vw, 280px);
  }
}

.topbar .search-form input {
  color: #fff;
  caret-color: #fff;
  font-weight: 400;
}

.topbar .search-form input::placeholder {
  font-weight: 400;
}

.topbar .search-form:focus-within {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.topbar .search-form > button[type="submit"] {
  min-height: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: 16px;
  background: #f4f4f5;
  color: #09090b;
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);
}

.topbar .search-form > button[type="submit"]:hover {
  background: #fff;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.14);
}

.topbar .nav-trigger,
.topbar .nav-direct {
  color: rgba(255, 255, 255, 0.7);
}

.topbar .nav-trigger:hover,
.topbar .nav-direct:hover,
.topbar .nav-trigger.active,
.topbar .nav-direct.active,
.topbar .nav-item.is-open .nav-trigger {
  background: transparent;
  color: #fff;
}

.topbar .desktop-nav svg {
  opacity: 0.7;
  transition: opacity 180ms ease;
}

.topbar .desktop-nav button:hover svg,
.topbar .desktop-nav button:focus-visible svg {
  opacity: 1;
}

.topbar .nav-menu {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.98);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.topbar .search-history-dropdown,
.topbar .notifications-panel,
.topbar .account-menu {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.97);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.topbar .nav-menu button:hover,
.topbar .nav-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.topbar .notification-btn img {
  opacity: 0.7;
  transition: opacity 180ms ease;
}

.topbar .notification-btn:hover img,
.topbar .notification-btn[aria-expanded="true"] img {
  filter: brightness(0) invert(1);
  opacity: 1;
  transform: none;
}

.topbar .notification-badge {
  min-width: 10px;
  height: 10px;
  padding: 0 1px;
  border-color: #000;
  border-width: 1px;
  background: #f4f4f5;
  color: #09090b;
  font-size: 9px;
}

.topbar .watchlist-link #watchlist-badge {
  min-width: 14px;
  height: 14px;
  padding: 0 2px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 8px;
  font-weight: 600;
}

.topbar .account-trigger:hover,
.topbar .account-trigger[aria-expanded="true"] {
  background: transparent;
}

.topbar .account-trigger:focus-visible,
.topbar .notification-btn:focus-visible {
  outline-color: rgba(255, 255, 255, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .profile-back-link,
  .profile-avatar-button,
  .profile-form input:not([type="file"]),
  .profile-primary-button {
    transition: none;
  }
}

/* Homepage movie rails: stacked controls on the right edge. */
.home-page-rail .rail-shell {
  padding-right: 52px;
}

.home-page-rail .rail-arrow {
  top: 0;
  right: 0;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: calc(50% - 3px);
  min-height: 44px;
  padding: 0;
  border: 0 !important;
  border-radius: 6px !important;
  background: #202020;
  color: #fff;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.home-page-rail .rail-next {
  top: 12px;
  height: calc(50% - 15px);
}

.home-page-rail .rail-prev {
  top: calc(50% + 3px);
}

.home-page-rail .rail-arrow-icon {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #a1a1aa;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.home-page-rail .rail-prev .rail-arrow-icon {
  transform: scaleX(-1);
}

.home-page-rail .rail-arrow:hover {
  background: #454545;
  border: 0 !important;
  box-shadow: none;
  transform: none;
  outline: none;
}

.home-page-rail .rail-arrow:hover:focus-visible {
  outline: none;
}

.home-page-rail .rail-arrow:focus-visible:not(:hover) {
  background: #454545;
  border: 0 !important;
  box-shadow: none;
  transform: none;
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
}

.home-page-rail .rail-arrow:active {
  background: #555 !important;
  transform: translateY(1px) scale(0.98);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-page-rail .rail-arrow {
    transition: none;
  }
}

.home-page-rail .rail-track {
  gap: 16px;
  padding-left: 0;
  grid-auto-columns: calc((100% - 64px) / 5);
}

.home-page-rail .rail-card {
  width: 100%;
}

.home-page-rail .rail-card .movie-meta h3 {
  font-size: calc(var(--font-size-sm) + 1px);
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* Movie list filters */
#toolbar .filter-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: clamp(20px, 2vw, 30px);
}

#listing-header .filter-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: color var(--motion-fast), transform var(--motion-fast);
}

#listing-header .filter-toolbar-toggle img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}

#listing-header .filter-toolbar-toggle:hover {
  color: #fff;
}

#listing-header .filter-toolbar-toggle[aria-expanded="true"] {
  color: #fff;
}

#listing-header .filter-toolbar-toggle[aria-expanded="true"] img {
  opacity: 1;
}

#listing-header .filter-toolbar-toggle:hover img {
  opacity: 1;
  transform: scale(1.06);
}

#listing-header .filter-toolbar-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.62);
  outline-offset: 4px;
}

#toolbar .filter-panel {
  width: 100%;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#toolbar .filter-panel.is-open {
  animation: filter-panel-expand 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#toolbar .filter-panel .filter-grid {
  gap: 10px;
}

#toolbar .filter-primary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

#toolbar .filter-field > span:not(.filter-fixed-type),
#toolbar .filter-field > label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

#toolbar .filter-fixed-type {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  margin-bottom: 0;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(8, 9, 13, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

#toolbar .filter-searchable {
  position: relative;
}

#toolbar .filter-search-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  text-align: left;
  cursor: pointer;
}

#toolbar .filter-search-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  left: 0;
  width: 100%;
  min-width: 220px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(12, 13, 19, 0.98);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#toolbar .filter-search-input {
  width: 100%;
  min-height: 38px;
  margin-bottom: 7px;
  padding: 8px 10px;
  border: 0 !important;
  border-radius: 0;
  outline: none !important;
  outline-offset: 0 !important;
  background: transparent;
  color: #fff;
  font: inherit;
  box-shadow: none !important;
}

#toolbar .filter-search-input:focus,
#toolbar .filter-search-input:focus-visible {
  border: 0 !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

#toolbar .filter-search-options {
  display: grid;
  max-height: min(280px, 45vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#toolbar .filter-search-option {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e8e8ed;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#toolbar .filter-search-option:hover,
#toolbar .filter-search-option:focus-visible,
#toolbar .filter-search-option[aria-selected="true"] {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

#toolbar .filter-search-empty {
  margin: 0;
  padding: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
}

#toolbar .filter-panel .filter-field {
  width: 100%;
  min-width: 0;
}

#toolbar .filter-panel .filter-select {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background-color: rgba(8, 9, 13, 0.82) !important;
  box-shadow: none !important;
}

#toolbar .filter-panel .filter-select:hover,
#toolbar .filter-panel .filter-select:focus {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background-color: rgba(18, 20, 26, 0.94) !important;
  box-shadow: none !important;
}

#toolbar .filter-panel .filter-select:focus-visible {
  outline: none !important;
  outline-offset: 0;
}

#toolbar .filter-actions [data-action="apply-filter"] {
  border: 1px solid var(--play-button-accent) !important;
  background: var(--play-button-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(245, 77, 154, 0.24);
  transition: filter var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}

#toolbar .filter-actions [data-action="apply-filter"]:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 26px rgba(245, 77, 154, 0.32);
}

#toolbar .filter-actions [data-action="apply-filter"]:active {
  transform: translateY(1px);
}

#toolbar .filter-actions [data-action="reset-filter"] {
  border: 0 !important;
}

#toolbar .filter-actions [data-action="reset-filter"]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.58) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #listing-header .filter-toolbar-toggle,
  #listing-header .filter-toolbar-toggle img,
  #toolbar .filter-actions [data-action="apply-filter"] {
    transition: none;
  }
}

.home-page-rail .rail-card .movie-meta p {
  font-size: calc(var(--font-size-xs) + 1px);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

@media (min-width: 861px) and (max-width: 959px) {
  .home-page-rail .rail-track {
    grid-auto-columns: calc((100% - 48px) / 4);
  }
}

@media (min-width: 601px) and (max-width: 860px) {
  .home-page-rail .rail-track {
    gap: 12px;
    grid-auto-columns: calc((100% - 24px) / 3);
  }
}

@media (max-width: 600px) {
  .home-page-rail .rail-shell {
    padding-right: 0;
  }

  .home-page-rail .rail-arrow {
    display: none !important;
  }

  .home-page-rail .rail-track {
    gap: 12px;
    grid-auto-columns: calc((100% - 12px) / 2);
  }
}

/* Movie card title hierarchy */
.movie-card .movie-meta h3 {
  color: #fff;
  transition: color 160ms ease;
}

.movie-card:hover .movie-meta h3,
.movie-card:focus-visible .movie-meta h3 {
  color: #f48ab9;
}

.movie-card .movie-meta p {
  color: #e7e8eb !important;
}

/* Perspective carousel for the first homepage movie rail. */
.perspective-rail .perspective-rail-shell {
  padding-right: 52px;
  perspective: 1200px;
}

.perspective-carousel-viewport {
  --perspective-slide-width: 210px;
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
  perspective: 1200px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.perspective-rail-slide:not(.is-active) .movie-card {
  cursor: grab;
}

.perspective-rail-slide.is-active .movie-card {
  cursor: pointer;
}

.perspective-rail-shell.is-dragging,
.perspective-rail-shell.is-dragging .perspective-carousel-viewport {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.perspective-carousel-viewport:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: -3px;
}

.perspective-rail-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.perspective-rail-shell.is-repositioning .perspective-rail-stage,
.perspective-rail-shell.is-repositioning .perspective-rail-slide {
  transition: none !important;
}

.perspective-rail-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  flex: none;
  width: var(--perspective-slide-width, 210px);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.34, 1.15, 0.64, 1);
  will-change: transform;
}

.perspective-rail-slide.is-loop-jump,
.perspective-rail-shell.is-dragging .perspective-rail-slide {
  transition: none !important;
}

.perspective-rail-shell.is-dragging .perspective-rail-slide .movie-meta {
  transition: none !important;
}

.perspective-rail-slide .rail-card {
  width: 100%;
}

.perspective-rail-slide .movie-meta {
  opacity: 0;
  filter: blur(2px);
  transition: opacity 900ms cubic-bezier(0.34, 1.15, 0.64, 1), filter 900ms cubic-bezier(0.34, 1.15, 0.64, 1);
  text-align: center;
}

.perspective-rail-slide.is-active .movie-meta {
  opacity: 1;
  filter: blur(0);
}

.perspective-rail-slide .movie-original-name,
.perspective-rail-slide .movie-meta-sub {
  display: none;
}

.perspective-rail-slide .movie-meta h3 {
  margin: 10px 0 0;
  text-align: center;
}

.perspective-rail-slide .poster-wrap {
  aspect-ratio: 2 / 3;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

@media (max-width: 860px) {
  .perspective-carousel-viewport {
    --perspective-slide-width: 180px;
    height: 480px;
  }
}

@media (max-width: 600px) {
  .perspective-rail .perspective-rail-shell {
    padding-right: 0;
  }

  .perspective-carousel-viewport {
    --perspective-slide-width: 156px;
    height: 430px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .perspective-rail-slide,
  .perspective-rail-slide .movie-meta {
    transition-duration: 0.01ms;
  }
}

.verified-admin-badge {
  display: inline-block !important;
  width: 12px;
  height: 12px;
  max-width: none;
  margin-inline-start: 4px;
  object-fit: contain;
  vertical-align: middle;
  flex: 0 0 auto;
}

.profile-hero-identity h2 {
  display: flex;
  align-items: center;
  gap: 0;
}

.profile-hero-identity .profile-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hero-identity .profile-verified-admin-badge {
  width: 16px;
  height: 16px;
  margin-inline-start: 6px;
}

.account-menu-identity strong {
  display: flex;
  align-items: center;
  gap: 0;
}

.account-menu-identity strong .account-menu-name-text {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-identity .account-verified-admin-badge {
  width: 12px;
  height: 12px;
  margin-inline-start: 5px;
}

.watch-comment-meta strong {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.watch-comment-meta .comment-verified-admin-badge {
  width: 12px;
  height: 12px;
  margin-inline-start: 4px;
}

.watch-comment-form-footer .comment-form-verified-admin-badge {
  width: 10px;
  height: 10px;
  margin-inline: 3px 2px;
}

.notification-actor-name {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  vertical-align: middle;
}

.notification-actor-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-actor-name .notification-verified-admin-badge {
  width: 10px;
  height: 10px;
  margin-inline-start: 3px;
}

.watch-comment-compose input:focus,
.watch-comment-compose input:focus-visible,
.watch-comment-compose input.tv-focused {
  border-color: transparent !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.watch-comments-heading {
  align-items: center;
  padding-bottom: 12px;
}

.watch-comments-heading h2 {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 800;
}

.watch-comments-heading h2 #watch-comments-count {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.watch-comment-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  outline: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.watch-comment-sort:focus,
.watch-comment-sort:focus-visible,
.watch-comment-sort:hover {
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
}

.watch-comment-sort svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.watch-comment-sort-control { position: relative; z-index: 30; flex: 0 0 auto; }
.watch-comment-sort-modal[hidden] { display: none !important; }
.watch-comment-sort-modal {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  display: block;
  width: max-content;
  max-width: min(250px, calc(100vw - 32px));
}
.watch-comment-sort-dialog {
  width: max-content;
  min-width: 220px;
  max-width: min(250px, calc(100vw - 32px));
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}
.watch-comment-sort-dialog-header { padding: 10px 12px 8px; }
.watch-comment-sort-dialog h3 { margin: 0; color: #252630; font-size: 13px; font-weight: 700; line-height: 1.35; }
.watch-comment-sort-options { display: grid; gap: 2px; padding: 0 0 7px; }
.watch-comment-sort-options button {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  align-items: center;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: #f4a6c9;
  color: #2a1822;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background 160ms ease, color 160ms ease;
}
.watch-comment-sort-options button:hover,
.watch-comment-sort-options button.active {
  background: #ef4d98;
  color: #fff;
}
.watch-comment-sort-options button:focus-visible { outline: 2px solid #ef4d98; outline-offset: -3px; }

.watch-comment-form--top {
  margin-top: 13px;
}

.watch-comment-form > .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.watch-comment-form-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.watch-comment-form-row > .watch-comment-compose {
  flex: 1;
  width: auto;
  min-width: 0;
}

.watch-comment-compose-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.watch-comment-compose-avatar.watch-avatar-has-image {
  background: transparent;
}

.watch-comment-compose {
  height: 44px;
  min-height: 44px;
  gap: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 160ms ease;
}

.watch-comment-compose:focus-within {
  border-bottom-color: rgba(255, 255, 255, 0.58);
}

.watch-comment-input-shell {
  height: 42px;
  border: 0;
  border-radius: 0;
}

.watch-comment-input-highlight {
  padding: 0 2px;
  line-height: 42px;
}

.watch-comment-input-shell input {
  padding: 0 2px;
  line-height: 42px;
}

.watch-comment-input-shell:focus-within {
  border-color: transparent;
}

.watch-comment-submit {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  min-height: 24px;
}

.watch-comment-submit[hidden] {
  display: none !important;
}

.watch-comment-inline-reply {
  margin: 8px 0 10px;
}

.watch-comment-form--reply {
  margin: 0;
}

.watch-comment-form--reply .watch-comment-form-row {
  gap: 8px;
}

.watch-comment-compose-avatar {
  object-fit: cover;
}

.watch-comment-form--reply .watch-comment-compose-avatar {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
}

.watch-comment-form--reply .watch-comment-compose {
  height: 36px;
  min-height: 36px;
}

.watch-comment-form--reply .watch-comment-input-shell {
  height: 34px;
}

.watch-comment-form--reply .watch-comment-input-highlight,
.watch-comment-form--reply .watch-comment-input-shell input {
  line-height: 34px;
}

@media (max-width: 560px) {
  .watch-comments-heading {
    align-items: flex-start;
    gap: 8px;
  }

  .watch-comment-sort {
    gap: 5px;
    font-size: 10px;
  }


  .watch-comment-form-row {
    gap: 8px;
  }

  .watch-comment-compose-avatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
}

/* Replies stay in one flat column with a single uninterrupted guide line. */
.watch-comment-replies {
  position: relative;
  display: grid;
  gap: 0;
  margin: 8px 0 0 clamp(24px, 5vw, 48px);
  padding-left: 15px;
}

.watch-comment-replies::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.5px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.3);
  content: "";
}

.watch-comment-item.is-reply {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
  border-radius: 0;
}

.watch-comment-item.is-reply::before {
  position: absolute;
  z-index: 1;
  top: 30px;
  left: -15px;
  width: 15px;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.3);
  content: "";
  pointer-events: none;
}

.watch-comments-list .watch-comment-more {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 7px;
  margin: 2px 0 4px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.watch-comments-list .watch-comment-more::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.watch-comments-list .watch-comment-more:hover,
.watch-comments-list .watch-comment-more:focus-visible {
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
}

.watch-comments-list [data-watch-like-comment],
.watch-comments-list [data-watch-like-comment]:hover:not(:disabled),
.watch-comments-list [data-watch-like-comment]:focus-visible,
.watch-comments-list [data-watch-like-comment].is-liked {
  background: transparent !important;
}

@media (max-width: 560px) {
  .watch-comment-replies {
    margin-left: 20px;
    padding-left: 12px;
  }

  .watch-comment-item.is-reply {
    margin-left: 0;
  }

  .watch-comment-item.is-reply::before {
    left: -12px;
    width: 12px;
  }
}

/* Realtime notification bell: short motion on arrival, persistent accent while unread. */
.topbar .notification-btn:disabled {
  cursor: wait;
  opacity: 0.62;
}

.topbar .notification-btn .notification-bell {
  display: block;
  width: 16px;
  height: 18px;
  overflow: visible;
  fill: currentColor;
  transform-origin: 50% 8%;
}

.topbar .notification-btn.has-unread {
  color: var(--play-button-accent);
}

.topbar .notification-btn.is-new-notification {
  background: var(--play-button-gradient);
  box-shadow: 0 0 0 3px rgba(245, 77, 154, 0.13), 0 0 18px rgba(245, 77, 154, 0.34);
  color: #fff;
}

.topbar .notification-btn.is-new-notification .notification-bell {
  animation: notificationBellRing 1.1s ease-in-out;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.24));
}

.topbar .notification-badge {
  box-sizing: border-box;
  min-width: 14px;
  height: 14px;
  padding: 0 2px;
  border: 1px solid #09090d;
  background: var(--play-button-accent);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

#notifications-retry {
  min-height: 30px;
  margin-top: 8px;
  padding: 0 10px;
  border: 1px solid rgba(245, 77, 154, 0.5);
  border-radius: 8px;
  background: var(--play-button-gradient);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

#notifications-retry:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes notificationBellRing {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(17deg); }
  24% { transform: rotate(-17deg); }
  36% { transform: rotate(13deg); }
  48% { transform: rotate(-13deg); }
  60% { transform: rotate(8deg); }
  72% { transform: rotate(-8deg); }
  84% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .notification-btn.is-new-notification .notification-bell {
    animation: none;
  }
}

/* Shared notification toast: bell, moving arrow and pink new-message accent. */
.toast {
  position: fixed;
  top: calc(48px + var(--safe-top, 0px) + 10px);
  right: clamp(12px, 2vw, 24px);
  bottom: auto;
  left: auto;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: max-content;
  min-width: min(200px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(38, 38, 42, 0.96);
  color: #fff;
  font-size: var(--font-size-sm);
  font-family: inherit;
  font-weight: 700;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(.2,.75,.3,1);
  will-change: opacity, transform;
}

.toast-open {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 38px 0 15px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.toast.is-dismissing {
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 24px));
}

.toast-bell {
  display: block;
  flex: 0 0 13px;
  width: 13px;
  height: 16px;
  overflow: visible;
  fill: var(--play-button-accent);
  transform-origin: 50% 8%;
}

.toast-bell path {
  fill: var(--play-button-accent);
}

.toast-message {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(520px, calc(100vw - 96px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}

.toast-open:focus-visible,
.toast-dot:focus-visible {
  outline: 2px solid var(--play-button-accent);
  outline-offset: 3px;
}

.toast-arrow {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 100%;
  color: var(--play-button-accent);
  font-size: 20px;
}

.toast-dot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(16, 16, 20, 0.9);
  border-radius: 50%;
  background: var(--play-button-accent);
  color: #fff;
  font: 700 14px/1 Arial, sans-serif;
  box-shadow: 0 0 10px rgba(245, 77, 154, 0.7);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.toast-dot:hover {
  filter: brightness(1.15);
  transform: translate(-50%, -50%) scale(1.08);
}

.toast.is-new {
  border-color: rgba(245, 77, 154, 0.72);
  background: var(--play-button-gradient);
  box-shadow: 0 0 0 3px rgba(245, 77, 154, 0.13), 0 12px 34px rgba(221, 53, 139, 0.32);
}

.toast.is-new .toast-bell {
  fill: #fff;
  animation: notificationBellRing 1.1s ease-in-out;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.24));
}

.toast.is-new .toast-bell path {
  fill: #fff;
}

.toast.is-new .toast-arrow {
  color: #fff;
  animation: toastArrowSlide 1s ease-in-out 2;
}

.toast.is-new .toast-dot {
  border-color: var(--play-button-accent);
  background: var(--play-button-accent);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.toast:hover .toast-arrow {
  animation: toastArrowSlide 1s infinite;
}

@keyframes toastArrowSlide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .toast.is-new .toast-bell,
  .toast.is-new .toast-arrow,
  .toast:hover .toast-arrow {
    animation: none;
  }
}

/* Realtime account activity markers. The topbar avatar has no presence wrapper. */
.presence-avatar {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: max-content;
  height: max-content;
  overflow: visible;
  line-height: normal;
  vertical-align: middle;
}

.presence-avatar[data-presence-hidden="true"] .presence-indicator {
  display: none !important;
}

.presence-indicator {
  position: absolute;
  right: 14.6%;
  bottom: 14.6%;
  z-index: 4;
  display: block;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #777b84;
  box-shadow: none;
  transform: translate(50%, 50%);
}

.presence-avatar[data-presence-state="online"] .presence-indicator {
  padding: 0;
  border: 0;
  background: #25c66a;
  box-shadow: 0 0 0 1px #000;
}

.social-profile-shell .presence-avatar[data-presence-state="online"] .presence-indicator {
  width: 17px;
  height: 17px;
  box-shadow: 0 0 0 1px #fff;
}

.presence-avatar[data-presence-state="offline"] .presence-indicator[data-presence-age] {
  display: grid;
  width: max-content;
  min-width: 14px;
  padding: 0 3px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.presence-indicator::before {
  content: attr(data-presence-age);
}

.profile-presence-avatar {
  width: 96px;
  height: 96px;
  flex-basis: 96px;
}

.profile-presence-avatar > .profile-avatar {
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
}

.social-friend-details {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.social-friend-details .social-friend-name {
  width: 100%;
}

/* Keep movie posters clean without a frame around each card. */
.poster-wrap,
.movie-card:hover .poster-wrap {
  border: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

@media (max-width: 520px) {
  .presence-indicator {
    width: 7px;
    height: 7px;
  }

  .presence-avatar[data-presence-state="online"] .presence-indicator {
    width: 7px;
    height: 7px;
  }

  .presence-avatar[data-presence-state="offline"] .presence-indicator[data-presence-age] {
    min-width: 12px;
    font-size: 6px;
  }
}

.profile-presence-avatar[data-presence-state="online"] .presence-indicator {
  width: 17px;
  height: 17px;
}

/* Shared server, language and episode controls for the detail and watch pages. */
body.detail-view,
body.watch-view {
  --episode-accent: #ef4d98;
  --episode-surface: #282a36;
  --episode-surface-hover: #343746;
}

body.detail-view .detail-episodes-column {
  overflow: visible !important;
}

body.detail-view .detail-episodes-scroll {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0;
  border-top: 0 !important;
}

.player-server-controls {
  position: relative;
  z-index: 4;
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.server-picker {
  position: relative;
  flex: 0 0 auto;
}

.server-picker-toggle {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: #f4f4f7;
  cursor: pointer;
  font: inherit;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 750;
  white-space: nowrap;
}

.server-picker-toggle:hover,
.server-picker.is-open .server-picker-toggle {
  color: var(--episode-accent);
}

.server-picker-menu-icon {
  width: 20px;
  height: 20px;
  color: var(--episode-accent);
}

.server-picker-chevron {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}

.server-picker.is-open .server-picker-chevron {
  transform: rotate(180deg);
}

.server-picker-toggle:focus-visible,
.server-picker-option:focus-visible,
.server-group-pill:focus-visible,
.episode-compact-toggle:focus-visible,
.episode-grid .episode:focus-visible {
  outline: 3px solid rgba(239, 77, 152, 0.78);
  outline-offset: 3px;
}

.server-picker-menu {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 8px);
  left: 0;
  width: max-content !important;
  min-width: 0;
  max-width: min(224px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(15, 18, 25, 0.16);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.server-picker-menu[hidden] {
  display: none !important;
}

.server-picker-title {
  padding: 10px 12px 8px;
  color: #252630;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.server-picker-menu .dual-server-tabs {
  display: grid;
  gap: 2px;
  padding: 0 0 7px;
}

.server-picker-menu .dual-server-btn,
.server-picker-menu .server-picker-option {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: #f4a6c9;
  color: #2a1822;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background 160ms ease, color 160ms ease;
}

.server-picker-menu .dual-server-btn:hover,
.server-picker-menu .server-picker-option:hover,
.server-picker-menu .server-picker-option.active {
  background: #ef4d98 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none;
}

body.detail-view .detail-episodes-scroll .server-picker-menu .dual-server-btn {
  border: 0 !important;
  background: #f4a6c9 !important;
  color: #2a1822 !important;
}

body.detail-view .detail-episodes-scroll .server-picker-menu .dual-server-btn:hover,
body.detail-view .detail-episodes-scroll .server-picker-menu .dual-server-btn.active {
  background: #ef4d98 !important;
  color: #fff !important;
}

.server-control-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 42px;
  background: rgba(255, 255, 255, 0.18);
}

.player-server-controls .server-group-tabs {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}

.player-server-controls .server-group-tabs::-webkit-scrollbar {
  display: none;
}

.player-server-controls .server-group-pill {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid transparent !important;
  border-radius: 7px;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none !important;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.player-server-controls .server-group-pill:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  transform: none;
}

.player-server-controls .server-group-pill.active {
  border-color: rgba(239, 77, 152, 0.82) !important;
  background: rgba(239, 77, 152, 0.18) !important;
  color: #fff !important;
}

.server-group-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.86);
}

.player-server-controls .server-group-pill.active .server-group-icon {
  color: #fff !important;
}

.episode-compact-toggle {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  margin-left: auto;
  align-items: center;
  gap: 7px;
  padding: 0 2px 0 6px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.episode-compact-switch {
  display: inline-flex;
  width: 34px;
  height: 20px;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(239, 77, 152, 0.78);
  border-radius: 999px;
  background: rgba(239, 77, 152, 0.08);
  transition: background 180ms ease;
}

.episode-compact-switch i {
  display: block;
  width: 12px;
  height: 12px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--episode-accent);
  box-shadow: 0 0 9px rgba(239, 77, 152, 0.4);
  transition: transform 180ms ease;
}

.episode-compact-toggle:not(.is-active) .episode-compact-switch {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.04);
}

.episode-compact-toggle:not(.is-active) .episode-compact-switch i {
  margin-left: 0;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.watch-episode-list-heading {
  margin: 8px 0 8px;
}

.watch-episode-list-heading > span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.episode-grid,
body.watch-view .watch-section .detail-episodes.episode-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}

body.detail-view .detail-episodes-column .detail-episodes.episode-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.episode-grid .episode,
body.watch-view .watch-section .detail-episodes.episode-grid .episode {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--episode-surface) !important;
  color: #f5f5f7 !important;
  cursor: pointer;
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

body.detail-view .detail-episodes-column .detail-episodes.episode-grid .episode {
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--episode-surface) !important;
  color: #f5f5f7 !important;
  font-size: clamp(12px, 0.85vw, 14px);
  overflow: visible;
  text-overflow: clip;
}

.episode-grid .episode:hover,
body.watch-view .watch-section .detail-episodes.episode-grid .episode:hover {
  background: var(--episode-surface-hover) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

body.detail-view .detail-episodes-column .detail-episodes.episode-grid .episode:hover {
  background: var(--episode-surface-hover) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.episode-grid .episode.current,
body.watch-view .watch-section .detail-episodes.episode-grid .episode.current {
  background: rgba(239, 77, 152, 0.16) !important;
  color: var(--episode-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(239, 77, 152, 0.68) !important;
}

body.detail-view .detail-episodes-column .detail-episodes.episode-grid .episode.current {
  background: rgba(239, 77, 152, 0.16) !important;
  color: var(--episode-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(239, 77, 152, 0.68) !important;
}

.episode-play-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.episode-grid .episode.current .episode-play-icon {
  color: var(--episode-accent);
}

body.watch-view .watch-server-tabs,
body.detail-view .detail-episodes-scroll .server-selection-bar {
  display: none !important;
}

body.watch-view .watch-section-heading {
  display: none;
}

body.watch-view .watch-tabs button.is-active,
body.watch-view .watch-tabs button.is-active:hover,
body.watch-view .watch-tabs button.is-active:focus-visible {
  color: var(--episode-accent) !important;
}

body.watch-view .watch-tabs button.is-active::after {
  background: var(--episode-accent) !important;
}

body.watch-view .watch-tabs {
  border-bottom: 0 !important;
}

body.detail-view .detail-server-heading {
  color: var(--episode-accent) !important;
}

@media (max-width: 1500px) {
  .episode-grid,
  body.watch-view .watch-section .detail-episodes.episode-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.detail-view .detail-episodes-column .detail-episodes.episode-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .episode-grid,
  body.watch-view .watch-section .detail-episodes.episode-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.detail-view .detail-episodes-column .detail-episodes.episode-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .player-server-controls {
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 0 0 10px;
  }

  .server-picker-toggle {
    min-height: 36px;
    font-size: 16px;
  }

  .server-control-divider {
    height: 30px;
  }

  .player-server-controls .server-group-tabs {
    order: 3;
    flex: 1 1 100%;
    margin: 0;
  }

  .player-server-controls .server-group-pill {
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }

  .episode-compact-toggle {
    margin-left: auto;
    font-size: 12px;
    min-height: 34px;
  }

  .episode-grid,
  body.watch-view .watch-section .detail-episodes.episode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.detail-view .detail-episodes-column .detail-episodes.episode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .episode-grid .episode,
  body.watch-view .watch-section .detail-episodes.episode-grid .episode {
    min-height: 44px;
    gap: 7px;
    padding: 8px 6px;
    font-size: 13px;
  }

  body.detail-view .detail-episodes-column .detail-episodes.episode-grid .episode {
    min-height: 44px;
    gap: 7px;
    padding: 8px 6px;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .episode-grid,
  body.watch-view .watch-section .detail-episodes.episode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.detail-view .detail-episodes-column .detail-episodes.episode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Keep the subtitle controls compact and readable after page-specific rules. */
body.watch-view .watch-section .player-server-controls .server-group-pill,
body.detail-view .detail-episodes-scroll .player-server-controls .server-group-pill {
  min-height: 34px !important;
  gap: 6px;
  padding: 0 8px !important;
  font-size: 12px !important;
  line-height: 1.1;
}

body.watch-view .watch-section .player-server-controls .server-group-pill .server-group-icon,
body.detail-view .detail-episodes-scroll .player-server-controls .server-group-pill .server-group-icon,
body.watch-view .watch-section .player-server-controls .server-group-pill.active .server-group-icon,
body.detail-view .detail-episodes-scroll .player-server-controls .server-group-pill.active .server-group-icon {
  width: 15px;
  height: 15px;
  color: #fff !important;
}

@media (max-width: 720px) {
  body.watch-view .watch-section .player-server-controls .server-group-pill,
  body.detail-view .detail-episodes-scroll .player-server-controls .server-group-pill {
    min-height: 34px !important;
    font-size: 12px !important;
  }
}

/* Keep the global topbar in document flow on every page and viewport. */
.topbar-hover-sensor {
  display: none !important;
}

.topbar,
body.home-topbar-overlay .topbar {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 100 !important;
  display: block;
  width: 100%;
  height: auto !important;
  min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: #000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

.topbar-inner,
body.home-topbar-overlay .topbar-inner,
body:not(.home-topbar-overlay) .topbar-inner,
body.detail-view .topbar-inner {
  height: auto !important;
  min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: 0 !important;
  transform: none !important;
  box-sizing: border-box;
}

body:not(.home-topbar-overlay) #browser {
  padding-top: 0 !important;
}

body.detail-view #detail-page {
  min-height: calc(100vh - 48px - env(safe-area-inset-top, 0px));
}

.hero,
.detail-hero {
  padding-top: clamp(24px, 3vw, 40px) !important;
}

/* White surfaces for account, navigation, desktop search, notification, and profile overlays. */
.social-profile-shell,
.account-menu,
.topbar .account-menu,
.notifications-panel,
.topbar .notifications-panel,
.topbar .nav-menu,
#search-history-dropdown,
.topbar .search-history-dropdown {
  color: #1f2937;
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.social-profile-shell .social-profile-close {
  border: 0 !important;
  background: #f3f4f6 !important;
  color: #374151;
}

.social-profile-shell .social-profile-close:hover {
  background: #e5e7eb !important;
}

.social-profile-shell .social-profile-label {
  color: #be185d;
}

.social-profile-shell .social-profile-identity h2,
.social-profile-shell .social-friends-view h2,
.social-profile-shell .social-profile-friends-count strong {
  color: #111827;
}

.social-profile-shell .social-profile-identity p,
.social-profile-shell .social-profile-admin-privacy,
.social-profile-shell .social-profile-list-private,
.social-profile-shell .social-profile-list-empty,
.social-profile-shell .social-profile-loading {
  color: #5b6470;
}

.social-profile-shell .social-profile-identity .social-profile-age {
  color: #374151;
}

.social-profile-shell .social-profile-admin-note {
  color: #9d174d;
}

.social-profile-shell .social-profile-sent-link,
.social-profile-shell .social-profile-invites,
.social-profile-shell .social-profile-back {
  color: #be185d;
}

.social-profile-shell .social-profile-sent-link:hover,
.social-profile-shell .social-profile-invites:hover,
.social-profile-shell .social-profile-back:hover {
  color: #9d174d;
}

.social-profile-shell .social-profile-list-tabs {
  border-bottom-color: #e5e7eb;
}

.social-profile-shell .social-profile-list-tab {
  color: #6b7280;
}

.social-profile-shell .social-profile-list-tab:hover,
.social-profile-shell .social-profile-list-tab.is-active {
  color: #111827;
}

.social-profile-shell .social-profile-list-tab small {
  color: #6b7280;
}

.social-profile-shell .social-profile-list-tab.is-active small {
  color: #be185d;
}

.social-profile-shell .social-profile-list-tab::after {
  background: #db2777;
}

.social-profile-shell .social-movie-row,
.social-profile-shell .social-friend-row {
  border-color: #e5e7eb;
  background: #f8fafc;
  color: #1f2937;
}

.social-profile-shell .social-movie-row:hover,
.social-profile-shell .social-movie-row:focus-visible,
.social-profile-shell .social-friend-row:hover,
.social-profile-shell .social-friend-row:focus-visible {
  border-color: #f9a8d4;
  background: #fdf2f8;
}

.social-profile-shell .social-movie-info small {
  color: #6b7280;
}

.social-profile-shell .social-profile-friends-count {
  border-color: #e5e7eb;
  background: #f8fafc;
  color: #4b5563;
}

.social-profile-shell .social-profile-friends-count:hover,
.social-profile-shell .social-profile-friends-count:focus-visible {
  border-color: #f9a8d4;
  background: #fdf2f8;
}

.social-profile-shell .social-profile-friends-arrow {
  color: #6b7280;
}

.social-profile-shell .social-profile-secondary,
.social-profile-shell .social-request-respond {
  border-color: #e5e7eb;
  background: #f3f4f6;
  color: #374151;
}

.social-profile-shell .social-request-cancel:hover:not(:disabled) {
  border-color: #f9a8d4;
  color: #9d174d;
}

.account-menu .account-menu-identity {
  border-bottom-color: #e5e7eb;
}

.account-menu .account-menu-identity strong {
  color: #111827;
}

.account-menu .account-menu-identity span {
  color: #6b7280;
}

.account-menu .account-menu-item {
  color: #374151;
}

.account-menu .account-menu-item:hover,
.account-menu .account-menu-item:focus-visible {
  background: #f3f4f6;
  color: #111827;
}

.account-menu .account-menu-item.is-danger {
  color: #b91c1c;
}

.account-menu .account-menu-item.is-danger:hover {
  background: #fee2e2;
  color: #991b1b;
}

.notifications-panel .settings-section-title {
  color: #111827;
}

.notifications-panel .notifications-read-all {
  color: #be185d;
}

.notifications-panel .notifications-read-all:hover {
  color: #9d174d;
}

.notifications-panel .notifications-empty {
  color: #6b7280;
}

.notifications-panel .notification-item {
  color: #1f2937;
}

.notifications-panel .notification-item.is-unread {
  background: #f8fafc;
}

.notifications-panel .notification-item:hover,
.notifications-panel .notification-row:focus-within .notification-item {
  background: #f3f4f6;
}

.notifications-panel .notification-item:focus-visible {
  outline-color: #94a3b8;
  background: #f3f4f6;
}

.notifications-panel .notification-copy strong {
  color: #1f2937;
}

.notifications-panel .notification-copy small {
  color: #4b5563;
}

.notifications-panel .notification-copy time {
  color: #6b7280;
}

.notifications-panel .notification-dismiss {
  color: #6b7280;
}

.notifications-panel .notification-dismiss:hover,
.notifications-panel .notification-dismiss:focus-visible {
  background: #f3f4f6;
  color: #111827;
}

body.watch-view .watch-tabs button,
body.watch-view .watch-tabs button:hover,
body.watch-view .watch-tabs button:focus-visible {
  color: #fff !important;
  font-size: 12px !important;
}

body.watch-view .watch-tabs button::after {
  background: #fff !important;
}

body.watch-view .watch-tabs button.is-active,
body.watch-view .watch-tabs button.is-active:hover,
body.watch-view .watch-tabs button.is-active:focus-visible {
  color: #fff !important;
  font-size: 14px !important;
}

body.watch-view .watch-tabs button.is-active::after {
  background: #fff !important;
}

.topbar .nav-menu button {
  color: #374151;
}

.topbar .nav-menu button:hover,
.topbar .nav-menu button:focus-visible {
  background: #f3f4f6;
  color: #111827;
}

#search-history-dropdown {
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.18);
}

.search-history-header {
  border-bottom-color: #e5e7eb;
}

.search-history-title,
.search-history-time,
.search-history-icon {
  color: #6b7280;
}

.search-history-query {
  color: #1f2937;
}

.search-history-item:hover,
.search-history-item:focus-within {
  background: #f3f4f6;
}

.search-history-item:hover .search-history-query {
  color: #be185d;
}

.search-history-clear-btn,
.search-form .search-history-clear-btn {
  color: #be185d !important;
}

.search-history-clear-btn:hover,
.search-form .search-history-clear-btn:hover {
  color: #9d174d !important;
  background: #fdf2f8 !important;
}

.search-history-delete-btn,
.search-form .search-history-delete-btn {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
}

.search-history-delete-btn:hover,
.search-form .search-history-delete-btn:hover {
  background: #fce7f3 !important;
  color: #be185d !important;
}

.admin-display-name {
  background-image: linear-gradient(90deg, #ffd43b 0%, #ff9b21 36%, #ff5a47 68%, #d744dc 100%);
  background-clip: text;
  color: transparent !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.watch-comment-avatar.watch-avatar-has-image,
.social-profile-avatar.watch-avatar-has-image,
.notification-avatar.watch-avatar-has-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  outline: none;
  box-shadow: none;
  background: transparent;
}

.watch-comment-avatar.watch-avatar-has-image img,
.social-profile-avatar.watch-avatar-has-image img,
.notification-avatar.watch-avatar-has-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
}

.admin-style-badge,
.watch-comment-admin-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 3px 7px;
  border: 0;
  border-radius: 999px !important;
  background: linear-gradient(
    110deg,
    #ffb52e 0%,
    #ff6b35 25%,
    rgba(255, 121, 187, 0.96) 52%,
    rgba(221, 53, 139, 0.9) 76%,
    #b948ff 100%
  );
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-hero-identity h2 .admin-style-badge {
  margin-inline-start: 8px;
}

.account-menu-identity strong .admin-style-badge {
  margin-inline-start: 6px;
}

.notification-actor-name .admin-style-badge {
  margin-inline-start: 4px;
}