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

:root {
  --bg: #080b10;
  --bg2: #0e1219;
  --bg3: #151c27;
  --accent: #e8a020;
  --accent2: #ff4c6a;
  --accent3: #4ca9ff;
  --text: #f0f0f0;
  --muted: #7a8494;
  --border: rgba(255,255,255,0.07);
  --card-bg: #111620;
  --radius: 12px;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }

/* === NAV === */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
  height: 64px;
  background: rgba(8,11,16,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: var(--text);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.logo-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(232,160,32,0.5));
  transition: filter 0.3s ease, transform 0.3s ease;
}
.logo:hover .logo-icon {
  filter: drop-shadow(0 0 12px rgba(232,160,32,0.9));
  transform: rotate(15deg) scale(1.08);
}
.logo span { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 1.5rem;
  flex: 1;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-search {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  position: relative;
}
.nav-search input {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  width: 220px;
  outline: none;
  transition: border-color 0.2s;
}
.nav-search input:focus { border-color: var(--accent); }
.nav-search button {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  width: 38px; height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.nav-search button:hover { opacity: 0.8; }

/* === AUTH NAV AREA === */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

.btn-signin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.5rem 1.4rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(232,160,32,0.25);
}
.btn-signin:hover { background: #ffb733; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,160,32,0.35); }

/* === PROFILE DROPDOWN === */
.nav-profile {
  position: relative;
}
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 10px;
  transition: background 0.2s;
}
.profile-trigger:hover { background: rgba(255,255,255,0.05); }
.profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: cover;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 700;
  overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.notif-bell {
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.notif-bell:hover { opacity: 1; }

.profile-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  min-width: 200px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  overflow: hidden;
  display: none;
  z-index: 200;
  animation: dropIn 0.2s ease both;
}
.profile-dropdown.open { display: block; }

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

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}
.dropdown-item:hover { background: rgba(255,255,255,0.06); }
.dropdown-item.logout { color: #ff4c6a; }
.dropdown-item.logout:hover { background: rgba(255,76,106,0.08); }
.dropdown-item .di-icon { font-size: 1rem; width: 20px; text-align: center; }
.dropdown-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0.3rem 0; }

/* === AUTH MODAL === */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.auth-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.auth-modal {
  background: #131821;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  position: relative;
  transform: translateY(30px);
  transition: transform 0.25s ease;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
}
.auth-overlay.open .auth-modal { transform: translateY(0); }

.auth-close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.auth-close:hover { color: var(--text); }

.auth-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 2px;
  margin-bottom: 0.25rem;
}
.auth-logo span { color: var(--accent); }

.auth-tabs {
  display: flex;
  gap: 0;
  background: var(--bg3);
  border-radius: 10px;
  padding: 4px;
  margin: 1.5rem 0;
}
.auth-tab {
  flex: 1;
  padding: 0.55rem;
  border: none;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-tab.active {
  background: var(--accent);
  color: #000;
  box-shadow: 0 4px 12px rgba(232,160,32,0.3);
}

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.auth-field {
  position: relative;
  margin-bottom: 1rem;
}
.auth-field-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--muted);
  pointer-events: none;
}
.auth-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,160,32,0.15);
}

.auth-field.has-toggle .auth-input { padding-right: 2.75rem; }
.auth-field-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
  line-height: 0;
}
.auth-field-toggle:hover,
.auth-field-toggle:focus { color: var(--text); }
.auth-field-toggle svg { display: block; }

.auth-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.auth-checkbox-row label {
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}
.auth-checkbox-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-forgot {
  display: block;
  text-align: left;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  cursor: pointer;
  transition: color 0.2s;
}
.auth-forgot:hover { color: var(--text); }

.auth-captcha-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-captcha-box:hover { border-color: var(--muted); }
.auth-captcha-box.verified { border-color: rgba(34,197,94,0.4); }
.auth-captcha-box.shake {
  animation: captchaShake 0.4s;
  border-color: rgba(255,76,106,0.5);
}
@keyframes captchaShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.auth-captcha-left { display: flex; align-items: center; gap: 0.75rem; }
.auth-captcha-check {
  width: 28px; height: 28px;
  background: transparent;
  border: 2px solid var(--muted);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.auth-captcha-check.verifying {
  border-color: var(--accent);
  border-radius: 50%;
  border-top-color: transparent;
  animation: captchaSpin 0.6s linear infinite;
}
.auth-captcha-check.verified {
  background: #22c55e;
  border-color: #22c55e;
  border-radius: 50%;
}
.auth-captcha-check.verified::after { content: "✓"; }
@keyframes captchaSpin { to { transform: rotate(360deg); } }
.auth-captcha-text { font-size: 0.9rem; color: var(--text); }
.auth-captcha-brand { font-size: 0.65rem; color: var(--muted); text-align: right; line-height: 1.3; }
.auth-captcha-brand strong { color: var(--text); display: block; }

.btn-auth {
  width: 100%;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.9rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(232,160,32,0.25);
}
.btn-auth:hover { background: #ffb733; transform: translateY(-1px); }

.auth-switch {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.auth-switch-link {
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  transition: color 0.2s;
}
.auth-switch-link:hover { color: #ffb733; }

.auth-error {
  background: rgba(255,76,106,0.1);
  border: 1px solid rgba(255,76,106,0.3);
  color: #ff4c6a;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  display: none;
}
.auth-error.show { display: block; }
.auth-success {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  color: #22c55e;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  display: none;
}
.auth-success.show { display: block; }

.auth-otp-box {
  background: rgba(232,160,32,0.08);
  border: 1px solid rgba(232,160,32,0.35);
  color: var(--text);
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
  transition: border-color 0.2s, background 0.2s;
}
.auth-otp-box strong {
  color: var(--accent);
  font-size: 1.15rem;
  letter-spacing: 4px;
}
.auth-otp-box.expired {
  border-color: rgba(255,76,106,0.35);
  background: rgba(255,76,106,0.08);
}
.auth-otp-box.expired strong { color: #ff4c6a; }

.auth-otp-timer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin: -0.25rem 0 1rem;
}

#otpResendLink {
  opacity: 0.4;
  pointer-events: none;
}
#otpResendLink.active {
  opacity: 1;
  pointer-events: auto;
}

/* === CONTINUE WATCHING — LOCKED STATE === */
.continue-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(232,160,32,0.07) 0%, rgba(232,160,32,0.02) 100%);
  border: 1px solid rgba(232,160,32,0.25);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  width: 100%;
  aspect-ratio: 2/3;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.continue-locked::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}
.continue-locked-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(232,160,32,0.4));
}
.continue-locked-text h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--text);
  line-height: 1.2;
}
.continue-locked-text p {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}
.btn-unlock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 1px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(232,160,32,0.3);
  width: 100%;
}
.btn-unlock:hover { background: #ffb733; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(232,160,32,0.4); }

.safe-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 0.9rem;
  transition: background 0.2s;
}

.safe-pill:hover {
  background: rgba(232,160,32,0.12);
}

.section--continue { /* removed */ }

