/* ═══════════════════════════════════════════════════════════════
   DCREELS — Premium Cinematic Design System v2
   Single unified stylesheet — consolidated from 12 fragmented files
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  /* Palette — Dark Cinematic */
  --bg-deep: #060810;
  --bg-primary: #0a0e1a;
  --bg-surface: #111827;
  --bg-surface-2: #1a2332;
  --bg-surface-3: #243044;
  --bg-elevated: #1e293b;

  /* Borders */
  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.16);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: #0a0e1a;

  /* Accent — Vibrant Orange */
  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-pressed: #c2410c;
  --accent-soft: rgba(249,115,22,0.12);
  --accent-glow: rgba(249,115,22,0.25);
  --accent-gradient: linear-gradient(135deg, #f97316, #f59e0b);

  /* Semantic */
  --success: #22c55e;
  --success-soft: rgba(34,197,94,0.12);
  --danger: #ef4444;
  --danger-soft: rgba(239,68,68,0.12);
  --warning: #eab308;
  --warning-soft: rgba(234,179,8,0.12);
  --info: #3b82f6;
  --info-soft: rgba(59,130,246,0.12);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radii */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.2);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.5), 0 8px 10px rgba(0,0,0,0.2);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 40px rgba(249,115,22,0.15);
  --shadow-glow-lg: 0 0 80px rgba(249,115,22,0.2);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-glacial: 700ms;

  /* Layout */
  --navbar-height: 64px;
  --container-max: 1280px;
  --container-padding: 24px;

  /* Z-index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ─────────────────────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + 20px);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

img[loading="lazy"] { opacity: 0; transition: opacity 0.4s var(--ease-out); }
img[loading="lazy"].loaded { opacity: 1; }

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

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

button:not(:disabled) { cursor: pointer; }

::selection {
  background: var(--accent);
  color: white;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ─────────────────────────────────────────────────────────────
   3. LAYOUT & CONTAINER
   ───────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.main-content {
  padding-top: var(--navbar-height);
  min-height: calc(100vh - var(--navbar-height));
}

.section {
  padding: var(--space-12) 0;
}

.section-sm { padding: var(--space-8) 0; }
.section-lg { padding: var(--space-20) 0; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.see-all {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
  transition: color var(--duration-fast) var(--ease-out);
}
.see-all:hover { color: var(--accent-hover); }

/* ─────────────────────────────────────────────────────────────
   4. SKIP TO CONTENT (Accessibility)
   ───────────────────────────────────────────────────────────── */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-6);
  background: var(--accent);
  color: white;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-to-content:focus { top: var(--space-4); }

/* ─────────────────────────────────────────────────────────────
   5. NAVBAR
   ───────────────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  transition: background var(--duration-normal), box-shadow var(--duration-normal);
}
.navbar-bg {
  position: absolute;
  inset: 0;
  background: rgba(10,14,26,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
}
.navbar.scrolled .navbar-bg {
  background: rgba(6,8,16,0.95);
  box-shadow: var(--shadow-lg);
}

.navbar-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-height);
  padding: 0 var(--container-padding);
  gap: var(--space-6);
}

/* Logo */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo:hover { opacity: 0.9; }
.logo-brand { display: flex; align-items: center; gap: var(--space-3); }

.logo-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  color: white;
  box-shadow: 0 2px 12px var(--accent-glow);
  transition: box-shadow var(--duration-fast);
}
.logo:hover .logo-icon { box-shadow: 0 4px 20px var(--accent-glow); }

.logo-text-wrapper {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.logo-text-main { color: var(--text-primary); }
.logo-text-accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Nav Left */
.nav-left { display: flex; align-items: center; gap: var(--space-8); flex: 1; }
.nav-links { display: flex; align-items: center; gap: var(--space-1); list-style: none; }

.nav-link {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--duration-fast), background var(--duration-fast);
}
.nav-link:hover { color: var(--text-primary); background: var(--border-subtle); }
.nav-link.active { color: var(--accent); background: var(--accent-soft); }
.nav-link svg { flex-shrink: 0; }

/* Nav Right */
.nav-right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.btn-search {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--duration-fast);
}
.btn-search:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-surface); }

.btn-login, .btn-register {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600;
  transition: all var(--duration-fast);
}
.btn-login { color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-login:hover { background: var(--bg-surface); border-color: var(--border-strong); }
.btn-register { background: var(--accent); color: white; border: none; }
.btn-register:hover { background: var(--accent-hover); box-shadow: var(--shadow-glow); }

/* User avatar */
.user-avatar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  transition: all var(--duration-fast);
  cursor: pointer;
}
.user-avatar:hover { border-color: var(--border-strong); }

.avatar-circle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--accent-gradient);
  color: white;
  font-weight: 700; font-size: var(--text-sm);
  border-radius: var(--radius-full);
}
.username-desktop { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.badge-vip-mini {
  padding: 1px 6px; border-radius: var(--radius-xs);
  background: var(--warning); color: var(--text-inverse);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
}

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: var(--space-2);
  background: none; border: none;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transition: transform var(--duration-fast), opacity var(--duration-fast);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--duration-fast) var(--ease-out);
  z-index: var(--z-dropdown);
  padding: var(--space-3);
}
.dropdown:hover .dropdown-menu,
.dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-right { left: auto; right: 0; }

/* Genre dropdown grid */
.dropdown-genre-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1);
  margin-top: var(--space-3);
}
.genre-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--duration-fast);
}
.genre-item:hover { color: var(--text-primary); background: var(--accent-soft); }
.genre-icon { font-size: var(--text-base); }

.dropdown-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }
.dropdown-subtitle { font-size: var(--text-xs); color: var(--text-tertiary); }

.dropdown-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--duration-fast);
}
.dropdown-item:hover { color: var(--text-primary); background: var(--border-subtle); }
.dropdown-item-danger:hover { color: var(--danger); background: var(--danger-soft); }
.dropdown-item-admin:hover { color: var(--info); background: var(--info-soft); }
.dropdown-divider { height: 1px; background: var(--border-subtle); margin: var(--space-2) 0; }
.dropdown-user-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.dropdown-avatar-lg {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--accent-gradient); color: white;
  font-weight: 700; font-size: var(--text-lg);
  border-radius: var(--radius-full);
}
.dropdown-name { font-weight: 600; font-size: var(--text-sm); }
.dropdown-email { font-size: var(--text-xs); color: var(--text-tertiary); }
.dropdown-footer { padding-top: var(--space-2); }
.dropdown-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  width: 100%; padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--text-xs); font-weight: 600;
  transition: background var(--duration-fast);
}
.dropdown-cta:hover { background: var(--accent-soft); opacity: 0.8; }

/* ─────────────────────────────────────────────────────────────
   6. HERO / SLIDER
   ───────────────────────────────────────────────────────────── */
.hero-slider {
  position: relative;
  height: min(520px, 70vh);
  overflow: hidden;
}

.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-in-out);
  animation: hero-zoom 20s var(--ease-in-out) infinite alternate;
}
.hero-slide.active { opacity: 1; z-index: 1; }

@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,8,16,0.15) 0%,
    rgba(6,8,16,0.35) 40%,
    rgba(6,8,16,0.85) 85%,
    var(--bg-primary) 100%
  );
  z-index: 2;
}

.hero-content { position: relative; z-index: 3; height: 100%; display: flex; align-items: flex-end; padding-bottom: var(--space-12); }

.hero-info { max-width: 600px; }

.hero-info .hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.hero-description {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-actions { display: flex; gap: var(--space-3); }

.hero-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  color: white;
  font-size: 24px;
  transition: all var(--duration-fast);
}
.hero-nav:hover { background: var(--accent); border-color: var(--accent); }
.hero-prev { left: var(--space-4); }
.hero-next { right: var(--space-4); }
.slider-dots {
  position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--space-2); z-index: 10;
}
.slider-dots::before {
  content: '...'; display: none;
}
.slider-dot {
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast);
}
.slider-dot.active { background: var(--accent); width: 28px; border-radius: var(--radius-full); }

/* ─────────────────────────────────────────────────────────────
   7. BUTTONS
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0; transition: opacity var(--duration-fast);
}
.btn:active::after { opacity: 1; }
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--accent); color: white; box-shadow: 0 2px 12px var(--accent-glow); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 20px var(--accent-glow); }

.btn-ghost {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.btn-ghost:hover { background: var(--bg-surface); border-color: var(--border-strong); }

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ─────────────────────────────────────────────────────────────
   8. MOVIE CARDS
   ───────────────────────────────────────────────────────────── */
