/* ============================================================
   filmiMarg 2.0 — DESIGN SYSTEM
   "Modern Premium" theme. Electric blue/teal accent on a deep
   navy base — a richer, more immersive cinematic feel with
   bigger art and glowing highlights. (Previous "Midnight Emerald"
   gold/black theme retired in 2.0 — see this block for the new
   tokens. All existing selectors below are untouched; only the
   token *values* changed, so nothing else in this file, or in
   any .js file, needed to change.)
   ============================================================ */

:root{
  /* ---- Color tokens — filmiMarg 2.0: Modern Premium (navy + electric blue/teal) ---- */
  --bg:            #060b16;
  --bg-rgb:        6,11,22;
  --bg-elevated:   #0b1220;
  --bg-card:       #101a2c;
  --bg-card-hover: #16233a;
  --line:          #24334d;
  --line-soft:     #182337;

  --gold:          #22d3ee;
  --gold-soft:     rgba(34,211,238,0.16);
  --gold-dim:      rgba(34,211,238,0.08);
  --accent-2:      #2dd4bf;
  --on-accent:     #04141f;

  --text:          #eaf3ff;
  --text-dim:      #93a8c9;
  --text-faint:    #5d7196;

  --success:       #34d399;
  --danger:        #ff6b6b;

  /* ---- Radius / spacing scale ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  /* ---- Shadows ---- */
  --shadow-card: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-modal: 0 -4px 30px rgba(0,0,0,0.5);
  --shadow-glow: 0 8px 28px rgba(34,211,238,0.16);

  /* ---- Ambient background cycle (see js/bg-cycle.js) ---- */
  --bg-shift-speed: 4s;
}

body, header.topbar{
  transition: background-color var(--bg-shift-speed) ease;
}
*{
  transition: color var(--bg-shift-speed) ease, border-color var(--bg-shift-speed) ease, background-color var(--bg-shift-speed) ease;
}

/* ---- Light theme (toggled via Dark Mode switch in sidebar) ---- */
[data-theme="light"]{
  --bg:            #f3f7fc;
  --bg-rgb:        243,247,252;
  --bg-elevated:   #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #e7f1fb;
  --line:          #d7e3f3;
  --line-soft:     #eaf1fa;

  --gold:          #0891b2;
  --gold-soft:     rgba(8,145,178,0.12);
  --gold-dim:      rgba(8,145,178,0.06);
  --accent-2:      #0d9488;
  --on-accent:     #ffffff;

  --text:          #0b1a2c;
  --text-dim:      #4c6079;
  --text-faint:    #8095ad;

  --shadow-card: 0 4px 16px rgba(11,26,44,0.08);
  --shadow-modal: 0 -4px 30px rgba(11,26,44,0.12);
  --shadow-glow: 0 8px 28px rgba(8,145,178,0.14);
}
[data-theme="light"] .hero-slide::after{
  background:linear-gradient(180deg, rgba(243,247,252,0) 0%, rgba(243,247,252,0.55) 55%, rgba(243,247,252,0.97) 100%);
}
[data-theme="light"] .btn-primary{color:#fff;}
[data-theme="light"] .lang-overlay{
  background:linear-gradient(160deg, #dff3fa 0%, var(--bg) 38%);
}

/* ---- Reset ---- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Manrope","Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
button{font-family:inherit;}
ul{margin:0;padding:0;list-style:none;}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ============================================================
   TOP BAR + NAV (shared across pages)
   ============================================================ */
header.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 24px 12px;
  border-bottom:none;
  position:sticky;top:0;background:rgba(var(--bg-rgb),0.92);
  backdrop-filter:blur(10px);
  z-index:120;
}
/* Signature element: the topbar's bottom edge reads as a torn ticket
   stub — a row of punched perforation holes, like the tear-line on a
   cinema ticket. This is filmiMarg's one recurring motif. */
header.topbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:9px;
  background-image: radial-gradient(circle, rgba(var(--bg-rgb),1) 3.5px, transparent 3.6px);
  background-size: 18px 9px;
  background-position: 4px 0;
  background-repeat: repeat-x;
  border-bottom:1px dashed var(--line);
}
.icon-btn{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text);
  cursor:pointer;transition:background .15s;
}
.icon-btn:hover{background:var(--bg-card);}

.brand{display:flex;flex-direction:column;}
.brand .logo{font-family:"Unbounded",sans-serif;font-size:19px;font-weight:700;letter-spacing:-0.3px;}
.brand .logo span{color:var(--gold);}
.brand .tagline{font-size:10.5px;color:var(--text-dim);margin-top:1px;}

.top-actions{display:flex;align-items:center;gap:8px;}
.top-login-btn{
  background:var(--gold);color:var(--on-accent);border:none;border-radius:999px;
  padding:9px 18px;font-size:13.5px;font-weight:800;cursor:pointer;
  white-space:nowrap;transition:transform .15s, filter .15s;
}
.top-login-btn:hover{transform:translateY(-1px);filter:brightness(1.08);}
@media(max-width:420px){.top-login-btn{padding:8px 13px;font-size:12.5px;}}
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#1e2a3d,#0f1620);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;cursor:pointer;
}

nav.mainnav{
  display:flex;gap:26px;padding:12px 24px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
nav.mainnav::-webkit-scrollbar{display:none;}
nav.mainnav a{
  font-size:12.5px;font-weight:700;letter-spacing:0.5px;
  color:var(--text-dim);white-space:nowrap;
  padding-bottom:12px;border-bottom:2px solid transparent;
}
nav.mainnav a.active{color:var(--gold);border-color:var(--gold);}
nav.mainnav a:hover{color:var(--text);}

main{max-width:1100px;margin:0 auto;padding:0 20px 100px;}

/* ============================================================
   SIDEBAR (hamburger menu)
   ============================================================ */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:none;}
.sidebar-overlay.open{display:block;}
.sidebar{
  position:fixed;top:0;left:0;height:100%;width:280px;
  background:var(--bg-elevated);border-right:1px solid var(--line);
  z-index:210;padding:18px 0;overflow-y:auto;
  transform:translateX(-100%);transition:transform .25s ease;
}
.sidebar.open{transform:translateX(0);}
.sidebar-header{padding:0 20px 16px;border-bottom:1px solid var(--line);margin-bottom:8px;position:relative;}
.sidebar-close{position:absolute;top:0;right:16px;background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;}
.sidebar-section{padding:6px 8px;border-bottom:1px solid var(--line);margin-bottom:6px;}
.sidebar-section:last-child{border-bottom:none;}
.sidebar-link{
  display:flex;align-items:center;gap:12px;
  margin:3px 6px;padding:11px 12px;
  border-radius:10px;border:1px solid transparent;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.sidebar-link:hover{background:var(--bg-card-hover);border-color:var(--line);transform:translateX(2px);}
.sidebar-link .icon{
  font-size:15px;width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--bg-card);
}
.sidebar-link .icon svg{width:18px;height:18px;flex-shrink:0;}
.sidebar-link.premium-link{color:var(--gold);border-color:var(--gold-soft);}
.sidebar-link.premium-link .icon{background:var(--gold-dim);}
.sidebar-link.logout-link{color:var(--danger);}
/* Duplicated in the Elite Extras rail's "Settings" folder — kept in the DOM
   (so that folder can still forward clicks/update labels) but hidden here
   so the main hamburger sidebar stays short enough to fit a phone screen. */
.sidebar-link-hidden{display:none !important;}

/* ============================================================
   DESKTOP / WEB — persistent Spotify-style left rail instead of
   a hidden hamburger overlay. Below 1024px (phones/tablets) the
   menu stays exactly as before (☰ opens an overlay). At 1024px+
   the sidebar is always visible, bigger, and content shifts right
   to make room — this is what real big-brand web apps (Spotify,
   YouTube, Netflix) do on desktop instead of a tiny popup menu.
   ============================================================ */
@media(min-width:1024px){
  .sidebar-overlay{display:none !important;}
  .sidebar{
    transform:none; position:fixed; top:0; left:0; height:100vh; width:260px;
    border-right:1px solid var(--line); padding-top:22px;
  }
  .sidebar-close{display:none;}
  #hamburgerBtn{display:none;}
  header.topbar, nav.mainnav, main, footer.site-footer{margin-left:260px;}
  header.topbar{padding-left:32px;}
  .brand .logo{font-size:24px;}
  .sidebar-link{padding:12px 14px;font-size:14.5px;margin:3px 10px;}
  .sidebar-header{padding:0 24px 18px;}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:8px;font-size:14px;font-weight:700;
  border:1px solid transparent;cursor:pointer;transition:transform .12s,background .15s;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--gold);color:var(--on-accent);}
