/* ════════════════════════════════════════════════════════════
   ①  TEXT VISIBILITY — Critical base reset
   ════════════════════════════════════════════════════════════ */
html body * {
  -webkit-text-fill-color: currentColor !important;
}

/* Re-enable gradient clipping only where intentional */
.logo-wordmark,
.logo-wordmark em,
.hero-title,
.stat-val,
.auth-logo em,
.prem-logo-txt em,
.prem-logo-txt .prem-gold {
  -webkit-text-fill-color: transparent !important;
}


/* ════════════════════════════════════════════════════════════
   ②  ROOT — Design token system
   ════════════════════════════════════════════════════════════ */
:root {
  /* Base surfaces */
  --void:       #07000e;                    /* near-black, faintest purple warmth */
  --glass:      rgba(16, 10, 26, 0.72);     /* frosted panel */
  --glass-mid:  rgba(11, 7, 20, 0.88);      /* deeper panel */
  --glass-deep: rgba(8, 4, 16, 0.96);       /* modal depth */

  /* Accent — one vivid violet. Used sparingly. */
  --accent:       #9f5dff;
  --accent2:      #7c3aed;                  /* legacy compat */
  --accent-fill:  rgba(159, 93, 255, 0.11);
  --accent-ring:  rgba(159, 93, 255, 0.30);

  /* Borders — neutral white light, not purple-tinted */
  --border:       rgba(255, 255, 255, 0.07);   /* default hairline */
  --border-g:     rgba(255, 255, 255, 0.13);   /* top-edge glass highlight */
  --border-hi:    rgba(255, 255, 255, 0.18);   /* strong top highlight */
  --border-accent:rgba(159, 93, 255, 0.30);    /* active/focus */

  /* Typography */
  --text:         #ffffff;
  --text-2:       rgba(255, 255, 255, 0.72);
  --muted:        rgba(255, 255, 255, 0.40);

  /* Legacy compat shims */
  --bg:      var(--void);
  --surface: rgba(16, 10, 26, 0.90);
  --surface2:rgba(11, 7, 20, 0.96);
  --gold:    rgba(255, 255, 255, 0.80);
  --green:   #a78bfa;
  --radius:  18px;
}


/* ════════════════════════════════════════════════════════════
   ③  BODY — Deep near-black foundation
   ════════════════════════════════════════════════════════════ */
body {
  background: var(--void) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}


/* ════════════════════════════════════════════════════════════
   ④  BACKGROUND — Single violet light orb
   ────────────────────────────────────────────────────────────
   One precise light source at the top of the canvas.
   All glass panels catch its light on their top edges.
   Nothing competes. This is the signature element.
   ════════════════════════════════════════════════════════════ */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    /* Primary violet nebula — the one light source */
    radial-gradient(ellipse 80% 55% at 50% -8%,
      rgba(140, 65, 255, 0.28) 0%,
      rgba(100, 38, 230, 0.10) 40%,
      transparent 70%),
    /* Secondary depth at left edge */
    radial-gradient(ellipse 32% 65% at -4% 40%,
      rgba(80, 20, 180, 0.09) 0%,
      transparent 70%),
    /* Faint bottom warmth — keeps the black from going flat */
    radial-gradient(ellipse 45% 22% at 60% 105%,
      rgba(60, 10, 150, 0.06) 0%,
      transparent 70%),
    /* Absolute base — near-true black */
    #07000e !important;

  /* Barely perceptible drift — the light breathes */
  animation: orbDrift 42s ease-in-out infinite !important;
  will-change: transform !important;
}

@keyframes orbDrift {
  0%   { transform: translate(0%,    0%); }
  20%  { transform: translate(-0.3%,  0.2%); }
  45%  { transform: translate(0.25%, -0.15%); }
  70%  { transform: translate(-0.2%,  0.25%); }
  100% { transform: translate(0%,    0%); }
}

body::after { display: none !important; }


/* ════════════════════════════════════════════════════════════
   ⑤  NAV — Floating pill of frosted obsidian glass
   ════════════════════════════════════════════════════════════ */
nav {
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(0.97) !important;
  backdrop-filter: blur(40px) saturate(180%) brightness(0.97) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 16px 52px rgba(0, 0, 0, 0.52),
    0 2px 10px rgba(0, 0, 0, 0.32) !important;
}

nav::before {
  /* Barely visible violet bloom catching the orb above */
  background:
    radial-gradient(ellipse 55% 60% at 50% -15%,
      rgba(159, 93, 255, 0.07) 0%,
      transparent 70%) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Whisper-thin light sweep — barely-there, feels alive */
nav::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    105deg,
    transparent 28%,
    rgba(255, 255, 255, 0.032) 46%,
    rgba(255, 255, 255, 0.014) 54%,
    transparent 72%
  ) !important;
  background-size: 200% 100% !important;
  animation: glassShimmer 14s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