.movie-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-4);
}

.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-6);
}

.movie-grid-6 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.movie-card {
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-spring),
              box-shadow var(--duration-normal) var(--ease-out);
}
.movie-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl), 0 0 30px rgba(249,115,22,0.1);
}

.movie-poster {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
}
.movie-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.movie-card:hover .movie-poster img { transform: scale(1.06); }

.movie-poster::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

.movie-info {
  padding: var(--space-3) var(--space-1);
}

.movie-info h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-primary);
}

.movie-meta {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
}

.badge-episode-count {
  position: absolute;
  top: var(--space-2); right: var(--space-2);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
  font-size: 11px; font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   9. SKELETON LOADERS
   ───────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-2) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-poster { aspect-ratio: 2/3; border-radius: var(--radius-md); }
.skeleton-title { height: 18px; width: 80%; margin-top: var(--space-3); }
.skeleton-meta { height: 14px; width: 50%; margin-top: var(--space-2); }
.skeleton-hero { height: 400px; border-radius: var(--radius-lg); }
.skeleton-text { height: 16px; width: 100%; }
.skeleton-text-short { height: 16px; width: 60%; }

/* ─────────────────────────────────────────────────────────────
   10. GENRE TAGS
   ───────────────────────────────────────────────────────────── */
.genre-tags {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}

.genre-tag {
  display: inline-flex; align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}
.genre-tag:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────
   11. BREADCRUMB
   ───────────────────────────────────────────────────────────── */
.breadcrumb {
  padding: var(--space-4) 0;
  margin-top: var(--navbar-height);
}

.breadcrumb ol {
  display: flex; align-items: center; gap: var(--space-2);
  list-style: none;
  font-size: var(--text-sm);
}

.breadcrumb li { color: var(--text-tertiary); }
.breadcrumb li a { color: var(--text-secondary); transition: color var(--duration-fast); }
.breadcrumb li a:hover { color: var(--accent); }
.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--space-2);
  color: var(--text-tertiary);
}
.breadcrumb li[aria-current] { color: var(--text-primary); }

/* ─────────────────────────────────────────────────────────────
   12. DETAIL PAGE
   ───────────────────────────────────────────────────────────── */
.detail-backdrop {
  position: absolute; top: var(--navbar-height); left: 0; right: 0;
  height: 420px;
  background-size: cover; background-position: center 20%;
  z-index: 0;
}
.backdrop-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.3) 0%, rgba(10,14,26,0.85) 80%, var(--bg-primary) 100%);
}

.detail-section { position: relative; z-index: 1; padding-top: var(--space-6); }

.detail-layout { max-width: 900px; }

.detail-header {
  display: flex; gap: var(--space-8);
  align-items: flex-start;
}

.detail-poster {
  flex-shrink: 0;
  width: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2xl), 0 0 40px var(--accent-glow);
  position: relative;
}
.detail-poster img { width: 100%; display: block; }
.detail-poster .badge-episode-count {
  top: auto; bottom: var(--space-3); left: var(--space-3);
  font-size: var(--text-sm); padding: var(--space-1) var(--space-3);
}

.detail-info { flex: 1; min-width: 0; }
.detail-title { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--space-3); }
.detail-alt-title { font-size: var(--text-base); color: var(--text-tertiary); margin-bottom: var(--space-4); }
.detail-meta { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }
.detail-description { font-size: var(--text-base); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--space-6); }
.detail-actions { display: flex; gap: var(--space-3); }

.detail-episodes { margin-top: var(--space-10); }
.detail-episodes h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-4); }
.episode-total { font-size: var(--text-sm); font-weight: 400; color: var(--text-tertiary); margin-left: var(--space-2); }

.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: var(--space-2);
}

.episode-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: var(--space-3) 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  transition: all var(--duration-fast);
}
.episode-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.related-section { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.related-section h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-4); }

/* ─────────────────────────────────────────────────────────────
   13. WATCH PAGE
   ───────────────────────────────────────────────────────────── */
.watch-section { padding-top: var(--space-4); }

.watch-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
}

.watch-player { min-width: 0; }

/* TikTok-style portrait player: 9:16, tinggi dibatasi +/-75vh di desktop */
.video-container {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-2xl);
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 100%;
  margin: 0 auto var(--space-6);
}
@media (min-width: 768px) {
  .video-container { width: min(100%, 42.1875vh); /* 75vh x 9/16 */ }
}
.video-player {
  width: 100%; height: 100%;
  border: none;
  object-fit: contain;
  background: #000;
}

.video-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--bg-surface);
  color: var(--text-tertiary);
}
.video-placeholder-icon { font-size: 48px; margin-bottom: var(--space-3); }

.video-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #000; z-index: 2;
}

.spinner {
  width: 48px; height: 48px;
  border: 3px solid var(--border-default);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.episode-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3); gap: var(--space-3);
}
.episode-current {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  color: var(--text-primary);
}

.watch-info { margin-top: var(--space-4); }
.watch-info-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.watch-info-header h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; }
.watch-info-header h1 a:hover { color: var(--accent); }
.badge-episode {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent); color: white;
  font-size: var(--text-sm); font-weight: 700;
  white-space: nowrap;
}
.watch-meta { font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-4); }
.watch-actions { display: flex; gap: var(--space-3); }

/* Watch sidebar */
.watch-sidebar {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: var(--space-4);
  height: fit-content;
  position: sticky; top: calc(var(--navbar-height) + 20px);
  max-height: calc(100vh - var(--navbar-height) - 40px);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.watch-sidebar h3 {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
  margin-bottom: var(--space-4); flex-shrink: 0;
}

.episode-list-sidebar {
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: var(--space-1);
}

.episode-list-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
}
.episode-list-item:hover { background: var(--border-subtle); }
.episode-list-item.active {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}
.ep-num {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  font-size: var(--text-xs); font-weight: 700;
  color: var(--text-secondary);
}
.episode-list-item.active .ep-num { background: var(--accent); color: white; }
.ep-title { font-size: var(--text-sm); color: var(--text-secondary); }
.episode-list-item.active .ep-title { color: var(--text-primary); }

.mobile-episode-selector { display: none; margin-bottom: var(--space-4); }
.mobile-episode-scroll { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2); -webkit-overflow-scrolling: touch; }
.mobile-ep-btn {
  flex-shrink: 0; padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full); border: 1px solid var(--border-default);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-secondary); white-space: nowrap;
  transition: all var(--duration-fast);
}
.mobile-ep-btn.active { background: var(--accent); border-color: var(--accent); color: white; }

/* ─────────────────────────────────────────────────────────────
   14. FOOTER
   ───────────────────────────────────────────────────────────── */
.footer {
  margin-top: var(--space-16);
  background: var(--bg-deep);
  border-top: 1px solid var(--border-subtle);
}

.footer-top-accent {
  height: 3px;
  background: var(--accent-gradient);
  opacity: 0.6;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: var(--space-12);
  padding: var(--space-12) 0 var(--space-8);
}

.footer-logo { display: block; margin-bottom: var(--space-4); }
.footer-logo-brand { display: flex; align-items: center; gap: var(--space-3); }
.footer-logo-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  color: white;
}
.footer-logo-text-wrapper {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 800;
  letter-spacing: -0.02em;
}
.footer-logo-text-main { color: var(--text-primary); }
.footer-logo-text-accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-description {
  font-size: var(--text-sm); color: var(--text-tertiary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 320px;
}

.footer-socials { display: flex; gap: var(--space-3); }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  transition: all var(--duration-fast);
}
.social-link:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.footer-links-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.footer-link-title {
  font-family: var(--font-display);
  font-size: var(--text-sm); font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.footer-link-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-link-list a {
  font-size: var(--text-sm); color: var(--text-tertiary);
  transition: color var(--duration-fast);
}
.footer-link-list a:hover { color: var(--accent); }

.footer-cta-banner {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(245,158,11,0.08));
  border: 1px solid var(--border-default);
  margin-bottom: var(--space-8);
}
.footer-cta-icon { color: var(--accent); flex-shrink: 0; }
.footer-cta-text { flex: 1; }
.footer-cta-text strong { font-family: var(--font-display); font-size: var(--text-lg); display: block; }
.footer-cta-text span { font-size: var(--text-sm); color: var(--text-tertiary); }
.footer-cta-btn {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--accent); color: white;
  font-weight: 600; font-size: var(--text-sm);
  white-space: nowrap;
  transition: all var(--duration-fast);
}
.footer-cta-btn:hover { background: var(--accent-hover); box-shadow: var(--shadow-glow); }