/* =====================================================
   HERO SPOTLIGHT — Cineby-style full-bleed backdrop
   ===================================================== */
.hero-spotlight {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #040608;
}

/* Backdrop image */
.hs-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  opacity: 0;
  transition: opacity 0.9s ease, background-image 0.3s ease;
  transform: scale(1.03);
  animation: hsZoom 14s ease-in-out infinite alternate;
}
.hs-backdrop.loaded { opacity: 1; }

@keyframes hsZoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.00); }
}

/* Left-side gradient — thick, dark panel where text lives */
.hs-gradient-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(8,11,16,0.97) 0%,
    rgba(8,11,16,0.88) 30%,
    rgba(8,11,16,0.50) 58%,
    rgba(8,11,16,0.08) 75%,
    transparent 100%
  );
  z-index: 1;
}

/* Bottom gradient — fades into page body */
.hs-gradient-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  z-index: 2;
}

/* Film-grain overlay */
.hs-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
  z-index: 3;
}

/* Content panel */
.hs-content {
  position: relative;
  z-index: 10;
  max-width: 580px;
  padding: 0 3.5rem 6rem 3.5rem;
  padding-top: 160px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hs-content.hs-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Genre pills */
.hs-genre-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  min-height: 24px;
}
.hs-genre-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(232,160,32,0.12);
  border: 1px solid rgba(232,160,32,0.28);
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
}

/* Title */
.hs-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.1rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}

/* Overview */
.hs-overview {
  font-size: 0.95rem;
  color: rgba(240,240,240,0.75);
  line-height: 1.65;
  margin-bottom: 1.1rem;
  max-width: 480px;
}

/* Meta row: rating · year · type */
.hs-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 1.75rem;
}
.hs-meta > span + span::before {
  content: '·';
  margin-right: 1rem;
}
.hs-rating {
  color: var(--accent);
  font-weight: 700;
}

/* Action buttons */
.hs-actions {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.hs-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--text);
  color: #000;
  border: none;
  padding: 0.75rem 1.8rem;
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(255,255,255,0.15);
  letter-spacing: 0.3px;
}
.hs-btn-play:hover {
  background: #e8e8e8;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,255,255,0.22);
}

.hs-btn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255,255,255,0.1);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.75rem 1.8rem;
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  backdrop-filter: blur(8px);
}
.hs-btn-more:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-2px);
}

/* Inline search inside hero */
.hs-search-wrap {
  max-width: 440px;
}
.hs-search-bar {
  display: flex;
  align-items: center;
  background: rgba(14,18,25,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 0 0.5rem 0 1rem;
  backdrop-filter: blur(14px);
  gap: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hs-search-bar:focus-within {
  border-color: rgba(232,160,32,0.5);
  box-shadow: 0 0 0 3px rgba(232,160,32,0.1);
}
.hs-search-icon {
  color: var(--muted);
  flex-shrink: 0;
}
.hs-search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.75rem 0;
}
.hs-search-bar input::placeholder { color: var(--muted); }
.hs-search-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.hs-search-btn:hover { background: #ffb733; transform: translateY(-1px); }

/* Slide indicator dots */
.hs-dots {
  position: absolute;
  bottom: 2.5rem;
  right: 3rem;
  display: flex;
  gap: 0.5rem;
  z-index: 20;
}
.hs-dot {
  width: 28px;
  height: 3px;
  background: rgba(255,255,255,0.25);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
  padding: 0;
}
.hs-dot.active {
  background: var(--accent);
  width: 52px;
}

/* Responsive */
@media (max-width: 768px) {
  .hs-content {
    padding: 0 1.5rem 5rem;
    padding-top: 120px;
    max-width: 100%;
  }
  .hs-gradient-left {
    background: linear-gradient(
      180deg,
      rgba(8,11,16,0.4) 0%,
      rgba(8,11,16,0.92) 60%,
      rgba(8,11,16,1) 100%
    );
  }
  .hs-dots { right: 1.5rem; }
}

/* === HERO (old — kept for reference, unused) === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 2rem 4rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}
.g1 { width: 600px; height: 600px; background: #e8a02055; top: -200px; left: -100px; animation: drift 12s ease-in-out infinite alternate; }
.g2 { width: 400px; height: 400px; background: #ff4c6a44; top: 10%; right: -100px; animation: drift 9s ease-in-out infinite alternate-reverse; }
.g3 { width: 500px; height: 300px; background: #4ca9ff33; bottom: 0; left: 30%; animation: drift 15s ease-in-out infinite alternate; }

@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.05); }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(232,160,32,0.12);
  border: 1px solid rgba(232,160,32,0.3);
  color: var(--accent);
  padding: 0.35rem 1rem;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  animation: fadeUp 0.6s ease both;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  animation: fadeUp 0.6s 0.1s ease both;
}
.hero-title em {
  font-style: normal;
  color: var(--accent);
  display: block;
}

.hero-sub {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.6s 0.2s ease both;
}

.search-bar {
  display: flex;
  gap: 0;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  animation: fadeUp 0.6s 0.3s ease both;
  box-shadow: 0 0 40px rgba(232,160,32,0.15);
  border-radius: 12px;
  overflow: hidden;
}
.search-bar input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--text);
  padding: 1rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  border-radius: 12px 0 0 12px;
}
.search-bar input:focus { border-color: var(--accent); }
.search-btn {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 1rem 2rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 0 12px 12px 0;
  transition: background 0.2s;
}
.search-btn:hover { background: #ffb733; }

.hero-tags {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp 0.6s 0.4s ease both;
}
.hero-tags span {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 0.4rem 1rem;
  border-radius: 99px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.hero-tags span:hover { border-color: var(--accent); color: var(--accent); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === SECTIONS === */
.section {
  padding: 3rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 1px;
}
.section-header a {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
  transition: opacity 0.2s;
}
.section-header a:hover { opacity: 0.7; }

/* === CARD ROW === */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

/* === CONTINUE WATCHING (compact cards without images or names) === */
.continue-section .section-header h2 { display:flex; align-items:center; gap:0.6rem; }
.continue-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.cw-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem;
  min-width: 140px;
  max-width: 200px;
  height: auto;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
}
.cw-thumb {
  flex: 0 0 120px;
  height: 120px;
  background: linear-gradient(180deg, #0f1720, #0b0f15);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cw-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
.cw-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.cw-episode {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  z-index: 2;
}
.cw-progress {
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  overflow: hidden;
}
.cw-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  width: 0%;
  transition: width 0.4s ease;
}
.cw-time {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: left;
}

/* Remove button on continue-watching cards */
.cw-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  z-index: 4;
  transition: background 0.12s, color 0.12s;
}
.cw-remove:hover { background: rgba(255,76,106,0.95); color: #fff; }

/* Undo toast */
.undo-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  bottom: 20px;
  background: rgba(20,24,30,0.95);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  z-index: 1200;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  transition: transform 0.25s ease, opacity 0.25s;
  opacity: 0;
}
.undo-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.undo-toast .undo-btn {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

/* hide scrollbar track when not hovered */
.continue-row::-webkit-scrollbar { height: 8px; }
.continue-row::-webkit-scrollbar-thumb { background: rgba(232,160,32,0.12); }

/* === MEDIA CARD === */
.media-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--card-bg);
  transition: transform 0.25s, box-shadow 0.25s;
  aspect-ratio: 2/3;
  animation: fadeUp 0.4s ease both;
}
.media-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 2;
}
.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s;
}
.media-card .card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.25s;
}
.media-card:hover .card-overlay { opacity: 1; }
.media-card .card-title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}
.media-card .card-meta {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.media-card .card-rating {
  color: var(--accent);
  font-weight: 700;
}
.media-card .card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50px; height: 50px;
  background: rgba(232,160,32,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.25s;
}
.media-card:hover .card-play { opacity: 1; }

.media-card .card-type-badge {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  background: rgba(0,0,0,0.7);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

/* === SKELETON === */
.skeleton-card {
  aspect-ratio: 2/3;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg3) 25%, #1e2635 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === HOW IT WORKS === */
.how-section {
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 5rem;
}
.how-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  margin-bottom: 3rem;
  letter-spacing: 1px;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.how-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}
.how-card:hover { border-color: rgba(232,160,32,0.4); }
.how-num {
  font-family: var(--font-display);
  font-size: 4rem;
  color: rgba(232,160,32,0.1);
  line-height: 1;
  margin-bottom: 1rem;
}
.how-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.how-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

/* Card 04 — mobile note */
.how-card-mobile {
  border-color: rgba(232,160,32,0.2);
}
.how-card-mobile:hover { border-color: rgba(232,160,32,0.45); }
.how-card-mobile .how-num { color: rgba(232,160,32,0.1); }
.how-mobile-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(232,160,32,0.1);
  border: 1px solid rgba(232,160,32,0.25);
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  margin-bottom: 0.75rem;
}
.how-mobile-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid rgba(232,160,32,0.5);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.55;
}
.how-note-icon { font-size: 0.9rem; flex-shrink: 0; margin-top: 0.05rem; }