.btn-primary:hover{background:#67e8f9;}
.btn-ghost{background:rgba(128,128,128,0.08);color:var(--text);border-color:var(--line);}
.btn-ghost:hover{background:rgba(255,255,255,0.09);}
.btn-block{width:100%;}
.btn-sm{padding:7px 14px;font-size:12.5px;}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero{position:relative;margin-top:16px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;}
.hero-slide{position:relative;height:420px;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(var(--bg-rgb),0) 0%, rgba(var(--bg-rgb),0.55) 55%, rgba(var(--bg-rgb),0.96) 100%);}
.hero-content{position:relative;z-index:2;padding:26px 28px 24px;}
.hero-meta{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--text-dim);margin-bottom:12px;flex-wrap:wrap;}
.hero-rating{display:inline-flex;align-items:center;gap:4px;background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold);padding:3px 9px;border-radius:6px;font-weight:700;font-size:12.5px;}
.hero-title{font-family:"Unbounded",sans-serif;font-size:26px;font-weight:700;letter-spacing:-0.3px;margin:0 0 10px;line-height:1.18;}
.hero-overview{max-width:560px;color:var(--text-dim);font-size:14px;line-height:1.55;margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hero-dots{position:absolute;bottom:14px;right:18px;z-index:3;display:flex;gap:6px;}
.hero-dots button{width:18px;height:4px;border-radius:3px;border:none;background:rgba(128,128,128,0.45);cursor:pointer;padding:0;}
.hero-dots button.active{background:var(--gold);width:22px;}
.hero-skeleton{height:420px;background:linear-gradient(100deg, var(--bg-card) 30%, var(--bg-card-hover) 50%, var(--bg-card) 70%);background-size:200% 100%;animation:shimmer 1.4s infinite;}

/* ============================================================
   PREMIUM BANNER
   ============================================================ */
.premium-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(135deg, #0d2233, #0f1524);
  border:1px solid var(--gold);border-radius:10px;
  padding:12px 16px;margin:16px 0;font-size:13px;
}
.premium-banner.active{background:linear-gradient(135deg, #1e2a1a, #1c1c22);border-color:var(--success);}
.premium-banner .pb-text{display:flex;align-items:center;gap:8px;}
.premium-banner .pb-text b{color:var(--gold);}
.premium-banner.active .pb-text b{color:var(--success);}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0 32px;}
.stat-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 8px;text-align:center;}
.stat-icon{font-size:19px;margin-bottom:7px;color:var(--gold);}
.stat-num{font-size:17px;font-weight:800;}
.stat-label{font-size:11.5px;color:var(--text-dim);margin-top:2px;}

/* ---- Feature cards (Mood Quiz, Trivia, Watch Party, Surprise Me) ---- */
.feature-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.feature-card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 14px;cursor:pointer;position:relative;
  transition:transform .15s, border-color .15s;
}
.feature-card:hover{transform:translateY(-3px);border-color:var(--gold);}
.fc-icon{font-size:26px;margin-bottom:8px;}
.fc-title{font-size:13.5px;font-weight:800;margin-bottom:4px;}
.fc-desc{font-size:11px;color:var(--text-dim);line-height:1.4;}
.fc-tag{
  position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:800;
  letter-spacing:0.4px;text-transform:uppercase;padding:3px 7px;border-radius:5px;
}
.fc-tag.free{background:rgba(74,222,128,0.15);color:var(--success);}
.fc-tag.premium{background:var(--gold-soft);color:var(--gold);}
.fc-tag.soon{background:rgba(154,154,163,0.15);color:var(--text-faint);}
.coming-soon-card{opacity:0.7;cursor:default;}
.coming-soon-card:hover{transform:none;border-color:var(--line);}