.footer-bottom-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap; gap: var(--space-3);
}
.footer-copyright { font-size: var(--text-xs); color: var(--text-tertiary); }
.footer-badges { display: flex; gap: var(--space-4); }
.footer-badge {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--text-tertiary);
}

/* ─────────────────────────────────────────────────────────────
   15. AUTH PAGES (Login / Register)
   ───────────────────────────────────────────────────────────── */
.auth-page {
  min-height: calc(100vh - var(--navbar-height));
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8);
}

.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-xl);
}

.auth-header { text-align: center; margin-bottom: var(--space-8); }
.auth-logo { display: inline-flex; margin-bottom: var(--space-4); }
.auth-header .subtitle { font-size: var(--text-base); color: var(--text-secondary); }

.form-group { margin-bottom: var(--space-5); }
.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-secondary);
}
.form-group input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: all var(--duration-fast);
}
.form-group input::placeholder { color: var(--text-tertiary); }
.form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
.alert-success { background: var(--success-soft); color: var(--success); border: 1px solid rgba(34,197,94,0.2); }

.auth-footer { text-align: center; margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-tertiary); }
.auth-footer a { color: var(--accent); font-weight: 600; transition: color var(--duration-fast); }
.auth-footer a:hover { color: var(--accent-hover); }

/* ─────────────────────────────────────────────────────────────
   16. SEARCH MODAL
   ───────────────────────────────────────────────────────────── */
/* old modal removed - using admin .modal */

.modal::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content.search-modal {
  position: relative;
  width: 90vw; max-width: 600px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  animation: modalIn var(--duration-normal) var(--ease-spring);
  max-height: 70vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(-20px) scale(0.96); } }

.search-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.search-header input {
  width: 100%;
  padding: var(--space-3) 0;
  border: none; background: transparent;
  font-size: var(--text-lg); font-weight: 500;
  color: var(--text-primary);
  outline: none;
}
.search-header input::placeholder { color: var(--text-tertiary); }

.search-results {
  overflow-y: auto; padding: var(--space-3);
  flex: 1;
}
.search-results .movie-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); transition: background var(--duration-fast); }
.search-results .movie-card:hover { background: var(--border-subtle); transform: none; box-shadow: none; }
.search-results .movie-poster { width: 60px; aspect-ratio: 2/3; flex-shrink: 0; border-radius: var(--radius-sm); }
.search-results .movie-poster img { width: 100%; height: 100%; object-fit: cover; }
.search-results .movie-info h3 { font-size: var(--text-sm); }

.modal-close-btn {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-surface); color: var(--text-secondary);
  font-size: var(--text-xl); line-height: 1;
  transition: all var(--duration-fast);
}
.modal-close-btn:hover { background: var(--danger); border-color: var(--danger); color: white; }

/* ─────────────────────────────────────────────────────────────
   17. BROWSE PAGE
   ───────────────────────────────────────────────────────────── */
.browse-filters {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.filter-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  font-size: var(--text-sm); font-weight: 500;
  background: var(--bg-surface); color: var(--text-secondary);
  transition: all var(--duration-fast);
}
.filter-chip:hover, .filter-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.sort-select {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}

.pagination a, .pagination span {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500;
}

.pagination a {
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  transition: all var(--duration-fast);
}
.pagination a:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.pagination .active {
  background: var(--accent); color: white;
  font-weight: 700;
}

.pagination .disabled { color: var(--text-tertiary); opacity: 0.4; }

/* ─────────────────────────────────────────────────────────────
   18. ERROR & EMPTY STATE
   ───────────────────────────────────────────────────────────── */
.error-page, .empty-state {
  display: flex; align-items: center; justify-content: center;
  min-height: 50vh;
  text-align: center;
  padding: var(--space-12);
}

.error-content { max-width: 420px; }

.error-icon {
  font-size: 64px;
  margin-bottom: var(--space-6);
  display: block;
}

.error-content h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl); font-weight: 800;
  margin-bottom: var(--space-3);
}

.error-content p {
  font-size: var(--text-lg); color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.empty-state p { font-size: var(--text-lg); color: var(--text-secondary); margin-bottom: var(--space-6); }

/* ─────────────────────────────────────────────────────────────
   19. VIP REQUIRED PAGE
   ───────────────────────────────────────────────────────────── */
.vip-page {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-12);
}

.vip-card {
  text-align: center;
  max-width: 480px;
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  border: 2px solid var(--warning);
  background: linear-gradient(135deg, var(--warning-soft), var(--bg-surface));
  box-shadow: var(--shadow-xl), 0 0 60px rgba(234,179,8,0.1);
}

.vip-icon { font-size: 56px; margin-bottom: var(--space-4); }
.vip-card h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; margin-bottom: var(--space-3); }
.vip-card p { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: var(--space-6); }
.vip-card .btn-primary { background: var(--warning); color: var(--text-inverse); }

/* ─────────────────────────────────────────────────────────────
   20. BACK TO TOP
   ───────────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: var(--space-8); right: var(--space-8);
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: all var(--duration-fast) var(--ease-out);
  z-index: var(--z-sticky);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent); border-color: var(--accent); color: white; }

/* ─────────────────────────────────────────────────────────────
   21. SCROLL REVEAL ANIMATIONS
   ───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

/* ─────────────────────────────────────────────────────────────
   22. TABLE STYLES (Admin / User Dashboard)
   ───────────────────────────────────────────────────────────── */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead { border-bottom: 1px solid var(--border-default); }
th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  background: var(--bg-surface);
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

tr:hover td { background: var(--border-subtle); }

/* ─────────────────────────────────────────────────────────────
   23. CARD / PANEL (Admin / Settings)
   ───────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   24. STATUS BADGES
   ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-info { background: var(--info-soft); color: var(--info); }

/* ─────────────────────────────────────────────────────────────
   25. STAT NUMBER
   ───────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.stat-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl); font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.stat-label {
  font-size: var(--text-sm); color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* ─────────────────────────────────────────────────────────────
   26. ADMIN SIDEBAR
   ───────────────────────────────────────────────────────────── */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - var(--navbar-height));
}

.admin-sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-6);
  position: sticky; top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
}

.admin-sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.admin-sidebar-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--duration-fast);
}
.admin-sidebar-link:hover { background: var(--border-subtle); color: var(--text-primary); }
.admin-sidebar-link.active { background: var(--accent-soft); color: var(--accent); }

.admin-main { padding: var(--space-8); }

/* ─────────────────────────────────────────────────────────────
   27. USER DASHBOARD
   ───────────────────────────────────────────────────────────── */
.user-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-padding);
}

.user-sidebar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  height: fit-content;
  position: sticky; top: calc(var(--navbar-height) + 20px);
}

.user-sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.user-sidebar-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--duration-fast);
}
.user-sidebar-link:hover { background: var(--border-subtle); color: var(--text-primary); }
.user-sidebar-link.active { background: var(--accent-soft); color: var(--accent); }

/* ─────────────────────────────────────────────────────────────
   28. COMPACT UTILITY
   ───────────────────────────────────────────────────────────── */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-8 { margin-bottom: var(--space-8); }
.text-center { text-align: center; }
.text-muted { color: var(--text-tertiary); }
.text-accent { color: var(--accent); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); }
.w-full { width: 100%; }
.hidden { display: none; }