/* === FOOTER === */
.footer {
  border-top: 1px solid var(--border);
  padding: 3rem 2rem;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.footer-inner p { color: var(--muted); font-size: 0.85rem; max-width: 500px; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--muted); font-size: 0.9rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--accent); }
.footer-contact { color: var(--muted); font-size: 0.85rem; margin-top: 0.75rem; }
.footer-contact a { color: var(--accent); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-copy { color: var(--muted); font-size: 0.8rem; margin-top: 0.5rem; opacity: 0.6; }

/* === PAGE HERO (inner pages) === */
.page-hero {
  padding: 100px 2rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: 3rem;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}
.page-hero p { color: var(--muted); }

/* === GRID PAGE === */
.grid-section {
  padding: 0 2rem 4rem;
  max-width: 1400px;
  margin: 0 auto;
}
.big-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

/* === SEARCH PAGE === */
.search-page {
  padding: 100px 2rem 4rem;
  max-width: 1400px;
  margin: 0 auto;
}
.search-header {
  margin-bottom: 2rem;
}
.search-header h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.search-header p { color: var(--muted); }

/* === WATCH PAGE === */
.watch-page {
  padding-top: 64px;
  min-height: 100vh;
}
.watch-hero {
  position: relative;
  background: #000;
}
.player-area {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.player-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
}
.player-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.player-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--bg3);
  text-align: center;
  padding: 2rem;
}
.player-placeholder h3 { font-family: var(--font-display); font-size: 1.5rem; }
.player-placeholder p { color: var(--muted); font-size: 0.9rem; }

.watch-info {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.watch-title-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.watch-title-row h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 1px;
  flex: 1;
}
.watch-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.badge {
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.badge-year { background: var(--bg3); color: var(--muted); }
.badge-rating { background: rgba(232,160,32,0.15); color: var(--accent); }
.badge-type { background: rgba(76,169,255,0.15); color: var(--accent3); }

.watch-overview {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 700px;
  margin-bottom: 2rem;
  line-height: 1.8;
}

/* === STREAM SOURCES === */
.sources-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}
.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.source-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: var(--font-body);
}
.source-btn:hover {
  border-color: var(--accent);
  background: rgba(232,160,32,0.05);
}
.source-btn.active {
  border-color: var(--accent);
  background: rgba(232,160,32,0.1);
}
.source-btn .s-name {
  font-weight: 700;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.source-btn .s-quality {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--accent);
  color: #000;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.source-btn .s-desc {
  font-size: 0.78rem;
  color: var(--muted);
}
.source-btn .s-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.open-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-bottom: 2rem;
  text-decoration: none;
}
.open-tab-btn:hover { opacity: 0.85; }

/* === FILTER BAR === */
.filter-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.filter-pill {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.4rem 1rem;
  border-radius: 99px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-pill:hover, .filter-pill.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* === NOTICE === */
.notice {
  background: rgba(76,169,255,0.08);
  border: 1px solid rgba(76,169,255,0.2);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.notice strong { color: var(--accent3); }

/* Slightly lower notices inside the watch/info area so they don't sit
   too close to the episode grid. */
.watch-info .notice { margin-top: 1.25rem; }

/* BACK LINK */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}
.back-link:hover { color: var(--text); }

/* LOAD MORE */
.load-more-btn {
  display: block;
  margin: 2rem auto 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.75rem 2.5rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
.load-more-btn:hover { border-color: var(--accent); }

/* === EMPTY STATE === */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--muted);
}
.empty-state h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--text); }

/* ============================================================
   RESPONSIVE — mobile first, scales up to desktop
   ============================================================ */