@keyframes glassShimmer {
  0%   { background-position: -200% center; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { background-position: 300% center; opacity: 0; }
}

nav.nav-scrolled {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 22px 64px rgba(0, 0, 0, 0.62),
    0 4px 16px rgba(0, 0, 0, 0.35) !important;
}


/* ════════════════════════════════════════════════════════════
   ⑥  LOGO — White light becoming violet
   ════════════════════════════════════════════════════════════ */
.logo-wordmark {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  /* Light descending from white into purple — exactly like the orb */
  background: linear-gradient(130deg,
    #ffffff        22%,
    rgba(225, 200, 255, 0.93) 55%,
    #9f5dff        100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.logo-wordmark em {
  font-style: normal !important;
  /* em = "TV" stays full vivid violet */
  background: linear-gradient(130deg, #be8aff, #8b3cff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.logo-icon {
  filter: drop-shadow(0 2px 14px rgba(159, 93, 255, 0.58)) !important;
}


/* ════════════════════════════════════════════════════════════
   ⑦  NAV LINKS
   ════════════════════════════════════════════════════════════ */
.nav-link {
  color: var(--muted) !important;
  transition: color 0.18s ease !important;
}
.nav-link::after  { background: var(--accent) !important; }
.nav-link:hover   { color: rgba(255, 255, 255, 0.82) !important; }
.nav-link.active  { color: #ffffff !important; }


/* ════════════════════════════════════════════════════════════
   ⑧  SEARCH CAPSULE & DROPDOWN
   ════════════════════════════════════════════════════════════ */
.search-wrap {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 12px rgba(0, 0, 0, 0.28) !important;
}
.search-wrap::before { background: transparent !important; opacity: 0 !important; }
.search-wrap::after  {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent) !important;
}
.search-wrap input,
.search-wrap input::placeholder { color: var(--muted) !important; }
.search-wrap:focus-within {
  border-color: var(--border-accent) !important;
  border-top-color: rgba(159, 93, 255, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 3px rgba(159, 93, 255, 0.11) !important;
}

.search-dropdown {
  background: var(--glass-deep) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.72),
    0 4px 16px rgba(0, 0, 0, 0.38) !important;
}
.search-suggestion:hover { background: rgba(255, 255, 255, 0.04) !important; }
.suggestion-type {
  background: var(--accent-fill) !important;
  border: 1px solid var(--accent-ring) !important;
  color: var(--accent) !important;
}
.suggestion-type.tv {
  background: rgba(124, 58, 237, 0.10) !important;
  border-color: rgba(124, 58, 237, 0.26) !important;
  color: #a87fff !important;
}
.dropdown-see-all {
  color: var(--accent) !important;
  border-top: 1px solid var(--border) !important;
}
.suggestion-title { color: var(--text) !important; }
.suggestion-meta  { color: var(--muted) !important; }


/* ════════════════════════════════════════════════════════════
   ⑨  CARDS — obsidian glass tiles
   ════════════════════════════════════════════════════════════ */
.card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 22px rgba(0, 0, 0, 0.36),
    0 1px 4px rgba(0, 0, 0, 0.22) !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.card:hover {
  border-color: rgba(159, 93, 255, 0.28) !important;
  border-top-color: rgba(159, 93, 255, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(159, 93, 255, 0.12),
    0 18px 52px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(159, 93, 255, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.26) !important;
  transform: translateY(-2px) !important;
}
.card::after {
  background: linear-gradient(135deg,
    rgba(159, 93, 255, 0.28),
    rgba(124, 58, 237, 0.20)) !important;
}


/* ════════════════════════════════════════════════════════════
   ⑩  CATEGORY TABS
   ════════════════════════════════════════════════════════════ */
.cat-tab {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: all 0.18s ease !important;
}
.cat-tab:hover {
  color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
.cat-tab.active {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 4px 18px rgba(159, 93, 255, 0.42) !important;
}


/* ════════════════════════════════════════════════════════════
   ⑪  HERO
   ════════════════════════════════════════════════════════════ */
.hero-gradient {
  background:
    linear-gradient(to right,  rgba(7, 0, 14, 0.96) 0%, rgba(7, 0, 14, 0.52) 52%, transparent 100%),
    linear-gradient(to top,    rgba(7, 0, 14, 1)    0%, rgba(7, 0, 14, 0.32) 42%, transparent 72%),
    linear-gradient(to bottom, rgba(7, 0, 14, 0.52) 0%, transparent 22%) !important;
}
.hero-badge {
  background: rgba(159, 93, 255, 0.10) !important;
  border: 1px solid rgba(159, 93, 255, 0.28) !important;
  color: var(--accent) !important;
}
/* White → soft lavender. Clean and premium. Reads as white at a glance. */
.hero-title {
  background: linear-gradient(172deg,
    #ffffff  0%,
    #f0e8ff 52%,
    #c8a0ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero-pill {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.76) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.hero-overview { color: rgba(255, 255, 255, 0.68) !important; }
.hero-rating   { color: var(--accent) !important; }
.hero-dot      { background: rgba(255, 255, 255, 0.20) !important; }
.hero-dot.active { background: var(--accent) !important; }


/* ════════════════════════════════════════════════════════════
   ⑫  BUTTONS
   ════════════════════════════════════════════════════════════ */

/* Glass action buttons (play, info) */
.btn-play {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 6px 24px rgba(0, 0, 0, 0.36) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  animation: none !important;
}
.btn-play:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  border-top-color: rgba(255, 255, 255, 0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 40px rgba(0, 0, 0, 0.48),
    0 2px 8px rgba(0, 0, 0, 0.22) !important;
}
.btn-play::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.07), transparent) !important;
}

.btn-info {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}
.btn-info:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.btn-glass-play {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.32) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  text-shadow: none !important;
}
.btn-glass-play:hover {
  background: rgba(255, 255, 255, 0.13) !important;
}

.btn-glass-list {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.btn-glass-list:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}
.btn-glass-list.in-list {
  border-color: rgba(159, 93, 255, 0.36) !important;
  border-top-color: rgba(159, 93, 255, 0.58) !important;
  color: var(--accent) !important;
  background: rgba(159, 93, 255, 0.08) !important;
}

.btn-glass-share {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
.btn-glass-share:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════
   ⑬  SECTION TITLES
   ════════════════════════════════════════════════════════════ */
.section-bar    { background: var(--accent) !important; }
.section-title,
.inner-pg-title,
.pc-title,
.sp-title,
.modal-title    { color: #ffffff !important; }
.see-all        { color: var(--accent) !important; }
.search-heading    { color: #ffffff !important; }
.search-heading em { color: var(--accent) !important; }


/* ════════════════════════════════════════════════════════════
   ⑭  DETAIL MODAL
   ════════════════════════════════════════════════════════════ */
.detail-overlay { background: rgba(4, 2, 10, 0.82) !important; }
.detail-box {
  background: var(--glass-deep) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 52px 110px rgba(0, 0, 0, 0.72),
    0 8px 24px rgba(0, 0, 0, 0.42) !important;
}
.detail-hero-overlay {
  background:
    linear-gradient(to top,    rgba(7, 0, 14, 1)    0%, rgba(7, 0, 14, 0.62) 28%, rgba(7, 0, 14, 0.08) 65%, transparent 100%),
    linear-gradient(to bottom, rgba(7, 0, 14, 0.48) 0%, transparent 28%) !important;
}
.detail-close-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}
.detail-poster { border: 1px solid rgba(255, 255, 255, 0.12) !important; }
.detail-hero-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.detail-pill {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.68) !important;
}
.detail-rating-pill {
  color: var(--accent) !important;
  background: var(--accent-fill) !important;
  border: 1px solid rgba(159, 93, 255, 0.22) !important;
}
.detail-desc-text     { color: rgba(255, 255, 255, 0.72) !important; }
.detail-section-label { color: var(--muted) !important; }
.detail-section-label::after { background: rgba(255, 255, 255, 0.07) !important; }
.detail-view-more     { color: var(--accent) !important; }


/* ════════════════════════════════════════════════════════════
   ⑮  PLAYER MODAL
   ════════════════════════════════════════════════════════════ */
.modal-overlay { background: rgba(4, 2, 10, 0.88) !important; }

/* Two-card premium glass styling */
.modal-left-card,
.modal-right-card {
  background: var(--glass-deep) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 64px 148px rgba(0, 0, 0, 0.82) !important;
}

/* More Like This theming */
.modal-more-like {
  border-top: 1px solid var(--border) !important;
}
.more-like-label { color: rgba(255, 255, 255, 0.92) !important; }
.more-like-bar {
  background: linear-gradient(to bottom, var(--accent), var(--accent2)) !important;
}
.more-like-card {
  background: rgba(16, 10, 26, 0.72) !important;
  border: 1px solid var(--border) !important;
}
.more-like-card:hover {
  border-color: var(--border-accent) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--accent-ring) !important;
}
.more-like-card-title { color: #ffffff !important; }
.more-like-card-year  { color: var(--muted) !important; }
.modal-close-overlay {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.modal-title { color: #ffffff !important; }
.modal-rating-badge {
  color: var(--accent) !important;
  background: var(--accent-fill) !important;
  border: 1px solid rgba(159, 93, 255, 0.22) !important;
}
.modal-meta-pill {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--border) !important;
  color: rgba(255, 255, 255, 0.62) !important;
}


/* ════════════════════════════════════════════════════════════
   ⑯  SERVER DROPDOWN
   ════════════════════════════════════════════════════════════ */
.server-bar {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--border) !important;
}
.server-trigger {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}
.server-trigger:hover { background: rgba(255, 255, 255, 0.09) !important; }
.server-trigger.open {
  border-color: var(--border-accent) !important;
  background: var(--accent-fill) !important;
  color: var(--accent) !important;
}
.server-menu {
  background: var(--glass-mid) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.68) !important;
}
.srv-item:hover  { background: rgba(255, 255, 255, 0.04) !important; }
.srv-item.active { background: var(--accent-fill) !important; }
.srv-trig-name   { color: rgba(255, 255, 255, 0.90) !important; }
.badge-hd {
  background: var(--accent-fill) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(159, 93, 255, 0.25) !important;
}
.badge-4k {
  background: rgba(124, 58, 237, 0.10) !important;
  color: #a87fff !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
}


/* ════════════════════════════════════════════════════════════
   ⑰  EPISODES
   ════════════════════════════════════════════════════════════ */
.season-select {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
.ep-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.ep-btn:hover:not(:disabled) {
  border-color: var(--border-accent) !important;
  background: var(--accent-fill) !important;
  color: var(--accent) !important;
}
.ep-btn.active {
  background: var(--accent-fill) !important;
  border-color: rgba(159, 93, 255, 0.46) !important;
  color: var(--accent) !important;
}


/* ════════════════════════════════════════════════════════════
   ⑱  MOBILE NAV
   ════════════════════════════════════════════════════════════ */
.mobile-nav-dd {
  background: var(--glass-mid) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 14px 40px rgba(0, 0, 0, 0.58) !important;
}
.mobile-nav-link { color: var(--muted) !important; }
.mobile-nav-link:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}


/* ════════════════════════════════════════════════════════════
   ⑲  AI BUTTON & PANEL
   ════════════════════════════════════════════════════════════ */
.ai-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}
.ai-btn:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}
.ai-btn.active {
  background: var(--accent-fill) !important;
  border-color: var(--border-accent) !important;
  color: var(--accent) !important;
}
.ai-btn-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(159, 93, 255, 0.72) !important;
}
.ai-panel {
  background: var(--glass-mid) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 14px 40px rgba(0, 0, 0, 0.58) !important;
}
.ai-input-row      { border-bottom: 1px solid var(--border) !important; }
.ai-input          { color: #ffffff !important; }
.ai-input::placeholder { color: var(--muted) !important; }
.ai-send-btn {
  background: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(159, 93, 255, 0.45) !important;
}
.ai-user-bubble {
  background: rgba(159, 93, 255, 0.14) !important;
  border: 1px solid rgba(159, 93, 255, 0.28) !important;
  color: #ffffff !important;
}
.ai-assistant-bubble {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  color: rgba(255, 255, 255, 0.90) !important;
}
.ai-sug-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  color: rgba(255, 255, 255, 0.62) !important;
}
.ai-sug-chip:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.ai-result-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
}
.ai-result-card:hover {
  border-color: rgba(159, 93, 255, 0.28) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.52) !important;
}
.ai-result-title { color: #ffffff !important; }
.ai-result-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(159, 93, 255, 0.22) !important;
}