/* ─────────────────────────────────────────────────────────────
   29. RESPONSIVE
   ───────────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  .watch-layout { grid-template-columns: 1fr 280px; }
  .detail-header { flex-direction: column; align-items: center; text-align: center; }
  .detail-poster { width: 200px; }
  .detail-actions { justify-content: center; }
  .footer-main { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-links-wrapper { grid-template-columns: repeat(3, 1fr); }
  .admin-layout { grid-template-columns: 200px 1fr; }
  .user-layout { grid-template-columns: 200px 1fr; }

  .nav-link span { display: none; }
  .nav-link { padding: var(--space-3); border-radius: var(--radius-full); }
}

/* Mobile */
@media (max-width: 768px) {
  :root { --container-padding: 16px; --navbar-height: 56px; }

  .hamburger { display: flex; }
  .nav-links {
    display: none;
    position: fixed; top: var(--navbar-height); left: 0; right: 0; bottom: 0;
    background: var(--bg-primary);
    flex-direction: column;
    padding: var(--space-6);
    overflow-y: auto;
    z-index: var(--z-sticky);
  }
  .nav-links.open { display: flex; }

  .nav-link { padding: var(--space-4); width: 100%; border-radius: var(--radius-md); font-size: var(--text-base); }
  .nav-link span { display: inline; }

  .hero-slider { height: 380px; }
  .hero-info { max-width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-nav { width: 36px; height: 36px; font-size: 18px; }

  .movie-row { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); }
  .movie-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }

  .detail-header { flex-direction: column; align-items: center; }
  .detail-poster { width: 180px; }
  .detail-title { font-size: var(--text-2xl); text-align: center; }
  .detail-actions { justify-content: center; }
  .detail-info { text-align: center; }

  .watch-layout { grid-template-columns: 1fr; }
  .mobile-episode-selector { display: block; }
  .watch-sidebar { display: none; }

  .footer-main { grid-template-columns: 1fr; }
  .footer-brand-col { text-align: center; }
  .footer-description { margin: 0 auto var(--space-6); }
  .footer-socials { justify-content: center; }
  .footer-links-wrapper { grid-template-columns: repeat(2, 1fr); }
  .footer-cta-banner { flex-direction: column; text-align: center; }
  .footer-bottom-bar { flex-direction: column; text-align: center; }

  .auth-card { padding: var(--space-6); }

  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .user-layout { grid-template-columns: 1fr; }
  .user-sidebar { position: static; }

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

  .back-to-top { bottom: var(--space-4); right: var(--space-4); width: 40px; height: 40px; }

  .genre-tag { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
  .episode-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
}

/* Small mobile */
@media (max-width: 480px) {
  .movie-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .movie-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .footer-links-wrapper { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .username-desktop { display: none; }
  .btn-login span, .btn-register span { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   30. USER DASHBOARD
   ═══════════════════════════════════════════════════════════════ */
.user-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  padding: var(--space-8) var(--container-padding);
  max-width: var(--container-max);
  margin: 0 auto;
}
.user-sidebar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  height: fit-content;
  position: sticky;
  top: calc(var(--navbar-height) + 20px);
}
.user-sidebar-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.user-sidebar-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--accent-gradient); color: white;
  font-weight: 700; font-size: var(--text-lg); flex-shrink: 0;
}
.user-sidebar-name { font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); display: block; }
.user-sidebar-email { font-size: var(--text-xs); color: var(--text-tertiary); display: block; }
.user-sidebar-vip {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 2px; padding: 1px 6px; border-radius: var(--radius-xs);
  background: var(--warning); color: var(--text-inverse);
  font-size: 10px; font-weight: 700;
}
.user-sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.user-sidebar-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary); transition: all var(--duration-fast);
}
.user-sidebar-link:hover { background: var(--border-subtle); color: var(--text-primary); }
.user-sidebar-link.active { background: var(--accent-soft); color: var(--accent); }
.user-sidebar-link-danger:hover { background: var(--danger-soft); color: var(--danger); }
.user-sidebar-divider { height: 1px; background: var(--border-subtle); margin: var(--space-2) 0; }
.user-sidebar-toggle, .user-sidebar-overlay { display: none; }
.user-content { min-width: 0; }
.user-page-header { margin-bottom: var(--space-8); }
.user-page-header h1 {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--space-2);
}
.user-page-subtitle { font-size: var(--text-sm); color: var(--text-tertiary); }
.user-welcome-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-2));
  border: 1px solid var(--border-subtle); margin-bottom: var(--space-6);
}
.user-welcome-card h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.user-welcome-card p { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }
.user-welcome-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--accent-gradient); color: white;
  font-size: var(--text-2xl); font-weight: 800; flex-shrink: 0;
}
.user-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.user-stat-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.user-stat-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-md); flex-shrink: 0;
}
.user-stat-icon-referral { background: var(--info-soft); color: var(--info); }
.user-stat-icon-vip { background: var(--warning-soft); color: var(--warning); }
.user-stat-icon-free { background: var(--border-subtle); color: var(--text-tertiary); }
.user-stat-icon-earning { background: var(--success-soft); color: var(--success); }
.user-stat-icon-pending { background: var(--warning-soft); color: var(--warning); }
.user-stat-value {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 800; color: var(--text-primary); display: block;
}
.user-stat-label { font-size: var(--text-xs); color: var(--text-tertiary); }
.user-vip-cta {
  margin-bottom: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--warning-soft), rgba(234,179,8,0.05));
  border: 1px solid rgba(234,179,8,0.2);
}
.user-vip-cta-content { display: flex; align-items: center; gap: var(--space-5); }
.user-vip-cta-icon { color: var(--warning); flex-shrink: 0; }
.user-vip-cta-text h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-1); }
.user-vip-cta-text p { font-size: var(--text-sm); color: var(--text-secondary); }
.user-vip-cta-btn {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  background: var(--warning); color: var(--text-inverse);
  font-weight: 600; font-size: var(--text-sm); white-space: nowrap; flex-shrink: 0;
  transition: all var(--duration-fast);
}
.user-vip-cta-btn:hover { opacity: 0.9; }
.user-section { margin-bottom: var(--space-8); }
.user-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4);
}
.user-section-header h3 {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
}
.user-section-action {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); color: var(--accent); font-weight: 500;
  transition: color var(--duration-fast);
}
.user-section-action:hover { color: var(--accent-hover); }
.user-referral-box {
  padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.user-referral-input-group { display: flex; align-items: center; gap: var(--space-3); }
.user-referral-input {
  flex: 1; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--bg-primary);
  color: var(--text-primary); font-size: var(--text-sm); font-family: var(--font-mono);
}
.user-referral-copy-btn {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: all var(--duration-fast);
}
.user-referral-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.user-referral-copy-btn.copied { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.user-alert {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  font-size: var(--text-sm); margin-bottom: var(--space-5);
}
.user-alert-success { background: var(--success-soft); color: var(--success); border: 1px solid rgba(34,197,94,0.2); }
.user-alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
.user-alert-info { background: var(--info-soft); color: var(--info); border: 1px solid rgba(59,130,246,0.2); }
.user-profile-card {
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); margin-bottom: var(--space-6);
}
.user-profile-header { display: flex; align-items: center; gap: var(--space-5); }
.user-profile-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--accent-gradient); color: white;
  font-size: var(--text-2xl); font-weight: 800; flex-shrink: 0;
}
.user-profile-meta h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.user-profile-email { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-2); }
.user-profile-vip-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--warning-soft); color: var(--warning);
  font-size: var(--text-xs); font-weight: 700; margin-bottom: var(--space-2);
}
.user-profile-joined {
  display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1);
}
.user-form-card {
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); margin-bottom: var(--space-6);
}
.user-form-header { margin-bottom: var(--space-6); }
.user-form-header h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-1); }
.user-form-header p { font-size: var(--text-sm); color: var(--text-tertiary); }
.user-form-group { margin-bottom: var(--space-5); }
.user-form-group label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary);
}
.user-input-wrapper {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--bg-primary);
  transition: border-color var(--duration-fast);
}
.user-input-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.user-input-wrapper svg { color: var(--text-tertiary); flex-shrink: 0; }
.user-input-wrapper input {
  flex: 1; padding: var(--space-3) 0; border: none; background: transparent;
  color: var(--text-primary); font-size: var(--text-sm); outline: none;
}
.user-input-wrapper input::placeholder { color: var(--text-tertiary); }
.user-form-hint { display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }
.user-form-actions { display: flex; justify-content: flex-end; margin-top: var(--space-6); }
.user-btn-primary {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  border: none; background: var(--accent); color: white;
  font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  transition: all var(--duration-fast);
}
.user-btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-glow); }
.user-table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.user-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.user-table thead { border-bottom: 1px solid var(--border-default); }
.user-table th {
  padding: var(--space-3) var(--space-4); text-align: left;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-tertiary); background: var(--bg-surface);
}
.user-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.user-table tr:hover td { background: var(--border-subtle); }
.user-code {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text-primary); background: var(--bg-primary);
  padding: 2px 6px; border-radius: var(--radius-xs);
}
.user-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
}
.user-status-approved, .user-status-paid { background: var(--success-soft); color: var(--success); }
.user-status-pending { background: var(--warning-soft); color: var(--warning); }
.user-status-rejected { background: var(--danger-soft); color: var(--danger); }
.user-vip-active-card {
  text-align: center; padding: var(--space-10); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--warning-soft), var(--bg-surface));
  border: 2px solid var(--warning); margin-bottom: var(--space-8);
}
.user-vip-active-icon { color: var(--warning); margin-bottom: var(--space-4); }
.user-vip-active-info h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-2); }
.user-vip-active-info p { font-size: var(--text-base); color: var(--text-secondary); }
.user-vip-active-features { display: flex; justify-content: center; gap: var(--space-6); margin-top: var(--space-6); flex-wrap: wrap; }
.user-vip-feature { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--success); }
.user-vip-inactive-card {
  text-align: center; padding: var(--space-8); border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); margin-bottom: var(--space-8);
}
.user-vip-inactive-icon { color: var(--text-tertiary); margin-bottom: var(--space-4); }
.user-vip-inactive-card h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.user-vip-plans { margin-bottom: var(--space-8); }
.user-vip-plans-header { text-align: center; margin-bottom: var(--space-6); }
.user-vip-plans-header h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; }
.user-vip-plans-header p { font-size: var(--text-sm); color: var(--text-tertiary); }
.user-vip-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}
.user-vip-plan-card {
  position: relative; padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl); background: var(--bg-surface);
  border: 1px solid var(--border-subtle); text-align: center;
  transition: transform var(--duration-fast);
}
.user-vip-plan-card:hover { transform: translateY(-3px); }
.user-vip-plan-popular {
  border-color: var(--warning);
  background: linear-gradient(180deg, var(--warning-soft), var(--bg-surface));
  transform: scale(1.03);
}
.user-vip-plan-popular:hover { transform: scale(1.03) translateY(-3px); }
.user-vip-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 16px; border-radius: var(--radius-full);
  background: var(--warning); color: var(--text-inverse);
  font-size: 11px; font-weight: 700;
}
.user-vip-plan-header h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-4); }
.user-vip-plan-price { display: flex; justify-content: center; align-items: baseline; gap: 2px; }
.user-vip-price-currency { font-size: var(--text-sm); color: var(--text-tertiary); font-weight: 500; }
.user-vip-price-amount { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; color: var(--text-primary); }
.user-vip-price-period { display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-6); }
.user-vip-plan-features { list-style: none; text-align: left; margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.user-vip-plan-features li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.user-vip-plan-features li svg { color: var(--success); flex-shrink: 0; }
.user-vip-plan-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  border: none; background: var(--warning); color: var(--text-inverse);
  font-size: var(--text-sm); font-weight: 700; cursor: pointer; transition: all var(--duration-fast);
}
.user-vip-plan-btn:hover { opacity: 0.9; }
.user-payment-info { margin-bottom: var(--space-8); }
.user-payment-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.user-payment-header h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.user-payment-methods { display: flex; flex-direction: column; gap: var(--space-3); }
.user-payment-method {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.user-payment-method-icon { color: var(--text-tertiary); flex-shrink: 0; }
.user-payment-method-info strong { font-size: var(--text-sm); display: block; }
.user-payment-method-info p { font-size: var(--text-xs); color: var(--text-tertiary); }
.user-referral-hero {
  padding: var(--space-8); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--info-soft), var(--bg-surface));
  border: 1px solid rgba(59,130,246,0.2); margin-bottom: var(--space-6);
}
.user-referral-hero-content { text-align: center; margin-bottom: var(--space-6); }
.user-referral-hero-icon { color: var(--info); margin-bottom: var(--space-3); }
.user-referral-hero-content h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-2); }
.user-referral-hero-content p { font-size: var(--text-sm); color: var(--text-secondary); max-width: 500px; margin: 0 auto; }
.user-referral-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); }
.user-referral-code-item label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); margin-bottom: var(--space-2); }
.user-referral-copy-group { display: flex; align-items: center; gap: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════
   31. ADMIN LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.admin-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - var(--navbar-height));
}
.admin-content {
  padding: var(--space-8);
  min-width: 0;
}
.admin-content h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