/* Phones (up to 480px) */
@media (max-width: 480px) {

  /* NAV */
  .nav {
    padding: 0 1rem;
    height: 56px;
    gap: 0.75rem;
  }
  .logo { font-size: 1.2rem; letter-spacing: 1px; }
  .nav-links { display: none; }
  .nav-search input { width: 110px; font-size: 0.8rem; padding: 0.35rem 0.6rem; }
  .nav-search button { width: 32px; height: 30px; font-size: 0.95rem; }
  .btn-signin { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
  .notif-bell { font-size: 1rem; }
  .profile-avatar { width: 32px; height: 32px; font-size: 0.9rem; }

  /* HERO */
  .hero { min-height: 100svh; padding: 70px 1rem 3rem; }
  .hero-badge { font-size: 0.7rem; padding: 0.3rem 0.75rem; }
  .hero-title { font-size: 2.4rem; line-height: 1; }
  .hero-sub { font-size: 0.9rem; margin-bottom: 1.5rem; }
  .search-bar { flex-direction: column; border-radius: 12px; box-shadow: none; }
  .search-bar input {
    border-right: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
  }
  .search-btn { border-radius: 0 0 12px 12px; padding: 0.85rem; font-size: 1rem; }
  .hero-tags { gap: 0.5rem; }
  .hero-tags span { font-size: 0.78rem; padding: 0.35rem 0.75rem; }

  /* SECTIONS */
  .section { padding: 1.5rem 1rem; }
  .section-header h2 { font-size: 1.2rem; }
  .section-header a { font-size: 0.8rem; }

  /* CARD GRID */
  .card-row { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .continue-row { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

  /* CONTINUE LOCKED CARD */
  .continue-locked { padding: 1.25rem 1rem; gap: 0.75rem; border-radius: 12px; }
  .continue-locked-icon { font-size: 1.8rem; }
  .continue-locked-text h4 { font-size: 1rem; }
  .continue-locked-text p { font-size: 0.75rem; margin-bottom: 0.75rem; }
  .btn-unlock { font-size: 0.82rem; padding: 0.5rem 1rem; }

  /* HOW IT WORKS */
  .how-section { padding-top: 2rem; padding-bottom: 3rem; }
  .how-title { font-size: 1.6rem; margin-bottom: 1.5rem; }
  .how-grid { grid-template-columns: 1fr; gap: 1rem; }
  .how-card { padding: 1.25rem; }
  .how-num { font-size: 2.5rem; margin-bottom: 0.5rem; }
  .how-card h3 { font-size: 1rem; }
  .how-card p { font-size: 0.83rem; }

  /* FOOTER */
  .footer { padding: 2rem 1rem; }
  .footer-links { gap: 1rem; }

  /* AUTH MODAL */
  .auth-modal { padding: 1.5rem 1.25rem; border-radius: 16px; }
  .auth-logo { font-size: 1.1rem; }
  .auth-tabs { margin: 1rem 0; }
  .auth-tab { font-size: 0.85rem; padding: 0.45rem; }
  .auth-input { padding: 0.75rem 0.75rem 0.75rem 2.5rem; font-size: 0.9rem; }
  .auth-field-icon { font-size: 0.9rem; }
  .btn-auth { padding: 0.8rem; font-size: 0.95rem; }
  .auth-captcha-box { padding: 0.75rem; }
  .auth-captcha-text { font-size: 0.82rem; }
  .auth-switch { font-size: 0.8rem; margin-top: 1rem; }

  /* PROFILE MODAL */
  #profileAvatarBig { width: 68px !important; height: 68px !important; font-size: 1.8rem !important; }

  /* REPORT MODAL */
  .report-type-btn { font-size: 0.72rem; padding: 0.4rem 0.25rem; }

  /* PROFILE DROPDOWN */
  .profile-dropdown { min-width: 170px; right: -0.5rem; }
  .dropdown-item { font-size: 0.85rem; padding: 0.65rem 0.9rem; }

  /* WATCH PAGE */
  .watch-title-row h1 { font-size: 1.6rem; }
  .watch-overview { font-size: 0.85rem; }
  .sources-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .source-btn { padding: 0.75rem; }
  .episode-thumb { flex: 0 0 100px; }

  /* PAGE HERO */
  .page-hero { padding: 75px 1rem 1.5rem; }
  .page-hero h1 { font-size: 2rem; }
  .big-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

  /* SEARCH PAGE */
  .search-page { padding: 75px 1rem 2rem; }
  .search-header h2 { font-size: 1.4rem; }
}

/* Tablets (481px – 768px) */
@media (min-width: 481px) and (max-width: 768px) {

  .nav { padding: 0 1.25rem; height: 60px; }
  .nav-links { display: none; }
  .nav-search input { width: 160px; }
  .btn-signin { padding: 0.45rem 1rem; font-size: 0.85rem; }

  .hero { padding: 80px 1.5rem 3rem; }
  .hero-title { font-size: 3.2rem; }
  .hero-sub { font-size: 1rem; }
  .search-bar { flex-direction: column; border-radius: 12px; }
  .search-bar input { border-right: 1px solid var(--border); border-radius: 12px 12px 0 0; }
  .search-btn { border-radius: 0 0 12px 12px; }

  .section { padding: 2rem 1.25rem; }
  .card-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
  .continue-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  .how-grid { grid-template-columns: 1fr; }
  .how-title { font-size: 1.9rem; }

  .auth-modal { padding: 2rem 1.5rem; }

  .big-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .page-hero { padding: 85px 1.5rem 2rem; }
  .page-hero h1 { font-size: 2.4rem; }
  .search-page { padding: 85px 1.5rem 3rem; }

  .episode-thumb { flex: 0 0 120px; }
  .sources-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small desktop / large tablet (769px – 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-search input { width: 180px; }
  .hero-title { font-size: 5rem; }
  .card-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .big-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* === EPISODE SELECTS & APPLY BUTTON === */
.episode-row { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.episode-controls .field { display:flex; flex-direction:column; }
.field-label { font-size:0.85rem; color:var(--muted); display:block; margin-bottom:0.3rem; }

.tv-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-width: 180px;
  cursor: pointer;
  position: relative;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23f0f0f0' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  background-size: 12px 8px;
}
.tv-select:focus { border-color: var(--accent3); box-shadow: 0 0 0 6px rgba(76,169,255,0.05); outline: none; }
.season-select {
  background-color: var(--accent);
  color: #000;
  border: none;
  box-shadow: 0 8px 22px rgba(232,160,32,0.12);
  font-family: var(--font-display);
  font-size: 0.95rem;
  min-width: 200px;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23000' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  background-size: 12px 8px;
  cursor: pointer;
}
.tv-select option { background: var(--bg2); color: var(--text); }

.apply-btn {
  align-self: flex-end;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.55rem 1.2rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(232,160,32,0.14);
  transition: transform 0.12s ease, opacity 0.12s;
}
.apply-btn:hover { transform: translateY(-1px); opacity: 0.95; }

@media (max-width: 520px) {
  .tv-select { min-width: 100%; }
  .apply-btn { width: 100%; }
}



/* === EPISODE GRID === */
.episode-list {
  display: none;
  gap: 1rem;
  margin-top: 1rem;
}
.episode-list.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 820px) {
  .episode-list.grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.episode-card {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  min-height: 120px;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 0.8rem;
  border: 1px solid var(--border);
  transition: transform 0.18s, box-shadow 0.18s;
}
.episode-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.episode-card.active-episode {
  border-color: var(--accent);
  background: rgba(232,160,32,0.07);
  box-shadow: 0 0 0 2px rgba(232,160,32,0.25);
}
.episode-card.active-episode .episode-title {
  color: var(--accent);
}
.episode-thumb {
  flex: 0 0 170px;
  border-radius: 8px;
  overflow: hidden;
  background: #0e1219;
  height: 100%;
}
.episode-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.episode-info { flex: 1; }
.episode-meta { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.35rem; }
.episode-index {
  background: rgba(0,0,0,0.6);
  color: var(--accent);
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-weight:700;
  flex-shrink:0;
}
.episode-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
.episode-runtime { color: var(--muted); font-size:0.85rem; margin-left:auto; text-align:right; }

.next-ep-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: rgba(232, 160, 32, 0.08);
  border: 1px solid rgba(232, 160, 32, 0.25);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  color: var(--text, #e8eaed);
  line-height: 1.5;
}
.next-ep-banner .bell { font-size: 1.1rem; flex-shrink: 0; }
.next-ep-banner .next-ep-countdown { color: var(--accent, #e8a020); font-weight: 600; }
.next-ep-banner .banner-disclaimer { display:inline-block; margin-top:4px; font-size:0.78rem; color: var(--muted); font-style: italic; }
.next-ep-banner .banner-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
}
.next-ep-banner .banner-close:hover { color: var(--text, #e8eaed); }
.episode-desc {
  color: var(--muted);
  margin-top: 0.5rem;
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.episode-actions { display:flex; align-items:center; gap:0.5rem; margin-left:0.5rem; }
.episode-actions .open-btn {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
}

/* === REPORT TYPE BUTTONS === */
.report-type-btn {
  flex: 1;
  padding: 0.5rem 0.4rem;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.report-type-btn:hover { border-color: var(--accent); color: var(--text); }
.report-type-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }

/* === PROFILE AVATAR HOVER === */
#profileAvatarBig:hover > div { opacity: 1 !important; }

/* === SERVER-STYLE SOURCE BUTTONS (FlixHQ / VidKing) === */
/* === SERVER-STYLE SOURCE BUTTONS (VidKing / AutoEmbed / Vidlink) === */
.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.source-btn.server-btn {
  padding: 1rem 1.1rem;
  border-color: rgba(255,255,255,0.1);
  background: #0d1219;
  border-radius: 14px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  text-align: left;
}
.source-btn.server-btn:hover {
  border-color: rgba(255,255,255,0.22);
  background: #111820;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.source-btn.server-btn.active {
  border-color: #e8a020;
  background: rgba(232,160,32,0.07);
  box-shadow: 0 0 0 1px rgba(232,160,32,0.2);
}
.server-card-inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.server-play-icon {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: #6b7280;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.source-btn.server-btn.active .server-play-icon {
  background: #e8a020;
  border-color: #e8a020;
  color: #000;
}
.source-btn.server-btn:hover .server-play-icon {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #ccc;
}
.source-btn.server-btn.active:hover .server-play-icon {
  background: #ffb733;
  border-color: #ffb733;
  color: #000;
}
.server-info { flex: 1; min-width: 0; }
.server-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
}
.source-btn.server-btn.active .server-label { color: rgba(232,160,32,0.7); }
.server-name-highlight {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 1.5px;
  color: #e8a020;
  line-height: 1.1;
}
.source-btn.server-btn:not(.active) .server-name-highlight { color: #9ca3af; }
.source-btn.server-btn:hover:not(.active) .server-name-highlight { color: #e5e7eb; }
.s-quality-server {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--accent);
  color: #000;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 0.35rem;
  position: relative;
  top: -1px;
}
.server-desc {
  font-size: 0.74rem;
  color: #4b5563;
  margin-top: 0.18rem;
}
.source-btn.server-btn.active .server-desc { color: #6b7280; }
.source-btn.server-btn:hover .server-desc { color: #6b7280; }

/* === WATCHLIST === */
.watchlist-btn-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.watchlist-btn-card:hover { border-color: var(--accent); background: rgba(232,160,32,0.08); }
.watchlist-btn-card.in-list { border-color: var(--accent); color: var(--accent); background: rgba(232,160,32,0.1); }
.watchlist-btn-card.in-list:hover { background: rgba(232,160,32,0.18); }

/* Watchlist overlay modal */
#watchlistOverlay { z-index: 500; }
.watchlist-modal {
  background: var(--bg2);
  border-radius: 18px;
  border: 1px solid var(--border);
  max-width: 540px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.watchlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.watchlist-header h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 1px;
}
.watchlist-count {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--bg3);
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  margin-left: 0.5rem;
}
.watchlist-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}
.watchlist-close:hover { color: var(--text); }
.watchlist-body {
  overflow-y: auto;
  flex: 1;
  padding: 1rem 1.5rem;
}
.watchlist-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.watchlist-empty div { font-size: 2.5rem; margin-bottom: 0.75rem; }
.watchlist-empty p { font-size: 0.9rem; }
.watchlist-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 8px;
  padding: 0.75rem 0.5rem;
}
.watchlist-item:hover { background: rgba(255,255,255,0.04); }
.watchlist-item:last-child { border-bottom: none; }
.watchlist-poster {
  width: 46px; height: 68px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg3);
}
.watchlist-info { flex: 1; min-width: 0; }
.watchlist-title {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.2rem;
}
.watchlist-meta {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.watchlist-type-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--accent);
  color: #000;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.watchlist-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.watchlist-remove:hover { color: #ff4c6a; background: rgba(255,76,106,0.1); }

/* Watchlist toast */
.wl-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg3);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
  white-space: nowrap;
}
.wl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* Watch page poster + title layout */
.watch-title-with-poster {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex: 1;
}
.watch-poster {
  width: 110px;
  min-width: 110px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  object-fit: cover;
  aspect-ratio: 2/3;
}
@media (max-width: 600px) {
  .watch-poster { width: 80px; min-width: 80px; }
}



/* ═══════════════════════════════════════════════════════════════
   CINEBY-STYLE PLAYER OVERLAY: Server Picker Sidebar
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper that holds the player + the sidebar together */
.player-wrapper {
  position: relative;
  background: #000;
  /* Clip the sliding sidebar so it doesn't spill outside the player box */
  overflow: hidden;
}

/* Toggle button — sits on the player's top-right corner */
.server-toggle-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
  background: rgba(8, 11, 16, 0.85);
  border: 1px solid rgba(232,160,32,0.4);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  backdrop-filter: blur(6px);
  opacity: 0.9;
}
.server-toggle-btn:hover {
  background: rgba(232,160,32,0.15);
  border-color: var(--accent);
  opacity: 1;
}
.server-toggle-btn svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
}
.server-toggle-btn .stb-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  flex-shrink: 0;
}
.server-toggle-btn .stb-dot.switching {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: dot-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes dot-pulse {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* The overlay sidebar */
.server-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 240px;
  background: rgba(8, 11, 16, 0.96);
  border-left: 1px solid rgba(232,160,32,0.18);
  z-index: 25;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.server-sidebar.open {
  transform: translateX(0);
}

.sidebar-header {
  padding: 0.85rem 1rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.sidebar-header-title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sidebar-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.sidebar-close-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.07);
}

.sidebar-auto-label {
  padding: 0.55rem 1rem 0.4rem;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.auto-switch-toggle {
  margin-left: auto;
  position: relative;
  width: 30px; height: 16px;
  cursor: pointer;
}
.auto-switch-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--bg3);
  border-radius: 999px;
  transition: background 0.2s;
  border: 1px solid rgba(255,255,255,0.1);
}
.auto-switch-toggle input:checked + .toggle-track { background: var(--accent); }
.toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.auto-switch-toggle input:checked ~ .toggle-thumb { transform: translateX(14px); }

.sidebar-server-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sidebar-server-list::-webkit-scrollbar { width: 4px; }
.sidebar-server-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sidebar-server-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.sidebar-server-item:hover {
  background: rgba(255,255,255,0.04);
}
.sidebar-server-item.active {
  background: rgba(232,160,32,0.08);
  border-left-color: var(--accent);
}
.sidebar-server-item.failed {
  opacity: 0.45;
}
.ssi-play {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.6rem;
  transition: background 0.15s, border-color 0.15s;
}
.sidebar-server-item.active .ssi-play {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.sidebar-server-item.failed .ssi-play {
  background: rgba(255,76,106,0.15);
  border-color: rgba(255,76,106,0.3);
  color: var(--accent2);
}
.ssi-info { flex: 1; min-width: 0; }
.ssi-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-server-item.active .ssi-name { color: var(--accent); }
.sidebar-server-item.failed .ssi-name { color: var(--muted); }
.ssi-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
}
.ssi-quality {
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(232,160,32,0.15);
  color: var(--accent);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.ssi-desc {
  font-size: 0.68rem;
  color: var(--muted);
}
.ssi-status {
  font-size: 0.65rem;
  flex-shrink: 0;
}
.ssi-status.loading { color: var(--accent); animation: dot-pulse 0.8s ease-in-out infinite alternate; }
.ssi-status.ok      { color: #22c55e; }
.ssi-status.fail    { color: var(--accent2); }

/* Auto-switch toast notification */
.autoswitch-toast {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(8,11,16,0.93);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.autoswitch-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsive: narrow sidebar on small screens */
@media (max-width: 600px) {
  .server-sidebar { width: 200px; }
  .server-toggle-btn { font-size: 0.7rem; padding: 0.35rem 0.6rem; }
}

/* ============================================================
   MOBILE RESPONSIVE — HAMBURGER NAV + BOTTOM BAR
   ============================================================ */

/* Hamburger button (hidden on desktop) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 8px;
  transition: background 0.2s;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.08); }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-down menu */
.mobile-nav-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  background: var(--bg2);
  border-bottom: 1px solid rgba(232,160,32,0.12);
  z-index: 99;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  overflow-y: auto;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.mobile-nav-menu.open {
  max-height: calc(100dvh - 64px);
}
.mobile-nav-menu a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
  letter-spacing: 0.01em;
}
.mobile-nav-menu a:last-child { border-bottom: none; }
.mobile-nav-menu a:hover,
.mobile-nav-menu a.active {
  color: var(--text);
  background: rgba(232,160,32,0.05);
  padding-left: 1.75rem;
}
.mobile-nav-menu a .mn-icon {
  font-size: 1.15rem;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}

/* Bottom navigation bar (mobile only) */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 66px;
  background: var(--bg2);
  border-top: 1px solid rgba(232,160,32,0.12);
  z-index: 98;
  justify-content: space-around;
  align-items: center;
  padding: 0 0.5rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  gap: 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
}

/* Shared style for both <a> and <button> bottom nav items */
.bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: color 0.18s, transform 0.15s;
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-transform: uppercase;
  min-width: 0;
  border-radius: 10px;
  position: relative;
}
.bn-item:hover, .bn-item:active { color: var(--accent); transform: translateY(-1px); }
.bn-item.active { color: var(--accent); }
.bn-item.active .bn-icon { filter: drop-shadow(0 0 6px rgba(232,160,32,0.5)); }
.bn-item.bn-logout { color: #ff4c6a; }
.bn-item.bn-logout:hover { color: #ff6b83; }
.bn-icon {
  font-size: 1.25rem;
  line-height: 1;
  display: block;
}
.bn-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.55rem;
  letter-spacing: 0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64px;
}

/* Sign-in state: single centered button */
.bn-signin-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 1.5rem;
}
.bn-signin-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 12px;
  padding: 0.65rem 2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(232,160,32,0.3);
}
.bn-signin-btn:active { opacity: 0.85; transform: scale(0.98); }

/* Add bottom padding on mobile so content isn't hidden behind bottom nav */
@media (max-width: 768px) {
  body { padding-bottom: 60px; }

  .nav-hamburger { display: flex; }
  .mobile-nav-menu { display: block; }
  .bottom-nav { display: flex; }

  /* Hide desktop nav links — shown in hamburger menu instead */
  .nav-links { display: none !important; }

  /* Compact the nav on mobile so logo + search + hamburger fit */
  .nav {
    gap: 0.75rem;
    padding: 0 1rem;
  }

  /* Push search bar to the right — sits next to hamburger */
  .nav-search {
    margin-left: auto;
  }

  /* Shrink search on small screens */
  .nav-search input { width: 120px; font-size: 0.85rem; }

  /* Give the nav a slightly shorter height on mobile */
  .nav { height: 58px; }
  .mobile-nav-menu { top: 58px; }

  /* Fix hero padding for new nav height */
  .hs-section,
  .hero,
  .page-hero,
  .search-page { padding-top: 58px !important; }
}

@media (max-width: 480px) {
  .nav { height: 54px; }
  .mobile-nav-menu { top: 54px; }
  .nav-search input { width: 90px; font-size: 0.8rem; }
}

/* ============================================================
   MOBILE AUTH — move sign-in into hamburger menu
   ============================================================ */
@media (max-width: 768px) {
  /* Hide the auth area from the cramped top nav */
  .nav-auth { display: none !important; }

  /* Sign-in button inside the mobile menu */
  .mobile-nav-menu .mn-signin {
    margin: 0.85rem 1.25rem 1rem;
    display: block;
    width: calc(100% - 2.5rem);
    background: var(--accent);
    color: #000;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 16px rgba(232,160,32,0.3);
    transition: opacity 0.2s, transform 0.15s;
  }

  /* Profile section inside mobile menu (shown when logged in) */
  .mobile-nav-menu .mn-profile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, rgba(232,160,32,0.06) 0%, rgba(14,18,25,0) 100%);
    border-bottom: 1px solid rgba(232,160,32,0.12);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
  }
  .mobile-nav-menu .mn-profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg3);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--accent);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(232,160,32,0.2);
  }
  .mobile-nav-menu .mn-profile-avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  }
}