/* ════════════════════════════════════════════════════════════
   ⑳  PROFILE
   ════════════════════════════════════════════════════════════ */
.profile-avatar-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}
.profile-avatar-btn:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.profile-avatar-btn.signed-in {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(159, 93, 255, 0.42) !important;
}
.profile-dd {
  background: var(--glass-mid) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 52px rgba(0, 0, 0, 0.62) !important;
}
.profile-dd-head {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--border) !important;
}
.profile-dd-name  { color: #ffffff !important; }
.profile-dd-email { color: var(--muted) !important; }
.profile-dd-item  { color: rgba(255, 255, 255, 0.82) !important; }
.profile-dd-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
}
.profile-dd-sep { background: var(--border) !important; }


/* ════════════════════════════════════════════════════════════
   ㉑  CONFIRM DIALOG
   ════════════════════════════════════════════════════════════ */
.confirm-overlay { background: rgba(4, 2, 10, 0.82) !important; }
.confirm-box {
  background: var(--glass-deep) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 52px 110px rgba(0, 0, 0, 0.78) !important;
}
.confirm-title { color: #ffffff !important; }
.confirm-sub   { color: rgba(255, 255, 255, 0.58) !important; }
.confirm-cancel {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════
   ㉒  SOCIAL PANEL
   ════════════════════════════════════════════════════════════ */
.social-panel {
  background: var(--glass-mid) !important;
  border-left: 1px solid var(--border) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow: -24px 0 72px rgba(0, 0, 0, 0.58) !important;
}
.sp-header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--border) !important;
}
.sp-title { color: #ffffff !important; }
.sp-icon-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.sp-icon-btn:hover {
  border-color: var(--border-accent) !important;
  color: var(--accent) !important;
}
.soc-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
}
.soc-card:hover { background: rgba(255, 255, 255, 0.06) !important; }
.soc-avatar { background: linear-gradient(135deg, var(--accent), #6c28d9) !important; }
.notif-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
}
.notif-item.unread {
  border-color: rgba(159, 93, 255, 0.22) !important;
  background: rgba(159, 93, 255, 0.06) !important;
}
.notif-icon {
  background: var(--accent-fill) !important;
  border: 1px solid rgba(159, 93, 255, 0.22) !important;
}
.notif-txt { color: rgba(255, 255, 255, 0.88) !important; }


/* ════════════════════════════════════════════════════════════
   ㉓  CHAT
   ════════════════════════════════════════════════════════════ */
.chat-input-area {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid var(--border) !important;
}
.chat-input-wrap {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
}
.chat-input-wrap:focus-within {
  border-color: var(--border-accent) !important;
  box-shadow: 0 0 0 3px rgba(159, 93, 255, 0.10) !important;
}
.chat-txt { color: #ffffff !important; }
.chat-send {
  background: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(159, 93, 255, 0.42) !important;
}
.msg-bubble {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}
.msg-row.sent .msg-bubble {
  background: rgba(159, 93, 255, 0.14) !important;
  border-color: rgba(159, 93, 255, 0.28) !important;
  color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════
   ㉔  PREMIUM SHEET
   ════════════════════════════════════════════════════════════ */
.premium-overlay { background: rgba(4, 2, 10, 0.84) !important; }
.premium-sheet {
  background: var(--glass-deep) !important;
  /* Top edge gets a stronger violet — it catches the orb's light directly */
  border: 1px solid var(--border) !important;
  border-top: 2px solid rgba(159, 93, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 2px 0 rgba(159, 93, 255, 0.18),
    0 -24px 72px rgba(0, 0, 0, 0.58) !important;
}
.prem-feat {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
}
.prem-feat-icon  {
  background: var(--accent-fill) !important;
  border: 1px solid rgba(159, 93, 255, 0.22) !important;
}
.prem-feat-title { color: #ffffff !important; }
.prem-feat-sub   { color: rgba(255, 255, 255, 0.50) !important; }
.prem-logo-txt em {
  background: linear-gradient(135deg, #be8aff, #8b3cff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.prem-logo-txt .prem-gold {
  background: linear-gradient(135deg, #d8b8ff, #9f5dff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}


/* ════════════════════════════════════════════════════════════
   ㉕  FOOTER
   ════════════════════════════════════════════════════════════ */
footer {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
footer strong          { color: rgba(255, 255, 255, 0.45) !important; }
.footer-links button   { color: rgba(255, 255, 255, 0.28) !important; }
.footer-links button:hover { color: var(--accent) !important; }


/* ════════════════════════════════════════════════════════════
   ㉖  AUTH MODAL
   ════════════════════════════════════════════════════════════ */
.auth-overlay { background: rgba(4, 2, 10, 0.84) !important; }
.auth-box {
  background: var(--glass-deep) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 52px 100px rgba(0, 0, 0, 0.78) !important;
}
.auth-logo em {
  background: linear-gradient(135deg, #be8aff, #8b3cff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.auth-tabs {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
}
.auth-tab { color: var(--muted) !important; }
.auth-tab.active {
  background: var(--accent-fill) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(159, 93, 255, 0.28) !important;
}
.auth-field label { color: var(--muted) !important; }
.auth-field input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}
.auth-field input:focus {
  border-color: rgba(159, 93, 255, 0.52) !important;
  box-shadow: 0 0 0 3px rgba(159, 93, 255, 0.12) !important;
}
.auth-submit {
  background: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 4px 18px rgba(159, 93, 255, 0.42) !important;
}


/* ════════════════════════════════════════════════════════════
   ㉗  PROFILE SIDEBAR & CONTENT
   ════════════════════════════════════════════════════════════ */
.profile-sidebar {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 44px rgba(0, 0, 0, 0.42) !important;
}
.psb-user-area { border-bottom: 1px solid var(--border) !important; }
.psb-av {
  background: linear-gradient(135deg, var(--accent), #6c28d9) !important;
  box-shadow:
    0 0 0 3px rgba(7, 0, 14, 0.90),
    0 4px 20px rgba(159, 93, 255, 0.42) !important;
}
.psb-uname  { color: #ffffff !important; }
.psb-uemail { color: var(--muted) !important; }
.psb-tab    { color: var(--muted) !important; }
.psb-tab:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
.psb-tab.active {
  background: var(--accent-fill) !important;
  border-color: rgba(159, 93, 255, 0.28) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 1px 0 rgba(159, 93, 255, 0.18) !important;
}
.profile-content {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 36px rgba(0, 0, 0, 0.38) !important;
}
.pc-title { color: #ffffff !important; }
.stat-val {
  background: linear-gradient(135deg, var(--accent), #7c3aed) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}


/* ════════════════════════════════════════════════════════════
   ㉘  SETTINGS
   ════════════════════════════════════════════════════════════ */
.settings-group {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
}
.settings-row { border-bottom: 1px solid var(--border) !important; }
.settings-row.clickable:hover { background: rgba(255, 255, 255, 0.03) !important; }
.settings-title  { color: #ffffff !important; }
.settings-sub    { color: var(--muted) !important; }
.settings-input-field {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}
.settings-input-field:focus { border-color: rgba(159, 93, 255, 0.46) !important; }
.settings-save {
  background: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 4px 16px rgba(159, 93, 255, 0.40) !important;
}


/* ════════════════════════════════════════════════════════════
   ㉙  MISC PANELS & SPECIAL ELEMENTS
   ════════════════════════════════════════════════════════════ */

/* FPG */
.fpg-box {
  background: var(--glass-deep) !important;
  border: 1px solid var(--border) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  backdrop-filter: blur(40px) !important;
}
.fpg-head { border-bottom: 1px solid var(--border) !important; }
.fpg-title  { color: #ffffff !important; }
.fpg-body   { color: rgba(255, 255, 255, 0.68) !important; }
.fpg-body h3 { color: #ffffff !important; }

/* Share */
.share-overlay { background: rgba(4, 2, 10, 0.80) !important; }
.share-box {
  background: var(--glass-deep) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border-g) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 52px 110px rgba(0, 0, 0, 0.78) !important;
}
.share-head-title  { color: #ffffff !important; }
.share-fr-row:hover { background: rgba(255, 255, 255, 0.03) !important; }
.share-fr-btn {
  background: var(--accent-fill) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
}

/* Continue watching */
.continue-card-overlay {
  background: linear-gradient(to top, rgba(7, 0, 14, 0.96) 0%, rgba(7, 0, 14, 0.15) 55%, transparent 100%) !important;
}
.continue-card-title { color: #ffffff !important; }
.continue-card-meta  { color: var(--muted) !important; }
.continue-play-btn {
  background: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 4px 14px rgba(159, 93, 255, 0.44) !important;
}
.continue-progress-bar  { background: rgba(255, 255, 255, 0.10) !important; }
.continue-progress-fill {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(159, 93, 255, 0.42) !important;
}

/* Devices */
.dev-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.dev-item:hover { background: rgba(255, 255, 255, 0.06) !important; }
.dev-icon {
  background: var(--accent-fill) !important;
  border: 1px solid rgba(159, 93, 255, 0.22) !important;
}
.dev-name { color: #ffffff !important; }

/* Leaderboard */
.lb-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
}
.lb-item:hover { background: rgba(255, 255, 255, 0.06) !important; }
.lb-item.lb-me {
  border-color: rgba(159, 93, 255, 0.30) !important;
  background: rgba(159, 93, 255, 0.07) !important;
}
.lb-uname { color: #ffffff !important; }


/* ════════════════════════════════════════════════════════════
   ㉚  TEXT COLOR SAFETY NET — Full coverage
   ════════════════════════════════════════════════════════════ */
.section-title,
.inner-pg-title,
.pc-title,
.sp-title,
.modal-title,
.detail-hero-title,
.confirm-title,
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content p,
.card-title-text,
.hero-badge,
.hero-rating,
nav .nav-link,
nav .logo-wordmark {
  -webkit-text-fill-color: currentColor !important;
}

/* Gradient text stays transparent so clip shows */
.logo-wordmark,
.logo-wordmark em { -webkit-text-fill-color: transparent !important; }

.detail-hero-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0, 0, 20, 0.72) !important;
}

.card-overlay {
  background: linear-gradient(to top, rgba(5, 0, 12, 0.96) 0%, rgba(5, 0, 12, 0.18) 50%, transparent 78%) !important;
}
.card-title, .card-meta {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════
   ㉛  SCROLLBAR — minimal, precise
   ════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  *::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
  *::-webkit-scrollbar-track { background: transparent !important; }
  *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14) !important;
    border-radius: 99px !important;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: rgba(159, 93, 255, 0.52) !important;
    background-clip: padding-box !important;
    border: 1px solid transparent !important;
  }
  * { scrollbar-color: rgba(255, 255, 255, 0.14) transparent !important; }
}


/* ════════════════════════════════════════════════════════════
   ㉜  CHIPS, BADGES, MICRO-ELEMENTS
   ════════════════════════════════════════════════════════════ */
.card-shimmer::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 50%, transparent) !important;
}

.filter-chip, .sort-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  transition: all 0.18s ease !important;
}
.filter-chip:hover, .sort-chip:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.filter-chip.active, .sort-chip.active {
  background: var(--accent-fill) !important;
  border-color: var(--border-accent) !important;
  color: var(--accent) !important;
}

.load-more-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.load-more-btn:hover {
  border-color: var(--border-accent) !important;
  color: var(--accent) !important;
  background: var(--accent-fill) !important;
}

/* Toast */
.toast {
  background: var(--glass-deep) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: blur(28px) !important;
  backdrop-filter: blur(28px) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.58) !important;
}
.toast.success { border-left-color: #a78bfa !important; }
.toast.warn    { border-left-color: rgba(200, 160, 255, 0.90) !important; }

/* Scroll to top */
.scroll-top-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}
.scroll-top-btn.visible {
  box-shadow: 0 4px 20px rgba(159, 93, 255, 0.28) !important;
  color: var(--accent) !important;
}

/* Continue badge */
.continue-badge {
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(159, 93, 255, 0.40) !important;
}

/* Rating chip */
.rec-card-rating {
  background: rgba(7, 0, 14, 0.88) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(159, 93, 255, 0.22) !important;
}


/* ════════════════════════════════════════════════════════════
   ㉝  GLOBAL INTERACTIVE STATES
   ════════════════════════════════════════════════════════════ */
::selection {
  background: rgba(159, 93, 255, 0.30) !important;
  color: #ffffff !important;
}
:focus-visible {
  outline: 2px solid rgba(159, 93, 255, 0.75) !important;
  outline-offset: 2px !important;
}
button:focus-visible, .card:focus-visible, .nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(159, 93, 255, 0.28) !important;
}

#search-page { background: transparent !important; }
.inner-page  { background: transparent !important; }


/* ════════════════════════════════════════════════════════════
   ㉞  PRIMARY CTA BUTTONS — solid violet, no gradient noise
   ════════════════════════════════════════════════════════════ */
.cat-tab.active,
.auth-submit,
.chat-send,
.ai-send-btn,
.continue-play-btn {
  background: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 4px 18px rgba(159, 93, 255, 0.42) !important;
}


/* ════════════════════════════════════════════════════════════
   ㉟  GLASS PANEL SYSTEM — Universal top catch-light
   Every floating panel catches the violet orb on its top edge.
   This is the mechanism that makes the light source real.
   ════════════════════════════════════════════════════════════ */
nav,
.search-dropdown,
.profile-dd,
.server-menu,
.mobile-nav-dd,
.ai-panel,
.social-panel,
.confirm-box,
.auth-box,
.premium-sheet,
.share-box,
.fpg-box {
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 18px 52px rgba(0, 0, 0, 0.56),
    0 4px 14px rgba(0, 0, 0, 0.32) !important;
}

/* Heavier modals get deeper neutral shadows */
.detail-box,
.modal-box,
.auth-box,
.premium-sheet,
.profile-sidebar,
.profile-content {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 44px 110px rgba(0, 0, 0, 0.78),
    0 8px 24px rgba(0, 0, 0, 0.44) !important;
}

/* Panel hover — accent catches the lifted edge */
.card:hover,
.detail-box {
  box-shadow:
    inset 0 1px 0 rgba(159, 93, 255, 0.10),
    0 24px 64px rgba(0, 0, 0, 0.64),
    0 0 0 1px rgba(159, 93, 255, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.32) !important;
}


/* ════════════════════════════════════════════════════════════
   ㊱  AVATAR RING
   ════════════════════════════════════════════════════════════ */
.psb-av, .soc-avatar, .conv-av, .msg-mini-av {
  box-shadow:
    0 0 0 2px rgba(7, 0, 14, 0.90),
    0 3px 16px rgba(159, 93, 255, 0.36) !important;
}

/* Notification badge */
.nav-unread-dot, .dd-badge {
  background: var(--accent) !important;
  box-shadow: 0 2px 8px rgba(159, 93, 255, 0.55) !important;
}

/* Verified badge tooltip */
.verified-badge::after {
  background: var(--glass-deep) !important;
  border: 1px solid var(--border) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.58) !important;
}

/* Toggle */
.apple-toggle-track {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.apple-toggle input:checked + .apple-toggle-track {
  background: var(--accent) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(159, 93, 255, 0.45) !important;
}

/* Button micro-lift */
.btn-play:hover,
.btn-glass-play:hover,
.btn-info:hover {
  transform: translateY(-1px) scale(1.01) !important;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Hero dot glow */
@keyframes dotGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(159, 93, 255, 0.58); }
  50%       { box-shadow: 0 0 0 5px rgba(159, 93, 255, 0); }
}
.hero-dot.active {
  animation: dotGlow 2.8s ease-in-out infinite !important;
}


/* ════════════════════════════════════════════════════════════
   ㊲  COMPREHENSIVE TEXT FILLS — Every component covered
   ════════════════════════════════════════════════════════════ */

/* Premium sheet */
.prem-feat-title    { color: #ffffff !important; }
.prem-feat-sub      { color: rgba(255, 255, 255, 0.50) !important; }
.prem-toggle-title  { color: #ffffff !important; }
.prem-toggle-sub    { color: rgba(255, 255, 255, 0.44) !important; }
.prem-toggle-row    { border-bottom: 1px solid var(--border) !important; }
.prem-toggle-list   { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--border) !important; }
.prem-price         { color: #ffffff !important; }
.prem-period        { color: var(--muted) !important; }
.prem-sub           { color: rgba(255, 255, 255, 0.62) !important; }
.prem-head          { border-bottom: 1px solid var(--border) !important; }
.prem-plan-btn      { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--border) !important; color: rgba(255, 255, 255, 0.75) !important; }
.prem-plan-btn.active { background: var(--accent-fill) !important; border-color: var(--border-accent) !important; color: var(--accent) !important; }

/* FPG */
.fpg-close          { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; }
.fpg-close:hover    { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.85) !important; }
.contact-form label { color: var(--muted) !important; }
.contact-form input,
.contact-form textarea { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--border) !important; color: #ffffff !important; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: rgba(159, 93, 255, 0.46) !important; }

/* Device */
.dev-meta           { color: var(--muted) !important; }
.dev-status         { color: rgba(255, 255, 255, 0.50) !important; }
.dev-section-count  { color: rgba(255, 255, 255, 0.32) !important; }
.dev-empty          { color: var(--muted) !important; }
.dev-section-hd     { color: rgba(255, 255, 255, 0.32) !important; }

/* Chat */
.chat-date-div { color: rgba(255, 255, 255, 0.30) !important; }
.msg-ts        { color: rgba(255, 255, 255, 0.30) !important; }
.conv-name     { color: #ffffff !important; }
.conv-last     { color: var(--muted) !important; }
.conv-time     { color: var(--muted) !important; }

/* Footer */
.footer-sep { color: var(--border) !important; }

/* AI Panel */
.ai-clear-btn       { color: var(--muted) !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--border) !important; }
.ai-clear-btn:hover { color: var(--accent) !important; border-color: var(--border-accent) !important; background: var(--accent-fill) !important; }
.ai-toggle-title    { color: #ffffff !important; }
.ai-toggle-sub      { color: var(--muted) !important; }
.ai-toggle-list     { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--border) !important; }
.ai-toggle-row      { border-bottom: 1px solid var(--border) !important; }

/* Server */
.srv-item-name { color: #ffffff !important; }
.srv-item-sub  { color: var(--muted) !important; }
.srv-item      { border-bottom: 1px solid var(--border) !important; }
.srv-trig-sub  { color: var(--muted) !important; }

/* Social */
.soc-name    { color: #ffffff !important; }
.soc-time    { color: var(--muted) !important; }
.soc-preview { color: rgba(255, 255, 255, 0.58) !important; }

/* Share */
.share-head    { border-bottom: 1px solid var(--border) !important; }
.share-fr-name { color: #ffffff !important; }
.share-close   { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; }

/* Leaderboard */
.lb-rank  { color: var(--accent) !important; }
.lb-score { color: rgba(255, 255, 255, 0.58) !important; }
.lb-pts   { color: var(--muted) !important; }

/* Auth extras */
.auth-switch              { color: var(--muted) !important; }
.auth-switch a, .auth-switch button { color: var(--accent) !important; }
.auth-divider             { color: var(--muted) !important; }
.auth-legal               { color: rgba(255, 255, 255, 0.36) !important; }

/* Episodes */
.ep-title { color: #ffffff !important; }
.ep-meta  { color: var(--muted) !important; }
.ep-plot  { color: rgba(255, 255, 255, 0.62) !important; }
.ep-dur   { color: var(--muted) !important; }

/* Legacy — keep to prevent JS errors */
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-0.4%, 0.2%, 0); }
  100% { transform: translate3d(0.2%, -0.15%, 0); }
}

@keyframes blossomPulse {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 1; }
}


/* ════════════════════════════════════════════════════════════
   RIGHT-CARD INLINE SERVER — premium purple theming (≥ 900px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .modal-right-card .server-bar   { background: transparent !important; }
  .modal-right-card .server-menu  {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Open trigger: purple accent ring */
  .modal-right-card .server-trigger.open {
    border-color: var(--border-accent) !important;
    border-top-color: rgba(159, 93, 255, 0.45) !important;
    background: var(--accent-fill) !important;
    color: var(--accent) !important;
    box-shadow:
      inset 0 1px 0 rgba(159, 93, 255, 0.22),
      0 0 0 3px rgba(159, 93, 255, 0.10),
      0 6px 22px rgba(0, 0, 0, 0.32) !important;
  }
  .modal-right-card .server-trigger.open .srv-trig-name { color: var(--accent) !important; }

  /* Server rows: purple hover and active */
  .modal-right-card .srv-item:hover  { background: rgba(159, 93, 255, 0.08) !important; }
  .modal-right-card .srv-item.active {
    background: var(--accent-fill) !important;
    border-radius: 10px;
  }
  .modal-right-card .srv-item.active .srv-item-name { color: var(--accent) !important; }
  .modal-right-card .srv-item-check  { color: var(--accent) !important; }

  /* Badge overrides stay purple-themed */
  .modal-right-card .badge-hd {
    background: var(--accent-fill) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(159, 93, 255, 0.25) !important;
  }
  .modal-right-card .badge-4k {
    background: rgba(124, 58, 237, 0.14) !important;
    color: #b47fff !important;
    border: 1px solid rgba(124, 58, 237, 0.28) !important;
  }
}