/* Admin Sidebar */
.admin-sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-6);
  position: sticky; top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.admin-sidebar-header { margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.admin-sidebar-logo {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary);
}
.admin-sidebar-logo svg { color: var(--accent); }
.admin-nav-section { margin-bottom: var(--space-6); }
.admin-nav-label {
  display: block; padding: 0 var(--space-3); margin-bottom: var(--space-2);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary);
}
.admin-nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary); transition: all var(--duration-fast);
}
.admin-nav-link:hover { background: var(--border-subtle); color: var(--text-primary); }
.admin-nav-link.active { background: var(--accent-soft); color: var(--accent); }
.admin-sidebar-footer { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.admin-back-link {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-tertiary); transition: color var(--duration-fast);
}
.admin-back-link:hover { color: var(--accent); }
.admin-sidebar-toggle, .admin-sidebar-overlay { display: none; }

/* Admin Page Header */
.admin-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--space-8); gap: var(--space-4); flex-wrap: wrap;
}
.admin-page-header-content h1 {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--space-2);
}
.admin-page-subtitle { font-size: var(--text-sm); color: var(--text-tertiary); }
.admin-page-header-actions { display: flex; gap: var(--space-3); flex-shrink: 0; }

/* Admin Stats Grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-8);
}
.admin-stat-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.admin-stat-card-highlight { border-color: var(--warning); background: linear-gradient(135deg, var(--warning-soft), var(--bg-surface)); }
.admin-stat-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-md); flex-shrink: 0;
}
.admin-stat-icon-movies { background: var(--info-soft); color: var(--info); }
.admin-stat-icon-users { background: var(--success-soft); color: var(--success); }
.admin-stat-icon-episodes { background: var(--accent-soft); color: var(--accent); }
.admin-stat-icon-views { background: var(--warning-soft); color: var(--warning); }
.admin-stat-icon-vip { background: var(--warning-soft); color: var(--warning); }
.admin-stat-icon-pending { background: var(--danger-soft); color: var(--danger); }
.admin-stat-info { min-width: 0; }
.admin-stat-value {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 800; color: var(--text-primary); display: block;
}
.admin-stat-label { font-size: var(--text-xs); color: var(--text-tertiary); }

/* Admin Grid & Cards */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6); margin-bottom: var(--space-8);
}
.admin-card {
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.admin-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5);
}
.admin-card-header h3 {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
}
.admin-card-action {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); color: var(--accent); font-weight: 500;
  transition: color var(--duration-fast);
}
.admin-card-action:hover { color: var(--accent-hover); }

/* Admin Table */
.admin-table-wrapper { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table thead { border-bottom: 1px solid var(--border-default); }
.admin-table th {
  padding: var(--space-3) var(--space-4); text-align: left;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-tertiary); background: var(--bg-surface);
  white-space: nowrap;
}
.admin-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.admin-table tr:hover td { background: var(--border-subtle); }

/* Admin User Cell */
.admin-user-cell { display: flex; align-items: center; gap: var(--space-3); }
.admin-user-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--accent-gradient); color: white;
  font-size: var(--text-xs); font-weight: 700; flex-shrink: 0;
}

/* Admin Badges */
.admin-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
}
.admin-badge-admin { background: var(--warning-soft); color: var(--warning); }
.admin-badge-user { background: var(--info-soft); color: var(--info); }
.admin-badge-approved, .admin-badge-paid { background: var(--success-soft); color: var(--success); }
.admin-badge-pending { background: var(--warning-soft); color: var(--warning); }
.admin-badge-rejected { background: var(--danger-soft); color: var(--danger); }

/* Admin Header (movies/add) */
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-3);
}
.admin-header h1 { margin-bottom: 0; }

/* Admin Search */
.admin-search {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6); flex-wrap: wrap;
}
.admin-search input, .admin-search select {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--bg-primary);
  color: var(--text-primary); font-size: var(--text-sm);
}
.admin-search input:focus, .admin-search select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.admin-search input { min-width: 300px; }