/* ============================================================
   MOBILE FIXES v10 — Full phone compatibility
   ============================================================ */

/* 1. Prevent horizontal overflow on ALL screens */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 2. Watch page: full-width player on mobile, no black bars */
@media (max-width: 768px) {
  .watch-page {
    padding-top: 58px;
  }

  .player-area {
    max-width: 100%;
    width: 100%;
  }

  .player-wrapper {
    width: 100%;
  }

  .player-container {
    padding-bottom: 56.25%;
    width: 100%;
  }

  .watch-info {
    padding: 1rem 0.85rem;
  }

  .watch-title-row {
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .watch-title-row h1 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  /* Episode cards: stack thumb above text on small phones */
  .episode-card {
    flex-direction: column;
    min-height: unset;
  }

  .episode-thumb {
    flex: unset;
    width: 100%;
    height: 160px;
  }

  .episode-actions {
    margin-left: 0;
    margin-top: 0.5rem;
  }

  /* Source buttons: 2 per row on mobile */
  .sources-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  /* Season/episode selects: full width */
  .episode-row {
    flex-direction: column;
    align-items: stretch;
  }

  .tv-select {
    min-width: 100%;
    font-size: 1rem; /* prevents iOS zoom on focus */
  }

  /* Server sidebar: slide from bottom on mobile */
  .server-sidebar {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100% !important;
    border-radius: 16px 16px 0 0;
    max-height: 60vh;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  /* Card grid: 2 columns on mobile instead of 3 to avoid tiny cards */
  .card-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem;
  }

  .big-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem;
  }

  /* Continue row: 1 column on mobile */
  .continue-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Prevent nav search from overflowing on very small phones */
  .nav-search {
    flex-shrink: 1;
    min-width: 0;
  }

  .nav-search input {
    min-width: 0;
    flex: 1;
  }
}