.on-this-day-card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;display:flex;gap:16px;align-items:center;
}
.otd-poster{width:70px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#1a1a1f;aspect-ratio:2/3;}
.otd-poster img{width:100%;height:100%;object-fit:cover;}
.otd-body{flex:1;min-width:0;}
.otd-year-badge{display:inline-block;background:var(--gold-soft);color:var(--gold);font-size:11px;font-weight:800;padding:3px 9px;border-radius:6px;margin-bottom:6px;}
.otd-title{font-size:15px;font-weight:800;margin-bottom:4px;}
.otd-desc{font-size:12.5px;color:var(--text-dim);line-height:1.5;}
.otd-cta{margin-top:10px;}
@media(max-width:880px){
  .feature-cards{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   SECTIONS + CARD GRID
   ============================================================ */
.section{margin-bottom:36px;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.section-title{font-family:"Unbounded",sans-serif;font-size:14px;font-weight:700;display:flex;align-items:center;gap:9px;}
.section-title .bar{width:4px;height:17px;background:var(--gold);border-radius:2px;display:inline-block;}
.view-all{font-size:12.5px;color:var(--text-dim);display:flex;align-items:center;gap:4px;cursor:pointer;}
.view-all:hover{color:var(--gold);}

.lang-trigger-btn{
  display:flex;align-items:center;gap:6px;
  background:var(--bg-card);border:1px solid var(--line);color:var(--text);
  font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:8px;cursor:pointer;
}
.lang-trigger-btn:hover{border-color:var(--gold);}

/* ---- Full-screen language/country picker (premium style) ---- */
.lang-overlay{
  position:fixed;inset:0;z-index:270;
  background:linear-gradient(160deg, #0a1a24 0%, var(--bg) 38%);
  display:none;flex-direction:column;
}
.lang-overlay.open{display:flex;}
.lang-overlay-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 10px;
}
.lang-overlay-title{font-size:15px;font-weight:800;letter-spacing:0.2px;}
.lang-overlay-close{
  width:36px;height:36px;border-radius:50%;background:var(--bg-card);
  border:1px solid var(--line);color:var(--text);font-size:16px;cursor:pointer;
}
.lang-overlay-search{
  display:flex;align-items:center;gap:10px;
  margin:10px 20px 6px;padding:13px 16px;border-radius:12px;
  background:var(--bg-card);border:1px solid var(--line);color:var(--text-dim);
}
.lang-overlay-search input{
  flex:1;background:none;border:none;color:var(--text);font-size:15px;
}
.lang-overlay-search input:focus{outline:none;}
.lang-overlay-body{flex:1;overflow-y:auto;padding:14px 20px 100px;}

.lang-group-title{
  font-size:12px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;
  color:var(--gold);margin:22px 0 10px;display:flex;align-items:center;gap:8px;
}
.lang-group-title:first-child{margin-top:6px;}
.lang-group-title .bar{width:3px;height:13px;background:var(--gold);border-radius:2px;}

.lang-chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:520px){ .lang-chip-grid{grid-template-columns:repeat(3,1fr);} }

.lang-chip{
  background:var(--bg-card);border:1px solid var(--line);border-radius:12px;
  padding:14px 14px;cursor:pointer;transition:border-color .15s, transform .12s;
  display:flex;flex-direction:column;gap:2px;
}
.lang-chip:hover{border-color:var(--gold);transform:translateY(-2px);}
.lang-chip.selected{border-color:var(--gold);background:var(--gold-dim);}
.lang-chip .chip-main{font-size:14px;font-weight:700;}
.lang-chip .chip-sub{font-size:11px;color:var(--text-dim);}
.lang-chip.selected .chip-main{color:var(--gold);}

.lang-no-match{padding:30px 0;text-align:center;color:var(--text-dim);font-size:13.5px;}

/* ---- Language onboarding popup (Spotify-style first question) ---- */
.onboarding-body{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 24px;text-align:center;max-width:480px;margin:0 auto;width:100%;
}
.onboard-title{font-size:21px;font-weight:800;line-height:1.3;margin-bottom:8px;}
.onboard-sub{font-size:13px;color:var(--text-dim);margin-bottom:24px;}
.onboard-search-wrap{width:100%;margin-bottom:18px;}
.onboard-search-wrap input{
  width:100%;padding:13px 16px;border-radius:10px;background:var(--bg-card);
  border:1px solid var(--line);color:var(--text);font-size:14px;text-align:center;
}
.onboard-search-wrap input:focus{border-color:var(--gold);}
.onboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-height:50vh;overflow-y:auto;}
@media(min-width:480px){ .onboard-grid{grid-template-columns:repeat(3,1fr);} }
.onboard-chip{
  background:var(--bg-card);border:1px solid var(--line);border-radius:10px;
  padding:14px 10px;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:border-color .15s, transform .12s;
}
.onboard-chip:hover{border-color:var(--gold);transform:translateY(-2px);}
.onboard-chip.selected{border-color:var(--gold);background:var(--gold-dim);color:var(--gold);}
.onboard-actions{display:flex;gap:10px;margin-top:20px;width:100%;}
.onboard-actions .btn{flex:1;}

/* ---- Footer ---- */
footer.site-footer{
  border-top:1px solid var(--line);padding:28px 20px 110px;
  margin-top:20px;text-align:center;color:var(--text-dim);font-size:12.5px;
}
footer.site-footer .footer-logo{font-size:16px;font-weight:800;color:var(--text);margin-bottom:8px;}
footer.site-footer .footer-logo span{color:var(--gold);}
footer.site-footer a{color:var(--gold);}
footer.site-footer .footer-meta{margin-top:6px;}
@media(min-width:641px){
  footer.site-footer{padding-bottom:28px;}
}

.card-row{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;}
.card-row.cols-6{grid-template-columns:repeat(6,1fr);}

.movie-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s;}
.movie-card:hover{transform:translateY(-4px);border-color:#46462f;}
.poster-wrap{position:relative;aspect-ratio:2/3;background:#1a1a1f;overflow:hidden;}
.poster-wrap img{width:100%;height:100%;object-fit:cover;}
.card-rating{position:absolute;top:8px;left:8px;background:rgba(var(--bg-rgb),0.85);border:1px solid var(--gold);color:var(--gold);font-size:11px;font-weight:700;padding:2px 6px;border-radius:5px;display:flex;align-items:center;gap:3px;}
.card-bookmark{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(var(--bg-rgb),0.85);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);}
.card-bookmark.saved{color:var(--gold);border-color:var(--gold);}
.card-body{padding:9px 10px 12px;}
.card-title{font-size:13px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.card-year{font-size:11.5px;color:var(--text-dim);margin-top:3px;}

/* ============================================================
   CONTINUE WATCHING — landscape thumb + real progress bar
   (progress width is set inline per-card from actual saved %)
   ============================================================ */
.continue-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.continue-card{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s;}
.continue-card:hover{transform:translateY(-4px);border-color:#46462f;}
.continue-thumb{position:relative;aspect-ratio:16/9;background:#1a1a1f;overflow:hidden;}
.continue-thumb img{width:100%;height:100%;object-fit:cover;}
.continue-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.78) 100%);}
.continue-play{position:absolute;left:10px;bottom:16px;width:32px;height:32px;border-radius:50%;background:rgba(var(--bg-rgb),0.9);border:1px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;z-index:2;}
.continue-remove{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(var(--bg-rgb),0.88);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-dim);z-index:3;cursor:pointer;font-size:13px;line-height:1;}
.continue-remove:hover{color:var(--danger);border-color:var(--danger);}
.continue-progress-track{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,0.2);z-index:2;}
.continue-progress-fill{height:100%;background:var(--gold);}
.continue-body{padding:9px 10px 12px;}
.continue-title{font-size:13px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.continue-sub{font-size:11.5px;color:var(--text-dim);margin-top:3px;}

/* Resume note on the movie detail page */
.resume-note{font-size:12.5px;color:var(--gold);margin:-4px 0 14px;padding-left:2px;}

/* On TV Today (TVMaze) */
.tv-today-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.tv-today-card{flex:0 0 220px;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);display:flex;gap:10px;padding:10px;text-decoration:none;color:var(--text);}
.tv-today-card img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#1a1a1f;}
.tv-today-info{min-width:0;}
.tv-today-show{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tv-today-episode{font-size:11.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.tv-today-meta{font-size:10.5px;color:var(--gold);margin-top:4px;font-weight:600;}

/* Next Episode chip on existing TV show cards */
.next-ep-note{font-size:10px;color:var(--gold);margin-top:4px;font-weight:600;min-height:12px;}
.people-card{text-align:center;cursor:pointer;}
.people-photo{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:#1a1a1f;border:1px solid var(--line);margin-bottom:8px;}
.people-photo img{width:100%;height:100%;object-fit:cover;}
.people-name{font-size:12.5px;font-weight:700;}
.people-role{font-size:11px;color:var(--text-dim);margin-top:2px;}

/* ============================================================
   RANK LIST (Top Rated style)
   ============================================================ */
.rank-list{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.rank-row{display:flex;align-items:center;gap:13px;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;}
.rank-row:last-child{border-bottom:none;}
.rank-row:hover{background:rgba(255,255,255,0.03);}
.rank-num{width:18px;font-weight:800;color:var(--text-dim);font-size:13.5px;}
.rank-thumb{width:40px;height:56px;border-radius:6px;overflow:hidden;background:#1a1a1f;flex-shrink:0;}
.rank-thumb img{width:100%;height:100%;object-fit:cover;}
.rank-info{flex:1;min-width:0;}
.rank-title{font-size:13.5px;font-weight:700;}
.rank-rating{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--gold);width:54px;}
.rank-year{color:var(--text-dim);font-size:12.5px;width:42px;}

/* ============================================================
   NEWS CARDS
   ============================================================ */
.news-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;gap:12px;padding:12px;cursor:pointer;}
.news-card:hover{border-color:#46462f;}
.news-thumb{width:84px;height:84px;border-radius:8px;overflow:hidden;background:#1a1a1f;flex-shrink:0;}
.news-thumb img{width:100%;height:100%;object-fit:cover;}
.news-body{flex:1;min-width:0;}
.news-title{font-size:13px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-source{font-size:11px;color:var(--text-dim);margin-top:6px;}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay{position:fixed;inset:0;background:rgba(var(--bg-rgb),0.97);z-index:300;display:none;flex-direction:column;}
.search-overlay.open{display:flex;}
.search-bar-row{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);}
.search-bar-row input{flex:1;background:var(--bg-card);border:1px solid var(--line);border-radius:8px;padding:11px 14px;color:var(--text);font-size:14px;}
.search-bar-row input:focus{border-color:var(--gold);}
.search-cancel{background:none;border:none;color:var(--text-dim);font-size:13px;font-weight:700;cursor:pointer;}
.search-results{flex:1;overflow-y:auto;padding:16px 20px;}
.search-result-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);cursor:pointer;}
.search-result-thumb{width:42px;height:60px;border-radius:6px;overflow:hidden;background:#1a1a1f;flex-shrink:0;}
.search-result-thumb img{width:100%;height:100%;object-fit:cover;}
.search-result-info{flex:1;min-width:0;}
.search-result-title{font-size:13.5px;font-weight:700;}
.search-result-meta{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.search-empty{text-align:center;color:var(--text-dim);font-size:13.5px;padding:40px 20px;}

/* ============================================================
   LOADING SKELETONS
   ============================================================ */
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skel-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.skel-poster{aspect-ratio:2/3;background:linear-gradient(100deg, var(--bg-card) 30%, var(--bg-card-hover) 50%, var(--bg-card) 70%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
.skel-line{height:11px;margin:9px 10px;border-radius:4px;background:linear-gradient(100deg, var(--bg-card) 30%, var(--bg-card-hover) 50%, var(--bg-card) 70%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
.skel-line.short{width:55%;}

.loading-row{padding:30px;text-align:center;color:var(--text-dim);font-size:13px;}

/* ============================================================
   MODALS (generic overlay used by auth / TMDB key / etc.)
   ============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:250;padding:20px;}
.modal-overlay.hidden{display:none;}
.modal-box{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:26px;max-width:380px;width:100%;}
.modal-box h2{margin:0 0 8px;font-size:18px;font-weight:800;}
.modal-box p{margin:0 0 16px;font-size:13.5px;color:var(--text-dim);line-height:1.5;}
.modal-box input{width:100%;padding:11px 13px;border-radius:8px;background:#0e0e11;border:1px solid var(--line);color:var(--text);font-size:14px;margin-bottom:10px;}
.modal-box input:focus{border-color:var(--gold);}
.modal-actions{display:flex;gap:10px;margin-top:6px;}
.modal-actions .btn{flex:1;}
.modal-note{font-size:11.5px;color:var(--text-dim);margin-top:14px;line-height:1.5;}
.modal-note a{color:var(--gold);}
.modal-error{color:var(--danger);font-size:12.5px;margin:-4px 0 10px;display:none;}

.age-gate-dob-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;margin-bottom:14px;}
.age-gate-dob-row select{width:100%;}
.age-gate-blocked{background:rgba(255,107,107,0.1);border:1px solid var(--danger);border-radius:10px;padding:14px;text-align:center;}
.age-gate-blocked p{margin:0 0 6px;color:var(--text);font-size:13.5px;}
.age-gate-blocked p:last-child{margin-bottom:0;color:var(--text-dim);}
.modal-success{color:var(--success);font-size:12.5px;margin:-4px 0 10px;display:none;}

.auth-tabs{display:flex;gap:6px;margin-bottom:16px;background:#0e0e11;border-radius:8px;padding:4px;}
.auth-tab{flex:1;text-align:center;padding:8px;border-radius:6px;font-size:13px;font-weight:700;color:var(--text-dim);cursor:pointer;border:none;background:transparent;}
.auth-tab.active{background:var(--bg-card);color:var(--text);}

.user-menu{position:relative;}
.user-dropdown{position:absolute;top:46px;right:0;background:var(--bg-card);border:1px solid var(--line);border-radius:10px;min-width:200px;padding:8px;z-index:130;display:none;}
.user-dropdown.open{display:block;}
.user-dropdown .email-row{font-size:12px;color:var(--text-dim);padding:8px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;word-break:break-all;}
.user-dropdown a,.user-dropdown button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:6px;font-size:13.5px;background:none;border:none;color:var(--text);cursor:pointer;}
.user-dropdown a:hover,.user-dropdown button:hover{background:rgba(255,255,255,0.06);}
.user-dropdown .logout-btn{color:var(--danger);}

/* ============================================================
   PRICING / PREMIUM PAGE
   ============================================================ */
.pricing-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:280;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:0;}
.pricing-overlay.open{display:flex;}
.pricing-box{max-width:460px;width:100%;background:var(--bg-card);border:1px solid var(--line);border-radius:0;padding:0 24px 28px;position:relative;max-height:100vh;min-height:100vh;overflow-y:auto;}
@media(min-width:520px){
  .pricing-overlay{padding:30px 16px;align-items:center;}
  .pricing-box{border-radius:20px;max-height:88vh;min-height:0;}
}
.pricing-close{position:absolute;top:18px;right:18px;background:rgba(0,0,0,0.35);border:none;color:#fff;font-size:18px;width:32px;height:32px;border-radius:50%;cursor:pointer;z-index:2;}
.pricing-hero{
  margin:0 -24px 22px;padding:44px 24px 26px;text-align:center;
  background:radial-gradient(120% 100% at 50% 0%, rgba(29,185,84,0.25), transparent 60%), linear-gradient(180deg, var(--gold-dim), transparent);
  border-bottom:1px solid var(--line);
}
@media(min-width:520px){.pricing-hero{border-radius:20px 20px 0 0;}}
.pricing-hero-icon{font-size:38px;margin-bottom:6px;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.4));}
.pricing-box h2{margin:0 0 6px;font-size:22px;font-weight:800;}
.pricing-box .sub{color:var(--text-dim);font-size:13.5px;margin:0;}
.plan-card{border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:border-color .15s;}
.plan-card:hover{border-color:var(--gold);}
.plan-card.best-value{border-color:var(--gold);position:relative;}
.plan-card.best-value::before{content:"BEST VALUE";position:absolute;top:-9px;left:16px;background:var(--gold);color:var(--on-accent);font-size:10px;font-weight:800;padding:2px 8px;border-radius:4px;letter-spacing:0.4px;}
.plan-name{font-size:15px;font-weight:800;}
.plan-desc{font-size:12px;color:var(--text-dim);margin-top:3px;}
.plan-price{font-size:19px;font-weight:800;color:var(--gold);text-align:right;}
.plan-price span{font-size:11px;color:var(--text-dim);font-weight:400;display:block;}
.pricing-features{margin:18px 0;}
.pricing-features li{font-size:13px;color:var(--text-dim);padding:6px 0;display:flex;gap:8px;}
.pricing-features li::before{content:"✓";color:var(--success);font-weight:800;}

.plan-compare-title{
  font-size:12px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;
  color:var(--text-dim);margin:22px 0 10px;
}
.plan-compare-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.plan-compare-row{
  display:grid;grid-template-columns:1fr 64px 76px;align-items:center;gap:6px;
  padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px;
}
.plan-compare-row:last-child{border-bottom:none;}
.plan-compare-row:nth-child(odd){background:rgba(255,255,255,0.015);}
.pcr-label{color:var(--text);}
.pcr-free{color:var(--text-dim);text-align:center;font-size:11.5px;}
.pcr-premium{color:var(--gold);text-align:center;font-weight:700;font-size:11.5px;}
.plan-compare-head{
  display:grid;grid-template-columns:1fr 64px 76px;gap:6px;
  padding:0 12px 6px;font-size:10.5px;font-weight:800;letter-spacing:0.4px;
  color:var(--text-faint);text-transform:uppercase;
}
.plan-compare-head span:not(:first-child){text-align:center;}

/* ============================================================
   AI CHATBOT WIDGET — UPGRADED
   ============================================================ */

/* Panel slide-in animation */
@keyframes chatSlideIn{from{opacity:0;transform:translateY(24px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes chatSlideOut{from{opacity:1;transform:translateY(0) scale(1);}to{opacity:0;transform:translateY(24px) scale(0.97);}}
@keyframes msgPop{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes dotBounce{0%,80%,100%{transform:translateY(0);}40%{transform:translateY(-6px);}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(91,79,214,0.28);}50%{box-shadow:0 0 0 8px rgba(91,79,214,0);}}
@keyframes shimmer{0%{background-position:-200% center;}100%{background-position:200% center;}}

/* ============================================================
   CineBuddy — deliberately its own visual identity, separate
   from the rest of filmiMarg's dark teal-emerald theme. Warm,
   neutral, high-contrast text — closer to a focused reading/
   chat surface than the cinema-marquee feel of the main site.
   All colors below are scoped to .chat-panel only.
   ============================================================ */
.chat-panel{
  --chat-bg:#f7f5f1;
  --chat-surface:#ffffff;
  --chat-border:#e5e0d7;
  --chat-text:#2b2823;
  --chat-text-dim:#8a8479;
  --chat-accent:#5b4fd6;
  --chat-accent-soft:rgba(91,79,214,0.1);
  --chat-user-bg:#5b4fd6;

  position:fixed;bottom:24px;right:18px;z-index:290;width:100%;max-width:390px;height:76vh;max-height:620px;
  background:var(--chat-bg);border:1px solid var(--chat-border);border-radius:20px;display:none;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.35),0 0 0 1px rgba(0,0,0,0.02);
  font-family:'Manrope',sans-serif;color:var(--chat-text);
}
.chat-panel.open{display:flex;animation:chatSlideIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;}
.chat-panel.closing{animation:chatSlideOut 0.2s ease-in both;}

/* Reduce Motion — sidebar accessibility toggle (js/ui-shell.js) */
body.reduce-motion, body.reduce-motion *{
  animation-duration:0.001ms !important; animation-iteration-count:1 !important;
  transition-duration:0.001ms !important; scroll-behavior:auto !important;
}
/* Header */
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--chat-border);background:var(--chat-surface);border-radius:20px 20px 0 0;flex-shrink:0;}
.chat-header-left{display:flex;align-items:center;gap:10px;}
.chat-avatar{width:34px;height:34px;border-radius:50%;background:var(--chat-accent);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;animation:pulseGlow 3s ease-in-out infinite;}
.chat-header .title{font-size:14px;font-weight:800;display:flex;align-items:center;gap:7px;color:var(--chat-text);}
.chat-header .title .badge{font-size:9.5px;background:var(--chat-accent);color:#fff;padding:2px 7px;border-radius:5px;font-weight:800;letter-spacing:0.3px;}
.chat-status{font-size:11px;color:#5b9e6f;display:flex;align-items:center;gap:4px;margin-top:1px;}
.chat-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#5b9e6f;display:inline-block;box-shadow:0 0 6px #5b9e6f;}
.chat-header-actions{display:flex;align-items:center;gap:6px;}
.chat-clear-btn{background:none;border:none;color:var(--chat-text-dim);font-size:13px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all 0.2s;}
.chat-clear-btn:hover{background:var(--chat-accent-soft);color:var(--chat-text);}
.chat-close{background:none;border:none;color:var(--chat-text-dim);font-size:18px;cursor:pointer;padding:4px 6px;border-radius:6px;transition:all 0.2s;line-height:1;}
.chat-close:hover{background:var(--chat-accent-soft);color:var(--chat-text);}

/* Quick suggestions chips */
.chat-suggestions{display:flex;gap:6px;padding:10px 14px 4px;flex-wrap:wrap;flex-shrink:0;border-bottom:1px solid var(--chat-border);background:var(--chat-surface);}
.chat-chip{font-size:11.5px;padding:5px 11px;border-radius:20px;background:var(--chat-accent-soft);border:1px solid rgba(91,79,214,0.25);color:var(--chat-accent);cursor:pointer;white-space:nowrap;transition:all 0.18s;font-weight:600;}
.chat-chip:hover{background:rgba(91,79,214,0.18);border-color:var(--chat-accent);transform:translateY(-1px);}

/* Body */
.chat-body{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;background:var(--chat-bg);}
.chat-body::-webkit-scrollbar{width:4px;}
.chat-body::-webkit-scrollbar-track{background:transparent;}
.chat-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:4px;}

/* Messages */
.chat-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.6;animation:msgPop 0.22s ease both;word-break:break-word;}
.chat-msg.bot{background:var(--chat-surface);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--chat-border);color:var(--chat-text);}
.chat-msg.user{background:var(--chat-user-bg);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500;}
.chat-msg.bot a{color:var(--chat-accent);text-decoration:underline;}
.chat-msg.bot strong{font-weight:800;color:var(--chat-text);}
.chat-msg.bot ul{margin:6px 0;padding-left:18px;}
.chat-msg.bot li{margin:2px 0;}
.chat-msg.bot p{margin:0 0 8px;}
.chat-msg.bot p:last-child{margin-bottom:0;}
.chat-msg-time{font-size:10px;color:var(--chat-text-dim);margin-top:3px;opacity:0.8;}

/* Typing indicator */
.typing-indicator{display:flex;align-items:center;gap:4px;padding:10px 14px;background:var(--chat-surface);border-radius:14px;border-bottom-left-radius:4px;align-self:flex-start;border:1px solid var(--chat-border);animation:msgPop 0.22s ease both;}
.typing-dot{width:7px;height:7px;border-radius:50%;background:var(--chat-accent);opacity:0.7;}
.typing-dot:nth-child(1){animation:dotBounce 1.2s ease infinite 0s;}
.typing-dot:nth-child(2){animation:dotBounce 1.2s ease infinite 0.2s;}
.typing-dot:nth-child(3){animation:dotBounce 1.2s ease infinite 0.4s;}

/* Date divider */
.chat-date-divider{text-align:center;font-size:10.5px;color:var(--chat-text-dim);padding:4px 0;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.chat-date-divider::before,.chat-date-divider::after{content:'';flex:1;height:1px;background:var(--chat-border);}

/* Input row */
.chat-input-row{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--chat-border);flex-shrink:0;background:var(--chat-surface);border-radius:0 0 20px 20px;}
.chat-input-row input{flex:1;padding:10px 13px;border-radius:10px;background:var(--chat-bg);border:1px solid var(--chat-border);color:var(--chat-text);font-size:13.5px;transition:border-color 0.2s;outline:none;font-family:'Manrope',sans-serif;}
.chat-input-row input:focus{border-color:var(--chat-accent);}
.chat-input-row input::placeholder{color:var(--chat-text-dim);opacity:0.8;}
.chat-send-btn{background:var(--chat-accent);color:#fff;border:none;border-radius:10px;padding:10px 15px;font-weight:800;cursor:pointer;font-size:15px;transition:all 0.18s;display:flex;align-items:center;justify-content:center;min-width:42px;}
.chat-send-btn:hover{transform:scale(1.05);}
.chat-send-btn:active{transform:scale(0.97);}
.chat-send-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}

/* Locked state */
.chat-locked{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 20px;gap:14px;background:var(--chat-bg);}
.chat-locked .lock-icon{font-size:38px;animation:msgPop 0.4s ease both;}
.chat-locked p{color:var(--chat-text-dim);font-size:13.5px;margin:0;line-height:1.5;}

/* Chat counter badge */
.chat-count-badge{font-size:10px;background:var(--chat-accent-soft);color:var(--chat-accent);border:1px solid rgba(91,79,214,0.3);padding:1px 6px;border-radius:10px;font-weight:600;}

/* ============================================================
   FEATURE MODAL (shared host for Mood Quiz / Trivia / Watch Party)
   ============================================================ */
.feature-modal-box{max-width:420px;max-height:85vh;overflow-y:auto;}
.feature-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.feature-modal-title{font-size:16px;font-weight:800;}

/* ---- Quiz UI (shared by Mood Quiz + Trivia) ---- */
.quiz-progress{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:18px;}
.quiz-progress-fill{height:100%;background:var(--gold);transition:width .3s;}
.quiz-question{font-size:16px;font-weight:700;margin-bottom:16px;line-height:1.4;}
.quiz-options{display:flex;flex-direction:column;gap:9px;}
.quiz-option{
  text-align:left;padding:13px 15px;border-radius:10px;
  background:#0e0e11;border:1px solid var(--line);color:var(--text);
  font-size:13.5px;cursor:pointer;transition:border-color .15s,background .15s;
}
.quiz-option:hover:not(:disabled){border-color:var(--gold);}
.quiz-option:disabled{cursor:default;}
.quiz-option.correct{border-color:var(--success);background:rgba(74,222,128,0.1);color:var(--success);}
.quiz-option.wrong{border-color:var(--danger);background:rgba(255,107,107,0.1);color:var(--danger);}
.quiz-score-mini{margin-top:14px;font-size:12px;color:var(--text-dim);text-align:right;}

.quiz-result{text-align:center;}
.quiz-result-poster{width:140px;aspect-ratio:2/3;margin:0 auto 14px;border-radius:10px;overflow:hidden;background:#1a1a1f;}
.quiz-result-poster img{width:100%;height:100%;object-fit:cover;}
.quiz-result-title{font-size:17px;font-weight:800;margin-bottom:4px;}
.quiz-result-rating{color:var(--gold);font-weight:700;font-size:13px;margin-bottom:10px;}
.quiz-result-overview{font-size:13px;color:var(--text-dim);line-height:1.55;margin-bottom:18px;}
.quiz-result-actions{display:flex;gap:10px;}
.quiz-result-actions .btn{flex:1;}
.quiz-no-result{text-align:center;color:var(--text-dim);font-size:13.5px;padding:20px 0;}
.quiz-final-score{font-size:42px;font-weight:800;color:var(--gold);margin-bottom:8px;}

/* ---- Watch Party UI ---- */
.wp-step{margin-bottom:18px;}
.wp-label{display:block;font-size:12px;font-weight:700;color:var(--text-dim);margin-bottom:7px;}
.wp-input{
  width:100%;padding:11px 13px;border-radius:8px;background:#0e0e11;
  border:1px solid var(--line);color:var(--text);font-size:13.5px;
}
.wp-input:focus{border-color:var(--gold);}
.wp-movie-results{margin-top:6px;}
.wp-result-row{padding:9px 11px;font-size:13px;border-radius:7px;cursor:pointer;background:var(--bg-card);margin-bottom:4px;}
.wp-result-row:hover{border:1px solid var(--gold);}
.wp-selected-movie{margin-top:8px;font-size:13px;color:var(--gold);font-weight:700;}
.wp-share-card{
  margin-top:18px;padding:18px;border-radius:12px;text-align:center;
  background:linear-gradient(135deg, #0d2233, var(--bg-card));border:1px solid var(--gold);
}
.wp-share-title{font-size:16px;font-weight:800;margin-bottom:6px;}
.wp-share-date{font-size:13px;color:var(--text-dim);margin-bottom:6px;}
.wp-share-note{font-size:12.5px;color:var(--text-dim);margin-bottom:14px;font-style:italic;}

/* ---- Shared "VS" comparison picker (DNA Match, Rivalry, Six Degrees) ---- */
.dna-pickers{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;}
.dna-picker{flex:1;min-width:0;}
.dna-vs{
  font-size:12px;font-weight:800;color:var(--gold);padding:11px 4px 0;flex-shrink:0;
}

/* ---- Movie DNA Match result ---- */
.dna-match-score{font-size:38px;font-weight:800;color:var(--gold);text-align:center;margin:6px 0 18px;}
.dna-match-score span{display:block;font-size:11px;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.dna-section{margin-bottom:14px;}
.dna-section-title{font-size:11.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:7px;}
.dna-chips{display:flex;flex-wrap:wrap;gap:6px;}
.dna-chip{font-size:12px;padding:5px 10px;border-radius:7px;background:var(--bg-card);border:1px solid var(--line);}
.dna-chip.match{color:var(--gold);border-color:var(--gold);}
.dna-chip.none{color:var(--text-faint);}

/* ---- Actor Rivalry result ---- */
.rivalry-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.rivalry-col{background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;}
.rivalry-col.winner{border-color:var(--gold);background:var(--gold-dim);}
.rivalry-name{font-size:12.5px;font-weight:700;margin-bottom:6px;}
.rivalry-stat-big{font-size:22px;font-weight:800;color:var(--gold);}
.rivalry-stat-label{font-size:10.5px;color:var(--text-dim);margin-top:2px;text-transform:uppercase;letter-spacing:0.3px;}
.rivalry-top-film{font-size:12px;font-weight:600;margin-top:4px;}

/* ---- Six Degrees result ---- */
.sd-result-direct{
  display:flex;align-items:center;gap:12px;padding:18px;border-radius:12px;
  background:var(--gold-dim);border:1px solid var(--gold);font-size:13.5px;
}
.sd-connection-icon{font-size:28px;}
.sd-path{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;}
.sd-path-step{font-size:13.5px;background:var(--bg-card);border:1px solid var(--line);padding:9px 14px;border-radius:8px;text-align:center;}
.sd-path-arrow{font-size:11px;color:var(--text-dim);}

/* ---- Around the World result ---- */
.aw-group{margin-bottom:16px;}
.aw-group-title{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:8px;}
.aw-movie-row{display:flex;gap:10px;overflow-x:auto;}
.aw-movie-chip{flex-shrink:0;width:72px;cursor:pointer;text-align:center;}
.aw-movie-chip img{width:72px;height:104px;object-fit:cover;border-radius:7px;margin-bottom:5px;background:#1a1a1f;}
.aw-movie-chip span{font-size:10.5px;line-height:1.3;display:block;}

/* ---- Cinema Personality result ---- */
.cp-header{text-align:center;margin-bottom:18px;}
.cp-emoji{font-size:40px;margin-bottom:6px;}
.cp-title{font-size:17px;font-weight:800;color:var(--gold);}
.cp-genre-bars{margin-bottom:18px;}
.cp-genre-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.cp-genre-name{font-size:12px;width:80px;flex-shrink:0;}
.cp-genre-bar-track{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden;}
.cp-genre-bar-fill{height:100%;background:var(--gold);}
.cp-genre-pct{font-size:11.5px;color:var(--text-dim);width:32px;text-align:right;}
.cp-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.cp-stat{background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:12px 6px;text-align:center;}
.cp-stat-num{font-size:17px;font-weight:800;color:var(--gold);}
.cp-stat-label{font-size:9.5px;color:var(--text-dim);margin-top:3px;}

/* ============================================================
   MOVIE DETAILS PAGE
   ============================================================ */
.detail-hero{position:relative;border-radius:0 0 18px 18px;overflow:hidden;min-height:260px;background:#000;margin:0 -20px;}
.detail-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(var(--bg-rgb),0.2) 0%, rgba(var(--bg-rgb),0.97) 100%);}
.detail-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top;}
.detail-hero-content{position:relative;z-index:2;display:flex;gap:16px;padding:160px 20px 20px;align-items:flex-end;}
.detail-poster{width:110px;border-radius:10px;overflow:hidden;border:2px solid var(--line);flex-shrink:0;background:#1a1a1f;aspect-ratio:2/3;}
.detail-poster img{width:100%;height:100%;object-fit:cover;}
.detail-title-block{flex:1;min-width:0;}
.detail-title{font-size:22px;font-weight:800;line-height:1.15;margin:0 0 6px;}
.detail-meta{font-size:12.5px;color:var(--text-dim);display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

.detail-actions{display:flex;gap:10px;padding:18px 20px 0;flex-wrap:wrap;}
.rating-pills{display:flex;gap:10px;padding:18px 20px 0;flex-wrap:wrap;}
.rating-pill{background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;}
.rating-pill .src{font-size:10.5px;color:var(--text-dim);font-weight:600;}

.overview-block{padding:20px;}
.overview-block h3{font-size:15px;font-weight:800;margin:0 0 8px;}
.overview-block p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0;}

.lang-avail-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.lang-avail-chip{
  font-size:12px;font-weight:600;padding:5px 10px;border-radius:7px;
  background:var(--bg-card);border:1px solid var(--line);color:var(--text-dim);
}
.lang-avail-chip.audio{color:var(--text);border-color:var(--gold);}
.lang-avail-chip.subtitle{color:var(--text-dim);}
.lang-avail-note{font-size:11px;color:var(--text-faint);line-height:1.5;}

/* Watch Now On */
.provider-group-label{font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin:0 0 6px;}
.provider-group-label:not(:first-child){margin-top:12px;}
.provider-row{display:flex;flex-wrap:wrap;gap:10px;}
.provider-chip{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600;text-decoration:none;color:var(--text);transition:border-color 0.15s;}
.provider-chip:hover{border-color:var(--gold);}
.provider-chip img{width:22px;height:22px;border-radius:5px;object-fit:cover;}
.provider-attribution{font-size:10.5px;color:var(--text-faint);margin-top:10px;}

/* Book Tickets */
.ticket-cta-box{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;flex-wrap:wrap;}
.ticket-cta-box p{margin:0;font-size:13px;color:var(--text-dim);}

/* Industry quick tabs (Bollywood/Hollywood/South) */
.industry-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px;}
.industry-tab{background:transparent;border:1px solid var(--line);color:var(--text-dim);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:20px;cursor:pointer;transition:all 0.15s;}
.industry-tab:hover{border-color:var(--gold);color:var(--text);}
.industry-tab.active{background:var(--gold);border-color:var(--gold);color:var(--on-accent);}

.cast-row{display:flex;gap:14px;overflow-x:auto;padding:4px 20px 8px;scrollbar-width:none;}
.cast-row::-webkit-scrollbar{display:none;}
.cast-chip{flex-shrink:0;width:84px;text-align:center;}
.cast-photo{width:84px;height:84px;border-radius:50%;overflow:hidden;background:#1a1a1f;border:1px solid var(--line);margin-bottom:6px;}
.cast-photo img{width:100%;height:100%;object-fit:cover;}
.cast-name{font-size:11.5px;font-weight:700;line-height:1.3;}
.cast-char{font-size:10.5px;color:var(--text-dim);margin-top:2px;}

.trailer-frame-wrap{padding:0 20px;}
.trailer-frame-wrap iframe{width:100%;aspect-ratio:16/9;border-radius:10px;border:1px solid var(--line);}

/* ============================================================
   BOTTOM NAV (mobile)
   ============================================================ */
.bottomnav{position:fixed;bottom:0;left:0;right:0;background:rgba(var(--bg-rgb),0.97);border-top:1px solid var(--line);display:none;justify-content:space-around;padding:8px 0 14px;backdrop-filter:blur(10px);z-index:110;}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--text-dim);}
.bottomnav a svg{width:21px;height:21px;}
.bottomnav a.active{color:var(--gold);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .stats{grid-template-columns:repeat(3,1fr);}
  .card-row{grid-template-columns:repeat(3,1fr);}
  .card-row.cols-6{grid-template-columns:repeat(3,1fr);}
  .continue-row{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  header.topbar{padding:14px 16px;}
  nav.mainnav{padding:10px 16px;gap:20px;}
  main{padding:0 14px 110px;}
  .hero-slide,.hero-skeleton{height:460px;}
  .hero-title{font-size:26px;}
  .stats{grid-template-columns:repeat(3,1fr);}
  .stat-card{padding:13px 6px;}
  .card-row{grid-template-columns:repeat(2,1fr);}
  .card-row.cols-6{grid-template-columns:repeat(2,1fr);}
  .continue-row{grid-template-columns:repeat(1,1fr);}
  .bottomnav{display:flex;}
  .rank-year{display:none;}
  .chat-panel{bottom:0;right:0;border-radius:20px 20px 0 0;max-width:100%;height:85vh;max-height:none;}
  .chat-header{border-radius:20px 20px 0 0;}
  .chat-input-row{border-radius:0;padding-bottom:max(12px,env(safe-area-inset-bottom));}
  .detail-hero{margin:0 -14px;}
}

/* ============================================================
   3-TIER PRICING CARDS (Basic ₹59 / Plus ₹299 / Elite ₹599)
   ============================================================ */
#pricingPlansWrap{display:flex;flex-direction:column;gap:14px;}
.tier-plan-card{position:relative;border:1.5px solid var(--line);border-radius:16px;padding:22px 20px;background:var(--bg-elevated);transition:transform .15s, border-color .15s;}
.tier-plan-card:hover{transform:translateY(-2px);}
.tier-plan-card.tier-elite{border-color:var(--gold);background:linear-gradient(160deg,rgba(245,180,23,0.10),var(--bg-elevated) 60%);}
.tier-plan-card.tier-current{border-color:var(--success);}
.tier-ribbon{position:absolute;top:-11px;right:16px;background:var(--gold);color:var(--on-accent);font-size:10px;font-weight:800;padding:4px 11px;border-radius:20px;letter-spacing:0.4px;box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.tier-plan-name{font-size:18px;font-weight:800;}
.tier-plan-tagline{color:var(--text-dim);font-size:13px;margin:2px 0 12px;}
.tier-plan-price{font-size:28px;font-weight:800;color:var(--gold);margin-bottom:14px;}
.tier-plan-price span{font-size:12px;color:var(--text-dim);font-weight:500;}
.tier-plan-features{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:7px;}
.tier-plan-features li{font-size:13px;color:var(--text-dim);padding-left:18px;position:relative;}
.tier-plan-features li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700;}
.tier-plan-btn{opacity:0.9;cursor:not-allowed;padding:13px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:0.2px;}

/* ============================================================
   TIER BADGE (avatar) — small accent shared by Plus + Elite
   ============================================================ */
.tier-badge{display:inline-flex;align-items:center;justify-content:center;position:absolute;bottom:-2px;right:-2px;width:15px;height:15px;border-radius:50%;background:var(--gold);color:var(--on-accent);font-size:9px;font-weight:800;border:2px solid var(--bg);}
#avatarBtn{position:relative;}

body.tier-plus{--gold: #ffd166;}
body.tier-plus .topbar{border-bottom:1px solid rgba(255,209,102,0.25);}

/* ============================================================
   MY COLLECTION & BUDGET
   ============================================================ */
.mc-summary{display:flex;gap:12px;margin-bottom:18px;}
.mc-summary-box{flex:1;background:var(--bg-elevated);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;}
.mc-summary-label{font-size:11.5px;color:var(--text-dim);margin-bottom:4px;}
.mc-summary-value{font-size:20px;font-weight:800;color:var(--gold);}
.mc-add-form{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.mc-list{display:flex;flex-direction:column;gap:10px;}
.mc-item{display:flex;align-items:center;gap:12px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:10px;padding:10px;}
.mc-item-poster{width:44px;height:64px;object-fit:cover;border-radius:6px;background:var(--bg-card);}
.mc-item-info{flex:1;min-width:0;}
.mc-item-title{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mc-item-amount{color:var(--gold);font-weight:700;font-size:13px;}
.mc-item-note{color:var(--text-dim);font-size:11.5px;}
.mc-item-remove{background:none;border:none;color:var(--text-faint);font-size:16px;cursor:pointer;padding:4px 8px;}
.mc-item-remove:hover{color:var(--danger);}

/* ============================================================
   EXCLUSIVE DASHBOARDS — Plus vs Elite (visibly different),
   rendered at the BOTTOM of the homepage via #tierDashboard.
   ============================================================ */
.tier-dash{border-radius:16px;padding:18px 20px;margin:28px 0 14px;}

/* ---- Plus: clean accent card, gentle fade-in ---- */
.plus-dash{background:var(--bg-elevated);border:1px solid rgba(255,209,102,0.3);animation:tierFadeIn .4s ease;}
.plus-dash-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.plus-dash-icon{width:34px;height:34px;border-radius:50%;background:var(--gold-dim);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;}
.plus-dash-title{font-weight:800;font-size:15px;}
.plus-dash-sub{color:var(--text-dim);font-size:12.5px;}
.plus-dash-row{display:flex;gap:10px;flex-wrap:wrap;}
.plus-tile{flex:1;min-width:120px;background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;transition:transform .15s, border-color .15s;}
.plus-tile:hover{transform:translateY(-2px);border-color:var(--gold);}

/* ---- Elite: bigger, animated glow, crown, tile grid ---- */
.elite-dash{position:relative;overflow:hidden;background:linear-gradient(160deg,#1c1706,var(--bg-elevated) 70%);border:1px solid var(--gold);animation:tierFadeIn .5s ease;}
.elite-dash-glow{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,207,63,0.25),transparent 30%);animation:eliteSpin 6s linear infinite;pointer-events:none;}
.elite-dash-head{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.elite-dash-crown{font-size:28px;filter:drop-shadow(0 0 8px rgba(255,207,63,0.7));animation:elitePulse 2.2s ease-in-out infinite;}
.elite-dash-title{font-weight:800;font-size:18px;color:var(--gold);font-family:var(--elite-font,inherit);}
.elite-dash-sub{color:var(--text-dim);font-size:12.5px;}
.elite-dash-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:520px){.elite-dash-grid{grid-template-columns:repeat(4,1fr);}}
.elite-tile{display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,207,63,0.35);border-radius:12px;padding:14px 8px;font-size:20px;cursor:pointer;transition:transform .15s, box-shadow .15s;color:var(--text);}
.elite-tile span{font-size:11px;font-weight:700;text-align:center;color:var(--text);}
.elite-tile:hover{transform:translateY(-3px);box-shadow:0 0 14px rgba(255,207,63,0.35);}

@keyframes tierFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes eliteSpin{to{transform:rotate(360deg);}}
@keyframes elitePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

/* ============================================================
   ELITE (₹599) — FULL SITE RE-THEME
   This isn't just an accent color — an Elite member gets a
   genuinely different-feeling app: a cinematic black-and-gold
   look across the sidebar menu, hero banner, and every modal
   ("settings" screens), plus a premium serif display font.
   Everything here is scoped to body.tier-elite so Basic/Plus/
   logged-out users see the normal filmiMarg look, unchanged.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&display=swap');

body.tier-elite{
  --gold: #e9c46a;
  --elite-font: 'Playfair Display', Georgia, serif;
  background:
    radial-gradient(ellipse at top, rgba(233,196,106,0.06), transparent 60%),
    linear-gradient(180deg,#0c0906,#100c07 40%,#0a0806);
}

/* ---- Topbar / logo ---- */
body.tier-elite .topbar{background:linear-gradient(180deg,rgba(233,196,106,0.10),transparent);border-bottom:1px solid rgba(233,196,106,0.4);}
body.tier-elite .logo{font-family:var(--elite-font);letter-spacing:0.5px;text-shadow:0 0 16px rgba(233,196,106,0.5);}

/* ---- Sidebar: cinematic black-gold menu, not the default list ---- */
body.tier-elite .sidebar{background:linear-gradient(165deg,#120d06,#1b1409 55%,#120d06);border-right:1px solid rgba(233,196,106,0.35);}
body.tier-elite .sidebar-link{font-family:var(--elite-font);letter-spacing:0.6px;}
body.tier-elite .sidebar-link:hover{border-color:var(--gold-soft);background:rgba(233,196,106,0.08);}
body.tier-elite .sidebar::before{
  content:"ELITE MEMBER"; display:block; text-align:center; font-size:10px; letter-spacing:2px;
  color:var(--on-accent); background:linear-gradient(90deg,#22d3ee,#7dd3fc,#22d3ee); font-weight:800;
  padding:6px 0; margin-bottom:10px; border-radius:0 0 8px 8px;
}

/* ---- Hero banner: ornate gold frame instead of the plain hero ---- */
body.tier-elite .hero{border:1px solid rgba(233,196,106,0.45);border-radius:18px;box-shadow:0 0 0 1px rgba(233,196,106,0.15) inset, 0 20px 50px rgba(0,0,0,0.5);overflow:hidden;position:relative;}
body.tier-elite .hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:18px;
  background:linear-gradient(180deg,rgba(233,196,106,0.10),transparent 30%, transparent 70%, rgba(0,0,0,0.35));
}

/* ---- Modals / "settings" screens (pricing, support, feature, auth) ---- */
body.tier-elite .modal-box,
body.tier-elite .pricing-box,
body.tier-elite .feature-modal-box{
  background:linear-gradient(165deg,#171009,var(--bg-elevated) 70%);
  border:1px solid rgba(233,196,106,0.4);
  font-family:var(--elite-font);
}
body.tier-elite .modal-box h2,
body.tier-elite .pricing-box h2{color:var(--gold);}

/* ---- Buttons: pill-shaped gold gradient for primary actions ---- */
body.tier-elite .btn-primary{
  background:linear-gradient(90deg,#0891b2,#7dd3fc,#0891b2);
  color:var(--on-accent);border:none;border-radius:999px;font-weight:800;
}
body.tier-elite .feature-card:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}

/* ============================================================
   SUPPORT & TERMS MODAL
   ============================================================ */
.support-modal-box{max-width:520px;max-height:82vh;overflow-y:auto;text-align:left;}
.support-section{margin:16px 0;}
.support-section-title{font-weight:800;font-size:14.5px;margin-bottom:6px;}
.support-email{color:var(--gold);font-weight:700;text-decoration:none;}
.support-email:hover{text-decoration:underline;}
.support-terms-body{max-height:280px;overflow-y:auto;padding-right:6px;}
.support-terms-body p{font-size:12.5px;line-height:1.6;color:var(--text-dim);margin:0 0 10px;}
.support-terms-body b{color:var(--text);}

/* ============================================================
   TIER-EXCLUSIVE NAV PILL (Elite Lounge / Plus Picks) — a genuinely
   different top-nav entry per tier, not just a recolored copy.
   ============================================================ */
.tier-nav-pill{
  display:inline-flex;align-items:center;font-size:11px !important;font-weight:800;
  letter-spacing:0.5px;padding:6px 12px;border-radius:999px;margin-right:10px;
  border-bottom:none !important;
}
.tier-nav-pill.elite{background:var(--gold-dim);color:var(--gold) !important;border:1px solid var(--gold);}
.tier-nav-pill.plus{background:var(--gold-dim);color:var(--gold) !important;border:1px solid var(--gold);}

/* Elite-only sidebar entry */
.elite-lounge-link{color:var(--gold);font-weight:700;}
body.tier-elite .elite-lounge-link{font-family:var(--elite-font);letter-spacing:0.6px;}

/* ============================================================
   ELITE — DEEPER PREMIUM PASS
   Makes the ₹599 tier feel like a genuinely different, richer
   product instead of a recolored Basic/Plus screen: custom
   scrollbar, glowing card hovers, subtle grain in the hero frame.
   Scoped entirely to body.tier-elite — Basic/Plus/free untouched.
   ============================================================ */
body.tier-elite{scrollbar-color:var(--gold) #0a0806;}
body.tier-elite::-webkit-scrollbar{width:10px;}
body.tier-elite::-webkit-scrollbar-track{background:#0a0806;}
body.tier-elite::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#e9c46a,#a9782f);border-radius:8px;}
body.tier-elite ::selection{background:var(--gold);color:var(--on-accent);}

body.tier-elite .movie-card{border-color:rgba(233,196,106,0.16);transition:transform .2s, border-color .2s, box-shadow .2s;}
body.tier-elite .movie-card:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(233,196,106,0.3) inset;}
body.tier-elite .poster-wrap img{transition:transform .4s ease;}
body.tier-elite .movie-card:hover .poster-wrap img{transform:scale(1.07);}
body.tier-elite .stat-card{border-color:rgba(233,196,106,0.16);}
body.tier-elite .stat-card:hover{border-color:var(--gold);}
body.tier-elite .elite-dash-crown{cursor:pointer;user-select:none;}

/* subtle cinematic grain layered into the hero's existing gold frame */
body.tier-elite .hero::after{
  background:
    linear-gradient(180deg,rgba(233,196,106,0.10),transparent 30%, transparent 70%, rgba(0,0,0,0.35)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ============================================================
   ELITE SIDE RAIL — a swipeable extras drawer anchored right at
   the bottom-right corner of the hero banner (Elite only). Tap
   the tab, or swipe in from the right edge, to open it.
   ============================================================ */
.elite-rail-grip{
  position:absolute;top:50%;left:-26px;transform:translateY(-50%);
  width:26px;height:130px;border-radius:14px 0 0 14px;
  background:var(--bg-card);border:1px solid var(--gold);border-right:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:grab;touch-action:none;box-shadow:-4px 4px 16px rgba(0,0,0,0.45);
}
.elite-rail-grip:active{cursor:grabbing;}
.elite-rail-grip span{width:12px;height:2px;border-radius:2px;background:var(--gold);opacity:0.85;}

.elite-rail-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:239;opacity:0;pointer-events:none;transition:opacity .2s;}
.elite-rail-overlay.open{opacity:1;pointer-events:auto;}

.elite-rail-panel{
  position:fixed;top:0;right:0;height:100%;width:88vw;max-width:320px;
  background:linear-gradient(165deg,#171009,#15151a 70%);border-left:1px solid rgba(233,196,106,0.4);
  box-shadow:-12px 0 40px rgba(0,0,0,0.5);z-index:240;transform:translateX(100%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:18px 16px;
}
.elite-rail-panel.open{transform:translateX(0);}
.elite-rail-panel-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:15px;color:var(--gold);margin-bottom:16px;font-family:var(--elite-font,inherit);}
.elite-rail-close{background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;padding:4px;}
.elite-rail-panel-body{display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
.elite-rail-item{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(233,196,106,0.2);border-radius:12px;padding:12px;cursor:pointer;color:var(--text);transition:border-color .15s, transform .15s;}
.elite-rail-item:hover{border-color:var(--gold);transform:translateX(-3px);}
.eri-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--gold);}
.eri-icon svg{width:19px;height:19px;}
.eri-text{flex:1;display:flex;flex-direction:column;gap:2px;}
.eri-text b{font-size:13px;font-weight:700;}
.eri-text small{font-size:11px;color:var(--text-dim);}
.eri-toggle{font-size:10px;font-weight:800;letter-spacing:0.5px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,0.08);color:var(--text-dim);flex-shrink:0;}
.eri-toggle.on{background:var(--gold);color:var(--on-accent);}
.elite-rail-hint{margin-top:auto;padding-top:14px;font-size:10.5px;color:var(--text-faint);text-align:center;}

/* Elite Rail — SETTINGS folder (collapsible group holding 10+ quick
   settings shortcuts, so Elite members get one-tap access without
   leaving the rail). Reuses the same sidebar handlers underneath. */
.elite-rail-folder{border:1px solid rgba(233,196,106,0.2);border-radius:12px;background:rgba(255,255,255,0.02);overflow:hidden;}
.elite-rail-folder-head{display:flex;align-items:center;gap:12px;width:100%;padding:12px;background:none;border:none;cursor:pointer;color:var(--text);text-align:left;}
.elite-rail-folder-head:hover{color:var(--gold);}
.elite-rail-folder-chevron{margin-left:auto;flex-shrink:0;width:16px;height:16px;transition:transform .2s;color:var(--text-dim);}
.elite-rail-folder.open .elite-rail-folder-chevron{transform:rotate(180deg);}
.elite-rail-folder-list{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.elite-rail-folder.open .elite-rail-folder-list{max-height:600px;border-top:1px solid rgba(233,196,106,0.15);}
.elite-rail-subitem{display:flex;align-items:center;width:100%;gap:10px;padding:10px 14px 10px 46px;background:none;border:none;border-top:1px solid rgba(255,255,255,0.04);color:var(--text-dim);font-size:12.5px;cursor:pointer;text-align:left;transition:color .15s,background .15s;}
.elite-rail-subitem:first-child{border-top:none;}
.elite-rail-subitem:hover{color:var(--text);background:rgba(255,255,255,0.03);}
.elite-rail-subitem span.esi-state{margin-left:auto;font-size:10.5px;color:var(--text-faint);flex-shrink:0;}

/* ============================================================
   HIDDEN — DIRECTOR'S CUT MODE
   A secret Elite-only cinematic mode, toggled from the Elite
   Rail: sitewide vignette + a soft letterboxed hero. The body
   class is only ever added by that toggle, so it never appears
   for Basic/Plus/free.
   ============================================================ */
body.directors-cut::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}
body.directors-cut::before{
  content:"🎬 DIRECTOR'S CUT";position:fixed;bottom:14px;left:14px;z-index:3;pointer-events:none;
  font-size:10px;letter-spacing:2px;font-weight:800;color:var(--gold);
  background:rgba(0,0,0,0.6);padding:6px 10px;border-radius:999px;border:1px solid rgba(233,196,106,0.4);
}
body.directors-cut .hero{box-shadow:inset 0 42px 0 -8px #000, inset 0 -42px 0 -8px #000;}

/* ============================================================
   TOAST — small confirmation bubble used by Elite Rail actions
   and the hidden easter egg.
   ============================================================ */
.fm-toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);
  background:linear-gradient(90deg,#0891b2,#7dd3fc,#0891b2);color:var(--on-accent);font-weight:800;font-size:13px;
  padding:12px 20px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,0.5);z-index:410;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;text-align:center;max-width:88vw;
}
.fm-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Secret badge unlocked by the hidden crown easter egg */
.popcorn-badge{position:absolute;bottom:-3px;left:-3px;font-size:11px;filter:drop-shadow(0 0 3px rgba(0,0,0,0.7));}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:20px;padding-bottom:2px;}
.admin-tab{
  flex:none;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg-elevated);color:var(--text-dim);font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;
}
.admin-tab.active{background:var(--gold);color:var(--on-accent);border-color:var(--gold);}

.admin-h2{font-size:15px;font-weight:800;margin:0 0 6px;}
.admin-sub{font-size:12.5px;color:var(--text-dim);margin:0 0 14px;line-height:1.5;}

.admin-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.admin-stat{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;text-align:center;
}
.admin-stat-num{font-size:24px;font-weight:800;color:var(--gold);}
.admin-stat-label{font-size:11.5px;color:var(--text-dim);margin-top:4px;}

.admin-search-row{display:flex;gap:8px;margin-bottom:14px;}
.admin-search-row input{
  flex:1;padding:11px 13px;border-radius:8px;background:#0e0e11;
  border:1px solid var(--line);color:var(--text);font-size:14px;
}
.admin-search-row input:focus{border-color:var(--gold);}

.admin-list{display:flex;flex-direction:column;gap:8px;}
.admin-row{
  display:flex;align-items:center;gap:12px;background:var(--bg-card);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;
}
.admin-row-thumb{
  width:36px;height:52px;border-radius:6px;overflow:hidden;flex:none;
  background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:16px;
}
.admin-row-thumb img{width:100%;height:100%;object-fit:cover;}
.admin-row-info{flex:1;min-width:0;}
.admin-row-title{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-row-sub{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.admin-badge{
  display:inline-block;font-size:10px;font-weight:800;color:var(--gold);
  border:1px solid var(--gold);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle;
}
.btn-danger{background:rgba(255,107,107,0.14);color:var(--danger);border-color:rgba(255,107,107,0.4);}
.btn-danger:hover{background:rgba(255,107,107,0.22);}

/* ============================================================
   filmiMarg 2.0 — "RICH & IMMERSIVE" HOME PAGE ENHANCEMENTS
   Purely additive/visual — no HTML or JS changed, so existing
   class names, IDs, and data flow are 100% untouched. These
   rules only make the SAME elements bigger, glowier, and more
   cinematic on the new navy + electric blue/teal theme.
   ============================================================ */

/* ---- Bigger, more cinematic hero ---- */
.hero{
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45), var(--shadow-glow);
}
.hero-slide{min-height:480px;}
.hero-skeleton{height:480px;}
.hero-content{padding:32px 34px 30px;}
.hero-title{
  font-size:28px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-rating{box-shadow:0 0 18px var(--gold-soft);}
.hero-dots button.active{box-shadow:0 0 8px var(--gold);}
@media(min-width:640px){
  .hero-slide{min-height:540px;}
  .hero-skeleton{height:540px;}
  .hero-title{font-size:34px;}
}

/* ---- Richer poster cards: deeper hover, subtle glow, smooth zoom ---- */
.movie-card{
  border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.movie-card:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:var(--gold);
  box-shadow:0 18px 34px rgba(0,0,0,0.5), 0 0 0 1px var(--gold-soft) inset;
  z-index:2;
}
.poster-wrap{position:relative;}
.poster-wrap img{transition:transform .35s ease;}
.movie-card:hover .poster-wrap img{transform:scale(1.06);}
.poster-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(var(--bg-rgb),0.55) 100%);
  opacity:0;transition:opacity .22s;
}
.movie-card:hover .poster-wrap::after{opacity:1;}

/* ---- Section headers: glowing accent bar, extra breathing room ---- */
.section{margin-bottom:44px;}
.section-title .bar{
  box-shadow:0 0 10px var(--gold);
}
.section-title{font-size:15.5px;letter-spacing:0.1px;}

/* ---- Stat cards + feature cards: subtle glow on hover for a premium feel ---- */
.stat-card, .feature-card, .on-this-day-card{
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.feature-card:hover, .stat-card:hover{
  box-shadow:var(--shadow-glow);
}

/* ---- Top bar: soft glow behind logo for a more premium brand feel ---- */
.brand .logo span{text-shadow:0 0 16px var(--gold-soft);}

/* ---- Admin Panel: Site Settings tab ---- */
.theme-field{margin-bottom:20px;}
.theme-field > label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;}
.theme-row{display:flex;align-items:center;gap:10px;}
.theme-toggle{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-dim);cursor:pointer;font-weight:500;}
.theme-toggle input[type="checkbox"]{width:38px;height:22px;accent-color:var(--gold);cursor:pointer;}
.theme-select{
  padding:10px 12px;border-radius:8px;background:#0e0e11;border:1px solid var(--line);
  color:var(--text);font-size:13.5px;cursor:pointer;
}
input[type="color"]{
  width:46px;height:36px;border-radius:8px;border:1px solid var(--line);
  background:none;cursor:pointer;padding:2px;
}
.theme-hex{font-size:13px;color:var(--text-dim);font-family:monospace;}

/* ============================================================
   ONBOARDING SUITE — Login, Language, Age Verification
   Deliberately its OWN fixed palette (deep charcoal + violet),
   NOT the site's --bg/--gold tokens — so it stays a consistent,
   distinct, professional first-run experience (like Netflix/
   Spotify/Jio Hotstar) no matter what theme colors an admin
   picks for the rest of the site in Site Settings, and never
   shifts with the background auto-cycle either.
   ============================================================ */
.onboarding-cover{
  --onb-bg:        #0a0a0f;
  --onb-bg-2:      #15151d;
  --onb-card:      #181820;
  --onb-line:      #2b2b36;
  --onb-text:      #f5f5f8;
  --onb-text-dim:  #9a9aa8;
  --onb-accent:    #7c5cff;
  --onb-accent-2:  #9b7bff;
  --onb-on-accent: #ffffff;

  position:fixed !important;inset:0 !important;
  background:radial-gradient(circle at 50% 0%, #201a3d 0%, var(--onb-bg) 60%) !important;
}
.onboarding-cover.lang-overlay{display:none;}
.onboarding-cover.lang-overlay.open{display:flex;}

.onboarding-cover .modal-box{
  background:var(--onb-card);border:1px solid var(--onb-line);
  max-width:420px;padding:36px 30px 30px;box-shadow:0 24px 70px rgba(0,0,0,0.6);
}
.onboard-brand{text-align:center;margin-bottom:22px;}
.onboard-brand .logo{
  font-family:"Sora","Manrope",sans-serif;font-size:24px;font-weight:800;
  color:var(--onb-text);letter-spacing:-0.3px;
}
.onboard-brand .logo span{color:var(--onb-accent);}

.onboarding-cover .modal-box h2{color:var(--onb-text);text-align:center;}
.onboarding-cover .modal-box p{color:var(--onb-text-dim);text-align:center;}
.onboarding-cover .auth-tabs{background:var(--onb-bg-2);border:1px solid var(--onb-line);}
.onboarding-cover .auth-tab{color:var(--onb-text-dim);}
.onboarding-cover .auth-tab.active{background:var(--onb-accent);color:var(--onb-on-accent);}
.onboarding-cover input, .onboarding-cover select{
  background:var(--onb-bg-2) !important;border:1px solid var(--onb-line) !important;color:var(--onb-text) !important;
}
.onboarding-cover input:focus, .onboarding-cover select:focus{border-color:var(--onb-accent) !important;outline:none;}
.onboarding-cover .btn-primary{background:var(--onb-accent);color:var(--onb-on-accent);}
.onboarding-cover .btn-primary:hover{background:var(--onb-accent-2);}
.onboarding-cover .btn-ghost{border-color:var(--onb-line);color:var(--onb-text-dim);}
.onboarding-cover .modal-note, .onboarding-cover .modal-note a{color:var(--onb-text-dim);}
.onboarding-cover .lang-overlay-title{color:var(--onb-text);}
.onboarding-cover .lang-overlay-close{background:var(--onb-bg-2);border-color:var(--onb-line);color:var(--onb-text);}
.onboarding-cover .lang-overlay-search{background:var(--onb-bg-2);border-color:var(--onb-line);}
.onboarding-cover .lang-overlay-search input{color:var(--onb-text);}
.onboarding-cover .onboard-title{color:var(--onb-text);}
.onboarding-cover .onboard-sub{color:var(--onb-text-dim);}
.onboarding-cover .onboard-search-wrap input{background:var(--onb-bg-2);border-color:var(--onb-line);color:var(--onb-text);}
.onboarding-cover .lang-group-title{color:var(--onb-accent-2);}
.onboarding-cover .onboard-search-wrap input:focus{border-color:var(--onb-accent) !important;}
.onboarding-cover .onboard-chip{background:var(--onb-bg-2);border-color:var(--onb-line);color:var(--onb-text-dim);}
.onboarding-cover .onboard-chip:hover{border-color:var(--onb-accent);}
.onboarding-cover .onboard-chip.selected{background:var(--onb-accent);color:var(--onb-on-accent);border-color:var(--onb-accent);}