/* Form tabs */
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle); padding-bottom: 0; }
.tab-btn {
  padding: var(--space-3) var(--space-5); border: none; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: transparent; color: var(--text-tertiary);
  font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  transition: all var(--duration-fast);
  margin-bottom: -1px;
}
.tab-btn.active { background: var(--bg-surface); color: var(--accent); border-bottom: 2px solid var(--accent); }
.tab-btn:hover:not(.active) { color: var(--text-secondary); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Admin Form Row */
.form-row { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.form-group-half { flex: 1; min-width: 200px; margin-bottom: 0 !important; }
.form-group-half label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.form-group-half input { width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-primary); color: var(--text-primary); font-size: var(--text-sm); transition: border-color var(--duration-fast); }
.form-group-half input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* Admin Buttons */
.admin-btn-primary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  border: none; background: var(--accent); color: white;
  font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  transition: all var(--duration-fast);
}
.admin-btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-glow); }

/* Table Responsive */
.table-responsive { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }

/* Admin Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center; }
.modal-box { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-8); max-width: 520px; width: 90%; max-height: 85vh; overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.modal-header h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.btn-close { background: none; border: none; color: var(--text-tertiary); font-size: 24px; cursor: pointer; padding: 4px; line-height: 1; }
.btn-close:hover { color: var(--text-primary); }

/* Keep old .modal for transactions edit modal */
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: var(--z-modal); align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-content { position: relative; z-index: 1; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-8); max-width: 520px; width: 90%; max-height: 85vh; overflow-y: auto; }
.modal-content h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-4); }
.modal .btn-close-old { background: none; border: none; color: var(--text-tertiary); font-size: 24px; cursor: pointer; padding: 4px; position: absolute; top: var(--space-4); right: var(--space-4); }
.modal .btn-close:hover { color: var(--text-primary); }

/* Admin Badge overrides */
.admin-badge-succeeded { background: var(--success-soft); color: var(--success); }

/* ═══════════════════════════════════════════════════════════════
   32. USER/ADMIN RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .admin-layout { grid-template-columns: 220px 1fr; }
  .user-layout { grid-template-columns: 220px 1fr; }
}
@media (max-width: 768px) {
  .user-layout { grid-template-columns: 1fr; padding: var(--space-4) var(--container-padding); }
  .user-sidebar { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: var(--z-modal); border-radius: 0; overflow-y: auto; }
  .user-sidebar.open { display: block; }
  .user-sidebar-overlay { display: none; }
  .user-sidebar-overlay.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: calc(var(--z-modal) - 1); }
  .user-sidebar-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; bottom: var(--space-4); right: var(--space-4);
    width: 48px; height: 48px; border-radius: var(--radius-full);
    border: 1px solid var(--border-default); background: var(--bg-surface);
    color: var(--text-primary); cursor: pointer; z-index: var(--z-sticky); box-shadow: var(--shadow-lg);
  }
  .user-welcome-card { flex-direction: column; text-align: center; gap: var(--space-4); }
  .user-vip-cta-content { flex-direction: column; text-align: center; }
  .user-vip-plans-grid { grid-template-columns: 1fr; }
  .user-vip-plan-popular { transform: none; }
  .user-stats-grid { grid-template-columns: 1fr; }
  .user-referral-codes { grid-template-columns: 1fr; }
  .user-referral-input-group { flex-direction: column; }
  .user-profile-header { flex-direction: column; text-align: center; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: var(--z-modal); border-radius: 0; border-right: 1px solid var(--border-default); }
  .admin-sidebar.open { display: flex; }
  .admin-sidebar-overlay { display: none; }
  .admin-sidebar-overlay.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: calc(var(--z-modal) - 1); }
  .admin-sidebar-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; bottom: var(--space-4); right: var(--space-4);
    width: 48px; height: 48px; border-radius: var(--radius-full);
    border: 1px solid var(--border-default); background: var(--bg-surface);
    color: var(--text-primary); cursor: pointer; z-index: var(--z-sticky); box-shadow: var(--shadow-lg);
  }
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── STATIC PAGE (About / Contact / Privacy / Terms) ─── */
.static-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-text-secondary);
}
.static-content p { margin-bottom: var(--space-6); }
.static-content h2,
.static-content h3 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  margin-top: var(--space-6);
}
.static-content ul,
.static-content ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}
.static-content li { margin-bottom: var(--space-2); }
.static-content a { color: var(--color-accent); text-decoration: underline; }
.static-content a:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE ENHANCEMENT — fit, touch targets, typography, polish
   Added to fix responsiveness on small screens (≤768px / ≤480px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  /* ── Navbar: fit within 390px (was overflowing) ─────────────── */
  .navbar-container { gap: var(--space-3); }
  .nav-left { gap: var(--space-2); }
  .nav-right { gap: var(--space-2); }
  .logo-brand { gap: var(--space-2); }
  .logo-icon { width: 32px; height: 32px; }
  .logo-icon svg { width: 18px; height: 18px; }
  .logo-text-wrapper { font-size: 19px; }
  .hamburger {
    width: 40px; height: 40px; padding: 0;
    align-items: center; justify-content: center;
    border-radius: var(--radius-md);
  }
  .hamburger:active { background: var(--border-subtle); }
  .btn-search { width: 38px; height: 38px; }
  .btn-login, .btn-register { height: 38px; padding: 0 var(--space-3); }

  /* ── Hero: tighter, thumb-friendly ──────────────────────────── */
  .hero-slider { height: 340px; }
  .hero-content { padding-bottom: var(--space-8); }
  .hero-info .hero-title { margin-bottom: var(--space-3); }
  .hero-description {
    -webkit-line-clamp: 2;
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
  }
  .hero-actions { gap: var(--space-2); }
  .hero-actions .btn { width: 100%; justify-content: center; height: 48px; }
  .hero-nav { display: none; }

  /* ── Breadcrumb: compact ────────────────────────────────────── */
  .breadcrumb { padding: var(--space-3) 0; }
  .breadcrumb ol { font-size: var(--text-xs); flex-wrap: wrap; row-gap: 4px; }

  /* ── Episode controls: real tap targets (≥44px) ─────────────── */
  /* detail page: episode buttons are .btn.btn-ghost.btn-sm inside .episode-grid */
  .episode-grid .btn { height: 44px; min-width: 52px; font-size: 13px; }
  /* watch page: horizontal mobile episode chips */
  .mobile-ep-btn {
    height: 44px; padding: 0 var(--space-5);
    display: inline-flex; align-items: center;
    font-size: 13px; scroll-snap-align: start;
  }
  .mobile-episode-scroll { scroll-snap-type: x proximity; }
  /* watch page: prev / next episode buttons */
  .episode-nav .btn { height: 44px; }

  /* ── Touch feedback (micro-interactions) ────────────────────── */
  .movie-card { transition: transform var(--duration-fast) var(--ease-out); }
  .movie-card:active { transform: scale(0.96); }
  .episode-grid .btn:active, .mobile-ep-btn:active, .nav-link:active,
  .dropdown-item:active, .genre-item:active { transform: scale(0.95); }

  /* ── Cards & type ───────────────────────────────────────────── */
  .movie-info { padding: var(--space-2) var(--space-1); }
  .movie-info h3 { font-size: 13px; }
  .section-header h2 { font-size: var(--text-lg); }

  /* ── Detail page ────────────────────────────────────────────── */
  .detail-poster { width: 150px; }
  .detail-title { font-size: var(--text-xl); }

  /* ── Footer ─────────────────────────────────────────────────── */
  .footer-cta-banner { padding: var(--space-5); }
  .footer-cta-btn { width: 100%; justify-content: center; height: 44px; }
}