/* 3. Very small phones (≤380px — e.g. Oppo A77s, older iPhones) */
@media (max-width: 380px) {
  .nav {
    padding: 0 0.75rem;
    gap: 0.5rem;
  }

  .logo {
    font-size: 1rem;
    letter-spacing: 0.5px;
  }

  .logo-icon {
    width: 28px;
    height: 28px;
  }

  .nav-search input {
    width: 80px;
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
  }

  .nav-search button {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .card-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem;
  }

  .big-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem;
  }

  .section {
    padding: 1rem 0.75rem;
  }

  .watch-title-row h1 {
    font-size: 1.3rem;
  }

  .sources-grid {
    grid-template-columns: 1fr !important;
  }

  .episode-thumb {
    height: 130px;
  }
}

/* 4. iOS Safari: prevent inputs zooming in (font-size must be ≥16px) */
input, select, textarea {
  font-size: max(16px, 1em);
}

/* 5. Fix bottom nav overlapping content on phones with home bar (iPhone X+) */
.bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
  height: auto;
  min-height: 62px;
}

/* 6. Fix watchlist modal on mobile */
@media (max-width: 768px) {
  .watchlist-modal {
    width: 96%;
    max-height: 85vh;
    border-radius: 16px;
  }

  .watchlist-body {
    padding: 0.75rem 1rem;
  }
}

/* 7. Fix auth modal on mobile — should not overflow screen */
@media (max-width: 480px) {
  .auth-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .auth-modal {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    transform: translateY(100%);
  }

  .auth-overlay.open .auth-modal {
    transform: translateY(0);
  }
}

/* 8. Touch tap highlight — remove blue flash on tap for all buttons */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 9. Smooth scrolling & better touch scrolling for episode list */
.episode-list {
  -webkit-overflow-scrolling: touch;
}


/* ============================================================
   MOBILE NAV MENU — clean redesign
   ============================================================ */

.mobile-nav-menu a,
.mobile-nav-menu #mnLoggedInActions a {
  padding: 0.95rem 1.5rem !important;
  font-size: 0.95rem !important;
  gap: 1rem !important;
  letter-spacing: 0.01em;
}

.mobile-nav-menu .mn-icon {
  font-size: 1.2rem !important;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Divider after the Search link */
.mobile-nav-menu a[href*="search"] {
  border-bottom: 1px solid rgba(232,160,32,0.1) !important;
  margin-bottom: 0.15rem;
}

/* Logged-in actions section */
#mnLoggedInActions {
  border-top: 1px solid rgba(232,160,32,0.1);
  margin-top: 0.15rem;
  padding-top: 0.15rem;
}

#mnLoggedInActions a {
  display: flex !important;
  align-items: center !important;
}

/* Logout red styling */
#mnLoggedInActions a[style*="ff4c6a"] {
  color: #ff4c6a !important;
}
#mnLoggedInActions a[style*="ff4c6a"]:hover {
  background: rgba(255,76,106,0.07) !important;
  color: #ff6b83 !important;
  padding-left: 1.75rem !important;
}

/* Profile row at top of menu */
.mn-profile {
  display: flex;
  align-items: center;
  padding: 1.1rem 1.5rem !important;
  background: linear-gradient(135deg, rgba(232,160,32,0.06) 0%, rgba(14,18,25,0) 100%);
  border-bottom: 1px solid rgba(232,160,32,0.12) !important;
  margin-bottom: 0;
  gap: 0.9rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Sign-in button inside mobile menu */
.mn-signin {
  margin: 0.85rem 1.25rem 0.75rem !important;
  display: block;
  width: calc(100% - 2.5rem);
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 16px rgba(232,160,32,0.25);
  transition: opacity 0.2s;
}


/* ============================================================
   CAST / ACTORS SECTION
   ============================================================ */
.cast-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.cast-bar {
  display: block;
  width: 4px;
  height: 1.6rem;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.cast-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 1px;
  color: var(--text);
}

.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (min-width: 700px) {
  .cast-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .cast-grid { grid-template-columns: repeat(4, 1fr); }
}

.cast-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.cast-card:hover {
  border-color: var(--accent);
  background: rgba(232,160,32,0.07);
  box-shadow: 0 0 0 1px rgba(232,160,32,0.2);
}
.cast-card:hover .cast-name {
  color: var(--accent);
}
.cast-card:hover .cast-photo {
  border-color: var(--accent);
}
.cast-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.08);
  background: var(--bg3);
}
.cast-info {
  min-width: 0;
  flex: 1;
}
.cast-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cast-character {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.15rem;
}