@media (max-width: 480px) {
  .logo-icon { width: 30px; height: 30px; }
  .logo-text-wrapper { font-size: 17px; }
  .hero-slider { height: 320px; }
  .movie-row { gap: var(--space-3); }
  .movie-grid { gap: var(--space-3); }
  .detail-poster { width: 132px; }
  .episode-grid .btn { min-width: 48px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV — refined hamburger + animated slide-down menu
   (appended last → overrides the basic 768px block above)
   Fixes: dropdowns were un-openable on touch (only :hover worked).
   ═══════════════════════════════════════════════════════════════ */

/* Click-toggle now actually reveals any dropdown (was hover-only) */
.dropdown.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 768px) {

  /* ── Hamburger → symmetric springy X ───────────────────────── */
  .hamburger { gap: 5px; }
  .hamburger span {
    width: 22px; height: 2px; border-radius: 2px;
    transition: transform 0.32s var(--ease-spring), opacity 0.18s var(--ease-out-soft), width 0.2s;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Slide-down panel: layered bg, spring entrance ─────────── */
  .nav-links {
    display: flex;
    position: fixed; top: var(--navbar-height); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch;
    gap: 2px;
    padding: var(--space-3) var(--space-3) calc(var(--space-6) + env(safe-area-inset-bottom));
    background:
      radial-gradient(640px 320px at 92% -8%, rgba(249, 115, 22, 0.09), transparent 62%),
      radial-gradient(520px 320px at -10% 108%, rgba(59, 130, 246, 0.07), transparent 62%),
      var(--bg-primary);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: var(--z-sticky);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    pointer-events: none;
    transition: opacity 0.26s var(--ease-out-soft), transform 0.36s var(--ease-spring), visibility 0.26s;
  }
  .nav-links.open {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  }

  /* ── Staggered item reveal ─────────────────────────────────── */
  .nav-links > li {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.3s var(--ease-out-soft), transform 0.42s var(--ease-spring);
  }
  .nav-links.open > li { opacity: 1; transform: none; }
  .nav-links.open > li:nth-child(1) { transition-delay: 0.04s; }
  .nav-links.open > li:nth-child(2) { transition-delay: 0.08s; }
  .nav-links.open > li:nth-child(3) { transition-delay: 0.12s; }
  .nav-links.open > li:nth-child(4) { transition-delay: 0.16s; }
  .nav-links.open > li:nth-child(5) { transition-delay: 0.20s; }
  .nav-links.open > li:nth-child(6) { transition-delay: 0.24s; }
  .nav-links.open > li:nth-child(7) { transition-delay: 0.28s; }
  .nav-links.open > li:nth-child(8) { transition-delay: 0.32s; }

  /* ── Nav rows: touch-sized, active accent rail ─────────────── */
  .nav-link {
    padding: var(--space-4);
    width: 100%;
    border-radius: var(--radius-md);
    font-size: var(--text-base); font-weight: 600;
    justify-content: flex-start;
  }
  .nav-link span { display: inline; }
  .nav-link:active { transform: scale(0.98); background: var(--border-subtle); }
  .nav-link.active {
    color: var(--accent);
    background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* ── Dropdowns become inline accordions (the touch fix) ────── */
  .nav-dropdown .dropdown-menu {
    position: static;
    min-width: 0; width: 100%;
    margin: 2px 0 4px;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-left: 2px solid rgba(249, 115, 22, 0.3);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: none;
    padding: 0 var(--space-2);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: visible;
    transform: none;
    transition: max-height 0.42s var(--ease-spring), opacity 0.24s var(--ease-out-soft), padding 0.3s;
  }
  .nav-dropdown.active .dropdown-menu {
    max-height: 72vh;
    opacity: 1;
    padding: var(--space-2);
    overflow-y: auto;
  }
  .nav-dropdown .chevron { transition: transform 0.32s var(--ease-spring); }
  .nav-dropdown.active .chevron { transform: rotate(180deg); }

  .nav-dropdown .dropdown-header { padding: var(--space-1) var(--space-2); }
  .nav-dropdown .dropdown-item { padding: var(--space-3) var(--space-2); font-size: var(--text-base); }
  .nav-dropdown .dropdown-item:active { background: var(--accent-soft); }
  .nav-dropdown .dropdown-genre-grid { grid-template-columns: repeat(2, 1fr); margin-top: var(--space-1); }
  .nav-dropdown .genre-item { padding: var(--space-3) var(--space-2); font-size: var(--text-sm); }
  .nav-dropdown .dropdown-footer { margin-top: var(--space-1); }
}

/* ===== Auto-play Next Episode Overlay ===== */
.next-ep-overlay{
    position:absolute; inset:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    background:rgba(6,8,14,.86);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    animation:nextEpFade .3s ease;
}
@keyframes nextEpFade{ from{opacity:0} to{opacity:1} }
.next-ep-box{
    text-align:center; padding:1.6rem 1.8rem; max-width:340px; width:88%;
    background:linear-gradient(160deg,rgba(28,32,44,.96),rgba(16,19,28,.96));
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    animation:nextEpPop .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes nextEpPop{ from{opacity:0; transform:scale(.9) translateY(10px)} to{opacity:1; transform:scale(1) translateY(0)} }
.next-ep-icon{
    width:56px; height:56px; margin:0 auto .8rem;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; color:#fff;
    background:linear-gradient(135deg,#e50914,#b00610);
    border-radius:50%;
    box-shadow:0 8px 24px rgba(229,9,20,.45);
}
.next-ep-title{
    font-family:'Oswald','Bebas Neue',sans-serif;
    font-size:1.25rem; letter-spacing:.5px; text-transform:uppercase;
    color:#fff; margin:0 0 .3rem;
}
.next-ep-count{ color:#9aa3b2; font-size:.9rem; margin:0 0 1.1rem; }
.next-ep-count .next-ep-num{ color:#e50914; font-weight:700; font-size:1.05rem; }
.next-ep-actions{ display:flex; flex-direction:column; gap:.55rem; }
.next-ep-now{
    padding:.7rem 1rem; border:none; border-radius:10px; cursor:pointer;
    font-weight:700; font-size:.95rem; color:#fff;
    background:linear-gradient(135deg,#e50914,#b00610);
    transition:transform .15s ease, box-shadow .15s ease;
}
.next-ep-now:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(229,9,20,.4); }
.next-ep-cancel{
    padding:.6rem 1rem; border:1px solid rgba(255,255,255,.15); border-radius:10px;
    cursor:pointer; font-weight:600; font-size:.88rem;
    color:#c3cad6; background:transparent; transition:background .15s ease;
}
.next-ep-cancel:hover{ background:rgba(255,255,255,.06); }

/* =====================================================
   SEARCH MODAL — REDESIGN (agregat multi-provider)
   ===================================================== */
.modal-content.search-modal {
  width: 94vw; max-width: 680px;
  max-height: 86vh;
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.search-header {
  display: flex; align-items: center; gap: .65rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.search-header .search-ico { color: var(--text-tertiary); flex-shrink: 0; display:flex; }
.search-header input {
  flex: 1; padding: .35rem 0; border: none; background: transparent;
  font-size: 1.05rem; font-weight: 500; color: var(--text-primary); outline: none;
}
.search-header input::placeholder { color: var(--text-tertiary); }

.search-results { flex: 1; overflow-y: auto; padding: .5rem 0 1.2rem; scroll-behavior: smooth; }

/* ── Status: loading & empty ── */
.search-status { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; padding: 3rem 1.5rem; text-align:center; color: var(--text-secondary); }
.search-status p { margin:0; font-size:.98rem; }
.search-status span { font-size:.82rem; color: var(--text-tertiary); }
.search-spinner { width:34px; height:34px; border:3px solid var(--border-default); border-top-color:#e50914; border-radius:50%; animation: searchSpin .8s linear infinite; }
@keyframes searchSpin { to { transform: rotate(360deg); } }
.search-empty-icon { font-size:2.4rem; opacity:.6; }
.search-empty strong { color: var(--text-primary); }

/* ── Summary bar ── */
.search-summary { padding: .7rem 1.2rem .3rem; font-size:.85rem; color: var(--text-secondary); }
.search-summary strong { color:#e50914; }

/* ── Group (per provider) ── */
.search-group { margin-top: 1.1rem; }
.search-group-head { display:flex; align-items:center; gap:.6rem; padding: 0 1.2rem .5rem; }
.search-group-count { font-size:.75rem; color: var(--text-tertiary); }
.search-provider-badge {
  font-size:.7rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:999px; color:#fff;
  background: linear-gradient(135deg,#3a3f4b,#22262f);
  border:1px solid rgba(255,255,255,.08);
}
/* warna khas per provider */
.search-group[data-provider="wetv"]      .search-provider-badge { background:linear-gradient(135deg,#00c6ff,#0072ff); }
.search-group[data-provider="bilitv"]    .search-provider-badge { background:linear-gradient(135deg,#fb7299,#e62e6b); }
.search-group[data-provider="reelshort"] .search-provider-badge { background:linear-gradient(135deg,#7b2ff7,#f107a3); }
.search-group[data-provider="cubetv"]    .search-provider-badge { background:linear-gradient(135deg,#f7971e,#ffd200); color:#222; }
.search-group[data-provider="dotdrama"]  .search-provider-badge { background:linear-gradient(135deg,#e50914,#b00610); }
.search-group[data-provider="shortmax"]  .search-provider-badge { background:linear-gradient(135deg,#11998e,#38ef7d); color:#08301f; }
.search-group[data-provider="netshort"]  .search-provider-badge { background:linear-gradient(135deg,#fc4a1a,#f7b733); }
.search-group[data-provider="meloshort"] .search-provider-badge { background:linear-gradient(135deg,#8e2de2,#4a00e0); }
.search-group[data-provider="stardusttv"].search-provider-badge,
.search-group[data-provider="stardusttv"] .search-provider-badge { background:linear-gradient(135deg,#141e30,#243b55); }
.search-group[data-provider="microdrama"] .search-provider-badge { background:linear-gradient(135deg,#00b09b,#96c93d); color:#0a3d1f; }
.search-group[data-provider="dramabite"] .search-provider-badge { background:linear-gradient(135deg,#ff512f,#dd2476); }
.search-group[data-provider="dramanova"] .search-provider-badge { background:linear-gradient(135deg,#c471ed,#f64f59); }
.search-group[data-provider="freereels"] .search-provider-badge { background:linear-gradient(135deg,#43cea2,#185a9d); }

/* ── Grid / shelf kartu hasil ── */
.search-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:.7rem;
  padding: 0 1.2rem;
}
@media (min-width: 560px) { .search-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .search-grid { grid-template-columns: repeat(5, 1fr); } }

.search-card { display:block; text-decoration:none; color:inherit; transition: transform .18s ease; }
.search-card:active { transform: scale(.96); }
@media (hover:hover){ .search-card:hover { transform: translateY(-3px); } .search-card:hover .search-poster img { transform: scale(1.06); } }

.search-poster {
  position:relative; width:100%; aspect-ratio: 2/3;
  border-radius: 10px; overflow:hidden;
  background:#1a1d24; border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.search-poster img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s ease; }
.search-ep {
  position:absolute; bottom:5px; right:5px;
  font-size:.62rem; font-weight:700; padding:.15rem .4rem; border-radius:6px;
  background: rgba(0,0,0,.78); color:#fff; backdrop-filter: blur(2px);
}
.search-card-title {
  margin-top:.4rem; font-size:.76rem; line-height:1.25; color: var(--text-secondary);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (hover:hover){ .search-card:hover .search-card-title { color: var(--text-primary); } }
/* ═══════════════════════════════════════════════════════════════
   CSS FIXES — audit 2026-08-02
   Class yang dipakai views tapi hilang dari stylesheet aktif.
   Didefinisikan ulang konsisten dengan design system premium.
   ═══════════════════════════════════════════════════════════════ */

/* ── Movie overlay (badge "Eps X") di kartu provider home ────── */
.movie-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 11, 20, 0.92) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  pointer-events: none;
}
.movie-card:hover .movie-overlay {
  opacity: 1;
}
.movie-overlay span {
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  display: inline-block;
  width: fit-content;
}

/* ── Detail page: genre tags wrapper ─────────────────────────── */
.detail-genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ── Admin form card (settings) ──────────────────────────────── */
.admin-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.form-actions .btn { min-width: 140px; }

/* ── Admin stat icon: Slot Iklan ─────────────────────────────── */
.admin-stat-icon-ads { background: var(--info-soft); color: var(--info); }

/* ── Static page header (about/contact/privacy/terms) ────────── */
.page-header {
  background: var(--bg-surface);
  padding: var(--space-12) 0;
  margin-bottom: var(--space-8);
  text-align: center;
}
.page-header h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
}
.page-header p {
  color: var(--text-tertiary);
  max-width: 640px;
  margin: 0 auto;
}

/* ── Dropdown Drama China — samakan lebar dgn dropdown Genre ─── */
.dropdown-dchina {
  min-width: 320px;
  padding: var(--space-4);
}
.dropdown-dchina .dropdown-header {
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-3);
}
/* ═══════════════════════════════════════════════════════════════
   AD SLOTS — popup, below_header, hero, content, player, footer
   ═══════════════════════════════════════════════════════════════ */

/* Generic ad slot wrapper */
.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 auto;
  padding: var(--space-4) 0;
  text-align: center;
  overflow: hidden;
}
.ad-slot .ad-code,
.ad-slot .ad-banner {
  max-width: 100%;
}
.ad-slot .ad-code iframe,
.ad-slot .ad-code img {
  max-width: 100%;
}
.ad-slot .ad-banner img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

/* Below header slot — full width, subtle separator */
.ad-slot-below_header {
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  min-height: 40px;
}

/* Hero / content slots — constrained width */
.ad-slot-hero,
.ad-slot-content_top,
.ad-slot-content_bottom {
  max-width: 980px;
}

/* Player slots — above/below the video */
.ad-slot-player_before {
  padding-top: 0;
  padding-bottom: var(--space-3);
}
.ad-slot-player_after {
  padding-top: var(--space-3);
  padding-bottom: 0;
}

/* Footer slot */
.ad-slot-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-4);
  background: rgba(0, 0, 0, 0.15);
}

/* ── POPUP modal ─────────────────────────────────────────────── */
.ad-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s;
  padding: var(--space-4);
}
.ad-popup.show {
  opacity: 1;
  visibility: visible;
}
.ad-popup-card {
  position: relative;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl), 0 0 40px rgba(249, 115, 22, 0.12);
  padding: var(--space-4);
  transform: scale(0.94) translateY(10px);
  transition: transform 0.3s var(--ease-spring);
}
.ad-popup.show .ad-popup-card {
  transform: scale(1) translateY(0);
}
.ad-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: rgba(0, 0, 0, 0.6);
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast);
}
.ad-popup-close:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.ad-popup-content {
  text-align: center;
}
.ad-popup-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.ad-popup-content iframe {
  max-width: 100%;
}

@media (max-width: 640px) {
  .ad-popup-card { max-width: 94vw; padding: var(--space-3); }
  .ad-slot { padding: var(--space-3) 0; }
}
/* ═══════════════════════════════════════════════════════════════
   ADMIN CSS FIXES — audit 2026-08-02
   Class dipakai admin views tapi hilang dari stylesheet aktif.
   ═══════════════════════════════════════════════════════════════ */

/* Danger button (delete actions) */
.btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.28);
  color: #fff;
  border-color: rgba(239, 68, 68, 0.5);
}

/* Admin form 2-column grid + full-width span */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.form-grid .full,
.form-group.full {
  grid-column: span 2;
}
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full,
  .form-group.full { grid-column: span 1; }
}
/* ═══════════════════════════════════════════════════════════════
   FORM FIXES — audit 2026-08-02
   .form-group hanya styling <input> → textarea & select tampil default
   browser (putih/abu) & checkbox melar 100%. Fix global di bawah.
   ═══════════════════════════════════════════════════════════════ */

/* textarea & select ikut styling dark seperti input */
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: all var(--duration-fast);
}

/* textarea: tinggi nyaman + resize vertical + font mono (kode iklan) */
.form-group textarea {
  min-height: 110px;
  resize: vertical;
  font-family: var(--font-mono);
  line-height: 1.55;
}

/* select: hilangkan panah default abu-abu, dark option */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' 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 var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}
.form-group select option {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* placeholder gelap */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-tertiary);
}

/* focus accent */
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* checkbox & radio JANGAN melar — kembalikan ukuran normal */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: auto;
  height: auto;
  padding: 0;
  margin: 0 var(--space-2) 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
/* label yang membungkus checkbox: rata tengah, tidak full block */
.form-group label:has(input[type="checkbox"]),
.form-group label:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
/* ═══════════════════════════════════════════════════════════════
   HEADER SLOT FIX — 2026-08-02
   Slot 'header' (banner paling atas, di atas navbar)
   ═══════════════════════════════════════════════════════════════ */
.ad-slot-header {
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-4);
  min-height: 30px;
}
.ad-slot-header .ad-code,
.ad-slot-header .ad-banner {
  max-width: 100%;
}
.ad-slot-header img,
.ad-slot-header iframe {
  max-width: 100%;
}