/* Mobile cast: vertical cards, 3 per row, photo on top */
@media (max-width: 600px) {
  .cast-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }

  .cast-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.4rem;
    gap: 0.5rem;
  }

  .cast-photo {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
  }

  .cast-info {
    width: 100%;
  }

  .cast-name {
    font-size: 0.72rem;
    font-weight: 700;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .cast-character {
    font-size: 0.65rem;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

/* Very small phones: 2 columns vertical */
@media (max-width: 360px) {
  .cast-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .cast-photo {
    width: 52px;
    height: 52px;
  }
}


/* Continue Watching — mobile fix */
@media (max-width: 600px) {
  .cw-card {
    min-width: 120px;
    max-width: 160px;
    min-height: 175px;
  }
  .cw-thumb {
    flex: 0 0 100px;
    height: 100px;
  }
  .cw-title {
    font-size: 0.78rem;
  }
  .cw-time {
    font-size: 0.7rem;
  }
}

/* ============================================================
   LANDSCAPE MODE FIX — phones rotated sideways
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {

  /* Compact the nav so it doesn't eat half the screen height */
  .nav {
    height: 48px !important;
    padding: 0 0.75rem !important;
    gap: 0.5rem !important;
  }
  .logo { font-size: 1rem !important; letter-spacing: 0.5px !important; }
  .logo-icon { width: 26px !important; height: 26px !important; }
  .nav-search input { width: 130px !important; font-size: 0.8rem !important; }
  .nav-search button { width: 30px !important; height: 28px !important; }

  /* Slide-out mobile menu top should match compact nav */
  .mobile-nav-menu { top: 48px !important; max-height: calc(100vh - 48px) !important; overflow-y: auto !important; }

  /* Bottom nav — reduce height to save vertical space */
  .bottom-nav { height: 44px !important; }
  .bn-icon { font-size: 1rem !important; }
  .bn-label { font-size: 0.62rem !important; }

  /* Push page content down so it clears the shorter nav */
  .hs-section,
  .hero,
  .page-hero,
  .search-page { padding-top: 48px !important; }

  /* Body bottom padding to match shorter bottom nav */
  body { padding-bottom: 44px !important; }

  /* Hero section — landscape phones have very little height, shrink it */
  .hs-section { min-height: 100svh !important; }
  .hs-content { padding-top: 56px !important; padding-bottom: 52px !important; }
  .hs-title { font-size: 2rem !important; line-height: 1.1 !important; }
  .hs-sub { font-size: 0.85rem !important; margin-bottom: 1rem !important; }
  .hs-actions { gap: 0.6rem !important; }
  .hs-btn { padding: 0.55rem 1rem !important; font-size: 0.85rem !important; }

  /* Card rows — use more columns since screen is now wider */
  .card-row:not(.continue-row) { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }
  .big-grid  { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }

  /* Continue Watching row has its own min card width (140px) — give it a
     matching track size so cards don't overflow their grid cell and
     overlap neighboring cards */
  .continue-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .cw-card { min-width: 0 !important; max-width: none !important; min-height: 160px !important; }
  .cw-thumb { flex: 0 0 90px !important; height: 90px !important; }

  /* Sections — tighten vertical padding */
  .section { padding: 1rem 1rem !important; }

  /* How-it-works — lay out in a row when there's horizontal space */
  .how-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.75rem !important; }
  .how-card { padding: 1rem !important; }
  .how-num  { font-size: 2rem !important; }

  /* Search hero */
  .search-page { padding-top: 56px !important; }

  /* Notification panel — adjust for shorter nav */
  .notif-panel { top: 52px !important; max-height: calc(100svh - 56px) !important; }
}

/* ============================================================
   BOTTOM NAV NOTIFICATION BELL (mobile)
   ============================================================ */
.bn-notif-btn {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  transition: color 0.2s, background 0.2s;
  font-size: 0.6rem;
}
.bn-notif-btn:hover,
.bn-notif-btn.active { color: var(--accent); }

.bn-notif-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  background: #ff4c6a;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
  border: 1.5px solid var(--bg1, #080b10);
}

/* ============================================================
   LIVE SEARCH DROPDOWN — themed with the site accent yellow
   ============================================================ */
.nm-search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: 90vw;
  background: rgba(15,18,26,0.98);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(232,160,32,0.18);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,160,32,0.04);
  z-index: 500;
  max-height: 70vh;
  overflow-y: auto;
  display: none;
  padding: 0.5rem;
}
.nm-search-dropdown.show { display: block; animation: nmFadeDown 0.18s ease; }
@keyframes nmFadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* scrollbar to match the site's accent-tinted scrollbars */
.nm-search-dropdown::-webkit-scrollbar { width: 8px; }
.nm-search-dropdown::-webkit-scrollbar-thumb { background: rgba(232,160,32,0.18); border-radius: 8px; }
.nm-search-dropdown--full { left: 0; right: 0; width: auto; }

/* Recent searches */
.nm-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.6rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--accent);
}
.nm-recent-header span.nm-clear {
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0;
}
.nm-recent-header span.nm-clear:hover { color: var(--accent); }
.nm-recent-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.92rem;
  border-left: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.nm-recent-item:hover { background: rgba(232,160,32,0.08); border-left-color: var(--accent); }
.nm-recent-item .nm-clock-icon { color: var(--muted); flex-shrink: 0; display:flex; }
.nm-recent-item:hover .nm-clock-icon { color: var(--accent); }
.nm-recent-item .nm-remove {
  margin-left: auto;
  color: var(--muted);
  opacity: 0;
  font-size: 0.85rem;
  padding: 2px 6px;
}
.nm-recent-item:hover .nm-remove { opacity: 1; }
.nm-recent-item .nm-remove:hover { color: var(--accent2); }

/* Result rows */
.nm-result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem;
  border-radius: 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.nm-result-item:hover { background: rgba(232,160,32,0.08); border-left-color: var(--accent); }
.nm-result-poster {
  width: 46px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg3);
  flex-shrink: 0;
  border: 1px solid rgba(232,160,32,0.12);
}
.nm-result-info { flex: 1; min-width: 0; }
.nm-result-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nm-result-item:hover .nm-result-title { color: var(--accent); }
.nm-result-meta {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nm-result-meta .nm-rating { color: var(--accent); font-weight: 700; display:flex; align-items:center; gap:2px; }
.nm-result-meta .nm-sep { color: rgba(232,160,32,0.25); }
.nm-result-chevron { color: var(--muted); flex-shrink: 0; display:flex; transition: color 0.15s, transform 0.15s; }
.nm-result-item:hover .nm-result-chevron { color: var(--accent); transform: translateX(2px); }

.nm-search-empty, .nm-search-loading {
  padding: 1.4rem 0.8rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}
.nm-search-loading { color: var(--accent); }

@media (max-width: 600px) {
  .nm-search-dropdown { width: 100%; left: 0; right: 0; }
}

/* ============================================================
   LIVE SEARCH — phone optimizations
   ============================================================ */
@media (max-width: 768px) {
  /* Turn the dropdown into a fixed, full-width panel anchored under
     the header — avoids edge-clipping near the small nav search box
     and behaves like a familiar mobile search overlay */
  .nm-search-dropdown {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0 0 16px 16px;
    max-height: calc(100dvh - 64px - 78px);
    -webkit-overflow-scrolling: touch;
  }

  /* Bigger touch targets (~44px+ tall, per mobile tap-target guidance) */
  .nm-recent-item,
  .nm-result-item {
    padding: 0.8rem 0.9rem;
  }
  .nm-recent-text { font-size: 1rem; }
  .nm-result-title { font-size: 0.98rem; }
  .nm-result-meta { font-size: 0.82rem; }
  .nm-result-poster { width: 50px; height: 70px; }
  .nm-remove {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    opacity: 1; /* no hover state on touch — always visible */
  }
  .nm-recent-header { padding: 0.7rem 0.9rem 0.5rem; font-size: 0.75rem; }

  /* Lighter blur on mobile GPUs for smoother scrolling */
  .nm-search-dropdown { backdrop-filter: blur(8px); }
}

/* Landscape phones: header shrinks to 48px (see landscape fix above) */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .nm-search-dropdown {
    top: 48px !important;
    max-height: calc(100dvh - 48px - 44px) !important;
  }
}

/* Prevent iOS Safari auto-zoom on focus (triggers below 16px font-size) */
@media (max-width: 768px) {
  #globalSearch, #heroSearch, #searchInput { font-size: 16px; }
}

/* Lock background scroll while the mobile search panel is open */
body.nm-search-locked { overflow: hidden; }