*{margin:0;padding:0;box-sizing:border-box}
/* Respect system "Reduce motion" preference. Vestibular-disorder users + iOS
   "Reduce Motion" toggle. Keep transitions short rather than eliminating them
   entirely so focus indicators + state changes still feel responsive. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* iOS Safari auto-zooms any input <16px font-size on focus. Force-floor all
   form controls to 16px so the page never flips into "zoom + scroll back"
   mid-typing. Per-control overrides elsewhere can still go larger. */
input,textarea,select{font-size:16px}
:root{
  /* Explicit color-scheme so Chrome/Brave "Force dark mode for web contents"
     doesn't invert our designed palette. "dark light" = we support both
     (handled by toggleTheme); dark-first keeps UA widgets aligned with the
     dark chrome while content panels stay author-painted cream. */
  color-scheme:dark light;
  --ink:#0A0A0A;
  --paper:#F5F1EA;
  --accent:#E03C28;
  --accent-soft:#FFE5E2;
  --dim:#8A8680;
  --line:rgba(10,10,10,0.12);
  --line-dark:rgba(245,241,234,0.12);
}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
  overflow-x:hidden;
}
.serif{font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:-0.02em}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.1em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
.container{max-width:1400px;margin:0 auto;padding:0 32px}
@media (max-width:768px){.container{padding:0 20px}}

/* ================ NAVBAR ================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 28px;
  display:flex;align-items:center;
  /* Was mix-blend-mode:difference — produced garbled/pusing visuals when nav
     crossed a film-poster marquee or busy hero image. Replaced with a subtle
     translucent backdrop + blur that stays readable on any content. */
  background:linear-gradient(to bottom, rgba(10,9,7,0.82) 0%, rgba(10,9,7,0.55) 70%, rgba(10,9,7,0) 100%);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  color:var(--paper);
  gap:14px;
}
body.theme-light .nav{
  background:linear-gradient(to bottom, rgba(243,238,227,0.85) 0%, rgba(243,238,227,0.6) 70%, rgba(243,238,227,0) 100%);
  color:var(--ink);
}
/* Right cluster (lang + theme + auth) tight-packed to the right.
   nav-links sits tight after logo on the left. Free space lives between them. */
.lang-nav-wrap{margin-left:auto}
@media (max-width:900px){
  /* On mobile, nav-quiz-mobile owns the margin-left:auto — reset lang-nav-wrap */
  .lang-nav-wrap{margin-left:0}
}
/* When any nav popup is open, disable mix-blend-mode so the dropdown/panel
   contents don't difference-blend against the backdrop (e.g. hero poster
   bleeding through the avatar dropdown). Paints a solid ink bg so nav text
   stays readable while popup is open. */
.nav:has(.nav-dropdown.open),
.nav:has(.notif-panel),
.nav:has(.user-search-panel){
  mix-blend-mode:normal;
  background:var(--ink);
  color:var(--paper);
}
/* Tighten .nav-auth on narrower desktops so the search/notif/avatar/CTA don't overlap. */
@media (min-width:901px) and (max-width:1200px){
  .nav{padding:14px 20px;gap:6px}
  .nav-links{gap:16px}
  .nav-cta{padding:9px 14px;font-size:12px}
  .notif-bell-btn, .user-search-btn{width:34px;height:34px;font-size:14px}
}
.nav-logo{font-family:'Instrument Serif',serif;font-weight:400;font-size:28px;letter-spacing:-0.012em;flex-shrink:0;line-height:1;display:inline-flex;align-items:flex-end;gap:4px;white-space:nowrap}
.nav-logo i{color:var(--accent);font-style:italic}
.nav-logo-spark{font-size:11px;color:rgba(245,241,234,0.45);transform:translateY(-14px);transition:color 0.2s,transform 0.4s}
.nav-logo:hover .nav-logo-spark{color:var(--accent);transform:translateY(-14px) rotate(90deg)}
body.theme-light .nav-logo-spark{color:rgba(20,20,20,0.4)}
.nav-links{display:flex;gap:28px;font-size:13px;font-weight:500;align-items:center}
.nav-links a{opacity:0.9;transition:opacity 0.2s;padding:8px 0;min-height:44px;display:flex;align-items:center}
.nav-links a:hover{opacity:1}
/* Icon-only Watchlist in desktop nav (eval v4: reduce text clutter) */
.nav-watchlist-icon{
  position:relative;width:40px;height:40px;border-radius:50%;
  justify-content:center;padding:0;
  background:rgba(245,241,234,0.06);
  transition:background 0.15s ease;
}
.nav-watchlist-icon:hover{background:rgba(245,241,234,0.15);opacity:1}
.nwi-icon{font-size:18px;line-height:1}
.nav-watchlist-icon .wl-count-badge{
  position:absolute;top:-2px;right:-2px;margin-left:0;
  box-shadow:0 0 0 2px var(--ink);
}
/* Hide desktop lang selector (moved to footer per eval v4 P0) */
.lang-selector-hidden{display:none !important}
/* Footer lang selector styling */
.footer-lang{display:flex;gap:6px;flex-wrap:wrap}
.footer-lang .lang-pill{
  padding:5px 10px;font-size:11px;min-height:28px;
  background:rgba(245,241,234,0.08);color:rgba(245,241,234,0.7);
  border:1px solid rgba(245,241,234,0.12);border-radius:999px;
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  transition:all 0.15s ease;
}
.footer-lang .lang-pill.active{background:var(--accent);border-color:var(--accent);color:white}
.footer-lang .lang-pill:hover:not(.active){background:rgba(245,241,234,0.15)}
.footer-lang .lang-flag{font-size:13px}
.nav-cta{
  background:white;color:black;padding:12px 20px;
  border-radius:999px;font-weight:600;font-size:13px;
  mix-blend-mode:normal;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
}
.nav-burger{
  display:none;background:transparent;color:inherit;width:44px;height:44px;
  align-items:center;justify-content:center;border-radius:10px;flex-shrink:0;
  font-size:20px;cursor:pointer;
}
.nav-mobile-menu{
  display:none;position:fixed;top:64px;left:0;right:0;z-index:99;
  background:var(--ink);border-top:1px solid rgba(245,241,234,0.1);
  padding:12px 20px 20px;
  box-shadow:0 12px 32px rgba(0,0,0,0.4);
}
.nav-mobile-menu.open{display:block}
.nav-mobile-menu a{
  display:flex;align-items:center;min-height:44px;padding:0 8px;
  color:var(--paper);font-size:14.5px;font-weight:500;
  border-bottom:1px solid rgba(245,241,234,0.04);
}
.nav-mobile-menu a:last-child{border-bottom:none}
.nav-pill-meta{
  margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:0.16em;font-weight:700;color:rgba(212,167,74,0.85);
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:rgba(212,167,74,0.08);border:1px solid rgba(212,167,74,0.2);
}
.nav-group-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(245,241,234,0.4);
  padding:12px 8px 4px;border-bottom:none;
}
.nav-group-label:first-child{padding-top:4px}
/* Collapsible "Lainnya" group for demoted secondary features */
.nav-more-group{
  border:none;margin:0;padding:0;
}
.nav-more-group > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;min-height:44px;padding:0 8px;
  color:rgba(245,241,234,0.6);font-size:13px;font-weight:500;
  border-bottom:1px solid rgba(245,241,234,0.04);
}
.nav-more-group > summary::-webkit-details-marker{display:none}
.nav-more-group > summary::after{
  content:'›';margin-left:auto;font-size:20px;
  color:rgba(245,241,234,0.35);transition:transform 0.15s ease;
}
.nav-more-group[open] > summary::after{transform:rotate(90deg)}
.nav-more-group > a{padding-left:18px !important}
@media (max-width:900px){
  .nav-links{display:none}
  .nav{padding:12px 16px;gap:8px}
  .nav-logo{font-size:20px}
  .nav-burger{display:inline-flex}
  /* Move language switcher into the burger menu on mobile (frees nav space) */
  .lang-selector{display:none}
  .nav-cta{padding:10px 14px;font-size:12px;min-height:40px}
  .nav-cta-login{padding:10px 10px;font-size:12px;min-height:40px}
  /* Hide marquee on mobile — pure noise on small screens */
  .marquee{display:none}
  /* Hide desktop hero-actions ghost button on small screens if any remains */
}
/* Language switcher row inside mobile burger menu */
.nav-mobile-langs{
  display:flex;gap:8px;padding:12px 0 4px;margin-top:8px;
  border-top:1px solid rgba(245,241,234,0.08);flex-wrap:wrap;
}
.nav-mobile-langs .lang-pill{
  min-height:40px;padding:6px 12px;border-radius:999px;
  background:rgba(245,241,234,0.08);color:var(--paper);
  border:1px solid rgba(245,241,234,0.15);font-size:13px;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
}
.nav-mobile-langs .lang-pill.active{background:var(--accent);border-color:var(--accent);color:white}
.nav-mobile-langs .lang-pill .lang-flag{font-size:16px}

/* Sticky bottom nav (mobile only) — 5 core actions */
.sticky-bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;
  background:rgba(15,15,15,0.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(245,241,234,0.08);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  gap:2px;
}
.sbn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 2px;min-height:56px;min-width:0;
  background:transparent;border:none;color:rgba(245,241,234,0.68);
  cursor:pointer;border-radius:10px;text-decoration:none;
  transition:all 0.15s ease;position:relative;
}
.sbn-item:active{transform:scale(0.94);background:rgba(245,241,234,0.08)}
.sbn-icon{font-size:20px;line-height:1}
.sbn-label{font-size:9.5px;font-weight:600;letter-spacing:0.01em;white-space:nowrap}
/* 5-item layout: slightly tighter */
.sbn-5 .sbn-icon{font-size:19px}
.sbn-5 .sbn-label{font-size:9px}
@media (min-width:380px){
  .sbn-5 .sbn-icon{font-size:20px}
  .sbn-5 .sbn-label{font-size:9.5px}
}
/* Primary (AI Quiz) = emphasized accent center */
.sbn-primary{
  color:var(--accent);
}
.sbn-primary .sbn-icon-primary{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--accent);color:white;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:21px;
  box-shadow:0 4px 12px rgba(224,60,40,0.4);
  margin-top:-8px;
}
.sbn-primary .sbn-label{color:var(--accent);font-weight:700}
/* Watchlist badge on bottom nav — positioned over the icon */
.sbn-badge{
  position:absolute;top:3px;right:50%;transform:translateX(16px);
  min-width:15px;height:15px;font-size:9px;padding:0 4px;
  background:var(--accent);color:white;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 0 0 2px rgba(15,15,15,0.96);
}
@media (max-width:900px){
  .sticky-bottom-nav{display:flex}
  body{padding-bottom:76px}
}
/* Legacy sticky-cta — kept only for any residual references, hidden */
.sticky-cta{display:none !important}

/* Mobile-only "AI Quiz" button in top nav (between logo and burger) */
.nav-quiz-mobile{
  display:none;align-items:center;gap:6px;
  background:var(--accent);color:white;border:none;
  padding:8px 14px;border-radius:999px;
  font-size:12.5px;font-weight:700;cursor:pointer;
  mix-blend-mode:normal;min-height:38px;
  box-shadow:0 2px 8px rgba(224,60,40,0.3);
}
.nav-quiz-mobile:active{transform:scale(0.96)}
.nqm-icon{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:15px;line-height:1;
}
@media (max-width:900px){
  .nav-quiz-mobile{display:inline-flex;margin-left:auto}
  /* Hide desktop auth on mobile so AI Quiz button + burger are the only actions.
     !important is load-bearing: a later rule (line ~5016) redeclares
     .nav-auth{display:flex} without a media-query guard and wins the cascade.
     Without !important the logged-in bell/search/avatar/Mulai stack overflows
     the 375px viewport by ~160px, pushing the hamburger (and profile access)
     completely off-screen. On mobile all of those move into #navMobileMenu. */
  .nav-auth{display:none !important}
}

/* ========= WATCHLIST + SHARE BUTTONS ========= */
.wl-btn{
  background:rgba(245,241,234,0.08);color:var(--paper);
  border:1px solid rgba(245,241,234,0.2);border-radius:10px;
  padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;min-height:42px;
  transition:all 0.15s ease;
}
.wl-btn:hover{background:rgba(245,241,234,0.15);border-color:rgba(245,241,234,0.35)}
.wl-btn.saved{background:rgba(212,167,74,0.18);border-color:#D4A74A;color:#D4A74A}
.wl-share-btn{
  background:rgba(37,211,102,0.15);color:#25D366;
  border:1px solid rgba(37,211,102,0.4);border-radius:10px;
  padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;min-height:42px;
  transition:all 0.15s ease;
}
.wl-share-btn:hover{background:rgba(37,211,102,0.25);border-color:#25D366}
.wl-ig-btn{
  background:linear-gradient(135deg,rgba(225,48,108,0.18),rgba(245,133,41,0.15));
  color:#F58529;
  border:1px solid rgba(225,48,108,0.45);border-radius:10px;
  padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;min-height:42px;
  transition:all 0.15s ease;
}
.wl-ig-btn:hover{background:linear-gradient(135deg,rgba(225,48,108,0.3),rgba(245,133,41,0.25));border-color:#E1306C}
.btn-next-rank{
  background:rgba(245,241,234,0.08);color:var(--paper);
  border:1px solid rgba(245,241,234,0.2);
}
.btn-wl-save-all{
  background:rgba(212,167,74,0.15);color:#D4A74A;
  border:1px solid #D4A74A;border-radius:12px;font-weight:600;
}
.btn-wl-save-all:hover{background:rgba(212,167,74,0.25)}

/* Watchlist count badge (nav) */
.wl-count-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-left:4px;
  border-radius:999px;background:var(--accent);color:white;
  font-size:10px;font-weight:700;line-height:1;
}
.nav-watchlist-link{position:relative}

/* Watchlist modal content */
.wl-modal{color:var(--paper)}

/* Available-now toggle — audit S2 W-01. Free-tier filter that hides watchlist
   items with no ID streaming providers. iOS-style switch + label + count. */
.wl-avail-row{padding:10px 14px 0;display:flex}
.wl-avail-toggle{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.12);border-radius:999px;
  color:rgba(245,241,234,0.78);font-family:inherit;font-size:12.5px;
  cursor:pointer;transition:all .18s ease;
}
.wl-avail-toggle:hover{background:rgba(245,241,234,0.08);color:var(--paper)}
.wl-avail-toggle.on{
  background:rgba(122,166,125,0.14);border-color:rgba(122,166,125,0.5);color:#7AA67D;
}
.wlat-knob{
  width:30px;height:16px;border-radius:999px;background:rgba(245,241,234,0.18);
  position:relative;flex-shrink:0;transition:background .18s ease;
}
.wlat-knob::after{
  content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;
  border-radius:50%;background:rgba(245,241,234,0.85);transition:transform .18s ease, background .18s ease;
}
.wl-avail-toggle.on .wlat-knob{background:#7AA67D}
.wl-avail-toggle.on .wlat-knob::after{transform:translateX(14px);background:#0a0907}
.wlat-label{white-space:nowrap}
.wlat-count{
  font-size:10px;letter-spacing:0.14em;color:rgba(245,241,234,0.55);
  padding-left:4px;border-left:1px solid rgba(245,241,234,0.18);margin-left:4px;
}

/* Tonight Pick banner — audit S2 W-02. 1-tap decision-fatigue solver at top
   of watchlist. Daily-stable selection so refreshing doesn't reroll. */
.wl-tonight{
  display:block;margin:14px 14px 0;padding:14px 16px;
  background:linear-gradient(135deg,rgba(212,167,74,0.10),rgba(224,60,40,0.06));
  border:1px solid rgba(212,167,74,0.32);border-left:3px solid #D4A74A;
  cursor:pointer;transition:transform .15s ease, border-color .2s ease, background .2s ease;
  outline:none;
}
.wl-tonight:hover{
  background:linear-gradient(135deg,rgba(212,167,74,0.16),rgba(224,60,40,0.10));
  border-color:rgba(212,167,74,0.5);transform:translateY(-1px);
}
.wl-tonight:focus-visible{box-shadow:0 0 0 2px rgba(212,167,74,0.6)}
.wlt-eyebrow{
  font-size:9.5px;letter-spacing:0.22em;color:#D4A74A;
  text-transform:uppercase;font-weight:700;margin-bottom:8px;
}
.wlt-row{display:flex;gap:14px;align-items:center}
.wlt-poster{
  width:54px;height:80px;object-fit:cover;border-radius:4px;flex-shrink:0;
  background:#0a0907;
}
.wlt-no-poster{
  display:flex;align-items:center;justify-content:center;font-size:24px;
  color:rgba(245,241,234,0.4);
}
.wlt-body{flex:1;min-width:0}
.wlt-title{
  font-family:'Instrument Serif',serif;font-size:20px;line-height:1.15;
  color:var(--paper);letter-spacing:-0.01em;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wlt-meta{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.12em;
  color:rgba(245,241,234,0.55);text-transform:uppercase;margin-top:3px;
}
.wlt-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.16em;
  color:#D4A74A;text-transform:uppercase;font-weight:600;
}
.wlt-arrow{font-size:13px;transition:transform .2s ease}
.wl-tonight:hover .wlt-arrow{transform:translateX(3px)}
@media (max-width:520px){
  .wl-tonight{margin:10px 10px 0;padding:12px 14px}
  .wlt-poster{width:46px;height:68px}
  .wlt-title{font-size:18px}
}
/* Empty state with prominent CTA (eval v3 item #5) */
.wl-empty{
  padding:56px 24px 40px;text-align:center;max-width:480px;margin:0 auto;
}
.wl-empty-icon{
  font-size:56px;margin-bottom:16px;
  animation:wlFloat 3s ease-in-out infinite;
}
@keyframes wlFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.wl-empty-title{
  font-family:'Instrument Serif',serif;font-size:28px;line-height:1.1;
  color:var(--paper);margin:0 0 10px;letter-spacing:-0.01em;
}
.wl-empty-sub{
  color:rgba(245,241,234,0.7);font-size:14.5px;line-height:1.55;
  margin:0 0 24px;
}
.wl-empty-sub strong{color:var(--paper);font-weight:600}
.wl-empty-actions{
  display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:22px;
}
.wl-empty-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;font-size:15px;font-weight:700;min-height:48px;
  box-shadow:0 8px 24px rgba(224,60,40,0.3);
}
.wl-empty-alt{
  background:transparent;color:rgba(245,241,234,0.75);
  border:none;padding:10px 16px;font-size:13px;cursor:pointer;
}
.wl-empty-alt:hover{color:var(--paper)}
.wl-empty-hint{
  display:flex;gap:8px;align-items:flex-start;
  padding:12px 14px;border-radius:10px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  font-size:12.5px;line-height:1.5;color:rgba(245,241,234,0.65);text-align:left;
}
.wl-empty-hint strong{color:var(--paper);font-weight:600}
@media (max-width:520px){
  .wl-empty{padding:40px 20px 28px}
  .wl-empty-title{font-size:24px}
  .wl-empty-sub{font-size:13.5px}
  .wl-empty-cta{font-size:14px;padding:13px 22px;min-height:46px}
}
.wl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}
.wl-item{
  position:relative;cursor:pointer;border-radius:10px;overflow:hidden;
  background:rgba(245,241,234,0.04);transition:transform 0.15s ease;
}
.wl-item:hover{transform:translateY(-2px)}
.wl-item img{
  width:100%;aspect-ratio:2/3;object-fit:cover;display:block;
  background:#000;
}
.wl-no-poster{
  width:100%;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;
  background:rgba(245,241,234,0.1);font-size:40px;
}
.wl-item-body{padding:10px 12px 12px}
.wl-item-title{
  font-size:13px;font-weight:600;color:var(--paper);
  line-height:1.25;margin-bottom:4px;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wl-item-meta{
  font-size:11px;color:rgba(245,241,234,0.55);
  font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;
}
.wl-item-remove{
  position:absolute;top:6px;right:6px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,0.7);color:white;border:none;font-size:18px;
  cursor:pointer;opacity:0;transition:opacity 0.15s ease;
  display:flex;align-items:center;justify-content:center;
}
.wl-item:hover .wl-item-remove,.wl-item:focus-within .wl-item-remove{opacity:1}
@media (hover:none){.wl-item-remove{opacity:1}}

/* ========= BUILT WITH CLAUDE (footer badge) ========= */
.built-with-claude{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;margin-left:auto;
  background:rgba(204,117,85,0.08);
  border:1px solid rgba(204,117,85,0.25);border-radius:999px;
  color:rgba(245,241,234,0.85);text-decoration:none;
  font-size:12px;font-weight:500;
  transition:all 0.15s ease;
}
.built-with-claude:hover{
  background:rgba(204,117,85,0.15);
  border-color:rgba(204,117,85,0.45);
  color:var(--paper);
}
.bwc-label{font-weight:400;opacity:0.8;letter-spacing:0.02em}
.bwc-brand{
  display:inline-flex;align-items:center;gap:3px;
  color:#CC7555;font-weight:600;
}
.bwc-spark{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:14px;line-height:1;color:#CC7555;
}
.bwc-name{letter-spacing:0.01em}
.footer-bottom{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:600px){
  .footer-bottom{justify-content:flex-start}
  .built-with-claude{margin-left:0;font-size:11px;padding:5px 10px}
}

/* ========= AI TRANSPARENCY LINK (under hero CTA) ========= */
.ai-transparency-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:8px 14px;background:transparent;color:rgba(245,241,234,0.6);
  border:none;cursor:pointer;font-size:12.5px;font-weight:500;
  letter-spacing:0.02em;transition:color 0.15s ease;
}
.ai-transparency-link:hover{color:#D4A74A}
.ai-transparency-link .atl-icon{
  font-size:14px;opacity:0.7;font-weight:600;
  width:18px;height:18px;border-radius:50%;
  border:1px solid currentColor;display:inline-flex;
  align-items:center;justify-content:center;line-height:1;
}
.ai-transparency-link .atl-arrow{transition:transform 0.15s ease}
.ai-transparency-link:hover .atl-arrow{transform:translateX(3px)}

/* ========= AI TRANSPARENCY MODAL ========= */
.ai-trans-modal{max-width:680px;padding:0;background:#121212}
.ai-trans-head{padding:40px 32px 24px;border-bottom:1px solid rgba(245,241,234,0.08)}
.ai-trans-badge{
  display:inline-block;padding:4px 10px;margin-bottom:12px;
  background:rgba(224,60,40,0.12);color:var(--accent);
  font-size:10px;letter-spacing:0.2em;font-weight:600;
  border-radius:4px;font-family:'JetBrains Mono',monospace;
}
.ai-trans-title{
  font-family:'Instrument Serif',serif;font-size:34px;line-height:1.1;
  color:var(--paper);margin:0 0 12px;letter-spacing:-0.01em;
}
.ai-trans-title em{color:#D4A74A;font-style:italic}
.ai-trans-sub{
  color:rgba(245,241,234,0.65);font-size:15px;line-height:1.5;margin:0;
}
.ai-trans-sections{padding:24px 32px 16px}
.ats-row{
  display:flex;gap:16px;padding:18px 0;
  border-bottom:1px solid rgba(245,241,234,0.06);
}
.ats-row:last-child{border-bottom:none}
.ats-label{
  flex-shrink:0;width:130px;font-size:10px;letter-spacing:0.15em;
  color:#D4A74A;font-weight:600;padding-top:4px;
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;
}
.ats-body{flex:1;min-width:0;color:rgba(245,241,234,0.9);font-size:14px;line-height:1.55}
.ats-body strong{color:var(--paper);font-weight:600}
.ats-body a{color:#D4A74A;text-decoration:underline;text-underline-offset:3px}
.ats-desc{margin-top:6px;color:rgba(245,241,234,0.65);font-size:13px;line-height:1.55}
.ats-danger ul{margin:0;padding-left:18px}
.ats-danger li{margin-bottom:6px;color:rgba(245,241,234,0.8);font-size:13px;line-height:1.5}
.ai-trans-footer{
  padding:20px 32px 32px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(245,241,234,0.08);
}
.ai-trans-footer .btn-primary{padding:12px 20px;font-size:14px}
.ai-trans-source{
  color:rgba(245,241,234,0.5);font-size:12px;letter-spacing:0.05em;
  text-decoration:none;transition:color 0.15s ease;
}
.ai-trans-source:hover{color:#D4A74A}
@media (max-width:640px){
  .ai-trans-head{padding:28px 20px 20px}
  .ai-trans-title{font-size:26px}
  .ai-trans-sections{padding:16px 20px 12px}
  .ats-row{flex-direction:column;gap:6px;padding:14px 0}
  .ats-label{width:auto}
  .ai-trans-footer{padding:16px 20px calc(20px + env(safe-area-inset-bottom,0))}
}

/* ========= SOCIAL PROOF (testimonials + rating) ========= */
.social-proof{
  margin-top:16px;padding:14px 18px;max-width:540px;
  border:1px solid rgba(212,167,74,0.18);
  background:linear-gradient(180deg,rgba(212,167,74,0.06),rgba(212,167,74,0.02));
  border-radius:12px;
}
.sp-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.sp-stars{color:#D4A74A;font-size:16px;letter-spacing:2px;line-height:1}
.sp-stars .sp-half{opacity:0.5}
.sp-rating-num{color:var(--paper);font-size:13px;font-weight:600}
.sp-rating-num strong{color:#D4A74A;font-size:15px}
.sp-rating-denom{color:rgba(245,241,234,0.5);font-size:12px;font-weight:400}
.sp-rating-label{color:rgba(245,241,234,0.55);font-size:11.5px;letter-spacing:0.03em}
.sp-testimonials{position:relative;min-height:52px;overflow:hidden}
.sp-quote{
  position:absolute;inset:0;opacity:0;transform:translateY(8px);
  transition:opacity 0.5s ease,transform 0.5s ease;pointer-events:none;
}
.sp-quote.sp-active{opacity:1;transform:translateY(0);pointer-events:auto}
.sp-text{
  font-family:'Instrument Serif',serif;font-style:italic;
  color:rgba(245,241,234,0.92);font-size:14.5px;line-height:1.45;
}
.sp-author{
  margin-top:4px;color:rgba(245,241,234,0.5);font-size:11px;
  letter-spacing:0.03em;font-family:'JetBrains Mono',monospace;
}

/* ========= "NONTON DI X" CTA (quiz result slides) ========= */
.watch-now-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;background:#E50914;color:white;
  border-radius:10px;text-decoration:none;font-weight:600;
  font-size:13px;transition:all 0.15s ease;min-height:46px;
  flex:1 1 auto;justify-content:center;
  box-shadow:0 4px 12px rgba(229,9,20,0.3);
}
.watch-now-cta:hover{background:#f11c27;transform:translateY(-1px);box-shadow:0 6px 16px rgba(229,9,20,0.4)}
.watch-now-cta:active{transform:translateY(0)}
.wnc-logo{
  width:22px;height:22px;border-radius:4px;object-fit:cover;
  background:#000;flex-shrink:0;
}
.wnc-label{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.wnc-prefix{opacity:0.9;font-weight:500;font-size:12px}
.wnc-arrow{font-size:16px;margin-left:auto;opacity:0.9}

/* Provider-specific colors */
.watch-now-cta[data-provider*="Netflix"]{background:#E50914;box-shadow:0 4px 12px rgba(229,9,20,0.3)}
.watch-now-cta[data-provider*="Viu"]{background:#0062FF;box-shadow:0 4px 12px rgba(0,98,255,0.3)}
.watch-now-cta[data-provider*="Disney"]{background:#0c3d8f;box-shadow:0 4px 12px rgba(12,61,143,0.3)}
.watch-now-cta[data-provider*="Vidio"]{background:#4E45D5;box-shadow:0 4px 12px rgba(78,69,213,0.3)}
.watch-now-cta[data-provider*="WeTV"]{background:#F3C01C;color:#1a1a1a;box-shadow:0 4px 12px rgba(243,192,28,0.3)}
.watch-now-cta[data-provider*="Prime"]{background:#00A8E1;box-shadow:0 4px 12px rgba(0,168,225,0.3)}
.watch-now-cta[data-provider*="iQIYI"]{background:#00be06;box-shadow:0 4px 12px rgba(0,190,6,0.3)}

/* ========= STICKY CTA SCROLL-HIDE ANIMATION ========= */
.sticky-cta{
  transition:transform 0.3s cubic-bezier(.4,0,.2,1),opacity 0.3s ease;
}
.sticky-cta.sticky-cta-hidden{
  transform:translateY(calc(100% + env(safe-area-inset-bottom,0) + 10px));
  opacity:0;pointer-events:none;
}

/* ========= TRUST SIGNAL BAR ========= */
.trust-signal-bar{
  display:flex;gap:24px;margin-top:20px;padding:12px 16px;max-width:540px;
  border:1px solid rgba(245,241,234,0.12);border-radius:10px;
  background:rgba(245,241,234,0.03);flex-wrap:wrap;
}
.ts-item{display:flex;flex-direction:column;min-width:0;gap:2px}
.ts-item strong{
  color:#D4A74A;font-family:'Playfair Display',serif;
  font-size:17px;font-weight:600;line-height:1;
}
.ts-item span{
  color:rgba(245,241,234,0.55);font-size:10.5px;
  letter-spacing:0.05em;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}
@media (max-width:600px){
  .trust-signal-bar{gap:14px;padding:10px 14px}
  .ts-item strong{font-size:15px}
  .ts-item span{font-size:9.5px}
}

/* ========= QUICK MOOD PICKER ========= */
.mood-picker{
  margin-top:22px;padding:18px 20px;max-width:560px;
  border:1px solid rgba(245,241,234,0.1);border-radius:14px;
  background:rgba(245,241,234,0.03);
}
/* Hero variant — primary CTA emphasis (eval v3: mood picker = primary action) */
.mood-picker-hero{
  margin-top:28px;padding:20px 22px;
  border:1.5px solid rgba(224,60,40,0.35);
  background:linear-gradient(135deg,rgba(224,60,40,0.06) 0%,rgba(224,60,40,0.02) 100%);
  box-shadow:0 8px 32px rgba(224,60,40,0.08);
}
.mood-picker-hero .mood-btn{
  padding:12px 8px;
  background:rgba(245,241,234,0.08);
  border:1px solid rgba(245,241,234,0.16);
}
.mood-picker-hero .mood-emoji{font-size:24px}
.mood-picker-hero .mood-label{font-size:12.5px;font-weight:700}

/* Secondary actions row under mood picker (full quiz + transparency link) */
/* Primary hero CTA: dominant AI Quiz button + strong AI Swipe secondary CTA.
   Widened so both buttons sit side-by-side on desktop; wraps on smaller widths. */
.hero-primary-cta{
  display:flex;align-items:center;gap:14px;margin-top:22px;max-width:720px;flex-wrap:wrap;
}
.hero-quiz-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:white;
  border:none;border-radius:14px;
  padding:16px 24px;font-size:16px;font-weight:700;letter-spacing:-0.01em;
  cursor:pointer;transition:transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow:0 10px 30px -12px rgba(224,60,40,0.55), 0 2px 6px rgba(0,0,0,0.15);
  min-height:54px;
}
.hero-quiz-btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(224,60,40,0.7), 0 4px 10px rgba(0,0,0,0.2)}
.hero-quiz-btn:active{transform:translateY(0)}
.hero-quiz-btn .hqb-spark{font-size:18px;line-height:1}
.hero-quiz-btn .hqb-label{white-space:nowrap}
.hero-quiz-btn .hqb-meta{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,0.18);color:rgba(255,255,255,0.95);
  margin-left:4px;
}
.hero-quiz-secondary{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  color:rgba(245,241,234,0.55);font-size:13px;font-weight:500;
  padding:6px 4px;text-decoration:none;
}
.hero-quiz-secondary:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
/* Secondary text-link row — replaces dual primary buttons (eval v6.1 P0).
   AI Swipe + Trending live here as compact links so AI Quiz stays the
   single dominant CTA above the fold. */
.hero-secondary-links{
  display:flex;align-items:center;gap:18px;margin-top:14px;flex-wrap:wrap;
}
.hero-secondary-links a{
  color:rgba(245,241,234,0.7);font-size:13.5px;font-weight:600;
  text-decoration:none;padding:6px 2px;
  transition:color 0.15s ease;
}
.hero-secondary-links a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
body.theme-light .hero-secondary-links a{color:rgba(26,20,8,0.65)}
body.theme-light .hero-secondary-links a:hover{color:#1A1408}

/* Secondary hero CTA: AI Swipe. Visible "second door" to discovery, clearly
   distinct from the dominant AI Quiz button. Includes mini stacked-card affordance
   + FUN badge so the interaction model is legible in <1s. */
.hero-swipe-btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,rgba(40,40,40,0.82) 0%,rgba(25,25,25,0.9) 100%);
  color:var(--paper);text-decoration:none;
  border:1.5px solid rgba(224,60,40,0.4);border-radius:14px;
  padding:13px 18px 13px 14px;min-height:54px;
  box-shadow:0 10px 30px -16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
  transition:transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor:pointer;
}
.hero-swipe-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(224,60,40,0.8);
  box-shadow:0 14px 34px -12px rgba(224,60,40,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero-swipe-btn:hover .hsb-card-front{transform:rotate(8deg) translateX(3px)}
.hero-swipe-btn:hover .hsb-card-mid{transform:rotate(-5deg) translateX(-2px)}
.hero-swipe-btn:active{transform:translateY(0)}
.hsb-icons{
  position:relative;width:30px;height:38px;flex-shrink:0;
  display:inline-block;
}
.hsb-card{
  position:absolute;inset:0;border-radius:5px;
  background:linear-gradient(160deg,#D4A74A 0%,#8a6a2a 100%);
  border:1.5px solid rgba(0,0,0,0.25);
  transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.hsb-card-back{transform:rotate(-10deg) translateX(-4px);background:linear-gradient(160deg,#5a5a5a 0%,#333 100%);opacity:0.7}
.hsb-card-mid{transform:rotate(-3deg) translateX(-1px);background:linear-gradient(160deg,#9aa0a6 0%,#555 100%);opacity:0.85}
.hsb-card-front{transform:rotate(4deg) translateX(1px);background:linear-gradient(160deg,#E03C28 0%,#a01e16 100%)}
.hsb-copy{display:inline-flex;flex-direction:column;gap:2px;line-height:1.1;min-width:0}
.hsb-label{font-size:15px;font-weight:700;letter-spacing:-0.01em;white-space:nowrap}
.hsb-meta{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;
  letter-spacing:0.03em;color:rgba(245,241,234,0.6);
  white-space:nowrap;
}
.hsb-badge{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:0.12em;
  padding:3px 7px;border-radius:999px;
  background:var(--accent);color:white;
  margin-left:2px;flex-shrink:0;
}
@media (max-width:600px){
  .hero-primary-cta{gap:10px;margin-top:18px;flex-direction:column;align-items:stretch}
  .hero-quiz-btn{padding:14px 20px;font-size:15px;min-height:50px;justify-content:center}
  .hero-quiz-btn .hqb-meta{font-size:9.5px}
  .hero-swipe-btn{padding:12px 14px;min-height:56px;justify-content:flex-start;width:100%}
  .hsb-label{font-size:15px}
  .hsb-meta{font-size:10px}
  .hsb-badge{font-size:9px}
  .hero-quiz-secondary{margin-top:6px;justify-content:center}
}
.hero-secondary{
  display:flex;align-items:center;gap:14px;margin-top:14px;max-width:560px;flex-wrap:wrap;
}
.hero-full-quiz{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:var(--paper);
  border:1px solid rgba(245,241,234,0.2);border-radius:999px;
  padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;
  transition:all 0.15s ease;min-height:40px;
}
.hero-full-quiz:hover{
  background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.4);
}

/* Single honest trust line replacing 3-item bar + fake testimonials */
.hero-trust-line{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  padding:8px 14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:999px;
  color:rgba(245,241,234,0.75);font-size:12px;font-weight:500;
  max-width:560px;
}
.hero-trust-line strong{color:var(--paper);font-weight:600}
.hero-trust-line a{color:#D4A74A;text-decoration:none}
.hero-trust-line a:hover{text-decoration:underline;text-underline-offset:2px}

/* Personal counter — shown only after first quiz (localStorage-based, real signal) */
.hero-personal-counter{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  padding:8px 14px;
  background:rgba(37,211,102,0.08);border:1px solid rgba(37,211,102,0.25);
  border-radius:999px;
  color:rgba(245,241,234,0.85);font-size:12px;font-weight:500;
  max-width:560px;
}
.hero-personal-counter strong{color:#25D366;font-weight:700;font-size:13px}
.hero-personal-counter a{color:#D4A74A;text-decoration:none}
.hero-personal-counter a:hover{text-decoration:underline;text-underline-offset:2px}
.hpc-icon{
  display:inline-flex;width:16px;height:16px;border-radius:50%;
  background:#25D366;color:white;
  align-items:center;justify-content:center;font-size:10px;font-weight:700;
  flex-shrink:0;
}
@media (max-width:600px){
  .hero-personal-counter{font-size:11px;padding:7px 12px}
}

/* Streak chip — surfaces login_streak_current. Audit S5 R-02. */
.hero-streak-chip{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;margin-left:6px;
  padding:8px 14px;
  background:linear-gradient(135deg,rgba(212,167,74,0.14),rgba(224,60,40,0.10));
  border:1px solid rgba(212,167,74,0.4);border-radius:999px;
  color:rgba(245,241,234,0.92);font-size:12px;font-weight:500;font-family:inherit;
  cursor:pointer;transition:all .2s ease;
}
.hero-streak-chip[hidden]{display:none}
.hero-streak-chip:hover{
  background:linear-gradient(135deg,rgba(212,167,74,0.22),rgba(224,60,40,0.16));
  border-color:rgba(212,167,74,0.6);transform:translateY(-1px);
}
.hsc-flame{font-size:14px;line-height:1;flex-shrink:0;animation:hscFlicker 2.4s ease-in-out infinite}
@keyframes hscFlicker{0%,100%{transform:scale(1);filter:none}50%{transform:scale(1.08);filter:brightness(1.15)}}
.hero-streak-chip strong{color:#D4A74A;font-weight:700;font-size:13px;font-style:italic;font-family:'Instrument Serif',serif;letter-spacing:-0.01em}
.hsc-arrow{font-size:13px;color:rgba(212,167,74,0.65);transition:transform .2s;flex-shrink:0}
.hero-streak-chip:hover .hsc-arrow{transform:translateX(2px);color:#D4A74A}
@media (max-width:600px){
  .hero-streak-chip{font-size:11px;padding:7px 12px;margin-left:0}
}

/* Provider strip — audit S2 L-04. Brand-color chips below CTA so cold visitors
   instantly see "ini cocok dengan Netflix/Vidio/etc langganan saya". Brand
   colors are official-ish but kept matte to avoid logo-trademark issues. */
.hero-providers{
  display:flex;flex-direction:column;gap:8px;margin-top:14px;
  max-width:560px;
}
.hpv-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.18em;
  color:rgba(245,241,234,0.5);text-transform:uppercase;
}
.hpv-row{display:flex;flex-wrap:wrap;gap:6px}
.hpv-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;font-size:11.5px;font-weight:600;letter-spacing:0.01em;
  border:1px solid rgba(245,241,234,0.18);background:rgba(245,241,234,0.04);
  color:rgba(245,241,234,0.85);border-radius:4px;line-height:1.3;
  white-space:nowrap;cursor:default;
}
.hpv-chip .hpv-icon{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:3px;color:#fff;
}
.hpv-netflix .hpv-icon{background:#E50914}
.hpv-prime .hpv-icon{background:#00A8E1}
.hpv-disney .hpv-icon{background:#113CCF;font-size:8.5px}
.hpv-vidio .hpv-icon{background:#F9C22E;color:#1a1408}
.hpv-vision .hpv-icon{background:#8B5CF6;font-size:9px}
@media (max-width:600px){
  .hpv-chip{font-size:10.5px;padding:4px 8px}
  .hpv-chip .hpv-icon{width:16px;height:16px;font-size:9px}
}

/* Live ticker — audit S2 L-03. Rotating one-liner below hero proving the
   community is active. Subtle dark strip; doesn't compete with H1 above. */
.hero-live-ticker{
  display:flex;align-items:center;gap:12px;
  max-width:1180px;margin:0 auto;padding:10px 32px;
  font-size:12.5px;color:rgba(245,241,234,0.78);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(7,6,4,0.65);
}
.hero-live-ticker[hidden]{display:none}
.hlt-pulse{
  width:8px;height:8px;border-radius:50%;background:#7AA67D;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(122,166,125,0.55);
  animation:hltPulse 2s ease-in-out infinite;
}
@keyframes hltPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(122,166,125,0.55)}
  50%{box-shadow:0 0 0 8px rgba(122,166,125,0)}
}
.hlt-label{
  font-size:9.5px;letter-spacing:0.22em;color:#7AA67D;font-weight:700;
  text-transform:uppercase;flex-shrink:0;
}
.hlt-text{
  flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:hltSwap .5s ease;
}
.hlt-text strong{color:var(--paper);font-weight:600}
.hlt-text em{color:#D4A74A;font-style:italic}
.hlt-text .stars{color:#D4A74A;font-style:normal}
.hlt-text time{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  color:rgba(245,241,234,0.45);letter-spacing:0.08em;margin-left:6px;
}
@keyframes hltSwap{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@media (max-width:600px){
  .hero-live-ticker{padding:9px 16px;gap:8px;font-size:11.5px}
  .hlt-label{font-size:9px;letter-spacing:0.16em}
}

/* Hero value-prop chips — replaces the old .diff-section. 3 differentiators
   in a single scannable strip below the hero CTA, reframed from "vs X" to
   "what you get". */
.hero-valueprops{
  list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:8px;align-items:center;
}
.hero-valueprops li{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:999px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.10);
  font-size:12px;color:rgba(245,241,234,0.82);font-weight:500;
  letter-spacing:0.01em;line-height:1;white-space:nowrap;
}
.hero-valueprops .hvp-icon{font-size:14px;line-height:1}
body.theme-light .hero-valueprops li{
  background:rgba(26,20,8,0.04);border-color:rgba(26,20,8,0.12);
  color:rgba(26,20,8,0.78);
}
@media (max-width:560px){
  .hero-valueprops li{font-size:11.5px;padding:6px 10px}
}

.htl-dot{
  width:6px;height:6px;border-radius:50%;background:#25D366;
  animation:pulse 2s ease-in-out infinite;flex-shrink:0;
}
@media (max-width:600px){
  .hero-trust-line{font-size:11px;padding:7px 12px}
  .hero-secondary{gap:10px}
  .hero-full-quiz{font-size:12px;padding:9px 14px}
}

/* ========= DISCOVERY MODES — "Pilih cara cari tontonan" =========
   Two side-by-side mode cards (AI Quiz vs AI Swipe). Sits right after the hero
   so AI Swipe gets equal top-of-page exposure. Stacks on mobile. */
.discovery-modes{
  padding:64px 32px 48px;background:var(--ink);position:relative;
  border-top:1px solid rgba(245,241,234,0.06);
  border-bottom:1px solid rgba(245,241,234,0.06);
}
.discovery-modes::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20% 0%,rgba(224,60,40,0.05) 0%,transparent 55%),radial-gradient(circle at 85% 100%,rgba(212,167,74,0.04) 0%,transparent 55%);
}
.dm-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.dm-head{max-width:680px;margin-bottom:32px}
.dm-eyebrow{
  display:inline-block;color:var(--accent);font-size:10px;letter-spacing:0.22em;
  font-weight:700;margin-bottom:12px;
}
.dm-title{
  font-family:'Instrument Serif',serif;font-size:40px;line-height:1.05;
  color:var(--paper);margin-bottom:12px;letter-spacing:-0.01em;
}
.dm-title .italic{font-style:italic;color:var(--accent)}
.dm-sub{
  font-size:15px;line-height:1.55;color:rgba(245,241,234,0.65);max-width:560px;
}
.dm-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.dm-card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  padding:26px 24px 22px;border-radius:22px;
  background:linear-gradient(165deg,rgba(30,30,30,0.95) 0%,rgba(18,18,18,0.98) 100%);
  border:1px solid rgba(245,241,234,0.08);
  color:var(--paper);text-align:left;text-decoration:none;
  cursor:pointer;overflow:hidden;
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
  font-family:inherit;
}
.dm-card:hover{
  transform:translateY(-3px);
  border-color:rgba(224,60,40,0.5);
  box-shadow:0 22px 50px -18px rgba(0,0,0,0.7);
}
.dm-card-head{display:flex;align-items:center;gap:10px}
.dm-card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:rgba(224,60,40,0.12);color:var(--accent);font-size:18px;
}
.dm-card-swipe .dm-card-icon{background:rgba(212,167,74,0.12);color:#D4A74A}
.dm-card-tag{
  font-size:10px;letter-spacing:0.18em;font-weight:700;
  color:rgba(245,241,234,0.55);
}
.dm-card-title{
  font-family:'Instrument Serif',serif;font-size:30px;line-height:1;
  color:var(--paper);margin:2px 0 0;letter-spacing:-0.01em;
}
.dm-card-desc{
  font-size:14px;line-height:1.5;color:rgba(245,241,234,0.7);
  margin:0;
}
.dm-card-preview{
  margin-top:6px;padding:16px;border-radius:14px;
  background:rgba(10,10,10,0.55);border:1px solid rgba(245,241,234,0.06);
  min-height:170px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
/* Quiz preview — 3-row result mock */
.dm-quiz-preview{flex-direction:column;align-items:stretch;gap:10px;padding:18px 18px}
.dm-quiz-row{display:flex;align-items:center;gap:12px}
.dm-quiz-rank{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  color:var(--accent);letter-spacing:0.1em;width:22px;flex-shrink:0;
}
.dm-quiz-line{
  flex:1;height:10px;border-radius:6px;
  background:linear-gradient(90deg,rgba(224,60,40,0.22) 0%,rgba(224,60,40,0.06) 65%,rgba(245,241,234,0.06) 100%);
}
.dm-quiz-line-short{max-width:70%}
/* Actual example-question rows (replaces empty-bar placeholders) */
.dm-quiz-q{
  flex:1;font-size:13px;line-height:1.35;color:rgba(245,241,234,0.82);
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Swipe preview — Tinder-style stacked card teaser with subtle wiggle */
.dm-swipe-preview{padding:12px;min-height:210px;flex-direction:column;gap:10px}
.dm-swipe-stack{
  position:relative;width:128px;height:168px;margin:0 auto;
}
.dm-swipe-card{
  position:absolute;inset:0;border-radius:12px;overflow:hidden;
  background:linear-gradient(165deg,#2a2a2a 0%,#111 100%);
  box-shadow:0 8px 22px rgba(0,0,0,0.55);
  border:1px solid rgba(245,241,234,0.08);
}
.dm-swipe-back{transform:rotate(-7deg) translateX(-10px) scale(0.9);opacity:0.55;background:linear-gradient(165deg,#3a3a3a 0%,#111 100%)}
.dm-swipe-mid{transform:rotate(4deg) translateX(6px) scale(0.95);opacity:0.8;background:linear-gradient(165deg,#4a4a4a 0%,#1a1a1a 100%)}
.dm-swipe-front{
  background:linear-gradient(165deg,#D4A74A 0%,#8a6a2a 45%,#2a1f10 100%);
  animation:dmSwipeWiggle 5.5s cubic-bezier(0.5,0,0.5,1) infinite;
  transform-origin:50% 100%;
}
.dm-swipe-gradient{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.35) 45%,transparent 75%);
}
.dm-swipe-info{
  position:absolute;bottom:10px;left:10px;right:10px;z-index:2;
}
.dm-swipe-info-title{
  font-family:'Instrument Serif',serif;font-size:13px;color:var(--paper);
  line-height:1.1;margin-bottom:2px;
}
.dm-swipe-info-meta{
  font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#D4A74A;
  letter-spacing:0.08em;
}
.dm-swipe-stamp{
  position:absolute;top:12px;padding:4px 9px;border-radius:6px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:800;font-size:10px;letter-spacing:0.1em;border:2px solid;
  z-index:3;opacity:0;
  animation:dmSwipeStamp 5.5s cubic-bezier(0.5,0,0.5,1) infinite;
}
.dm-swipe-stamp-skip{
  left:8px;color:rgba(245,241,234,0.92);border-color:rgba(245,241,234,0.9);
  background:rgba(30,30,30,0.6);transform:rotate(-12deg);
  animation-delay:1.2s;
}
.dm-swipe-stamp-like{
  right:8px;color:var(--accent);border-color:var(--accent);
  background:rgba(224,60,40,0.18);transform:rotate(12deg);
  animation-delay:3.9s;
}
@keyframes dmSwipeWiggle{
  0%,8%{transform:rotate(4deg) translateX(1px) scale(1)}
  14%,22%{transform:rotate(-14deg) translateX(-18px) scale(0.97)}
  28%,50%{transform:rotate(4deg) translateX(1px) scale(1)}
  58%,66%{transform:rotate(14deg) translateX(18px) scale(0.97)}
  72%,100%{transform:rotate(4deg) translateX(1px) scale(1)}
}
@keyframes dmSwipeStamp{
  0%,10%{opacity:0}
  14%,22%{opacity:0.95}
  28%,100%{opacity:0}
}
.dm-swipe-hints{
  display:flex;justify-content:space-between;gap:8px;padding:0 4px;width:100%;max-width:200px;margin:0 auto;
}
.dm-swipe-hint{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:0.08em;color:rgba(245,241,234,0.55);
}
.dmh-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;font-size:10px;
  border:1.5px solid currentColor;
}
.dm-swipe-hint-skip{color:rgba(245,241,234,0.6)}
.dm-swipe-hint-like{color:var(--accent)}

.dm-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:6px;
  border-top:1px dashed rgba(245,241,234,0.1);
}
.dm-card-meta{
  font-size:10px;color:rgba(245,241,234,0.5);letter-spacing:0.12em;font-weight:600;
}
.dm-card-cta{
  font-size:13px;font-weight:700;color:var(--paper);
  display:inline-flex;align-items:center;gap:4px;
}
.dm-card:hover .dm-card-cta{color:var(--accent)}

/* "FUN MODE" attention badge on Swipe card */
.dm-badge-new{
  position:absolute;top:14px;right:14px;z-index:4;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:0.15em;padding:4px 9px;border-radius:999px;
  background:var(--accent);color:white;
  box-shadow:0 4px 12px rgba(224,60,40,0.4);
}

/* Primary emphasis tint so AI Quiz still reads as the dominant mode */
.dm-card-quiz{
  background:linear-gradient(165deg,rgba(40,22,20,0.95) 0%,rgba(20,14,14,0.98) 100%);
  border-color:rgba(224,60,40,0.25);
}
.dm-card-quiz:hover{border-color:rgba(224,60,40,0.7)}

/* Spin footnote — positions Spin as the wildcard, clearly below Swipe */
.dm-footnote{
  display:flex;align-items:center;gap:10px;
  margin:20px 0 0;padding:12px 16px;
  border-radius:12px;background:rgba(245,241,234,0.04);
  border:1px dashed rgba(212,167,74,0.25);
  font-size:13px;line-height:1.5;color:rgba(245,241,234,0.65);max-width:720px;
}
.dm-footnote-dot{font-size:16px;flex-shrink:0}
.dm-footnote-link{color:#D4A74A;text-decoration:none;font-weight:600}
.dm-footnote-link:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media (max-width:780px){.dm-footnote{font-size:12.5px;padding:10px 14px}}

@media (max-width:780px){
  .discovery-modes{padding:44px 20px 36px}
  .dm-title{font-size:30px}
  .dm-sub{font-size:14px}
  .dm-grid{grid-template-columns:1fr;gap:14px}
  .dm-card{padding:22px 20px 18px;border-radius:18px}
  .dm-card-title{font-size:26px}
  .dm-card-preview{min-height:150px;padding:14px}
  .dm-swipe-preview{min-height:180px}
  .dm-swipe-stack{width:110px;height:150px}
  .dm-swipe-info-title{font-size:12px}
  .dm-badge-new{top:12px;right:12px;font-size:9px;padding:3px 8px}
}

/* ========= PREMIUM TEASER — compact Tonton+ hook above closing CTA ========= */
.premium-teaser{
  padding:56px 32px;background:var(--paper);color:var(--ink);position:relative;overflow:hidden;
}
.premium-teaser::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 85% 30%,rgba(212,167,74,0.16) 0%,transparent 55%);
}
.pt-inner{max-width:860px;margin:0 auto;position:relative;z-index:1}
.pt-copy{max-width:640px}
.pt-eyebrow{
  display:inline-block;color:#8a6a2a;font-size:10.5px;letter-spacing:0.24em;
  font-weight:700;margin-bottom:12px;
}
.pt-title{
  font-family:'Instrument Serif',serif;font-size:38px;line-height:1.05;
  color:var(--ink);margin-bottom:10px;letter-spacing:-0.01em;
}
.pt-title .italic{font-style:italic;color:#8a6a2a}
.pt-sub{
  font-size:15px;line-height:1.55;color:rgba(17,17,17,0.75);margin-bottom:20px;
}
.pt-bullets{
  list-style:none;padding:0;margin:0 0 24px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 20px;
}
.pt-bullets li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13.5px;line-height:1.4;color:rgba(17,17,17,0.8);font-weight:500;
}
.pt-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:#D4A74A;color:white;font-size:10px;font-weight:800;margin-top:1px;
}
.pt-ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pt-cta-primary{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  border:1.5px solid var(--ink);border-radius:12px;
  padding:13px 22px;font-size:15px;font-weight:700;letter-spacing:-0.01em;
  transition:transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow:0 8px 22px -10px rgba(0,0,0,0.35);
}
.pt-cta-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(0,0,0,0.45)}
.pt-cta-meta{
  font-size:10.5px;letter-spacing:0.12em;font-weight:700;
  color:rgba(17,17,17,0.55);
}
@media (max-width:780px){
  .premium-teaser{padding:40px 20px}
  .pt-title{font-size:28px}
  .pt-sub{font-size:14px}
  .pt-bullets{grid-template-columns:1fr;gap:8px}
  .pt-bullets li{font-size:13px}
  .pt-cta-primary{padding:12px 18px;font-size:14px}
  .pt-cta-meta{font-size:10px}
}

/* Expressive variant — split layout with mini Pro profile preview card */
.premium-teaser-expressive{background:linear-gradient(135deg,#1a1511 0%,#0f0d0b 60%,#0a0806 100%);color:var(--paper);padding:64px 32px}
.premium-teaser-expressive::before{
  background:radial-gradient(circle at 85% 30%,rgba(212,167,74,0.18) 0%,transparent 55%),radial-gradient(circle at 15% 70%,rgba(255,140,66,0.08) 0%,transparent 55%);
}
.pt-inner-split{
  max-width:1100px;display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;
}
.premium-teaser-expressive .pt-title{color:var(--paper)}
.premium-teaser-expressive .pt-title .italic{color:#D4A74A}
.premium-teaser-expressive .pt-sub{color:rgba(245,241,234,0.72)}
.premium-teaser-expressive .pt-eyebrow{color:#D4A74A}
.pt-bullets-expressive{display:flex;flex-direction:column;gap:10px;grid-template-columns:none}
.pt-bullets-expressive li{font-size:13.5px;color:rgba(245,241,234,0.85);align-items:center}
.pt-bullets-expressive .pt-check{
  width:24px;height:24px;border-radius:6px;background:rgba(212,167,74,0.15);
  color:#D4A74A;font-size:13px;font-weight:700;
}
.premium-teaser-expressive .pt-cta-primary{
  background:linear-gradient(135deg,#D4A74A 0%,#b88938 100%);color:#1a1100;
  border:1.5px solid rgba(212,167,74,0.8);box-shadow:0 10px 24px -10px rgba(212,167,74,0.5);
}
.premium-teaser-expressive .pt-cta-primary:hover{background:linear-gradient(135deg,#e0b560 0%,#c69544 100%);box-shadow:0 14px 30px -10px rgba(212,167,74,0.65)}
.premium-teaser-expressive .pt-cta-meta{color:rgba(245,241,234,0.45)}

/* Swipeable 4-mockup carousel on homepage teaser. Uses the same .ppc-v2
   mockup cards from the pricing page (theme-* variants) so both surfaces
   stay visually consistent. Scroll-snap handles the swipe physics; the
   nav buttons + dots are controlled by ptCarouselGoto()/Step(). */
.pt-carousel{position:relative;min-width:0;display:flex;flex-direction:column;gap:12px}
.pt-carousel-track{
  position:relative;
  display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  /* proximity (not mandatory) so programmatic smooth-scroll isn't cancelled
     by Chromium's snap bug; swipe still snaps, just a touch more forgiving */
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:4px 2px;margin:-4px -2px;
  touch-action:pan-x;cursor:grab;
  outline:none;
}
.pt-carousel-track::-webkit-scrollbar{display:none}
.pt-carousel-track:active{cursor:grabbing}
.pt-slide{
  flex:0 0 100%;scroll-snap-align:start;
  min-width:0;
}
/* Controls row — prev · dots · next · hint */
.pt-carousel-controls{
  display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;
  padding-top:4px;
}
.ptc-nav{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.15);
  color:var(--paper);font-size:18px;font-weight:600;line-height:1;
  cursor:pointer;transition:all 0.15s ease;
  display:flex;align-items:center;justify-content:center;
}
.ptc-nav:hover{background:rgba(212,167,74,0.14);border-color:rgba(212,167,74,0.5);color:#D4A74A;transform:scale(1.06)}
.ptc-nav:active{transform:scale(0.95)}
.ptc-dots{display:flex;gap:8px;align-items:center}
.ptc-dot{
  width:8px;height:8px;border-radius:50%;padding:0;
  background:rgba(245,241,234,0.25);border:none;cursor:pointer;
  transition:all 0.2s ease;
}
.ptc-dot:hover{background:rgba(245,241,234,0.5)}
.ptc-dot.active{background:#D4A74A;width:22px;border-radius:999px}
.ptc-hint{
  font-size:9px;letter-spacing:0.16em;color:rgba(245,241,234,0.35);font-weight:700;
  margin-left:6px;
}
@media (max-width:900px){
  .pt-inner-split{grid-template-columns:1fr;gap:28px}
  .pt-carousel{max-width:420px;margin:0 auto;width:100%}
}
@media (max-width:600px){
  .premium-teaser-expressive{padding:48px 20px}
  .ptc-hint{display:none}
}

/* ========= SAMPLE SHOWCASE SECTION (moved out of hero) ========= */
.sample-showcase{
  padding:80px 0;background:var(--paper);color:var(--ink);
}
.sample-showcase-inner{
  max-width:960px;margin:0 auto;padding:0 32px;
}
.sample-showcase-head{max-width:640px;margin-bottom:32px}
.ss-eyebrow{
  display:inline-block;color:var(--accent);font-size:10px;letter-spacing:0.22em;
  font-weight:600;margin-bottom:12px;
}
.ss-title{
  font-family:'Instrument Serif',serif;font-size:46px;line-height:1.05;
  letter-spacing:-0.02em;color:var(--ink);margin:0 0 14px;
}
.ss-title .italic{font-style:italic;color:var(--accent)}
.ss-sub{
  font-size:16px;line-height:1.55;color:rgba(10,10,10,0.65);margin:0;
}
.sample-showcase-card{
  background:#fff;border:1px solid rgba(10,10,10,0.08);border-radius:18px;
  overflow:hidden;box-shadow:0 16px 48px rgba(10,10,10,0.06);
}
.ssc-prompt{
  padding:18px 22px;background:rgba(10,10,10,0.03);
  border-bottom:1px solid rgba(10,10,10,0.06);
}
.ssc-prompt-label{
  color:var(--accent);font-size:10px;letter-spacing:0.2em;font-weight:600;
}
.ssc-prompt p{
  margin:6px 0 0;font-style:italic;font-size:15px;line-height:1.5;
  color:rgba(10,10,10,0.85);
}
.ssc-picks{padding:8px 0}
.ssc-pick{
  display:flex;gap:16px;padding:18px 22px;
  border-bottom:1px solid rgba(10,10,10,0.06);
  position:relative;
  transition:background 0.22s ease,transform 0.22s ease;
}
.ssc-pick:last-child{border-bottom:none}
.ssc-pick-rank{
  flex-shrink:0;font-family:'Instrument Serif',serif;font-size:28px;
  color:var(--accent);line-height:1;font-style:italic;font-weight:500;min-width:36px;
  transition:transform 0.28s cubic-bezier(.34,1.56,.64,1),color 0.22s ease;
}
/* Poster thumbnail — loaded via JS from TMDB (see loadSampleShowcasePosters).
   Background-image is set inline once fetched; fallback emoji shows on load
   failure or before fetch resolves. */
.ssc-pick-poster{
  flex-shrink:0;width:58px;height:86px;border-radius:8px;overflow:hidden;
  background:rgba(10,10,10,0.08) center/cover no-repeat;
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.3s ease,transform 0.32s cubic-bezier(.34,1.56,.64,1),box-shadow 0.22s ease;
}
.ssc-pick-poster-fallback{
  font-size:22px;opacity:0.35;
}
.ssc-pick-poster.loaded .ssc-pick-poster-fallback{display:none}
/* Whole row becomes the tap target once hydration wires it to openMovie().
   Layered hover: row shifts right + warm tint fades in, left accent bar
   slides down with a soft bounce, poster pops + tilts slightly, rank
   number springs inward. (We previously also faded in a "Lihat detail →"
   pill on the right, but its absolute position overlapped the description
   text and read as a layout bug — the five other hover affordances are
   plenty to telegraph clickability without it.) */
.ssc-pick.clickable{cursor:pointer}
.ssc-pick.clickable:focus{outline:none}
.ssc-pick.clickable::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0;
  transform:scaleY(0);transform-origin:center;
  transition:transform 0.3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.ssc-pick.clickable:hover,
.ssc-pick.clickable:focus-visible{
  background:rgba(224,60,40,0.045);transform:translateX(4px);
}
.ssc-pick.clickable:hover::before,
.ssc-pick.clickable:focus-visible::before{transform:scaleY(1)}
.ssc-pick.clickable:hover .ssc-pick-poster,
.ssc-pick.clickable:focus-visible .ssc-pick-poster{
  transform:translateY(-3px) scale(1.06) rotate(-1.5deg);
  box-shadow:0 14px 28px rgba(0,0,0,0.22);
}
.ssc-pick.clickable:hover .ssc-pick-rank,
.ssc-pick.clickable:focus-visible .ssc-pick-rank{
  transform:translateX(-2px) scale(1.1);
}
.ssc-pick-body{flex:1;min-width:0}
.ssc-pick-title{
  font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px;
}
.ssc-pick-meta{
  color:rgba(10,10,10,0.55);font-weight:500;font-size:13px;
}
.ssc-pick-why{
  font-size:14px;line-height:1.5;color:rgba(10,10,10,0.7);
}
.ssc-footer{
  padding:14px 22px;background:rgba(10,10,10,0.02);
  border-top:1px solid rgba(10,10,10,0.06);
  color:rgba(10,10,10,0.55);font-size:11.5px;letter-spacing:0.02em;
}
.sample-showcase-cta{
  display:flex;justify-content:center;margin-top:28px;
}
@media (max-width:640px){
  .sample-showcase{padding:56px 0}
  .sample-showcase-inner{padding:0 20px}
  .ss-title{font-size:34px}
  .ss-sub{font-size:14.5px}
  .ssc-prompt{padding:14px 16px}
  .ssc-pick{padding:14px 16px;gap:10px}
  .ssc-pick.clickable:hover,.ssc-pick.clickable:focus-visible{transform:translateX(2px)}
  .ssc-pick-rank{font-size:22px;min-width:24px}
  .ssc-pick-poster{width:48px;height:72px;border-radius:6px}
  .ssc-pick-poster-fallback{font-size:18px}
  .ssc-pick-title{font-size:15px}
  .ssc-pick-why{font-size:13px}
  .ssc-footer{padding:12px 16px;font-size:10.5px}
}
.mood-picker-label{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);font-size:10px;letter-spacing:0.22em;font-weight:600;
  margin-bottom:12px;
}
.mood-picker-label .dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 1.8s ease-in-out infinite;
}
.mood-picker-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:8px;
}
.mood-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 8px;background:rgba(245,241,234,0.06);
  border:1px solid rgba(245,241,234,0.12);border-radius:10px;
  cursor:pointer;transition:all 0.15s ease;color:var(--paper);
}
.mood-btn:hover{
  background:rgba(224,60,40,0.1);border-color:var(--accent);
  transform:translateY(-2px);
}
.mood-btn:active{transform:translateY(0);background:rgba(224,60,40,0.18)}
.mood-emoji{font-size:22px;line-height:1}
.mood-label{
  font-size:11.5px;font-weight:600;letter-spacing:0.01em;
}
@media (max-width:600px){
  .mood-picker{padding:14px 16px}
  .mood-picker-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .mood-btn{padding:8px 4px}
  .mood-emoji{font-size:20px}
  .mood-label{font-size:10.5px}
}

/* ========= REVIEW COMPOSER MODAL (Letterboxd-style social layer) ========= */
.review-composer{
  max-width:500px;width:92vw;background:#151515;color:var(--paper);
  border-radius:16px;padding:0;position:relative;overflow:hidden;
}
.rc-close{
  position:absolute;top:12px;right:12px;z-index:2;
  background:rgba(245,241,234,0.08);border:none;color:var(--paper);
  width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.rc-close:hover{background:rgba(245,241,234,0.18)}
.rc-head{
  padding:28px 28px 18px;border-bottom:1px solid rgba(245,241,234,0.08);
  text-align:center;
}
.rc-stars{
  font-size:28px;letter-spacing:2px;color:#D4A74A;margin-bottom:10px;
  line-height:1;text-shadow:0 0 20px rgba(212,167,74,0.3);
}
.rc-title{
  font-family:'Instrument Serif',serif;font-size:22px;line-height:1.2;
  color:var(--paper);margin:0 0 4px;letter-spacing:-0.01em;
}
.rc-meta{color:rgba(245,241,234,0.55);font-size:12px;letter-spacing:0.04em}
.rc-body{padding:20px 28px}
.rc-label{
  display:block;font-size:11px;letter-spacing:0.18em;font-weight:600;
  color:rgba(245,241,234,0.6);margin-bottom:10px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}
.rc-textarea{
  width:100%;min-height:100px;padding:12px 14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.12);
  color:var(--paper);border-radius:10px;font-size:14px;line-height:1.5;
  font-family:inherit;resize:vertical;outline:none;transition:border-color 0.15s;
}
.rc-textarea:focus{border-color:var(--accent)}
.rc-counter{
  text-align:right;font-size:11px;color:rgba(245,241,234,0.5);
  margin-top:6px;font-family:'JetBrains Mono',monospace;
}
.rc-public{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  color:rgba(245,241,234,0.75);font-size:13px;cursor:pointer;
}
.rc-public input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.rc-actions{
  padding:16px 28px 24px;display:flex;gap:10px;justify-content:flex-end;
  border-top:1px solid rgba(245,241,234,0.08);
}
.rc-skip{
  background:transparent;color:rgba(245,241,234,0.7);
  border:1px solid rgba(245,241,234,0.2);padding:10px 18px;
  border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;
}
.rc-skip:hover{color:var(--paper);border-color:rgba(245,241,234,0.4)}
.rc-submit{padding:10px 22px;font-size:13px}
@media (max-width:500px){
  .rc-head{padding:24px 20px 14px}
  .rc-body{padding:16px 20px}
  .rc-actions{padding:14px 20px 20px}
  .rc-title{font-size:19px}
}

/* ========= HALF-STAR PICKER (Letterboxd-style) ========= */
.rc-star-picker{
  display:inline-flex;gap:0;direction:ltr;user-select:none;margin:0 auto 6px;
  font-size:36px;line-height:1;color:rgba(245,241,234,0.2);
  cursor:pointer;position:relative;
}
.rc-star-picker .sp-star{position:relative;width:1em;display:inline-block;text-align:center}
.rc-star-picker .sp-star::before{content:'★';position:absolute;inset:0;color:rgba(245,241,234,0.2)}
.rc-star-picker .sp-star .sp-fill{
  position:absolute;inset:0;overflow:hidden;color:#D4A74A;
  text-shadow:0 0 14px rgba(212,167,74,0.45);
}
.rc-star-picker .sp-star .sp-fill::before{content:'★';position:absolute;inset:0}
.rc-star-picker .sp-star .sp-half{width:50%}
.rc-star-picker .sp-star .sp-full{width:100%}
.rc-star-picker .sp-hit{
  position:absolute;top:0;bottom:0;width:50%;cursor:pointer;z-index:2;
}
.rc-star-picker .sp-hit.left{left:0}
.rc-star-picker .sp-hit.right{right:0}
.rc-rating-label{
  text-align:center;font-size:11px;color:rgba(245,241,234,0.55);
  letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px;min-height:14px;
  font-family:'JetBrains Mono',monospace;
}
.rc-rating-label strong{color:#D4A74A;font-weight:600}

/* Diary row: watched_on + rewatch + heart + spoiler */
.rc-diary-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;align-items:center}
.rc-diary-field{display:flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(245,241,234,0.78)}
.rc-diary-field input[type=date]{
  background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.14);
  color:var(--paper);padding:5px 8px;border-radius:6px;font-size:12.5px;
  font-family:inherit;outline:none;color-scheme:dark;
}
.rc-diary-field input[type=date]:focus{border-color:var(--accent)}
.rc-heart-btn{
  background:none;border:1px solid rgba(245,241,234,0.18);padding:4px 10px;
  border-radius:999px;color:rgba(245,241,234,0.55);cursor:pointer;
  font-size:13px;transition:all 0.15s;display:inline-flex;align-items:center;gap:4px;
}
.rc-heart-btn.active{background:rgba(224,60,40,0.15);border-color:var(--accent);color:var(--accent)}
.rc-heart-btn:hover{border-color:rgba(245,241,234,0.35)}
.rc-rewatch-toggle{
  background:none;border:1px solid rgba(245,241,234,0.18);padding:4px 10px;
  border-radius:999px;color:rgba(245,241,234,0.7);cursor:pointer;font-size:12.5px;
  transition:all 0.15s;
}
.rc-rewatch-toggle.active{background:rgba(212,167,74,0.15);border-color:#D4A74A;color:#D4A74A}
.rc-spoiler-toggle{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:rgba(245,241,234,0.72);cursor:pointer;
}
.rc-spoiler-toggle input{accent-color:var(--accent);cursor:pointer}

/* ========= REVIEW STARS DISPLAY (shared) ========= */
.stars-display{
  display:inline-flex;align-items:center;gap:1px;color:#D4A74A;
  font-size:inherit;letter-spacing:0.5px;line-height:1;
}
.stars-display .st-half{display:inline-block;font-size:0.85em;margin-left:-2px}
.film-heart-badge{color:var(--accent);font-size:0.9em;margin-left:6px}
.rewatch-badge{
  display:inline-block;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;
  background:rgba(212,167,74,0.15);color:#D4A74A;letter-spacing:0.06em;
  font-family:'JetBrains Mono',monospace;margin-left:4px;
}
.watched-date-badge{
  font-size:10.5px;color:rgba(245,241,234,0.5);
  font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;
}

/* Spoiler curtain */
.spoiler-curtain{
  display:block;padding:10px 12px;background:rgba(245,241,234,0.05);
  border:1px dashed rgba(245,241,234,0.2);border-radius:8px;cursor:pointer;
  color:rgba(245,241,234,0.7);font-size:12px;text-align:center;
  letter-spacing:0.06em;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;transition:background 0.15s;
}
.spoiler-curtain:hover{background:rgba(245,241,234,0.1)}
.spoiler-revealed{color:rgba(245,241,234,0.7);font-style:italic}

/* ========= REVIEW INTERACTIONS (like + comment) ========= */
.review-interactions{
  display:flex;gap:14px;align-items:center;margin-top:8px;
  padding-top:6px;font-size:12px;color:rgba(245,241,234,0.55);
}
.rvx-btn{
  background:none;border:none;cursor:pointer;color:rgba(245,241,234,0.55);
  display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 6px;
  border-radius:6px;transition:all 0.12s;font-family:inherit;
}
.rvx-btn:hover{background:rgba(245,241,234,0.07);color:var(--paper)}
.rvx-btn.liked{color:var(--accent)}
.rvx-btn.liked:hover{color:var(--accent)}
.rvx-btn.fanned{color:#FF6B58}
.rvx-btn.fanned:hover{color:#FF6B58}
.rvx-btn.skeptic{color:#D4A74A}
.rvx-btn.skeptic:hover{color:#D4A74A}
.rvx-count{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600}

/* ========= FOLLOW BUTTON ========= */
.follow-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 18px;
  background:var(--accent);color:white;border:none;border-radius:999px;
  font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;
  font-family:inherit;letter-spacing:0.02em;
}
.follow-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(224,60,40,0.25)}
.follow-btn.following{
  background:rgba(245,241,234,0.08);color:var(--paper);
  border:1px solid rgba(245,241,234,0.2);
}
.follow-btn.following:hover{background:rgba(224,60,40,0.12);color:var(--accent);border-color:var(--accent)}
.follow-btn.following:hover .fb-check::before{content:'×'}
.follow-btn.following:hover .fb-label::after{content:' Unfollow'}
.follow-btn.following:hover .fb-label-default{display:none}
.follow-btn .fb-check::before{content:'✓'}

/* ========= PROFILE: avatar + bio + follow counts ========= */
.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-bio{
  color:rgba(245,241,234,0.75);font-size:13.5px;line-height:1.5;
  margin:6px 0 14px;max-width:560px;
}
.profile-edit-link{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;
  color:rgba(245,241,234,0.5);text-decoration:none;padding:4px 10px;
  border-radius:999px;border:1px solid rgba(245,241,234,0.14);
  background:rgba(245,241,234,0.04);cursor:pointer;margin-left:8px;
  transition:all 0.15s;
}
.profile-edit-link:hover{color:var(--paper);border-color:rgba(245,241,234,0.3)}

/* Following/Followers modal-style list */
.follow-list{
  display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;
  padding:4px;
}
.fl-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:rgba(245,241,234,0.04);border-radius:10px;text-decoration:none;color:inherit;
}
.fl-item:hover{background:rgba(245,241,234,0.08)}
.fl-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#D4A74A);
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-size:16px;color:white;
}
.fl-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.fl-body{flex:1;min-width:0}
.fl-name{font-size:13.5px;font-weight:600;color:var(--paper);line-height:1.2}
.fl-bio{font-size:11.5px;color:rgba(245,241,234,0.5);line-height:1.3;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}

/* ========= ACTIVITY FEED TOGGLE (following / everyone) ========= */
.af-toggle{
  display:inline-flex;gap:2px;padding:3px;background:rgba(245,241,234,0.05);
  border:1px solid rgba(245,241,234,0.1);border-radius:999px;
}
.af-toggle button{
  background:none;border:none;padding:5px 14px;border-radius:999px;
  color:rgba(245,241,234,0.65);font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;letter-spacing:0.02em;transition:all 0.15s;
}
.af-toggle button.active{background:var(--accent);color:white}

/* ========= AVATAR/BIO EDITOR ========= */
.avatar-editor{
  max-width:480px;width:94vw;background:#151515;color:var(--paper);
  border-radius:16px;padding:24px 22px;
  max-height:90dvh;overflow-y:auto;
}
@media (max-width:640px){
  .avatar-editor{max-width:100%;width:100%;border-radius:20px 20px 0 0;max-height:92dvh;padding:20px 18px}
}
.ae-title{font-family:'Instrument Serif',serif;font-size:22px;margin:0 0 14px}
.ae-row{margin-bottom:14px}
.ae-row label{
  display:block;font-size:11px;letter-spacing:0.18em;font-weight:600;
  color:rgba(245,241,234,0.6);margin-bottom:6px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}
.ae-row input[type=url],.ae-row textarea{
  width:100%;padding:10px 12px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.12);color:var(--paper);border-radius:8px;
  font-size:13px;font-family:inherit;outline:none;
}
.ae-row textarea{min-height:80px;resize:vertical}
.ae-row input:focus,.ae-row textarea:focus{border-color:var(--accent)}
.ae-preview{
  width:72px;height:72px;border-radius:50%;margin:0 auto 12px;
  background:linear-gradient(135deg,var(--accent),#D4A74A);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Instrument Serif',serif;font-size:30px;color:white;cursor:pointer;
}
.ae-preview img{width:100%;height:100%;object-fit:cover}

/* Twitter-style header card: banner spans full width, avatar overlaps bottom-left.
   Both clickable, file inputs hidden — no URL paste required. */
.ae-headercard{position:relative;margin:-4px -4px 0;padding-bottom:0}
.ae-banner{
  display:block;position:relative;width:100%;height:120px;border-radius:12px;
  overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,rgba(212,167,74,0.18),rgba(212,167,74,0.04));
  border:1px solid rgba(245,241,234,0.08);transition:border-color 0.15s;
}
.ae-banner:hover{border-color:rgba(212,167,74,0.4)}
.ae-banner.locked{cursor:not-allowed;opacity:0.6}
.ae-banner-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ae-banner-img img{width:100%;height:100%;object-fit:cover;display:block}
.ae-banner-empty{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;
  color:rgba(245,241,234,0.55);text-align:center;padding:12px;
}
.ae-banner-uploading{
  position:absolute;inset:0;background:rgba(0,0,0,0.6);color:white;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;
  display:none;align-items:center;justify-content:center;
}
.ae-preview-overlap{
  position:absolute !important;left:18px;bottom:-30px;
  width:78px !important;height:78px !important;margin:0 !important;
  border:3px solid #151515;box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.ae-camera-badge{
  position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,0.75);border:2px solid #151515;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  pointer-events:none;
}
/* Generic upload tile (used by backdrop). Same look as banner but configurable height. */
.ae-upload-tile{
  display:block;position:relative;width:100%;height:100px;border-radius:10px;
  overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,rgba(245,241,234,0.04),rgba(245,241,234,0.01));
  border:1px solid rgba(245,241,234,0.1);transition:border-color 0.15s;
}
.ae-upload-tile:hover{border-color:rgba(212,167,74,0.4)}
.ae-upload-tile.locked{cursor:not-allowed;opacity:0.6}
.ae-upload-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ae-upload-img img{width:100%;height:100%;object-fit:cover;display:block}
.ae-upload-empty{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;
  color:rgba(245,241,234,0.55);text-align:center;padding:12px;
}

/* ========= LISTS PAGE & MODAL ========= */
.lists-page, .journal-page{
  display:none;color:var(--paper);
}
.lists-page.active, .journal-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 48px;overflow-y:auto;background:var(--ink);
}
.lists-page.active > *, .journal-page.active > *{max-width:960px;margin-left:auto;margin-right:auto}
.lp-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid rgba(245,241,234,0.08);
  flex-wrap:wrap;
}
.lp-title{
  font-family:'Instrument Serif',serif;font-size:38px;line-height:1.05;
  color:var(--paper);margin:0;letter-spacing:-0.02em;
}
.lp-title .italic{color:var(--accent);font-style:italic}
.lp-new-btn{
  padding:9px 18px;background:var(--accent);color:white;border:none;border-radius:999px;
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
}
.lp-new-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(224,60,40,0.25)}
.lp-section{margin-bottom:36px}
.lp-section h2{
  font-family:'Instrument Serif',serif;font-size:22px;margin:0 0 12px;color:var(--paper);
}
.list-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;
}
.list-card{
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:14px;padding:14px;cursor:pointer;transition:all 0.15s;
  text-decoration:none;color:inherit;display:block;
}
.list-card:hover{background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.2);transform:translateY(-2px)}
.lc-posters{
  display:flex;gap:4px;margin-bottom:10px;height:90px;overflow:hidden;border-radius:8px;
  background:rgba(245,241,234,0.03);
}
.lc-posters img{width:60px;height:90px;object-fit:cover;flex-shrink:0}
.lc-posters .lc-poster-more{
  display:flex;align-items:center;justify-content:center;width:60px;height:90px;
  background:rgba(245,241,234,0.06);color:rgba(245,241,234,0.5);font-size:11px;
  font-family:'JetBrains Mono',monospace;
}
.lc-title{font-size:15px;font-weight:600;color:var(--paper);line-height:1.25;margin-bottom:3px}
.lc-meta{font-size:11.5px;color:rgba(245,241,234,0.5);font-family:'JetBrains Mono',monospace}
.lc-author{color:#D4A74A;font-weight:600}

/* List detail page */
.ld-header{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(245,241,234,0.08)}
.ld-title{
  font-family:'Instrument Serif',serif;font-size:42px;line-height:1.05;
  color:var(--paper);margin:0 0 8px;letter-spacing:-0.02em;
}
.ld-meta{color:rgba(245,241,234,0.6);font-size:13px;margin-bottom:12px}
.ld-desc{
  color:rgba(245,241,234,0.78);font-size:14px;line-height:1.55;margin:0;
  white-space:pre-wrap;
}
.ld-owner-actions{display:flex;gap:8px;margin-top:12px}
.ld-items{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;
  margin-top:20px;
}
.ld-item{
  text-decoration:none;color:inherit;cursor:pointer;position:relative;
}
.ld-item-rank{
  position:absolute;top:-4px;left:-4px;z-index:1;width:26px;height:26px;
  background:var(--accent);color:white;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;
  font-family:'JetBrains Mono',monospace;box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.ld-item img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;display:block;background:#222}
.ld-item-title{font-size:12px;color:var(--paper);margin-top:6px;line-height:1.2;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ld-item-remove{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,0.75);color:white;border:none;cursor:pointer;font-size:14px;
  display:none;align-items:center;justify-content:center;
}
.ld-item:hover .ld-item-remove{display:flex}

/* List editor modal (create + edit) */
.list-editor{
  max-width:500px;width:92vw;background:#151515;color:var(--paper);
  border-radius:16px;padding:24px;
}
.le-title{font-family:'Instrument Serif',serif;font-size:22px;margin:0 0 14px}
.le-row{margin-bottom:14px}
.le-row label{
  display:block;font-size:11px;letter-spacing:0.18em;font-weight:600;
  color:rgba(245,241,234,0.6);margin-bottom:6px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}
.le-row input, .le-row textarea{
  width:100%;padding:10px 12px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.12);color:var(--paper);border-radius:8px;
  font-size:13px;font-family:inherit;outline:none;
}
.le-row textarea{min-height:90px;resize:vertical}
.le-row input:focus, .le-row textarea:focus{border-color:var(--accent)}
.le-toggles{display:flex;gap:14px;margin:14px 0}
.le-toggles label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(245,241,234,0.7);cursor:pointer}
.le-toggles input{accent-color:var(--accent)}

/* "Add to list" picker */
.atl-picker{
  max-width:440px;width:92vw;background:#151515;color:var(--paper);
  border-radius:16px;padding:20px;max-height:80vh;overflow-y:auto;
}
.atl-title{font-family:'Instrument Serif',serif;font-size:20px;margin:0 0 12px}
.atl-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.atl-item{
  display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:10px;cursor:pointer;transition:all 0.15s;
}
.atl-item:hover{background:rgba(245,241,234,0.1)}
.atl-item.added{background:rgba(224,60,40,0.12);border-color:rgba(224,60,40,0.3)}
.atl-item-title{font-size:14px;color:var(--paper);font-weight:500}
.atl-item-count{font-size:11px;color:rgba(245,241,234,0.5);font-family:'JetBrains Mono',monospace}
.atl-new-row{
  display:flex;gap:6px;padding-top:12px;border-top:1px solid rgba(245,241,234,0.08);
}
.atl-new-row input{
  flex:1;padding:8px 10px;background:rgba(245,241,234,0.05);
  border:1px solid rgba(245,241,234,0.14);color:var(--paper);border-radius:8px;
  font-size:13px;font-family:inherit;outline:none;
}
.atl-new-row button{
  padding:8px 14px;background:var(--accent);color:white;border:none;border-radius:8px;
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
}

/* ========= TAGS (chips in composer + rendered on cards) ========= */
.rc-tags-wrap{margin-top:14px}
.rc-tags-input-row{display:flex;gap:6px;margin-top:6px}
.rc-tags-input{
  flex:1;padding:7px 10px;background:rgba(245,241,234,0.05);
  border:1px solid rgba(245,241,234,0.14);color:var(--paper);border-radius:8px;
  font-size:12.5px;font-family:inherit;outline:none;
}
.rc-tags-input:focus{border-color:var(--accent)}
.rc-tags-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:1px}
.tag-chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;
  background:rgba(212,167,74,0.15);border:1px solid rgba(212,167,74,0.35);
  border-radius:999px;color:#D4A74A;font-size:11.5px;font-weight:500;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.02em;
}
.tag-chip button{
  background:none;border:none;color:#D4A74A;cursor:pointer;padding:0;font-size:13px;line-height:1;
}
.tag-chip-link{
  text-decoration:none;cursor:pointer;transition:all 0.12s;
}
.tag-chip-link:hover{background:rgba(212,167,74,0.28)}
.review-tags-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

/* ========= NOTIFICATION BELL ========= */
.notif-bell-wrap{position:relative;display:inline-flex}
.notif-bell-btn{
  background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.12);
  color:var(--paper);width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:17px;
  transition:all 0.15s;
}
.notif-bell-btn:hover{background:rgba(245,241,234,0.14)}
.notif-bell-count{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  background:var(--accent);color:white;border-radius:999px;font-size:10px;
  font-weight:700;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;box-shadow:0 0 0 2px #0a0a0a;
}
.notif-panel{
  position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:90vw;
  background:#151515;border:1px solid rgba(245,241,234,0.14);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);z-index:200;overflow:hidden;
  max-height:70vh;display:flex;flex-direction:column;
}
/* Mobile sheet variant — mounted directly on <body> since .nav-auth (and thus
   #notifBellWrap) is hidden on ≤900px. Full-width, top-anchored below the nav. */
.notif-panel-mobile{
  position:fixed;top:64px;left:12px;right:12px;z-index:300;
  background:#151515;border:1px solid rgba(245,241,234,0.14);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);overflow:hidden;
  max-height:calc(100dvh - 120px);display:flex;flex-direction:column;
}
.notif-panel-close{
  background:none;border:none;color:rgba(245,241,234,0.55);font-size:22px;
  cursor:pointer;padding:0 10px;line-height:1;font-family:inherit;
}
.notif-panel-close:hover{color:var(--paper)}
/* Mobile badge pill next to "Notifikasi" hamburger item */
.nav-mobile-notif-badge{
  display:none;min-width:20px;height:20px;padding:0 6px;margin-left:6px;
  background:var(--accent);color:white;border-radius:999px;font-size:10.5px;
  font-weight:700;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;vertical-align:middle;
}
.notif-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid rgba(245,241,234,0.08);
}
.notif-panel-title{font-size:14px;font-weight:600;color:var(--paper);margin:0}
.notif-mark-read{
  background:none;border:none;color:rgba(245,241,234,0.55);font-size:11px;
  cursor:pointer;font-family:inherit;padding:3px 6px;border-radius:6px;
}
.notif-mark-read:hover{color:var(--paper);background:rgba(245,241,234,0.08)}
.notif-list{overflow-y:auto;flex:1}
.notif-item{
  display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(245,241,234,0.05);
  text-decoration:none;color:inherit;cursor:pointer;transition:background 0.1s;
}
.notif-item:hover{background:rgba(245,241,234,0.04)}
.notif-item.unseen{background:rgba(224,60,40,0.04)}
.notif-icon{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:rgba(245,241,234,0.08);display:flex;align-items:center;justify-content:center;font-size:14px;
}
.notif-body{flex:1;min-width:0;font-size:12.5px;line-height:1.4;color:rgba(245,241,234,0.85)}
.notif-actor{color:#D4A74A;font-weight:600}
.notif-time{color:rgba(245,241,234,0.45);font-size:10.5px;margin-top:2px;font-family:'JetBrains Mono',monospace}
.notif-empty{padding:40px 20px;text-align:center;color:rgba(245,241,234,0.45);font-size:12.5px}

/* ========= JOURNAL ========= */
.journal-feed{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.jf-card{
  display:flex;gap:16px;padding:18px;cursor:pointer;transition:all 0.15s;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:14px;text-decoration:none;color:inherit;
}
.jf-card:hover{background:rgba(245,241,234,0.08);transform:translateY(-2px)}
.jf-cover{flex-shrink:0;width:120px;height:80px;border-radius:8px;background:#222;overflow:hidden}
.jf-cover img{width:100%;height:100%;object-fit:cover}
.jf-body{flex:1;min-width:0}
.jf-title{font-family:'Instrument Serif',serif;font-size:22px;line-height:1.15;color:var(--paper);margin:0 0 6px;letter-spacing:-0.01em}
.jf-excerpt{font-size:13px;color:rgba(245,241,234,0.65);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}
.jf-byline{font-size:11.5px;color:rgba(245,241,234,0.5);font-family:'JetBrains Mono',monospace}
.jf-byline .author{color:#D4A74A;font-weight:600}

.journal-detail{max-width:720px;margin:0 auto;padding:20px 0}
.jd-cover{width:100%;max-height:360px;object-fit:cover;border-radius:14px;margin-bottom:28px}
.jd-title{font-family:'Instrument Serif',serif;font-size:48px;line-height:1.1;color:var(--paper);margin:0 0 14px;letter-spacing:-0.02em}
.jd-byline{font-size:13px;color:rgba(245,241,234,0.6);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid rgba(245,241,234,0.08)}
.jd-body{font-size:16px;line-height:1.72;color:rgba(245,241,234,0.88);white-space:pre-wrap}
.jd-body p{margin:0 0 18px}

/* Journal composer (reuses a few styles with journal prefix) */
.journal-composer{
  max-width:640px;width:94vw;background:#151515;color:var(--paper);
  border-radius:16px;padding:24px;max-height:86vh;overflow-y:auto;
}
.jc-title{font-family:'Instrument Serif',serif;font-size:24px;margin:0 0 14px}
.jc-row{margin-bottom:14px}
.jc-row label{
  display:block;font-size:11px;letter-spacing:0.18em;font-weight:600;
  color:rgba(245,241,234,0.6);margin-bottom:6px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}
.jc-row input, .jc-row textarea{
  width:100%;padding:10px 12px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.12);color:var(--paper);border-radius:8px;
  font-size:13px;font-family:inherit;outline:none;
}
.jc-row textarea.jc-body-ta{min-height:260px;font-size:14px;line-height:1.6;resize:vertical}
.jc-row input:focus, .jc-row textarea:focus{border-color:var(--accent)}

/* ========= POPULAR WITH FRIENDS section ========= */
.pwf-section{
  padding:48px 0 16px;background:var(--ink);color:var(--paper);
  border-top:1px solid rgba(245,241,234,0.06);
}
.pwf-head{max-width:1200px;margin:0 auto 20px;padding:0 32px}
.pwf-title{font-family:'Instrument Serif',serif;font-size:28px;line-height:1.1;color:var(--paper);margin:0;letter-spacing:-0.01em}
.pwf-title .italic{color:var(--accent);font-style:italic}
.pwf-sub{color:rgba(245,241,234,0.55);font-size:13px;margin:4px 0 0}
.pwf-grid{
  max-width:1200px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;
}
.pwf-card{text-decoration:none;color:inherit;cursor:pointer;position:relative}
.pwf-card img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;background:#222;display:block;transition:transform 0.15s}
.pwf-card:hover img{transform:translateY(-3px)}
.pwf-card-title{font-size:12.5px;color:var(--paper);margin-top:6px;line-height:1.2;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pwf-badge{
  position:absolute;top:6px;right:6px;padding:3px 8px;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);
  color:#D4A74A;font-size:11px;font-weight:700;border-radius:6px;
  font-family:'JetBrains Mono',monospace;
}
@media(max-width:640px){
  .pwf-head{padding:0 20px}
  .pwf-grid{padding:0 20px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
  .lists-page.active, .journal-page.active{padding:72px 20px 40px}
  .lp-title{font-size:28px}
  .ld-title{font-size:30px}
  .jd-title{font-size:32px}
  .jd-body{font-size:15px}
  .notif-panel{right:-100px;width:320px}
  .user-search-panel{right:-80px;width:300px;max-height:60vh}
  .film-community-section{margin-top:20px;padding-top:18px}
  .fc-review{padding:10px;gap:10px}
  .fc-review-avatar{width:32px;height:32px;font-size:13px}
}

/* Personal stats block inside own profile */
.profile-personal-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-top:16px;padding:14px;background:rgba(245,241,234,0.03);
  border:1px solid rgba(245,241,234,0.08);border-radius:12px;
}
.pps-item{display:flex;flex-direction:column;gap:3px}
.pps-num{font-size:22px;font-weight:700;color:var(--paper);font-family:'Instrument Serif',serif;line-height:1}
.pps-label{font-size:10.5px;color:rgba(245,241,234,0.55);text-transform:uppercase;letter-spacing:0.1em;font-family:'JetBrains Mono',monospace}
.rating-dist-bar{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:6px}
.rating-dist-bar .rdb-bar{
  flex:1;background:linear-gradient(180deg,#D4A74A,rgba(212,167,74,0.3));
  border-radius:3px 3px 0 0;min-height:2px;position:relative;cursor:help;
}
.rating-dist-bar .rdb-bar:hover::after{
  content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.85);color:white;padding:3px 8px;border-radius:4px;font-size:10px;
  white-space:nowrap;margin-bottom:4px;font-family:'JetBrains Mono',monospace;
}

/* Nested reply indent — halve on mobile so narrow screens still have room */
@media(max-width:640px){
  .rcp-replies{margin-left:16px;padding-left:6px}
}

/* Comment thread (inline under review card) */
.review-comments-panel{
  margin-top:10px;padding:10px 12px;background:rgba(245,241,234,0.03);
  border-radius:8px;border:1px solid rgba(245,241,234,0.08);
}
.rcp-item{padding:6px 0;border-bottom:1px solid rgba(245,241,234,0.05);font-size:12.5px;line-height:1.4}
.rcp-item:last-child{border-bottom:0}
.rcp-user{color:#D4A74A;font-weight:600;margin-right:6px}
.rcp-time{color:rgba(245,241,234,0.4);font-size:10.5px;margin-left:6px;font-family:'JetBrains Mono',monospace}
.rcp-body{color:rgba(245,241,234,0.82);margin-top:2px}
.rcp-form{display:flex;gap:6px;margin-top:8px}
.rcp-form input{
  flex:1;padding:7px 10px;background:rgba(245,241,234,0.06);
  border:1px solid rgba(245,241,234,0.14);color:var(--paper);border-radius:6px;
  font-size:12.5px;font-family:inherit;outline:none;
}
.rcp-form input:focus{border-color:var(--accent)}
.rcp-form button{
  padding:7px 14px;background:var(--accent);color:white;border:none;
  border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
}
.rcp-form button:disabled{opacity:0.5;cursor:not-allowed}
.rcp-empty{color:rgba(245,241,234,0.4);font-size:12px;font-style:italic}

/* ========= ACTIVITY FEED (landing section) ========= */
.activity-feed-section{
  padding:48px 0 64px;background:var(--ink);color:var(--paper);
  border-top:1px solid rgba(245,241,234,0.06);
}
.activity-feed-head{
  max-width:1200px;margin:0 auto 24px;padding:0 32px;
  display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:14px;
}
.af-title{
  font-family:'Instrument Serif',serif;font-size:32px;line-height:1.1;
  color:var(--paper);margin:0;letter-spacing:-0.01em;
}
.af-title .italic{color:var(--accent);font-style:italic}
.af-sub{color:rgba(245,241,234,0.55);font-size:13px;margin:0}
.activity-feed-grid{
  max-width:1200px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
.af-card{
  display:flex;gap:12px;padding:14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;cursor:pointer;transition:all 0.15s ease;
  text-decoration:none;color:inherit;
}
.af-card:hover{background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.2);transform:translateY(-2px)}
.af-poster{
  flex-shrink:0;width:60px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#222;
}
.af-poster img{width:100%;height:100%;object-fit:cover}
.af-body{flex:1;min-width:0}
.af-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:11.5px;color:rgba(245,241,234,0.55)}
.af-user{color:#D4A74A;font-weight:600}
.af-stars{color:#D4A74A;font-size:12px;letter-spacing:1px}
.af-film-title{
  font-size:14px;font-weight:600;color:var(--paper);
  line-height:1.3;margin-bottom:4px;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.af-review-text{
  font-size:12.5px;line-height:1.45;color:rgba(245,241,234,0.7);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-style:italic;
}
.af-empty{
  grid-column:1/-1;text-align:center;padding:32px 16px;
  color:rgba(245,241,234,0.5);font-size:13px;
}
/* Audit S2 A-01 — zero-follow seeded suggestions inside Following tab */
.af-zero-follow{text-align:left;padding:24px 20px}
.afz-headline{font-family:'Instrument Serif',serif;font-size:22px;color:var(--paper);margin-bottom:6px;line-height:1.2}
.afz-sub{font-size:13px;color:rgba(245,241,234,0.65);line-height:1.5;margin-bottom:18px}
.afz-sub a{color:#D4A74A;text-decoration:none}
.afz-sub a:hover{text-decoration:underline;text-underline-offset:2px}
.af-zero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.afz-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.08);border-radius:10px;
  transition:all .15s ease;
}
.afz-card:hover{background:rgba(245,241,234,0.07);border-color:rgba(245,241,234,0.16)}
.afz-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit}
.afz-avatar{
  width:38px;height:38px;border-radius:50%;background:#1a1814;
  object-fit:cover;flex-shrink:0;
}
.afz-avatar-fallback{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#E03C28,#D4A74A);color:#fff;
  font-family:'Instrument Serif',serif;font-size:18px;font-style:italic;
}
.afz-meta{flex:1;min-width:0}
.afz-name{font-size:13px;font-weight:600;color:var(--paper);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afz-pro{
  font-size:8.5px;letter-spacing:0.18em;padding:1px 5px;border-radius:3px;
  background:rgba(212,167,74,0.18);color:#D4A74A;border:1px solid rgba(212,167,74,0.4);
}
.afz-stats{font-size:10px;letter-spacing:0.05em;color:rgba(245,241,234,0.5);margin-top:2px}
.afz-bio{font-size:11px;color:rgba(245,241,234,0.6);margin-top:3px;line-height:1.35;font-style:italic;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.afz-follow{
  flex-shrink:0;padding:6px 12px;font-family:inherit;font-size:11.5px;font-weight:600;
  background:#E03C28;color:#fff;border:0;border-radius:999px;cursor:pointer;
  transition:all .18s;
}
.afz-follow:hover{background:#c82d1f;transform:translateY(-1px)}
.afz-follow:disabled{opacity:0.7;cursor:default}
.afz-follow.following{background:rgba(122,166,125,0.18);color:#7AA67D;border:1px solid rgba(122,166,125,0.4)}
@media (max-width:640px){
  .activity-feed-section{padding:36px 0 48px}
  .activity-feed-head{padding:0 20px}
  .af-title{font-size:26px}
  .activity-feed-grid{padding:0 20px;grid-template-columns:1fr;gap:12px}
}
/* Compact mode under 480px — audit S2 A-02. Tighter padding, smaller poster,
   2-line clamp so ~3 cards fit per viewport instead of ~1.5 (Twitter-style). */
@media (max-width:480px){
  .af-card{padding:10px;gap:10px;border-radius:10px}
  .af-poster{width:48px}
  .af-film-title{font-size:13.5px;-webkit-line-clamp:1;margin-bottom:2px}
  .af-review-text{font-size:12px;-webkit-line-clamp:2;line-height:1.4}
  .af-header{font-size:11px;margin-bottom:3px}
  .activity-feed-grid{gap:8px}
}

/* ========= PUBLIC PROFILE PAGE ========= */
.profile-page{
  display:none;color:var(--paper);
}
.profile-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 48px;overflow-y:auto;overflow-x:hidden;
  width:100vw;max-width:100vw;box-sizing:border-box;
  background:var(--ink);
}
.profile-page.active > *{max-width:960px;margin-left:auto;margin-right:auto}
/* When a banner image is rendered (Pro), push the header below it so action
   buttons + avatar don't sit on top of the cast photo */
.profile-page.has-banner .profile-header{margin-top:240px}
@media (max-width:720px){.profile-page.has-banner .profile-header{margin-top:160px}}
/* Action buttons get their OWN row at the top of the header (order:-1) so
   they don't fight avatar+info for horizontal space. Single flat flex row,
   right-aligned, wraps when narrow. */
.profile-actions-row{
  flex-basis:100%;order:-1;width:100%;
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  gap:6px;margin-bottom:4px;
}
@media (max-width:640px){
  .profile-actions-row{justify-content:flex-start}
}
/* Stats: grid with auto-fit so they always lay out as a clean row/grid
   regardless of how narrow the parent column gets */
.profile-header .profile-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,max-content));
  gap:14px 22px;margin-top:6px;
}
.profile-header .profile-stat{flex:initial}
.profile-back{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;margin-bottom:24px;
  background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.12);
  border-radius:999px;color:var(--paper);text-decoration:none;font-size:13px;
  cursor:pointer;transition:all 0.15s;
}
.profile-back:hover{background:rgba(245,241,234,0.14)}
.profile-header{
  display:flex;align-items:flex-start;gap:20px;margin-bottom:36px;padding-bottom:28px;
  border-bottom:1px solid rgba(245,241,234,0.08);flex-wrap:wrap;
}
.profile-avatar{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#D4A74A);
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-size:36px;color:white;
  flex-shrink:0;box-shadow:0 8px 24px rgba(224,60,40,0.25);
}
.profile-info{flex:1;min-width:0}
.profile-username{
  font-family:'Instrument Serif',serif;font-size:36px;line-height:1;
  color:var(--paper);margin:0 0 6px;letter-spacing:-0.02em;
}
.profile-handle{color:rgba(245,241,234,0.5);font-size:13px;margin-bottom:14px;font-family:'JetBrains Mono',monospace}
.profile-handle-at{color:inherit;font-weight:600}
.profile-handle-at.pro{color:var(--handle-color,#D4A74A);text-shadow:0 0 12px rgba(212,167,74,0.18)}
.profile-stats{display:flex;gap:22px;flex-wrap:wrap}
.profile-stat{display:flex;flex-direction:column;gap:2px}
.profile-stat-num{font-size:20px;font-weight:700;color:var(--paper);line-height:1}
.profile-stat-label{font-size:10.5px;letter-spacing:0.12em;color:rgba(245,241,234,0.5);text-transform:uppercase;font-family:'JetBrains Mono',monospace}
/* Mono stats variant — Letterboxd-style stat row with dividers */
.profile-stats-mono{
  gap:0;padding:10px 0 0;margin-top:10px;
  border-top:1px dashed rgba(245,241,234,0.1);
}
.profile-stats-mono .profile-stat{
  padding:0 18px;border-right:1px solid rgba(245,241,234,0.08);
}
.profile-stats-mono .profile-stat:first-child{padding-left:0}
.profile-stats-mono .profile-stat:last-child{border-right:none}
@media (max-width:600px){
  .profile-stats-mono .profile-stat{padding:0 12px}
  .profile-stats-mono .profile-stat:nth-child(n+5){border-right:none}
}
/* Decades browser tabs — two tab rows (decade + kind) */
.decades-browser{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.db-tabs{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid rgba(245,241,234,0.06)}
.db-tab-group{display:flex;gap:6px;flex-wrap:wrap}
.db-tab{
  padding:6px 12px;border-radius:999px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.08em;font-weight:600;
  color:rgba(245,241,234,0.7);background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.12);text-decoration:none;
  transition:all 0.15s ease;
}
.db-tab:hover{border-color:rgba(245,241,234,0.3);color:var(--paper)}
.db-tab.active{background:rgba(212,167,74,0.2);border-color:rgba(212,167,74,0.5);color:#D4A74A}

/* Review share card modal — screenshot-friendly 9:16 card */
.review-share-overlay{align-items:center;justify-content:center;padding:20px}
.rs-modal{
  position:relative;max-width:400px;width:100%;
  display:flex;flex-direction:column;gap:16px;
}
.rs-close{
  position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,0.6);border:1px solid rgba(245,241,234,0.2);
  color:var(--paper);font-size:20px;cursor:pointer;z-index:2;
}
.rs-card{
  position:relative;aspect-ratio:9/16;max-height:70vh;border-radius:18px;overflow:hidden;
  background:#0a0a0b;color:var(--paper);
  box-shadow:0 22px 60px rgba(0,0,0,0.6);
}
.rs-poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(0px) brightness(0.5);
}
.rs-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,0.2) 0%,rgba(10,10,11,0.85) 55%,rgba(10,10,11,0.98) 100%);
}
.rs-body{
  position:absolute;inset:auto 0 0 0;padding:28px 24px 24px;z-index:1;
  display:flex;flex-direction:column;gap:10px;
}
.rs-brand{color:#D4A74A;font-size:10px;letter-spacing:0.25em;font-weight:700}
.rs-title{
  font-family:'Instrument Serif',serif;font-size:30px;line-height:1.05;
  color:var(--paper);letter-spacing:-0.01em;
}
.rs-title .rs-year{font-weight:400;font-size:18px;opacity:0.55;font-style:italic}
.rs-stars{font-size:20px;color:#D4A74A;letter-spacing:2px}
.rs-text{
  font-size:13px;line-height:1.55;color:rgba(245,241,234,0.9);
  border-left:2px solid rgba(212,167,74,0.5);padding-left:12px;margin:4px 0;
}
.rs-author{
  font-size:13px;color:rgba(245,241,234,0.75);margin-top:6px;
}
.rs-author strong{color:var(--paper);font-weight:700}
.rs-pro{
  display:inline-block;padding:1px 7px;border-radius:999px;margin-left:4px;
  background:rgba(212,167,74,0.22);color:#D4A74A;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.12em;font-weight:700;
}
.rs-url{
  margin-top:6px;font-size:10px;color:rgba(245,241,234,0.5);letter-spacing:0.08em;
}
.rs-actions{
  display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.rs-hint{
  width:100%;text-align:center;font-size:9.5px;letter-spacing:0.15em;
  color:rgba(245,241,234,0.45);margin-top:4px;
}

/* Diary heatmap — GitHub-style year grid of review activity */
.diary-heatmap{
  margin:20px 0 28px;padding:18px 20px;
  background:rgba(245,241,234,0.035);border:1px solid rgba(245,241,234,0.08);
  border-radius:14px;overflow-x:auto;
}
.dh-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.dh-eyebrow{color:#D4A74A;font-size:10px;letter-spacing:0.2em;font-weight:700}
.dh-stats{color:rgba(245,241,234,0.55);font-size:11px;letter-spacing:0.05em}
.dh-months{
  display:grid;grid-template-columns:repeat(53,1fr);gap:2px;
  font-size:9px;color:rgba(245,241,234,0.4);letter-spacing:0.04em;
  margin-bottom:3px;min-width:480px;
}
.dh-grid{
  display:grid;grid-template-columns:repeat(53,1fr);grid-template-rows:repeat(7,1fr);
  grid-auto-flow:column;gap:2px;min-width:480px;
}
.dh-cell{
  width:100%;aspect-ratio:1;border-radius:2px;background:rgba(245,241,234,0.06);
  cursor:help;transition:transform 0.08s ease;
}
.dh-cell:hover{transform:scale(1.4);z-index:1}
.dh-cell.dh-lv-1{background:rgba(212,167,74,0.25)}
.dh-cell.dh-lv-2{background:rgba(212,167,74,0.5)}
.dh-cell.dh-lv-3{background:rgba(212,167,74,0.75)}
.dh-cell.dh-lv-4{background:#D4A74A}
.dh-legend{
  display:flex;align-items:center;gap:4px;justify-content:flex-end;
  margin-top:8px;font-size:10px;color:rgba(245,241,234,0.45);
}
.dh-legend .dh-cell{width:10px;height:10px;aspect-ratio:auto}
@media (max-width:600px){
  .diary-heatmap{padding:14px}
  .dh-head{font-size:10px}
}

/* "Sedang nonton" Pro pill — live status on profile header */
.profile-now-watching{
  display:inline-flex;align-items:center;gap:8px;margin:8px 0 6px;padding:6px 12px;
  border-radius:999px;background:rgba(212,167,74,0.1);
  border:1px solid rgba(212,167,74,0.3);flex-wrap:wrap;
}
.pnw-dot{
  width:7px;height:7px;border-radius:50%;background:#D4A74A;
  animation:pulse 2s infinite;flex-shrink:0;
}
.pnw-label{font-size:9px;letter-spacing:0.16em;color:rgba(212,167,74,0.9);font-weight:700}
.pnw-title{font-size:12.5px;color:var(--paper);font-weight:600}

/* Year banner — compact paper-on-ink stat hook */
.profile-year-banner{
  display:inline-flex;align-items:center;gap:14px;margin-top:16px;
  padding:10px 16px;border-radius:10px;
  background:linear-gradient(135deg,rgba(212,167,74,0.14) 0%,rgba(212,167,74,0.05) 100%);
  border:1px solid rgba(212,167,74,0.3);
  flex-wrap:wrap;
}
.pyb-eyebrow{
  color:#D4A74A;font-size:10px;letter-spacing:0.18em;font-weight:700;
}
.pyb-stats{
  display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:13px;color:rgba(245,241,234,0.85);
}
.pyb-stats strong{color:var(--paper);font-weight:700}
.pyb-sep{color:rgba(245,241,234,0.3)}
.profile-share-btn{
  display:inline-flex;align-items:center;gap:6px;padding:10px 16px;
  background:#25D366;color:white;border:none;border-radius:999px;
  font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;
}
.profile-share-btn:hover{background:#20c45a;transform:translateY(-1px)}
.profile-section{margin-bottom:40px}
.profile-section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid rgba(245,241,234,0.08);
}
.ps-title{font-family:'Instrument Serif',serif;font-size:24px;margin:0;color:var(--paper)}
.ps-count{font-size:12px;color:rgba(245,241,234,0.5);font-family:'JetBrains Mono',monospace;flex:1}
.ps-see-all{
  font-size:12px;color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace;
  text-decoration:none;letter-spacing:0.04em;transition:color 0.15s;
}
.ps-see-all:hover{color:var(--accent)}
/* Self-only sections (Watchlist + Riwayat Quiz on own profile) */
.profile-section-self{
  background:rgba(245,241,234,0.02);border:1px dashed rgba(245,241,234,0.08);
  border-radius:14px;padding:18px 18px 22px;
}
.profile-wl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;
}
.profile-wl-card{
  aspect-ratio:2/3;border-radius:8px;overflow:hidden;cursor:pointer;
  background:#1a1a1a;transition:transform 0.15s,box-shadow 0.15s;
}
.profile-wl-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.4)}
.profile-wl-card img{width:100%;height:100%;object-fit:cover;display:block}
.profile-wl-poster-empty{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:8px;font-size:11px;color:rgba(245,241,234,0.4);text-align:center;
}
.profile-qh-list{display:flex;flex-direction:column;gap:10px}
.profile-qh-item{
  display:flex;align-items:center;gap:14px;padding:12px 14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:10px;cursor:pointer;transition:all 0.15s;
}
.profile-qh-item:hover{background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.18)}
.profile-qh-meta{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px}
.profile-qh-date{color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:0.04em}
.profile-qh-genre{color:rgba(245,241,234,0.75);font-weight:600}
.profile-qh-vibe{color:rgba(245,241,234,0.5);font-size:11.5px}
.profile-qh-posters{display:flex;gap:4px;flex-shrink:0}
.profile-qh-posters img{width:32px;aspect-ratio:2/3;object-fit:cover;border-radius:4px;background:#222}
.profile-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pr-card{
  display:flex;gap:12px;padding:14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;cursor:pointer;transition:all 0.15s;
}
.pr-card:hover{background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.18)}
.pr-poster{flex-shrink:0;width:54px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:#222}
.pr-poster img{width:100%;height:100%;object-fit:cover}
.pr-body{flex:1;min-width:0}
.pr-stars{color:#D4A74A;font-size:12.5px;letter-spacing:1px;margin-bottom:2px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
/* Popular review crown — ≥10 likes gets a visible badge on its rating row */
.review-popular-crown{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:999px;
  background:rgba(212,167,74,0.18);border:1px solid rgba(212,167,74,0.4);
  color:#D4A74A;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:0.08em;
}
.pr-ordinal{opacity:0.75;font-size:10px;color:rgba(212,167,74,0.7);padding-left:4px}
.pr-title{font-size:14px;font-weight:600;color:var(--paper);line-height:1.3;margin-bottom:4px}
.pr-text{font-size:12.5px;line-height:1.45;color:rgba(245,241,234,0.7);font-style:italic;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pr-date{font-size:10.5px;color:rgba(245,241,234,0.4);margin-top:6px;font-family:'JetBrains Mono',monospace}
.profile-empty{
  padding:32px 16px;text-align:center;color:rgba(245,241,234,0.55);font-size:13.5px;
  background:rgba(245,241,234,0.03);border:1px dashed rgba(245,241,234,0.12);border-radius:12px;
}
@media (max-width:640px){
  .profile-page{padding:72px 20px 40px}
  .profile-username{font-size:28px}
  .profile-avatar{width:64px;height:64px;font-size:28px}
  .profile-stats{gap:16px}
  .profile-reviews{grid-template-columns:1fr}
}

/* ========= PWA STANDALONE — profile layout cleanup =========
   In installed PWA on Android/iOS the profile header was visually
   "buggy": (1) WhatsApp green Share btn sat next to subtle outline
   action chips with totally different size/colour → mismatched row
   that wraps awkwardly; (2) 7 stats in an auto-fit grid collapsed
   to 2 cols with a stray 7th cell hanging in the last row; (3)
   avatar pushed left while the long username stretched right of it.
   Fix: harmonize action chips to one pill style, center the
   header into a clean stack, and force a 3-col stats grid so the
   numbers read as a balanced row. */
@media (max-width:720px){
  body.pwa-standalone .profile-actions-row{
    justify-content:center;gap:8px;flex-wrap:wrap;
  }
  body.pwa-standalone .profile-actions-row .profile-share-btn{
    background:rgba(37,211,102,0.14);color:#25D366;
    border:1px solid rgba(37,211,102,0.42);
    padding:5px 12px;font-size:12px;font-weight:600;
    box-shadow:none;
  }
  body.pwa-standalone .profile-actions-row .profile-share-btn:hover{
    background:rgba(37,211,102,0.22);transform:none;
  }
  body.pwa-standalone .profile-actions-row .profile-edit-link{
    margin-left:0;
  }
  body.pwa-standalone .profile-page .profile-header{
    justify-content:center;align-items:center;text-align:center;
    gap:14px;
  }
  body.pwa-standalone .profile-info{
    text-align:center;width:100%;flex-basis:100%;
  }
  body.pwa-standalone .profile-username{
    font-size:24px;display:inline-flex;flex-wrap:wrap;
    justify-content:center;align-items:center;gap:8px;
  }
  body.pwa-standalone .profile-handle{
    justify-content:center;display:flex;flex-wrap:wrap;
    gap:6px;align-items:center;
  }
  body.pwa-standalone .profile-bio{
    margin-left:auto;margin-right:auto;
  }
  body.pwa-standalone .profile-socials{
    justify-content:center;
  }
  body.pwa-standalone .profile-header .profile-stats-mono{
    grid-template-columns:repeat(3,1fr);
    gap:14px 0;width:100%;margin-top:14px;padding-top:14px;
  }
  body.pwa-standalone .profile-stats-mono .profile-stat{
    padding:6px 4px;align-items:center;text-align:center;
    border-right:1px solid rgba(245,241,234,0.08);
  }
  body.pwa-standalone .profile-stats-mono .profile-stat:first-child{
    padding-left:4px;
  }
  body.pwa-standalone .profile-stats-mono .profile-stat:nth-child(3n){
    border-right:none;
  }
  body.pwa-standalone .profile-stats-mono .profile-stat:nth-child(n+5){
    border-right:1px solid rgba(245,241,234,0.08);
  }
  body.pwa-standalone .profile-stats-mono .profile-stat:nth-child(6),
  body.pwa-standalone .profile-stats-mono .profile-stat:nth-child(9){
    border-right:none;
  }
}
/* Compact mode under 480px — audit S2 A-02 (parity with .af-card). */
@media (max-width:480px){
  .pr-card{padding:10px;gap:10px;border-radius:10px}
  .pr-poster{width:44px}
  .pr-title{font-size:13.5px;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .pr-text{font-size:12px;-webkit-line-clamp:2;line-height:1.4}
  .pr-stars{font-size:11.5px;margin-bottom:1px}
  .pr-date{font-size:10px;margin-top:4px}
  .profile-reviews{gap:8px}
}

/* ========= PRICING PAGE ========= */
.pricing-page{
  display:none;color:var(--paper);
}
.pricing-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 64px;overflow-y:auto;
  background:var(--ink);
}
.pricing-head{max-width:800px;margin:0 auto 36px;text-align:center}
.pp-eyebrow{
  display:inline-block;color:#D4A74A;font-size:10px;letter-spacing:0.22em;
  font-weight:600;margin-bottom:16px;
}
.pp-title{
  font-family:'Instrument Serif',serif;font-size:54px;line-height:1.05;
  color:var(--paper);margin:0 0 18px;letter-spacing:-0.02em;
}
.pp-title .italic{color:var(--accent);font-style:italic}
.pp-sub{color:rgba(245,241,234,0.65);font-size:17px;line-height:1.5;margin:0}
@media (max-width:640px){
  .pp-title{font-size:36px}
  .pp-sub{font-size:14.5px}
}

/* Billing toggle */
.pp-billing-toggle{
  display:inline-flex;gap:4px;padding:4px;margin:0 auto 32px;
  background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.12);
  border-radius:999px;max-width:100%;
}
.pricing-page .pp-billing-toggle{display:flex;justify-content:center;width:fit-content;margin-left:auto;margin-right:auto}
.ppbt-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 22px;
  background:transparent;color:rgba(245,241,234,0.7);border:none;
  border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;
  transition:all 0.2s ease;
}
.ppbt-btn:hover{color:var(--paper)}
.ppbt-btn.active{background:var(--accent);color:white}
.ppbt-save{
  font-size:10px;padding:3px 8px;background:rgba(37,211,102,0.2);
  color:#25D366;border-radius:999px;font-weight:700;letter-spacing:0.02em;
}
.ppbt-btn.active .ppbt-save{background:rgba(255,255,255,0.25);color:white}

.pricing-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;
  max-width:860px;margin:0 auto 48px;
}
.plan-card{
  position:relative;padding:32px 28px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.1);
  border-radius:18px;display:flex;flex-direction:column;
}
.plan-card-featured{
  background:linear-gradient(180deg,rgba(224,60,40,0.08) 0%,rgba(212,167,74,0.04) 100%);
  border-color:rgba(212,167,74,0.45);
  box-shadow:0 12px 40px rgba(212,167,74,0.12);
}
.pc-badge{
  position:absolute;top:-12px;right:20px;
  padding:4px 12px;background:#D4A74A;color:var(--ink);
  font-size:10px;font-weight:700;letter-spacing:0.15em;border-radius:999px;
  font-family:'JetBrains Mono',monospace;
}
.pc-header{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(245,241,234,0.08)}
.pc-name{
  font-family:'Instrument Serif',serif;font-size:26px;line-height:1;
  color:var(--paper);margin:0 0 16px;letter-spacing:-0.01em;
}
.pc-spark{color:#D4A74A;font-style:italic}
.pc-price{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}
.pc-currency{font-size:18px;color:rgba(245,241,234,0.6);font-weight:500}
.pc-amount{
  font-family:'Instrument Serif',serif;font-size:44px;line-height:1;
  color:var(--paper);font-weight:500;letter-spacing:-0.02em;
}
.pc-period{font-size:14px;color:rgba(245,241,234,0.55);margin-left:4px}
.pc-cycle{font-size:12.5px;color:rgba(245,241,234,0.55);font-style:italic}
.plan-card-featured .pc-cycle{color:#25D366}
.pc-features{
  list-style:none;padding:0;margin:0 0 24px;flex:1;
}
.pc-features li{
  padding:9px 0;font-size:13.5px;color:rgba(245,241,234,0.85);line-height:1.45;
  border-bottom:1px dashed rgba(245,241,234,0.06);
}
.pc-features li:last-child{border-bottom:none}
.pc-features li strong{color:var(--paper);font-weight:700}
.pc-features li code{
  background:rgba(212,167,74,0.12);color:#D4A74A;padding:1px 5px;
  border-radius:3px;font-size:11.5px;font-family:'JetBrains Mono',monospace;
}
/* Benefit-led variant: strong benefit line + small sub-text, cleaner than emoji-prefixed feature dump */
.pc-features-benefits li{
  display:flex;flex-direction:column;gap:4px;padding:12px 0;
}
.pc-features-benefits li strong{font-size:14px;letter-spacing:-0.005em}
.pc-features-benefits .pcf-sub{
  font-size:12.5px;line-height:1.5;color:rgba(245,241,234,0.6);font-weight:400;
}
.pc-cta{
  width:100%;padding:14px;border-radius:12px;font-size:14px;font-weight:700;
  cursor:pointer;transition:all 0.15s;border:none;
}
.pc-cta-primary{
  background:var(--accent);color:white;
  box-shadow:0 6px 20px rgba(224,60,40,0.35);
}
.pc-cta-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(224,60,40,0.45)}
.pc-cta-current{
  background:rgba(245,241,234,0.06);color:rgba(245,241,234,0.5);
  border:1px solid rgba(245,241,234,0.12);cursor:default;
}
.pc-ctafoot{
  margin-top:12px;font-size:11.5px;line-height:1.5;color:rgba(245,241,234,0.55);
  text-align:center;
}
.pc-ctafoot strong{color:#25D366;font-weight:700}

/* ========= Payment-method trust strip (above CTA) ========= */
/* Audit S2 PR-04 + S4 lever 04: visible payment logos = trust signal for ID
   users who are sensitive to which methods are accepted. Promotes the foot-text
   list into a visual chip row positioned just above the upgrade CTA. */
.pc-paymethods{
  margin-top:20px;padding-top:18px;border-top:1px dashed rgba(245,241,234,0.12);
}
.ppm-label{
  display:block;font-size:9.5px;letter-spacing:0.2em;color:rgba(245,241,234,0.45);
  text-transform:uppercase;margin-bottom:10px;text-align:center;font-weight:600;
}
.ppm-row{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.ppm-chip{
  font-family:'Inter Tight',system-ui,sans-serif;font-size:11px;font-weight:600;
  padding:5px 10px;border:1px solid rgba(245,241,234,0.18);
  background:rgba(245,241,234,0.04);color:rgba(245,241,234,0.85);
  border-radius:4px;letter-spacing:0.01em;line-height:1.3;
}

/* ========= Pricing testimonials section ========= */
/* Audit S2 PR-03 + S4 lever 04: 3 testimonials + 1 stat callout. Trust-gap
   closer for casual ID users — needs concrete proof somebody else paid. */
.pp-testimonials{max-width:1180px;margin:48px auto 24px;padding:0 20px}
.pp-test-head{text-align:center;margin-bottom:28px;max-width:640px;margin-left:auto;margin-right:auto}
.pp-test-title{
  font-family:'Instrument Serif',serif;font-size:34px;line-height:1.05;
  color:var(--paper);margin:8px 0 8px;letter-spacing:-0.01em;font-weight:400;
}
.pp-test-title .italic{color:#D4A74A;font-style:italic}
.pp-test-stat{
  display:flex;align-items:center;gap:24px;padding:24px 28px;margin:0 auto 28px;
  max-width:780px;background:linear-gradient(135deg,rgba(212,167,74,0.09),rgba(212,167,74,0.02));
  border:1px solid rgba(212,167,74,0.25);border-left:3px solid #D4A74A;
}
.ppts-num{
  font-family:'Instrument Serif',serif;font-size:64px;line-height:0.8;
  color:#D4A74A;font-style:italic;letter-spacing:-0.03em;flex-shrink:0;
}
.ppts-num .ppts-x{font-size:32px;color:rgba(245,241,234,0.6);margin-left:2px}
.ppts-label{font-size:14px;line-height:1.55;color:rgba(245,241,234,0.78)}
.ppts-label strong{color:var(--paper);font-weight:600}
.pp-test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){
  .pp-test-grid{grid-template-columns:1fr;gap:14px}
  .pp-test-stat{flex-direction:column;text-align:center;gap:14px;padding:20px}
  .ppts-num{font-size:48px}
}
.pp-test-card{
  margin:0;padding:24px 22px;background:#0f0f10;
  border:1px solid rgba(245,241,234,0.10);position:relative;
}
.pp-test-card::before{
  content:"\201C";position:absolute;top:8px;left:14px;
  font-family:'Instrument Serif',serif;font-size:48px;line-height:1;
  color:rgba(212,167,74,0.35);font-style:italic;
}
.pp-test-card blockquote{
  margin:0 0 16px;padding-left:20px;font-family:'Instrument Serif',serif;
  font-size:16px;line-height:1.5;color:rgba(245,241,234,0.85);font-style:italic;
}
.pp-test-card figcaption{
  display:flex;flex-direction:column;gap:3px;padding-left:20px;
  border-top:1px solid rgba(245,241,234,0.08);padding-top:12px;
}
.pptc-name{font-size:13px;font-weight:600;color:var(--paper)}
.pptc-meta{font-size:9.5px;letter-spacing:0.18em;color:rgba(245,241,234,0.45);text-transform:uppercase}

/* FAQ */
/* ========= Preview Pro profile — 4 themed mockups ========= */
.pp-preview-wrap{max-width:1180px;margin:56px auto 32px;padding:0 20px}
.pp-preview-head{text-align:center;margin-bottom:24px;max-width:640px;margin-left:auto;margin-right:auto}
.pp-preview-title{
  font-family:'Instrument Serif',serif;font-size:34px;line-height:1.05;
  color:var(--paper);margin:8px 0 8px;letter-spacing:-0.01em;
}
.pp-preview-title .italic{color:#D4A74A;font-style:italic}
.pp-preview-sub{font-size:14px;line-height:1.55;color:rgba(245,241,234,0.65);max-width:580px;margin:0 auto}
.pp-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:10px}
@media (max-width:820px){.pp-gallery{grid-template-columns:1fr;gap:18px}}
.pp-gallery-hint{text-align:center;font-size:10px;letter-spacing:0.2em;color:rgba(245,241,234,0.35);margin-top:18px;font-weight:700}

/* Single mockup card (v2) — shared bones, themes override via .theme-<name> */
.ppc-v2{
  position:relative;border-radius:18px;overflow:hidden;
  background:#0f0f10;border:1px solid rgba(245,241,234,0.08);
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.65);
  transition:transform 0.2s ease, border-color 0.25s ease;
}
.ppc-v2:hover{transform:translateY(-3px)}
.ppc-v2-backdrop{height:110px;position:relative}
.ppc-v2-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,rgba(15,15,16,0.3) 55%,#0f0f10 100%)}
.ppc-v2-theme-chip{position:absolute;top:10px;left:10px;z-index:2;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,0.55);font-size:9px;letter-spacing:0.18em;font-weight:700;backdrop-filter:blur(4px);border:1px solid;}
.ppc-v2-pro{position:absolute;top:10px;right:10px;z-index:2;padding:4px 9px;border-radius:999px;font-size:9px;letter-spacing:0.18em;font-weight:700;color:#1a1100;background:#D4A74A}
.ppc-v2-body{position:relative;z-index:2;padding:0 16px 12px;margin-top:-36px;display:flex;gap:12px;align-items:flex-end}
.ppc-v2-avatar-wrap{position:relative;flex-shrink:0}
.ppc-v2-ring{position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 90deg,var(--mock-accent,#D4A74A) 0deg,var(--mock-accent-2,#FF8C42) 120deg,var(--mock-accent,#D4A74A) 240deg,var(--mock-accent,#D4A74A) 360deg);animation:ppcRingSpin 10s linear infinite}
.ppc-v2-avatar{position:relative;width:64px;height:64px;background:linear-gradient(135deg,#3a3a3a,#1a1a1a);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:30px;font-weight:600}
.ppc-v2-avatar.av-circle{border-radius:50%}
.ppc-v2-avatar.av-square{border-radius:14px}
.ppc-v2-avatar.av-hexagon{border-radius:0;clip-path:polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)}
.ppc-v2-avatar.av-stamp{border-radius:6px;padding:3px;background:#F5F1EA;color:#1a1100}
.ppc-v2-avatar.av-stamp::before{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 2px var(--mock-accent,#D4A74A);pointer-events:none}
.ppc-v2-meta{flex:1;min-width:0;padding-bottom:2px}
.ppc-v2-name{font-size:16px;font-weight:700;color:var(--paper);display:flex;align-items:center;gap:6px;flex-wrap:wrap;letter-spacing:-0.005em}
.ppc-v2-pro-pill{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.12em;background:rgba(212,167,74,0.22);color:#D4A74A;padding:2px 6px;border-radius:999px;font-weight:700}
.ppc-v2-handle{font-size:9px;letter-spacing:0.1em;color:rgba(245,241,234,0.5);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppc-v2-nw{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 9px;border-radius:999px;background:var(--mock-nw-bg,rgba(212,167,74,0.1));border:1px solid var(--mock-nw-border,rgba(212,167,74,0.3));max-width:100%}
.ppc-v2-nw-dot{width:5px;height:5px;border-radius:50%;background:var(--mock-accent,#D4A74A);animation:pulse 2s infinite}
.ppc-v2-nw-label{font-size:8px;letter-spacing:0.14em;color:var(--mock-accent,#D4A74A);font-weight:700}
.ppc-v2-nw-title{font-size:11px;color:var(--paper);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppc-v2-stats{display:flex;gap:14px;padding:10px 16px;border-top:1px solid rgba(245,241,234,0.06);font-size:9px;letter-spacing:0.08em;color:rgba(245,241,234,0.5);flex-wrap:wrap}
.ppc-v2-stats strong{color:var(--paper);font-weight:700;font-size:12px;font-family:inherit;margin-right:2px}
.ppc-v2-fav-head{padding:4px 16px 6px;font-size:9px;letter-spacing:0.2em;color:rgba(245,241,234,0.5);font-weight:700}
.ppc-v2-fav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 16px 16px}
.ppc-v2-fav{
  position:relative;aspect-ratio:2/3;border-radius:5px;overflow:hidden;
  background:linear-gradient(160deg,var(--mock-accent,#D4A74A)33,var(--mock-accent-2,#8a6a2a)1f);
  border:1px solid var(--mock-accent,#D4A74A)40;
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-size:8.5px;line-height:1.1;
  color:rgba(245,241,234,0.85);text-align:center;padding:4px;
}
.ppc-v2-fav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.ppc-fav-fallback-title{position:relative;z-index:1;font-style:italic}
.ppc-v2-fav.has-poster .ppc-fav-fallback-title{display:none}
/* Once a tile has been wired to openMovie() it becomes an interactive button —
   hover lifts the poster + reveals a "→ detail" hint pill, tap/Enter opens the
   real film modal (synopsis, trailer, where-to-watch). */
.ppc-v2-fav.ppc-fav-clickable{cursor:pointer;transition:transform 0.18s ease,box-shadow 0.18s ease}
.ppc-v2-fav.ppc-fav-clickable:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,0.5);z-index:3}
.ppc-v2-fav.ppc-fav-clickable:focus-visible{outline:2px solid var(--mock-accent,#D4A74A);outline-offset:3px}
.ppc-v2-fav.ppc-fav-clickable::after{
  content:"Detail →";position:absolute;inset:auto 0 0 0;z-index:4;
  padding:4px 0;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:0.08em;color:#fff;text-align:center;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  opacity:0;transition:opacity 0.18s ease;pointer-events:none;
}
.ppc-v2-fav.ppc-fav-clickable:hover::after,.ppc-v2-fav.ppc-fav-clickable:focus-visible::after{opacity:1}

/* Theme variants — sets --mock-accent gradients, backdrop colors, theme-chip colors */
.theme-sunset{--mock-accent:#FF8C42;--mock-accent-2:#7e2e10}
.theme-sunset .ppc-v2-backdrop{background:linear-gradient(135deg,#d96825 0%,#7e2e10 45%,#2a1a1a 100%)}
.theme-sunset .ppc-v2-theme-chip{color:#FF8C42;border-color:rgba(255,140,66,0.4)}
.theme-sunset{border-color:rgba(255,140,66,0.2)}

.theme-ocean{--mock-accent:#5EC3E7;--mock-accent-2:#0d3a52}
.theme-ocean .ppc-v2-backdrop{background:linear-gradient(135deg,#3796b8 0%,#154a64 45%,#0d1a24 100%)}
.theme-ocean .ppc-v2-theme-chip{color:#5EC3E7;border-color:rgba(94,195,231,0.4)}
.theme-ocean{border-color:rgba(94,195,231,0.2)}
.theme-ocean .ppc-v2-pro{background:#5EC3E7;color:#0d1a24}

.theme-forest{--mock-accent:#6FCF7A;--mock-accent-2:#1f4a2a}
.theme-forest .ppc-v2-backdrop{background:linear-gradient(135deg,#5ea670 0%,#2e5a38 45%,#0f1f14 100%)}
.theme-forest .ppc-v2-theme-chip{color:#6FCF7A;border-color:rgba(111,207,122,0.4)}
.theme-forest{border-color:rgba(111,207,122,0.2)}
.theme-forest .ppc-v2-pro{background:#6FCF7A;color:#0f1f14}

.theme-amethyst{--mock-accent:#B78CE3;--mock-accent-2:#3a1e5a}
.theme-amethyst .ppc-v2-backdrop{background:linear-gradient(135deg,#9563c6 0%,#432372 45%,#1a0f28 100%)}
.theme-amethyst .ppc-v2-theme-chip{color:#B78CE3;border-color:rgba(183,140,227,0.4)}
.theme-amethyst{border-color:rgba(183,140,227,0.2)}
.theme-amethyst .ppc-v2-pro{background:#B78CE3;color:#1a0f28}
/* Shared keyframe for the avatar-ring spin (used by v2 mockups) */
@keyframes ppcRingSpin{to{transform:rotate(360deg)}}
@media (max-width:640px){
  .pp-preview-title{font-size:26px}
}

/* ========= Free vs Pro comparison matrix ========= */
.pp-matrix{max-width:860px;margin:36px auto 48px;padding:0 20px}
.pp-matrix-title{
  font-family:'Instrument Serif',serif;font-size:28px;
  color:var(--paper);margin:0 0 16px;text-align:center;letter-spacing:-0.01em;
}
.pp-table{
  width:100%;border-collapse:collapse;font-size:13.5px;
  background:rgba(245,241,234,0.02);border-radius:14px;overflow:hidden;
  border:1px solid rgba(245,241,234,0.08);
}
.pp-table thead th{
  padding:14px 16px;text-align:left;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.18em;
  color:rgba(245,241,234,0.6);font-weight:700;text-transform:uppercase;
  border-bottom:1px solid rgba(245,241,234,0.08);
}
.pp-table thead th:nth-child(2), .pp-table thead th:nth-child(3){text-align:center;width:110px}
.pp-table .ppt-pro{color:#D4A74A}
.pp-table tbody td{padding:11px 16px;border-bottom:1px solid rgba(245,241,234,0.05)}
.pp-table tbody td:nth-child(2), .pp-table tbody td:nth-child(3){text-align:center;color:rgba(245,241,234,0.85)}
.pp-table tbody td:nth-child(3){color:#D4A74A;font-weight:600}
.pp-table tbody td strong{color:var(--paper);font-weight:700}
.pp-table .ppt-group td{
  padding:14px 16px 8px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.14em;
  color:rgba(212,167,74,0.85);font-weight:700;
  background:rgba(212,167,74,0.04);border-top:1px solid rgba(212,167,74,0.14);
}
.pp-table tbody tr:last-child td{border-bottom:none}
@media (max-width:640px){
  .pp-table{font-size:12px}
  .pp-table thead th, .pp-table tbody td{padding:9px 10px}
  .pp-table thead th:nth-child(2), .pp-table thead th:nth-child(3){width:70px}
}

.pp-faq{max-width:680px;margin:0 auto}
.pp-faq-title{
  font-family:'Instrument Serif',serif;font-size:28px;color:var(--paper);
  margin:0 0 20px;text-align:center;
}
.pp-faq-item{
  padding:18px 20px;margin-bottom:10px;
  background:rgba(245,241,234,0.03);border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;cursor:pointer;
}
.pp-faq-item summary{
  font-size:14.5px;font-weight:600;color:var(--paper);list-style:none;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;
}
.pp-faq-item summary::-webkit-details-marker{display:none}
.pp-faq-item summary::after{
  content:'+';font-size:20px;color:rgba(245,241,234,0.5);transition:transform 0.2s;
}
.pp-faq-item[open] summary::after{transform:rotate(45deg)}
.pp-faq-item p{
  margin:12px 0 0;font-size:13.5px;line-height:1.6;color:rgba(245,241,234,0.7);
}
@media (max-width:640px){
  .pricing-page.active{padding:72px 20px 48px}
  .pricing-grid{grid-template-columns:1fr;gap:16px}
  .plan-card{padding:24px 20px}
  .pc-amount{font-size:36px}
}

/* Gold-rimmed avatar for Pro users */
.profile-avatar-pro{
  box-shadow:0 0 0 3px #D4A74A, 0 8px 24px rgba(212,167,74,0.4) !important;
  background:linear-gradient(135deg,#D4A74A,#E8C573) !important;
}

/* Pro-only avatar frame shapes. Overrides the default circle via more
   specific selectors. `stamp` uses a mask to simulate a postage-stamp edge. */
.profile-avatar.avatar-frame-square{border-radius:14px !important}
.profile-avatar.avatar-frame-square img{border-radius:12px}
.profile-avatar.avatar-frame-hexagon{
  border-radius:0 !important;
  clip-path:polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background:linear-gradient(135deg,#D4A74A,#E8C573);
}
.profile-avatar.avatar-frame-hexagon img{clip-path:inherit}
.profile-avatar.avatar-frame-stamp{
  border-radius:6px !important;
  padding:6px;background:#F5F1EA;
  box-shadow:0 0 0 2px #D4A74A, 0 8px 24px rgba(212,167,74,0.4) !important;
  mask-image:radial-gradient(circle 5px at 0 50%, transparent 98%, #000) ,
             radial-gradient(circle 5px at 100% 50%, transparent 98%, #000) ,
             linear-gradient(#000, #000);
  mask-composite:intersect;
  -webkit-mask-composite:source-in;
}
.profile-avatar.avatar-frame-stamp img{border-radius:3px}

/* ========= PRO BADGE (gold star) on profile + cards ========= */
.pro-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;background:linear-gradient(135deg,#D4A74A,#E8C573);
  color:var(--ink);border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:0.06em;
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;
  vertical-align:middle;
}
.pro-badge-star{font-size:11px;line-height:1}
.pro-badge-compact{padding:0;background:transparent;color:#D4A74A;font-size:14px;line-height:1}

/* Upgrade-to-pro CTA button (inline, appears at locked features) */
.upgrade-cta{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  background:linear-gradient(135deg,var(--accent),#D4A74A);color:white;
  border:none;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px rgba(212,167,74,0.3);text-decoration:none;
  transition:all 0.15s;
}
.upgrade-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,167,74,0.45);color:white}
.upgrade-cta .uc-icon{font-size:15px}

/* Tip jar in footer */
.tip-jar-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;margin-left:10px;
  background:rgba(37,211,102,0.1);
  border:1px solid rgba(37,211,102,0.3);border-radius:999px;
  color:#25D366;text-decoration:none;
  font-size:11px;font-weight:600;letter-spacing:0.02em;
  transition:all 0.15s;
}
.tip-jar-link:hover{background:rgba(37,211,102,0.2);border-color:#25D366;color:#25D366}

/* ========= LOCKED FEATURE PREVIEW (for free users) ========= */
.locked-feature-preview{
  position:relative;padding:24px;margin:16px 0;
  background:rgba(245,241,234,0.03);border:1px dashed rgba(212,167,74,0.35);
  border-radius:14px;text-align:center;
}
.lfp-lock{font-size:32px;margin-bottom:8px;opacity:0.7}
.lfp-title{
  font-family:'Instrument Serif',serif;font-size:22px;color:var(--paper);
  margin:0 0 6px;
}
.lfp-sub{font-size:13px;color:rgba(245,241,234,0.65);margin:0 0 16px;max-width:400px;margin-left:auto;margin-right:auto;line-height:1.5}

/* ========= STATS DASHBOARD (skeleton for Pro) ========= */
.stats-page{
  display:none;color:var(--paper);
}
.stats-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 64px;overflow-y:auto;background:var(--ink);
}
.stats-page.active > *{max-width:960px;margin-left:auto;margin-right:auto}

/* ========= TIER SUCCESS · GILT FRAME (post-Mayar redirect) ========= */
/* Movement: a museum-vitrine moment of arrival. Ticket-stub card on velvet */
/* hall. Gold hairlines, paper grain, monospace catalogue marks, italic serif */
/* declaration. Restraint over fanfare. Detail of the design philosophy lives */
/* in design-output/tier-success-gilt-frame/PHILOSOPHY.md. */
.ts-stage{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:8px 0 32px;
  background:radial-gradient(ellipse at 50% 32%, rgba(212,167,74,0.07), transparent 62%);
}
.ts-eyebrow{
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:11px;letter-spacing:0.42em;
  color:#D4A74A;text-transform:uppercase;text-align:center;
  opacity:0.88;margin:0 0 6px;
}
.ts-est{
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:9.5px;letter-spacing:0.3em;
  color:rgba(245,241,234,0.42);text-transform:uppercase;
  margin:0 0 28px;text-align:center;
}
.ts-ticket{
  position:relative;width:100%;max-width:580px;
  background:linear-gradient(180deg,#F8F4ED,#EFE8DA);
  border-radius:6px;padding:38px 28px 30px;
  color:#1a1208;
  box-shadow:0 26px 48px -16px rgba(0,0,0,0.55), 0 1px 0 0 rgba(212,167,74,0.45) inset;
  animation:ts-rise 0.95s cubic-bezier(.16,1,.3,1) both;
}
.ts-ticket::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.55;mix-blend-mode:multiply;
}
.ts-ticket::after{
  content:'';position:absolute;inset:14px;border-radius:2px;pointer-events:none;
  border:0.5px solid rgba(26,18,8,0.18);
}
.ts-ticket > *{position:relative;z-index:1}
.ts-corners{position:absolute;inset:14px;pointer-events:none;z-index:1}
.ts-corners span{
  position:absolute;width:14px;height:14px;
  background:
    linear-gradient(rgba(26,18,8,0.42),rgba(26,18,8,0.42)) center/100% 0.6px no-repeat,
    linear-gradient(rgba(26,18,8,0.42),rgba(26,18,8,0.42)) center/0.6px 100% no-repeat;
}
.ts-corners span:nth-child(1){top:-7px;left:-7px}
.ts-corners span:nth-child(2){top:-7px;right:-7px}
.ts-corners span:nth-child(3){bottom:-7px;left:-7px}
.ts-corners span:nth-child(4){bottom:-7px;right:-7px}
.ts-strip{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:9.5px;letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(26,18,8,0.55);
  padding-bottom:10px;
  border-bottom:0.5px solid rgba(26,18,8,0.16);
}
.ts-inner-eyebrow{
  margin-top:32px;text-align:center;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:9.5px;letter-spacing:0.45em;
  color:#A77F38;text-transform:uppercase;
}
.ts-headline{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(60px, 14vw, 116px);
  line-height:1;letter-spacing:-0.02em;
  color:#1a1208;text-align:center;margin:18px 0 0;
}
.ts-headline .dot{color:#D4A74A;font-style:normal}
.ts-rule{
  display:flex;align-items:center;justify-content:center;
  margin:14px auto 0;width:200px;
}
.ts-rule::before, .ts-rule::after{
  content:'';flex:1;height:0.5px;
  background:linear-gradient(90deg, transparent, rgba(212,167,74,0.85), transparent);
}
.ts-rule .dot{
  width:5px;height:5px;background:#D4A74A;border-radius:50%;margin:0 10px;
}
.ts-sub{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(15px, 3.4vw, 19px);line-height:1.42;
  color:rgba(26,18,8,0.78);text-align:center;
  margin:18px 8px 0;
}
.ts-sub-en{
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:9px;letter-spacing:0.32em;text-transform:uppercase;
  color:rgba(26,18,8,0.42);text-align:center;
  margin:14px 0 0;
}
.ts-divider{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:30px 0 0;
}
.ts-divider::before, .ts-divider::after{
  content:'';flex:1;height:5px;
  background-image:radial-gradient(circle, rgba(26,18,8,0.32) 1px, transparent 1.6px);
  background-size:14px 5px;background-repeat:repeat-x;background-position:center;
}
.ts-divider-mark{
  width:14px;height:14px;display:inline-block;position:relative;
  border:0.5px solid #A77F38;transform:rotate(45deg);
}
.ts-divider-mark::after{
  content:'';position:absolute;inset:5px;background:#D4A74A;
}
.ts-reel-label{
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:9px;letter-spacing:0.42em;text-transform:uppercase;
  color:rgba(26,18,8,0.42);text-align:center;
  margin:24px 0 8px;
}
.ts-reel-id{
  display:block;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:13px;letter-spacing:0.06em;
  color:#1a1208;text-align:center;
  word-break:break-all;padding:0 8px;
}
.ts-copy{
  display:inline-block;margin:10px auto 0;
  background:transparent;border:0.5px solid rgba(212,167,74,0.55);
  color:#A77F38;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:9px;letter-spacing:0.32em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;cursor:pointer;
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}
.ts-copy:hover{background:rgba(212,167,74,0.1);color:#1a1208;border-color:#D4A74A}
.ts-copy-row{text-align:center}
.ts-seal{
  width:104px;height:104px;margin:24px auto 0;display:block;
}
.ts-cta{
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;max-width:380px;margin:24px auto 0;
  padding:17px 28px;border-radius:999px;
  background:#1a1208;color:#F5F1EA;
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:11.5px;letter-spacing:0.4em;text-transform:uppercase;font-weight:500;
  border:0.5px solid rgba(212,167,74,0.55);
  cursor:pointer;
  box-shadow:0 4px 18px -6px rgba(26,18,8,0.5);
  transition:transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s, border-color 0.3s;
}
.ts-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -8px rgba(26,18,8,0.6);
  border-color:#EBCB7B;
}
.ts-cta-arrow{
  display:inline-block;color:#D4A74A;font-style:normal;
  transition:transform 0.35s cubic-bezier(.16,1,.3,1);
}
.ts-cta:hover .ts-cta-arrow{transform:translateX(3px)}
.ts-ghost{
  display:block;margin:16px auto 0;
  background:none;border:0;cursor:pointer;
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;font-size:14.5px;
  color:rgba(26,18,8,0.5);
  text-align:center;
  transition:color 0.2s;
}
.ts-ghost:hover{color:#1a1208}
.ts-footnote{
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:8.5px;letter-spacing:0.32em;text-transform:uppercase;
  color:rgba(26,18,8,0.4);text-align:center;
  margin:22px 0 0;padding-top:14px;
  border-top:0.5px solid rgba(26,18,8,0.1);
}
@keyframes ts-rise{
  from{opacity:0;transform:translateY(20px) scale(0.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:560px){
  .ts-stage{padding:0 0 24px}
  .ts-eyebrow{font-size:9px;letter-spacing:0.28em}
  .ts-est{font-size:8.5px;letter-spacing:0.22em;margin-bottom:22px}
  .ts-ticket{padding:30px 20px 24px}
  .ts-strip{font-size:8.5px;letter-spacing:0.18em}
  .ts-inner-eyebrow{font-size:8.5px;letter-spacing:0.32em}
  .ts-headline{margin-top:14px}
  .ts-sub{margin:14px 4px 0}
  .ts-sub-en{font-size:8px;letter-spacing:0.22em}
  .ts-reel-label{font-size:8px;letter-spacing:0.32em}
  .ts-reel-id{font-size:11.5px}
  .ts-cta{padding:15px 22px;font-size:10.5px;letter-spacing:0.3em}
  .ts-seal{width:88px;height:88px;margin-top:20px}
  .ts-footnote{font-size:7.5px;letter-spacing:0.22em}
}
@media(max-width:380px){
  .ts-eyebrow{font-size:8px;letter-spacing:0.22em}
}

/* ========= LEADERBOARD (Deck 09 Phase 3) ========= */
.leaderboard-page{display:none;color:var(--paper)}
.leaderboard-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 64px;overflow-y:auto;background:var(--ink);
}
.lb-inner{max-width:780px;margin:0 auto}
.lb-head{margin-bottom:32px;text-align:center}
.lb-eyebrow{display:inline-block;font-size:10px;letter-spacing:0.22em;color:#D4A74A;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.lb-title{
  font-family:'Instrument Serif',serif;font-size:clamp(36px,5vw,52px);
  letter-spacing:-0.02em;line-height:1.05;font-weight:400;margin:0 0 12px;
}
.lb-title .italic{font-style:italic;color:#D4A74A}
.lb-sub{font-size:14.5px;color:rgba(245,241,234,0.65);max-width:540px;margin:0 auto;line-height:1.55}
.lb-creator-banner{
  display:flex;gap:18px;align-items:flex-start;
  padding:22px 24px;margin:0 0 28px;
  background:linear-gradient(135deg,rgba(212,167,74,0.10),rgba(224,60,40,0.05));
  border:1px solid rgba(212,167,74,0.32);border-left:3px solid #D4A74A;border-radius:14px;
}
.lcb-icon{font-size:28px;line-height:1;flex-shrink:0;color:#D4A74A}
.lcb-body h3{font-family:'Instrument Serif',serif;font-size:22px;font-weight:400;margin:0 0 6px;color:var(--paper)}
.lcb-body h3 .italic{font-style:italic;color:#D4A74A}
.lcb-body p{font-size:13.5px;line-height:1.55;color:rgba(245,241,234,0.78);margin:0 0 12px}
.lcb-body p strong{color:var(--paper);font-weight:600}
.lcb-cta{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:#D4A74A;
  text-decoration:none;padding:7px 12px;border:1px solid rgba(212,167,74,0.45);
  border-radius:6px;transition:all .18s;
}
.lcb-cta:hover{background:rgba(212,167,74,0.12);color:#F5C177}
.lb-list{display:flex;flex-direction:column;gap:8px}
.lb-skel .lb-row-skel{
  height:64px;background:rgba(245,241,234,0.04);border-radius:10px;
  animation:skelPulse 1.2s ease-in-out infinite;
}
@keyframes skelPulse{0%,100%{opacity:0.5}50%{opacity:0.85}}
.lb-row{
  display:grid;grid-template-columns:48px 44px 1fr auto;gap:14px;align-items:center;
  padding:12px 16px;border-radius:10px;text-decoration:none;color:inherit;
  background:rgba(245,241,234,0.03);border:1px solid rgba(245,241,234,0.06);
  transition:all .15s ease;
}
.lb-row:hover{background:rgba(245,241,234,0.06);border-color:rgba(245,241,234,0.16);transform:translateX(2px)}
.lb-rank{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:30px;
  color:rgba(245,241,234,0.4);text-align:center;line-height:1;letter-spacing:-0.02em;
}
.lb-row.lb-rank-podium .lb-rank{color:#D4A74A;font-size:36px}
.lb-row.lb-rank-podium{border-color:rgba(212,167,74,0.32);background:linear-gradient(90deg,rgba(212,167,74,0.05),transparent 60%)}
.lb-avatar{
  width:44px;height:44px;border-radius:50%;background:#1a1814;
  object-fit:cover;flex-shrink:0;
}
.lb-avatar-fallback{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#E03C28,#D4A74A);color:#fff;
  font-family:'Instrument Serif',serif;font-size:20px;font-style:italic;
}
.lb-userblock{min-width:0}
.lb-name{font-size:15px;font-weight:600;color:var(--paper);display:flex;align-items:center;gap:8px}
.lb-pro-badge{
  font-size:8.5px;letter-spacing:0.18em;padding:2px 6px;border-radius:3px;
  background:rgba(212,167,74,0.18);color:#D4A74A;border:1px solid rgba(212,167,74,0.4);
}
.lb-meta{font-size:10.5px;color:rgba(245,241,234,0.55);letter-spacing:0.05em;margin-top:2px}
.lb-score{
  font-family:'Instrument Serif',serif;font-size:28px;font-style:italic;
  color:#D4A74A;line-height:1;letter-spacing:-0.02em;
}
.lb-score small{font-size:10px;color:rgba(245,241,234,0.45);font-style:normal;letter-spacing:0.16em;font-family:'JetBrains Mono',monospace;margin-left:3px}
.lb-empty{
  padding:40px 24px;text-align:center;color:rgba(245,241,234,0.55);
  font-size:14px;background:rgba(245,241,234,0.03);border:1px dashed rgba(245,241,234,0.12);
  border-radius:14px;
}
@media (max-width:640px){
  .leaderboard-page.active{padding:72px 18px 48px}
  .lb-creator-banner{flex-direction:column;gap:10px}
  .lb-row{grid-template-columns:36px 36px 1fr auto;gap:10px;padding:10px 12px}
  .lb-rank{font-size:24px}
  .lb-row.lb-rank-podium .lb-rank{font-size:28px}
  .lb-avatar{width:36px;height:36px}
  .lb-name{font-size:13.5px}
  .lb-score{font-size:22px}
}

/* ========= DAILY NUDGE (R-01 in-app variant) ========= */
.daily-nudge{
  margin:0 auto 14px;padding:14px 18px;max-width:920px;
  background:linear-gradient(135deg,rgba(212,167,74,0.10),rgba(224,60,40,0.06));
  border:1px solid rgba(212,167,74,0.32);border-left:3px solid #D4A74A;
  border-radius:12px;animation:dnSlideIn .45s cubic-bezier(.16,1,.3,1);
}
.daily-nudge[hidden]{display:none}
@keyframes dnSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.dn-eyebrow{
  font-size:9.5px;letter-spacing:0.22em;color:#D4A74A;
  text-transform:uppercase;font-weight:700;margin-bottom:10px;
  display:flex;align-items:center;gap:7px;
}
.dn-pulse{
  width:7px;height:7px;border-radius:50%;background:#D4A74A;
  box-shadow:0 0 0 0 rgba(212,167,74,0.55);
  animation:dnPulse 1.8s ease-in-out infinite;
}
@keyframes dnPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,167,74,0.55)}50%{box-shadow:0 0 0 8px rgba(212,167,74,0)}}
.dn-row{display:flex;gap:14px;align-items:center}
.dn-poster{
  width:54px;height:80px;flex-shrink:0;border-radius:6px;
  background:#1a1814;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.dn-poster img{width:100%;height:100%;object-fit:cover}
.dn-no-poster{font-size:24px;color:rgba(245,241,234,0.4)}
.dn-body{flex:1;min-width:0}
.dn-title{font-family:'Instrument Serif',serif;font-size:20px;font-weight:400;color:var(--paper);line-height:1.15;letter-spacing:-0.01em;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.12em;color:rgba(245,241,234,0.55);text-transform:uppercase;margin-bottom:10px}
.dn-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dn-cta{
  padding:8px 14px;background:#D4A74A;color:#0a0907;border:0;
  font-family:inherit;font-size:12.5px;font-weight:600;border-radius:6px;cursor:pointer;
  transition:all .15s;
}
.dn-cta:hover{background:#F5C177;transform:translateY(-1px)}
.dn-skip{
  padding:8px 12px;background:transparent;color:rgba(245,241,234,0.55);
  border:0;font-family:inherit;font-size:12px;cursor:pointer;
}
.dn-skip:hover{color:rgba(245,241,234,0.85)}
@media (max-width:520px){
  .daily-nudge{padding:12px 14px;margin:0 16px 12px}
  .dn-poster{width:46px;height:68px}
  .dn-title{font-size:17px}
  .dn-meta{font-size:9.5px}
}

/* ========= PROFILE STUDIO (Revamp 05 — live edit) ========= */
.studio-page{display:none;color:var(--paper)}
.studio-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 64px;overflow-y:auto;background:var(--ink);
}
.studio-inner{max-width:680px;margin:0 auto}
.studio-head{text-align:center;margin-bottom:24px}
.studio-eyebrow{
  display:inline-block;font-size:10px;letter-spacing:0.22em;color:#D4A74A;
  text-transform:uppercase;font-weight:700;margin-bottom:14px;
}
.studio-title{
  font-family:'Instrument Serif',serif;font-size:clamp(32px,5vw,46px);
  letter-spacing:-0.02em;line-height:1.05;font-weight:400;margin:0 0 10px;
}
.studio-title .italic{font-style:italic;color:#D4A74A}
.studio-sub{font-size:13.5px;color:rgba(245,241,234,0.65);max-width:520px;margin:0 auto;line-height:1.55}

/* Live preview pane — mirrors profile card visuals; updates in real-time */
.studio-preview{
  --sp-accent:#E03C28;
  position:sticky;top:64px;z-index:5;
  margin:24px 0 20px;background:#0f0d09;border:1px solid rgba(245,241,234,0.10);
  border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);
}
.studio-preview[data-theme="t01"]{--sp-accent:#F5C177}
.studio-preview[data-theme="t02"]{--sp-accent:#FF6B9D}
.studio-preview[data-theme="t03"]{--sp-accent:#E89BB0}
.studio-preview[data-theme="t04"]{--sp-accent:#D4A74A}
.studio-preview[data-theme="t05"]{--sp-accent:#C8B6FF}
.studio-preview[data-theme="t06"]{--sp-accent:#00F5FF}
.studio-preview[data-theme="t07"]{--sp-accent:#E03C28}
.studio-preview[data-theme="t08"]{--sp-accent:#7AA67D}
.sp-banner{
  height:120px;background:linear-gradient(135deg,var(--sp-accent),rgba(7,6,4,0.6));
  background-size:cover;background-position:center;
  position:relative;
}
.sp-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,#0f0d09 100%);
}
.sp-body{position:relative;z-index:2;margin-top:-44px;padding:0 22px 22px}
.sp-avatar-wrap{position:relative;width:88px;height:88px;margin-bottom:10px}
.sp-ring{
  position:absolute;inset:-4px;border-radius:50%;
  background:var(--sp-accent);opacity:0.45;filter:blur(8px);
}
.sp-avatar{
  position:relative;width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,var(--sp-accent),rgba(212,167,74,0.6));
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:36px;color:#fff;
  border:3px solid #0f0d09;overflow:hidden;transition:border-radius .3s ease;
}
.sp-avatar img{width:100%;height:100%;object-fit:cover}
.sp-frame-circle{border-radius:50%}
.sp-frame-square{border-radius:8px}
.sp-frame-stamp{border-radius:0;clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px))}
.sp-frame-hexagon{border-radius:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.sp-name{font-size:18px;font-weight:600;color:var(--paper);display:flex;align-items:center;gap:8px;margin-bottom:3px}
.sp-pro-pill{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:0.18em;
  padding:2px 6px;border-radius:3px;text-transform:uppercase;
  background:var(--sp-accent);color:#0a0907;
}
.sp-handle{font-size:11px;color:rgba(245,241,234,0.55);letter-spacing:0.1em;margin-bottom:8px}
.sp-bio{font-size:12.5px;color:rgba(245,241,234,0.78);line-height:1.5;font-style:italic;font-family:'Instrument Serif',serif;margin-bottom:14px}
.sp-stats{display:flex;gap:14px;padding-top:14px;border-top:1px dashed rgba(245,241,234,0.12)}
.sp-stat{flex:1;text-align:center}
.sp-stat strong{display:block;font-family:'Instrument Serif',serif;font-style:italic;font-size:24px;color:var(--sp-accent);line-height:1;margin-bottom:3px}
.sp-stat span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.16em;color:rgba(245,241,234,0.5);text-transform:uppercase}

/* Studio controls */
.studio-loading{padding:40px 16px;text-align:center;color:rgba(245,241,234,0.55);font-size:13px}
.studio-section{
  padding:18px 18px;margin-bottom:14px;
  background:rgba(245,241,234,0.03);border:1px solid rgba(245,241,234,0.08);border-radius:12px;
}
.ss-label{
  font-size:10px;letter-spacing:0.2em;color:rgba(245,241,234,0.55);
  text-transform:uppercase;font-weight:700;margin-bottom:12px;
}
.ss-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ss-theme{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:transparent;border:1px solid rgba(245,241,234,0.10);border-radius:8px;
  color:rgba(245,241,234,0.85);font-family:inherit;font-size:11.5px;cursor:pointer;
  text-align:left;transition:all .15s ease;
}
.ss-theme:hover{background:rgba(245,241,234,0.05);border-color:rgba(245,241,234,0.25)}
.ss-theme.active{border-color:#D4A74A;background:rgba(212,167,74,0.08);color:var(--paper)}
.sst-swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,0.3) inset}
.sst-name{font-size:10.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-accent{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ss-accent input[type="color"]{
  width:40px;height:40px;border:1px solid rgba(245,241,234,0.18);border-radius:8px;
  background:transparent;cursor:pointer;padding:2px;
}
.ss-accent input[type="text"]{
  flex:1;min-width:120px;padding:9px 11px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.12);color:var(--paper);border-radius:8px;
  font-family:'JetBrains Mono',monospace;font-size:12px;outline:none;
}
.ss-accent input[type="text"]:focus{border-color:#D4A74A}
.ss-accent-clear{
  padding:8px 12px;background:transparent;border:1px solid rgba(245,241,234,0.14);
  color:rgba(245,241,234,0.65);font-family:inherit;font-size:11.5px;border-radius:8px;cursor:pointer;
}
.ss-accent-clear:hover{color:var(--paper);border-color:rgba(245,241,234,0.25)}
.ss-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ss-frame{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;
  background:transparent;border:1px solid rgba(245,241,234,0.10);border-radius:8px;
  color:rgba(245,241,234,0.7);font-family:inherit;font-size:11px;cursor:pointer;
  transition:all .15s ease;
}
.ss-frame:hover{background:rgba(245,241,234,0.05)}
.ss-frame.active{border-color:#D4A74A;background:rgba(212,167,74,0.08);color:var(--paper)}
.ssf-shape{
  width:28px;height:28px;background:linear-gradient(135deg,#E03C28,#D4A74A);
  display:block;
}
.ss-frame[onclick*="hexagon"] .ssf-shape{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.ss-frame[onclick*="stamp"] .ssf-shape{clip-path:polygon(0 6px,6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px))}
.ssf-name{font-size:10.5px;letter-spacing:0.04em}
.studio-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.studio-gate{
  text-align:center;padding:32px 24px;
  background:linear-gradient(135deg,rgba(212,167,74,0.10),rgba(224,60,40,0.04));
  border:1px solid rgba(212,167,74,0.32);border-radius:14px;
}
.sg-icon{font-size:36px;margin-bottom:10px;line-height:1}
.studio-gate h3{font-family:'Instrument Serif',serif;font-size:24px;font-weight:400;margin:0 0 8px;color:var(--paper)}
.studio-gate p{font-size:13.5px;line-height:1.55;color:rgba(245,241,234,0.7);margin:0 0 18px;max-width:480px;margin-left:auto;margin-right:auto}
.sg-cta{display:inline-block;padding:11px 20px;font-size:13px}
@media (max-width:640px){
  .studio-page.active{padding:72px 18px 48px}
  .ss-themes{grid-template-columns:1fr 1fr}
  .ss-frames{grid-template-columns:repeat(2,1fr)}
  .studio-actions{grid-template-columns:1fr}
}

/* ========= CIRCLES (Deck 07 Phase 3 — coming soon placeholder) ========= */
.circles-page{display:none;color:var(--paper)}
.circles-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 64px;overflow-y:auto;background:var(--ink);
}
.circles-inner{max-width:720px;margin:0 auto}
.circles-head{text-align:center;margin-bottom:36px}
.circles-eyebrow{
  display:inline-block;font-size:10px;letter-spacing:0.22em;color:#E03C28;
  text-transform:uppercase;font-weight:700;margin-bottom:14px;
}
.circles-title{
  font-family:'Instrument Serif',serif;font-size:clamp(36px,5vw,52px);
  letter-spacing:-0.02em;line-height:1.05;font-weight:400;margin:0 0 14px;
}
.circles-title .italic{font-style:italic;color:#D4A74A}
.circles-sub{font-size:14.5px;color:rgba(245,241,234,0.7);max-width:540px;margin:0 auto;line-height:1.6}
.circles-mock{position:relative;margin:0 0 36px}
.cm-card{
  padding:22px 24px;background:rgba(245,241,234,0.03);
  border:1px solid rgba(245,241,234,0.10);border-radius:14px;
  filter:grayscale(0.15);opacity:0.86;
}
.cm-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}
.cm-avatars{display:flex;flex-shrink:0}
.cm-av{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:#fff;
  font-family:'Instrument Serif',serif;font-size:16px;font-style:italic;
  border:2px solid #0a0907;margin-left:-8px;
}
.cm-av:first-child{margin-left:0}
.cm-av.cm-more{background:rgba(245,241,234,0.12);color:rgba(245,241,234,0.65);font-size:11px;font-style:normal;font-weight:600;font-family:'JetBrains Mono',monospace;letter-spacing:0.05em}
.cm-meta{text-align:right}
.cm-meta strong{display:block;font-size:14.5px;color:var(--paper);font-weight:600}
.cm-meta .mono{font-size:9.5px;letter-spacing:0.16em;color:rgba(245,241,234,0.5);text-transform:uppercase;margin-top:3px;display:block}
.cm-poll-q{font-size:13.5px;color:rgba(245,241,234,0.85);font-weight:600;margin-bottom:12px}
.cm-poll-bar{
  position:relative;height:24px;margin-bottom:6px;
  background:rgba(245,241,234,0.04);border-radius:4px;overflow:hidden;
}
.cmpb-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(212,167,74,0.35),rgba(212,167,74,0.18));z-index:0}
.cmpb-text{
  position:relative;z-index:1;display:flex;align-items:center;height:100%;
  padding:0 10px;font-size:11.5px;color:var(--paper);font-weight:500;
}
.cm-tag{
  display:inline-block;margin-top:14px;padding:6px 12px;
  font-size:10px;letter-spacing:0.18em;color:rgba(245,241,234,0.45);
  background:rgba(245,241,234,0.04);border:1px dashed rgba(245,241,234,0.18);
  text-transform:uppercase;font-weight:600;
}
.circles-signup{
  text-align:center;padding:32px 28px;
  background:linear-gradient(135deg,rgba(224,60,40,0.06),rgba(212,167,74,0.04));
  border:1px solid rgba(212,167,74,0.28);border-radius:14px;
}
/* Circles real-impl styles */
.circles-content{margin-top:24px}
.circles-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.cca-btn{
  display:flex;align-items:center;gap:14px;padding:16px 18px;text-align:left;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.12);
  border-radius:12px;color:var(--paper);font-family:inherit;cursor:pointer;
  transition:all .18s ease;
}
.cca-btn:hover{background:rgba(245,241,234,0.08);transform:translateY(-1px)}
.cca-create{border-color:rgba(212,167,74,0.4);background:linear-gradient(135deg,rgba(212,167,74,0.08),transparent)}
.cca-icon{font-size:24px;line-height:1;flex-shrink:0;color:#D4A74A}
.cca-block{display:flex;flex-direction:column;gap:2px;min-width:0}
.cca-block strong{font-size:14px;font-weight:600}
.cca-block small{font-size:11.5px;color:rgba(245,241,234,0.6);font-family:'Instrument Serif',serif;font-style:italic}
.circles-empty{
  padding:40px 28px;text-align:center;color:rgba(245,241,234,0.65);
  background:rgba(245,241,234,0.03);border:1px dashed rgba(245,241,234,0.12);border-radius:14px;
}
.ce-icon{font-size:32px;margin-bottom:10px}
.circles-empty h3{font-family:'Instrument Serif',serif;font-size:22px;font-weight:400;color:var(--paper);margin:0 0 6px}
.circles-empty p{font-size:13.5px;line-height:1.55;margin:0}
.circles-list{display:flex;flex-direction:column;gap:10px}
.circle-card{
  display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;
  padding:14px 18px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.10);border-radius:12px;
  text-decoration:none;color:inherit;transition:all .15s ease;
}
.circle-card:hover{background:rgba(245,241,234,0.08);border-color:rgba(212,167,74,0.3);transform:translateX(2px)}
.cc-emoji{font-size:28px;line-height:1;text-align:center}
.cc-body{min-width:0}
.cc-name{font-size:15px;font-weight:600;color:var(--paper)}
.cc-desc{font-size:12.5px;color:rgba(245,241,234,0.65);font-style:italic;font-family:'Instrument Serif',serif;margin-top:3px;line-height:1.4}
.cc-meta{font-size:9.5px;letter-spacing:0.16em;color:rgba(212,167,74,0.7);text-transform:uppercase;margin-top:5px}
.cc-arrow{font-size:18px;color:rgba(245,241,234,0.4);transition:transform .18s}
.circle-card:hover .cc-arrow{transform:translateX(2px);color:#D4A74A}
.circle-form{
  padding:20px;margin:14px 0;background:rgba(245,241,234,0.03);
  border:1px solid rgba(245,241,234,0.12);border-radius:12px;
}
.circle-form h3{font-family:'Instrument Serif',serif;font-size:20px;font-weight:400;margin:0 0 14px;color:var(--paper)}
.circle-form label{display:block;margin-bottom:12px;font-size:11.5px;color:rgba(245,241,234,0.7);letter-spacing:0.05em;font-weight:500}
.circle-form input[type="text"], .circle-form textarea{
  display:block;width:100%;margin-top:6px;padding:9px 12px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.14);
  color:var(--paper);border-radius:8px;font-size:13px;font-family:inherit;outline:none;resize:vertical;
}
.circle-form input:focus, .circle-form textarea:focus{border-color:#D4A74A}
.cf-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.cf-cancel{padding:9px 16px;background:transparent;border:1px solid rgba(245,241,234,0.16);color:rgba(245,241,234,0.7);font-family:inherit;font-size:12.5px;border-radius:8px;cursor:pointer}
.cf-save{padding:9px 18px;background:#E03C28;color:#fff;border:0;font-family:inherit;font-size:12.5px;font-weight:600;border-radius:8px;cursor:pointer}
.cf-save:hover{background:#c82d1f}

/* Circle detail page */
.circle-detail{margin-top:8px}
.cd-back{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:0.16em;color:rgba(245,241,234,0.55);text-decoration:none;
  text-transform:uppercase;margin-bottom:14px;
}
.cd-back:hover{color:var(--paper)}
.cd-head h2{font-family:'Instrument Serif',serif;font-size:32px;font-weight:400;margin:0 0 8px;color:var(--paper)}
.cd-emoji{margin-right:6px}
.cd-desc{font-size:14px;color:rgba(245,241,234,0.7);line-height:1.5;margin:0 0 8px}
.cd-meta{font-size:10px;letter-spacing:0.18em;color:rgba(212,167,74,0.7);text-transform:uppercase}
.cd-invite{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:18px 0;padding:14px 16px;background:rgba(245,241,234,0.04);
  border:1px dashed rgba(245,241,234,0.18);border-radius:10px;
}
.cdi-label{font-size:9.5px;letter-spacing:0.2em;color:rgba(245,241,234,0.5);text-transform:uppercase;font-weight:700}
.cdi-code{font-family:'JetBrains Mono',monospace;font-size:14px;color:#D4A74A;background:rgba(212,167,74,0.08);padding:4px 10px;border-radius:4px;letter-spacing:0.05em}
.cdi-copy{padding:6px 12px;background:transparent;border:1px solid rgba(245,241,234,0.18);color:rgba(245,241,234,0.7);font-family:inherit;font-size:11.5px;border-radius:6px;cursor:pointer}
.cdi-copy:hover{color:var(--paper)}
.cd-section{margin:24px 0}
.cd-section h3{font-family:'Instrument Serif',serif;font-size:20px;font-weight:400;margin:0 0 12px;color:var(--paper)}
.cd-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cdm-card{
  display:flex;align-items:center;gap:9px;padding:8px 10px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:10px;text-decoration:none;color:inherit;transition:all .15s;
}
.cdm-card:hover{background:rgba(245,241,234,0.08)}
.cdm-avatar{
  width:32px;height:32px;border-radius:50%;background:#1a1814;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
}
.cdm-avatar img{width:100%;height:100%;object-fit:cover}
.cdm-init{font-family:'Instrument Serif',serif;font-style:italic;color:#D4A74A;font-size:14px}
.cdm-meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.cdm-meta strong{font-size:12.5px;font-weight:600;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdm-meta .mono{font-size:8.5px;letter-spacing:0.14em;color:rgba(245,241,234,0.4)}
.cd-poll{padding:18px;background:rgba(245,241,234,0.03);border:1px solid rgba(245,241,234,0.10);border-radius:12px}
.cd-poll-q{font-size:14.5px;font-weight:600;color:var(--paper);margin-bottom:14px}
.cd-poll-opt{
  display:block;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.10);
  border-radius:8px;cursor:pointer;font-family:inherit;color:var(--paper);
  position:relative;overflow:hidden;transition:all .15s;
}
.cd-poll-opt:hover{background:rgba(245,241,234,0.08)}
.cd-poll-opt.voted{border-color:#D4A74A;background:rgba(212,167,74,0.08)}
.cdpo-bar{position:absolute;inset:0 auto 0 0;background:rgba(212,167,74,0.18);transition:width .3s ease;z-index:0}
.cdpo-text{position:relative;z-index:1;display:flex;align-items:center;gap:10px;font-size:13px}
.cdpo-text img{width:32px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0}
.cdpo-text strong{font-weight:600;flex:1}
.cdpo-cnt{font-style:italic;font-family:'Instrument Serif',serif;color:rgba(245,241,234,0.65);font-size:11.5px;flex-shrink:0}
.cd-poll-empty{padding:18px;color:rgba(245,241,234,0.6);font-size:13px;text-align:center}
.cd-poll-empty p{margin:0 0 12px}
.cd-poll-actions{margin-top:12px}
.cd-add-opt{padding:9px 14px;background:transparent;border:1px dashed rgba(212,167,74,0.4);color:#D4A74A;font-family:inherit;font-size:12px;border-radius:8px;cursor:pointer}
.cd-add-opt:hover{background:rgba(212,167,74,0.08)}
.cd-danger{padding-top:14px;border-top:1px dashed rgba(245,241,234,0.10)}
.cd-leave{padding:9px 14px;background:transparent;border:1px solid rgba(248,113,113,0.4);color:#f87171;font-family:inherit;font-size:12px;border-radius:8px;cursor:pointer}
.cd-leave:hover{background:rgba(248,113,113,0.08)}

@media (max-width:640px){
  .circles-actions{grid-template-columns:1fr}
  .cd-members{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}
.cs-h3{font-family:'Instrument Serif',serif;font-size:24px;font-weight:400;margin:0 0 8px;color:var(--paper)}
.cs-p{font-size:13.5px;line-height:1.55;color:rgba(245,241,234,0.7);margin:0 0 18px}
.cs-cta{
  display:inline-block;font-family:inherit;font-size:14px;font-weight:600;
  padding:12px 22px;background:#fff;color:#1a1408;
  border-radius:999px;text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease;
}
.cs-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(255,255,255,0.3)}
@media (max-width:640px){
  .circles-page.active{padding:72px 18px 48px}
  .cm-row{flex-direction:column;align-items:flex-start;gap:10px}
  .cm-meta{text-align:left}
  .cs-h3{font-size:20px}
}
.stats-head{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid rgba(245,241,234,0.08)}
.stats-head h1{font-family:'Instrument Serif',serif;font-size:40px;margin:0 0 6px;color:var(--paper)}
.stats-head p{color:rgba(245,241,234,0.6);margin:0;font-size:14px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px}
.stats-card{
  padding:22px 20px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.08);border-radius:14px;
}
.sc-label{font-size:10.5px;letter-spacing:0.14em;color:rgba(245,241,234,0.5);
  text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:8px}
.sc-value{font-family:'Instrument Serif',serif;font-size:38px;color:var(--paper);line-height:1}
.sc-delta{font-size:12px;color:#25D366;margin-top:6px}

/* ========= LEGAL PAGES (Terms & Privacy — reuse stats-page overlay skeleton) ========= */
.legal-page.active{padding-top:64px}
.legal-page.active > *{max-width:720px}
.legal-content{color:rgba(245,241,234,0.85);font-size:15px;line-height:1.7}
.legal-head{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid rgba(245,241,234,0.08)}
.legal-head h1{font-family:'Instrument Serif',serif;font-size:40px;margin:0 0 6px;color:var(--paper);font-weight:400}
.legal-meta{color:rgba(245,241,234,0.5);font-size:12.5px;margin:0;font-family:'JetBrains Mono',monospace}
.legal-section{margin:0 0 28px}
.legal-section h2{
  font-family:'Instrument Serif',serif;font-size:22px;color:var(--paper);
  margin:0 0 12px;font-weight:400;
}
.legal-section h3{
  font-size:14px;color:var(--paper);margin:16px 0 6px;font-weight:600;
  letter-spacing:0.01em;
}
.legal-section p{margin:0 0 12px}
.legal-section ul{margin:0 0 12px;padding-left:22px}
.legal-section li{margin-bottom:6px}
.legal-section a{color:#D4A74A;text-decoration:underline;text-underline-offset:2px}
.legal-section code{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;
  background:rgba(245,241,234,0.05);padding:1px 5px;border-radius:4px;
  color:rgba(245,241,234,0.8);
}
.legal-highlight{
  background:rgba(212,167,74,0.04);border:1px solid rgba(212,167,74,0.14);
  border-radius:12px;padding:20px 22px;margin:0 0 28px;
}
.legal-highlight h2{color:#D4A74A}
.legal-footer-note{
  font-size:12px;color:rgba(245,241,234,0.45);margin-top:18px;
  padding-top:14px;border-top:1px solid rgba(245,241,234,0.06);
}
@media (max-width:600px){
  .legal-page.active{padding:60px 20px 40px}
  .legal-head h1{font-size:30px}
  .legal-section h2{font-size:19px}
  .legal-content{font-size:14.5px}
}

/* Mini provider strip on rail poster cards (eval v3 item #4) */
.mp-providers{
  position:absolute;left:8px;bottom:8px;display:none;gap:4px;
  pointer-events:none;z-index:2;
}
.mp-providers.mp-shown{display:flex}
.mp-chip{
  display:inline-flex;width:22px;height:22px;border-radius:5px;overflow:hidden;
  background:#000;box-shadow:0 2px 6px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.15);
}
.mp-chip img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){
  .mp-chip{width:20px;height:20px}
}

/* ========= PLATFORM AVAILABILITY BADGES ========= */
.provider-badges{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:14px 0 4px;padding:10px 14px;
  background:rgba(37,211,102,0.08);border:1px solid rgba(37,211,102,0.25);
  border-radius:10px;
}
.pb-label{
  color:rgba(245,241,234,0.75);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;font-weight:600;font-family:'JetBrains Mono',monospace;
}
.pb-chip{
  display:inline-flex;width:30px;height:30px;border-radius:6px;overflow:hidden;
  background:#000;box-shadow:0 2px 4px rgba(0,0,0,0.3);
}
.pb-chip img{width:100%;height:100%;object-fit:cover}
.pb-extra{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;border-radius:6px;
  background:rgba(245,241,234,0.12);color:var(--paper);
  font-size:11px;font-weight:600;
}

/* ========= MICRO-RATING UI (in watchlist modal) ========= */
.wl-rate-row{
  display:flex;gap:6px;margin-top:8px;padding:6px 0;
  border-top:1px dashed rgba(245,241,234,0.12);justify-content:space-around;
}
.wl-rate-btn{
  background:transparent;border:none;padding:4px;cursor:pointer;
  font-size:18px;line-height:1;opacity:0.7;
  transition:all 0.15s ease;min-width:32px;min-height:32px;
  border-radius:6px;
}
.wl-rate-btn:hover{opacity:1;background:rgba(224,60,40,0.1);transform:scale(1.15)}
.wl-rate-btn:active{transform:scale(0.95)}
.wl-rating-done{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:6px;font-size:16px;color:#D4A74A;
}

/* Rating prompt toast (appears on page load if pending ratings ≥3d) */
.rating-prompt-toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(40px);
  display:flex;align-items:center;gap:12px;
  background:#1a1a1a;color:var(--paper);
  padding:12px 14px;border-radius:14px;
  border:1px solid rgba(212,167,74,0.35);
  box-shadow:0 12px 36px rgba(0,0,0,0.5);
  z-index:850;max-width:92vw;width:420px;
  opacity:0;transition:all 0.3s cubic-bezier(.2,.8,.2,1);
}
.rating-prompt-toast.shown{opacity:1;transform:translateX(-50%) translateY(0)}
.rpt-icon{font-size:28px;line-height:1;flex-shrink:0}
.rpt-body{flex:1;min-width:0}
.rpt-title{font-size:14px;font-weight:600;color:var(--paper);margin-bottom:2px;line-height:1.25}
.rpt-sub{font-size:11.5px;color:rgba(245,241,234,0.6);line-height:1.35}
.rpt-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.rpt-btn-primary{
  background:#D4A74A;color:#1a1a1a;border:none;padding:7px 12px;
  border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;
  white-space:nowrap;
}
.rpt-btn-primary:hover{background:#e0b860}
.rpt-btn-dismiss{
  background:transparent;color:rgba(245,241,234,0.5);border:none;
  font-size:20px;cursor:pointer;width:28px;height:28px;padding:0;
}
.rpt-btn-dismiss:hover{color:var(--paper)}
@media (max-width:500px){
  .rating-prompt-toast{flex-wrap:wrap;width:calc(100vw - 24px);padding:10px 12px}
  .rpt-body{flex-basis:calc(100% - 40px)}
  .rpt-actions{margin-top:4px;width:100%;justify-content:flex-end}
}

/* ========= HERO-SAMPLE MOBILE COMPRESSION ========= */
@media (max-width:700px){
  .hero-sample{padding:14px 16px;margin-top:18px}
  .hero-sample-q{font-size:12.5px;margin-bottom:10px;padding-bottom:10px}
  .hs-pick{gap:10px}
  .hs-pick-rank{width:28px;height:28px;font-size:13px}
  .hs-pick-title{font-size:13px;margin-bottom:2px}
  .hs-pick-meta{font-size:10.5px}
  .hs-pick-why{font-size:11.5px;line-height:1.45}
  /* Hide 3rd pick on very small screens — show expand affordance */
  .hero-sample-picks .hs-pick:nth-child(3){display:none}
  .hero-sample.expanded .hero-sample-picks .hs-pick:nth-child(3){display:flex}
  .hero-sample-footer{font-size:9.5px;margin-top:8px}
}

/* Sample AI output block in hero */
.hero-sample{
  margin-top:24px;padding:18px 20px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.1);border-radius:14px;max-width:560px;
}
.hero-sample-label{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);font-size:10px;letter-spacing:0.22em;font-weight:600;
  margin-bottom:12px;
}
.hero-sample-label .dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 1.8s ease-in-out infinite;
}
.hero-sample-q{
  color:rgba(245,241,234,0.85);font-size:13.5px;line-height:1.55;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px dashed rgba(245,241,234,0.12);
}
.hero-sample-q .hs-q-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent);
  text-transform:uppercase;letter-spacing:0.15em;margin-right:4px;
}
.hero-sample-picks{display:flex;flex-direction:column;gap:10px}
.hs-pick{display:flex;gap:12px;align-items:flex-start}
.hs-pick-rank{
  flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-style:italic;font-size:16px;color:#D4A74A;
  border:1px solid rgba(212,167,74,0.3);border-radius:8px;background:rgba(212,167,74,0.05);
}
.hs-pick-body{flex:1;min-width:0}
.hs-pick-title{color:var(--paper);font-size:14.5px;font-weight:600;margin-bottom:3px}
.hs-pick-meta{font-weight:400;color:rgba(245,241,234,0.5);font-size:11.5px;letter-spacing:0.04em}
.hs-pick-why{color:rgba(245,241,234,0.65);font-size:12.5px;line-height:1.5;font-style:italic}
.hero-sample-footer{
  margin-top:12px;padding-top:10px;border-top:1px dashed rgba(245,241,234,0.1);
  text-align:center;font-size:10px;letter-spacing:0.18em;color:rgba(245,241,234,0.4);
}

/* ================ HERO ================ */
.hero{
  background:var(--ink);color:var(--paper);
  padding:140px 0 0;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}

/* ========= IDENTITY HERO (logged-in only, sits below marketing hero) ========= */
.identity-hero{display:none;background:var(--ink);padding:32px 0 12px;position:relative}
@media (max-width:900px){.identity-hero{padding:24px 0 8px}}
body.is-logged-in .identity-hero{display:block}
.ih-inner{max-width:1200px;margin:0 auto;padding:0 32px;width:100%}
@media (max-width:700px){.ih-inner{padding:0 18px}}
.ih-card{
  background:linear-gradient(135deg,rgba(224,60,40,0.08) 0%,rgba(212,167,74,0.05) 100%);
  border:1px solid rgba(245,241,234,0.08);
  border-radius:24px;padding:30px 32px;
}
@media (max-width:700px){.ih-card{padding:22px 20px;border-radius:18px}}
.ih-greeting-row{
  display:flex;gap:18px;align-items:center;
  text-decoration:none;color:inherit;
  padding:6px;margin:-6px;border-radius:14px;
  transition:background 0.15s ease;cursor:pointer;
}
.ih-greeting-row:hover{background:rgba(245,241,234,0.04)}
.ih-greeting-row:hover .ih-greeting-chev{transform:translateX(3px);color:var(--accent)}
.ih-greeting-chev{
  margin-left:auto;font-size:28px;color:rgba(245,241,234,0.3);
  font-family:'EB Garamond',serif;line-height:1;
  transition:transform 0.2s ease, color 0.2s ease;
}
@media (max-width:560px){.ih-greeting-chev{font-size:22px}}
body.theme-light .ih-greeting-row:hover{background:rgba(20,20,20,0.04)}
body.theme-light .ih-greeting-chev{color:rgba(20,20,20,0.3)}
.ih-avatar{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#B83222);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:700;font-family:'EB Garamond',serif;
  flex-shrink:0;overflow:hidden;
}
@media (max-width:700px){.ih-avatar{width:60px;height:60px;font-size:26px}}
.ih-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ih-greeting{font-size:14px;color:rgba(245,241,234,0.6);letter-spacing:0.02em;margin-bottom:4px;font-family:'JetBrains Mono',monospace}
.ih-username{font-size:36px;margin:0;color:var(--paper);letter-spacing:-0.02em;line-height:1.1;font-weight:600}
@media (max-width:700px){.ih-username{font-size:26px}}
.ih-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:20px;padding-top:18px;border-top:1px solid rgba(245,241,234,0.08);
}
@media (max-width:560px){.ih-stats{grid-template-columns:repeat(2,1fr);gap:6px}}
.ih-stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 6px;border-radius:10px;
  text-decoration:none;color:var(--paper);
  transition:background 0.15s ease;cursor:pointer;
}
.ih-stat:hover{background:rgba(245,241,234,0.04)}
.ih-stat-num{font-size:24px;font-weight:700;font-family:'EB Garamond',serif;color:var(--paper);line-height:1.1}
.ih-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace;margin-top:4px}
.ih-quick-actions{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(245,241,234,0.08);
}
@media (max-width:900px){.ih-quick-actions{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.ih-quick-actions{grid-template-columns:repeat(2,1fr)}}
.ih-action{
  padding:12px 14px;border-radius:10px;
  background:rgba(245,241,234,0.05);
  border:1px solid rgba(245,241,234,0.1);
  color:var(--paper);font-size:13px;font-weight:600;
  cursor:pointer;transition:all 0.15s ease;
  font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ih-action:hover{background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.2);transform:translateY(-1px)}
.ih-action-primary{
  background:linear-gradient(135deg,var(--accent),#B83222);
  border-color:transparent;color:#fff;
}
.ih-action-primary:hover{box-shadow:0 8px 22px -10px rgba(224,60,40,0.6)}
body.theme-light .ih-card{background:linear-gradient(135deg,rgba(184,50,34,0.06) 0%,rgba(184,137,46,0.04) 100%);border-color:rgba(20,20,20,0.08)}
body.theme-light .ih-greeting{color:rgba(20,20,20,0.6)}
body.theme-light .ih-username{color:#1A1408}
body.theme-light .ih-stats{border-top-color:rgba(20,20,20,0.08)}
body.theme-light .ih-quick-actions{border-top-color:rgba(20,20,20,0.08)}
body.theme-light .ih-stat{color:#1A1408}
body.theme-light .ih-stat-num{color:#1A1408}
body.theme-light .ih-stat-label{color:rgba(20,20,20,0.55)}
body.theme-light .ih-stat:hover{background:rgba(20,20,20,0.04)}
body.theme-light .ih-action{background:rgba(20,20,20,0.04);border-color:rgba(20,20,20,0.1);color:#1A1408}
body.theme-light .ih-action:hover{background:rgba(20,20,20,0.07);border-color:rgba(20,20,20,0.18)}
body.theme-light .ih-action-primary{color:#fff}
.hero-content{
  display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center;
  max-width:1400px;margin:0 auto;width:100%;
  padding:0 32px 80px;
  min-height:600px;
}
@media (max-width:900px){
  .hero{padding:100px 0 0}
  .hero-content{grid-template-columns:1fr;min-height:auto;padding:0 20px 48px}
}

/* Hero visual — floating poster columns. Display hidden by default (mobile-first),
   shown as flex only on desktop. This avoids the CSS ordering bug where a later
   `display:flex` rule overrode an earlier media query's `display:none`. */
.hero-visual{
  position:relative;height:560px;max-height:80vh;
  display:none;gap:16px;justify-content:center;
  perspective:1000px;
}
@media (min-width:901px){
  .hero-visual{display:flex}
}
.poster-col{
  flex:1;max-width:180px;
  position:relative;overflow:hidden;
  mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
}
.poster-col.up .poster-track{animation:scrollUp 40s linear infinite}
.poster-col.down .poster-track{animation:scrollDown 45s linear infinite}
@keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes scrollDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.poster-track{display:flex;flex-direction:column;gap:12px;will-change:transform}
.poster-track img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}
.hero-visual::before{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(224,60,40,0.3),transparent 70%);
  filter:blur(40px);z-index:-1;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--dim);margin-bottom:40px;
}
.hero-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.hero-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(48px,10vw,140px);
  line-height:0.9;letter-spacing:-0.05em;
  font-weight:400;
}
.hero-title .italic{font-style:italic;color:var(--accent)}
/* Hero time-of-day word. A single italic accent-colored word that swaps
   every ~3s with a soft fade. Inline-block auto-sizes to the current word
   (so "hari" doesn't leave a trailing gap to "ini?" like the old flex-column
   slider did), baseline alignment keeps it on the same baseline as "apa"
   and "ini?" (the old vertical-align:top dropped it ~28px below the line). */
.time-cycle{
  display:inline-block;
  vertical-align:baseline;
  font-style:italic;color:var(--accent);
  white-space:nowrap;
}
.time-words{
  display:inline-block;
  transition:opacity 0.32s ease,transform 0.32s ease;
}
.time-words.fading{opacity:0;transform:translateY(-0.18em)}
.hero-title .strike{text-decoration:line-through;opacity:0.5}
.hero-sub{
  max-width:500px;margin-top:40px;
  font-size:18px;color:rgba(245,241,234,0.7);
  line-height:1.5;
}
.hero-actions{
  margin-top:40px;display:flex;gap:12px;flex-wrap:wrap;
}
.hero-quick-actions{
  margin-top:32px;max-width:640px;
}
.hero-quick-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
  color:rgba(245,241,234,0.4);margin-bottom:14px;
}
.hero-quick-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.hero-quick-card{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  text-decoration:none;color:var(--paper);transition:all 0.2s ease;cursor:pointer;
}
.hero-quick-card:hover{
  background:rgba(245,241,234,0.08);border-color:rgba(224,60,40,0.4);transform:translateY(-2px);
}
.hqc-icon{
  font-size:28px;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(224,60,40,0.1);border-radius:10px;
}
.hqc-body{flex:1;min-width:0}
.hqc-title{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-weight:600;font-size:14px;margin-bottom:3px;
}
.hqc-sub{
  font-size:12px;color:rgba(245,241,234,0.5);line-height:1.4;
}
@media(max-width:720px){
  .hero-quick-grid{grid-template-columns:1fr;}
  .hqc-sub{font-size:11px;}
}
.btn{
  padding:16px 28px;border-radius:999px;
  font-size:15px;font-weight:600;
  transition:all 0.3s;
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid transparent;
}
.btn-primary{background:var(--accent);color:white}
.btn-primary:hover{background:#e52d21;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(245,241,234,0.3)}
.btn-ghost:hover{background:rgba(245,241,234,0.08);border-color:var(--paper)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#222}
.btn-arrow{width:28px;height:28px;border-radius:50%;background:currentColor;display:inline-flex;align-items:center;justify-content:center}
.btn-arrow::before{content:'→';color:var(--accent);font-weight:700}
.btn-primary .btn-arrow{background:white}
.btn-primary .btn-arrow::before{color:var(--accent)}

/* Marquee */
.marquee{
  margin-top:0;padding:20px 0;
  border-top:1px solid rgba(245,241,234,0.15);
  border-bottom:1px solid rgba(245,241,234,0.15);
  overflow:hidden;white-space:nowrap;
  font-family:'Instrument Serif',serif;
  font-size:clamp(32px,5vw,60px);
  letter-spacing:-0.03em;
}
.marquee-track{display:inline-block;animation:scroll 40s linear infinite}
.marquee-track span{margin-right:60px;color:rgba(245,241,234,0.5)}
.marquee-track span.hl{color:var(--accent);font-style:italic}
.marquee-track span::after{content:'✦';margin-left:60px;color:var(--accent)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ================ SECTIONS ================ */
.section{padding:100px 0;position:relative}
.section-dark{background:var(--ink);color:var(--paper)}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:40px;gap:24px;flex-wrap:wrap;
  padding:0 32px;
}
@media (max-width:768px){
  .section{padding:48px 0}
  .section-head{margin-bottom:24px;padding:0 20px}
}
.section-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(40px,6vw,84px);
  line-height:0.95;letter-spacing:-0.04em;
  font-weight:400;
  max-width:700px;
}
.section-title .italic{font-style:italic;color:var(--accent)}
.section-info{
  max-width:300px;color:var(--dim);font-size:14px;
  padding-bottom:16px;
}
.section-dark .section-info{color:rgba(245,241,234,0.5)}

/* Skeleton loading for movie rails */
.skel-rail{display:flex;gap:12px;padding:0 32px 8px;overflow:hidden}
.skel-card{flex:0 0 140px;display:flex;flex-direction:column;gap:8px}
.skel-poster{aspect-ratio:2/3;border-radius:12px;background:linear-gradient(90deg,rgba(245,241,234,0.04) 0%,rgba(245,241,234,0.08) 50%,rgba(245,241,234,0.04) 100%);background-size:200% 100%;animation:skelShine 1.4s linear infinite}
.skel-line{height:10px;border-radius:4px;background:linear-gradient(90deg,rgba(245,241,234,0.04) 0%,rgba(245,241,234,0.08) 50%,rgba(245,241,234,0.04) 100%);background-size:200% 100%;animation:skelShine 1.4s linear infinite}
.skel-line.short{width:60%}
/* Swipe card skeleton — stands in for the first card while TMDB loads */
.swipe-skeleton{
  width:min(320px,86vw);aspect-ratio:2/3;
  border-radius:18px;overflow:hidden;
  background:rgba(245,241,234,0.04);
  display:flex;flex-direction:column;
}
.swipe-skeleton .sksk-poster{
  flex:1;background:linear-gradient(90deg,rgba(245,241,234,0.04) 0%,rgba(245,241,234,0.1) 50%,rgba(245,241,234,0.04) 100%);
  background-size:200% 100%;animation:skelShine 1.4s linear infinite;
}
.swipe-skeleton .sksk-meta{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.swipe-skeleton .sksk-line{height:12px;border-radius:4px;background:linear-gradient(90deg,rgba(245,241,234,0.05) 0%,rgba(245,241,234,0.12) 50%,rgba(245,241,234,0.05) 100%);background-size:200% 100%;animation:skelShine 1.4s linear infinite}
.swipe-skeleton .sksk-line-lg{width:80%}
.swipe-skeleton .sksk-line-sm{width:50%;height:10px}
/* Live-activity skeleton — row of avatar + two lines */
.live-skeleton{display:flex;flex-direction:column;gap:14px;padding:20px 0}
.live-skel-row{display:flex;gap:12px;align-items:flex-start}
.live-skel-av{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(90deg,rgba(245,241,234,0.05) 0%,rgba(245,241,234,0.12) 50%,rgba(245,241,234,0.05) 100%);
  background-size:200% 100%;animation:skelShine 1.4s linear infinite;
}
.live-skel-body{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.live-skel-line{
  height:10px;border-radius:4px;
  background:linear-gradient(90deg,rgba(245,241,234,0.05) 0%,rgba(245,241,234,0.12) 50%,rgba(245,241,234,0.05) 100%);
  background-size:200% 100%;animation:skelShine 1.4s linear infinite;
}
.live-skel-line.short{width:55%}
@keyframes skelShine{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (max-width:640px){.skel-rail{padding:0 16px 8px;gap:10px} .skel-card{flex-basis:120px}}

/* Category tabs — horizontal scroll with fade-edge to hint scrollability */
.cat-tabs-wrap{position:relative}
.cat-tabs-wrap::after{
  content:'';position:absolute;top:0;right:0;bottom:24px;width:40px;
  background:linear-gradient(to right,transparent,var(--ink));
  pointer-events:none;opacity:0;transition:opacity 0.2s;
}
.cat-tabs-wrap.has-overflow::after{opacity:1}
.cat-tabs{
  display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
  padding:0 32px 24px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  padding:10px 20px;border-radius:999px;min-height:40px;
  border:1px solid var(--line-dark);
  background:transparent;color:rgba(245,241,234,0.7);
  font-size:13px;font-weight:500;white-space:nowrap;
  cursor:pointer;transition:all 0.2s;
  display:inline-flex;align-items:center;
}
.cat-tab.active{background:var(--accent);color:white;border-color:var(--accent)}
.cat-tab:hover:not(.active){border-color:rgba(245,241,234,0.4);color:var(--paper)}
@media (max-width:640px){
  .cat-tabs{padding:0 16px 20px;gap:6px}
  .cat-tab{padding:10px 14px;font-size:12px}
}
/* Global emoji size — relative to text so they don't render huge */
img.emoji{
  height:1em;width:1em;vertical-align:-0.15em;
  display:inline-block;margin:0 2px;
}
/* Explicit sizes for specific contexts where we want bigger */
.quiz-option img.emoji{height:28px;width:28px;vertical-align:middle;margin-right:0}
.mode-icon img.emoji{height:36px;width:36px}
.cs-device .icon img.emoji{height:48px;width:48px}
.hero-title img.emoji,.section-title img.emoji{display:none}
/* Hide emojis in labels that shouldn't have them */
.slot-label img.emoji,.trailer-hint img.emoji,.cinema-now-badge img.emoji{display:none}

/* ================ CINEMA (Now Playing in Theatres) ================ */
.cinema-section{
  background:linear-gradient(180deg,var(--ink) 0%,#0a0607 100%);
  color:var(--paper);
  padding:100px 0;
  position:relative;
}
@media (max-width:768px){
  .cinema-section{padding:48px 0}
}
.cinema-section .section-title .italic{color:#FFD700}
.cinema-label{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,215,0,0.1);
  border:1px solid rgba(255,215,0,0.3);
  color:#FFD700;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.15em;
  margin-bottom:20px;
}
.cinema-label .dot{
  width:8px;height:8px;border-radius:50%;background:#FFD700;
  animation:pulse 2s infinite;
  box-shadow:0 0 12px #FFD700;
}
.cinema-chains-banner{
  display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;
  padding:0 32px 20px;
}
@media (max-width:600px){
  .cinema-chains-banner{padding:0 20px 16px;flex-direction:column;gap:8px}
}
.cinema-freshness{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:0 32px 16px;font-size:12px;color:rgba(245,241,234,0.55);
  font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;
}
@media (max-width:600px){.cinema-freshness{padding:0 20px 16px;font-size:11px}}
.cinema-freshness .fresh-dot{
  width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;
}
.cinema-freshness .fresh-dot.green{background:#22c55e;box-shadow:0 0 6px #22c55e80}
.cinema-freshness .fresh-dot.amber{background:#f59e0b;box-shadow:0 0 6px #f59e0b80}
.cinema-freshness .fresh-dot.red{background:#ef4444;box-shadow:0 0 6px #ef444480}
.cinema-refresh-btn{
  background:rgba(245,241,234,0.05);border:1px solid rgba(245,241,234,0.15);
  color:rgba(245,241,234,0.75);
  padding:4px 12px;border-radius:999px;font-size:11px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;transition:all 0.18s;
  letter-spacing:0.06em;
}
.cinema-refresh-btn:hover{background:rgba(245,241,234,0.1);color:var(--paper);border-color:rgba(245,241,234,0.3)}
.chain-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(245,241,234,0.05);
  border:1px solid rgba(245,241,234,0.12);
  padding:8px 14px 8px 8px;border-radius:999px;
  font-size:13px;font-weight:500;color:var(--paper);
  text-decoration:none;cursor:pointer;
  transition:background 0.18s,border-color 0.18s,transform 0.12s;
}
.chain-pill:hover{
  background:rgba(245,241,234,0.1);
  border-color:rgba(245,241,234,0.25);
  transform:translateY(-1px);
}
.chain-pill .brand-chip{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  padding:5px 10px;border-radius:6px;
  letter-spacing:0.12em;font-weight:700;flex-shrink:0;
}
.chain-pill .brand-cgv{background:#E30613;color:white}
.chain-pill .brand-xxi{background:#003D7A;color:white}
.chain-pill-name{flex:1}
.chain-pill-arrow{
  font-size:14px;color:rgba(245,241,234,0.5);
  margin-left:4px;transition:transform 0.18s,color 0.18s;
}
.chain-pill:hover .chain-pill-arrow{color:var(--accent);transform:translateX(2px)}
@media (max-width:600px){
  .chain-pill{padding:10px 16px 10px 10px;font-size:13.5px;justify-content:flex-start}
}
/* Light-theme overrides — cinema section uses var(--ink) bg so default
   cream-on-dark works in both themes; just refine chain pill borders */
body.theme-light .chain-pill{background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.18)}
body.theme-light .chain-pill:hover{background:rgba(245,241,234,0.14);border-color:rgba(245,241,234,0.32)}
.cinema-rail{
  display:flex;gap:20px;
  overflow-x:auto;padding:0 32px 20px;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.cinema-rail::-webkit-scrollbar{display:none}
.cinema-card{
  flex:0 0 auto;width:280px;
  background:rgba(245,241,234,0.03);
  border:1px solid rgba(245,241,234,0.1);
  border-radius:20px;overflow:hidden;
  scroll-snap-align:start;
  transition:transform 0.3s,border-color 0.3s;
  display:flex;flex-direction:column;
}
.cinema-card:hover{transform:translateY(-6px);border-color:rgba(255,215,0,0.3)}
.cinema-available-at{
  display:flex;gap:6px;margin-bottom:12px;
}
.cinema-available-at .brand-chip{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  padding:4px 8px;border-radius:5px;
  letter-spacing:0.1em;font-weight:700;
}
.btn-tickets{
  background:linear-gradient(135deg,#FFD700,#FFA000);
  color:#0a0607;
}
.btn-tickets:hover{
  background:linear-gradient(135deg,#FFE54C,#FFB300);
  color:#0a0607;transform:translateY(-1px);
  box-shadow:0 10px 25px rgba(255,215,0,0.3);
}
.cinema-card-poster{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer}
.cinema-card-poster img{width:100%;height:100%;object-fit:cover}
.cinema-card-poster::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.7),transparent 60%);
}
.cinema-now-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:#22c55e;color:white;
  padding:5px 10px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:0.1em;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
}
.cinema-now-badge.confirmed{background:#22c55e}
.cinema-now-badge.unconfirmed{background:#f59e0b;color:#000}
.cinema-now-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:white;animation:pulse 1.5s infinite;
}
.cinema-now-badge.unconfirmed::before{background:#000}
.cinema-card-body{padding:16px;flex:1;display:flex;flex-direction:column}
.cinema-card-title{
  font-family:'Instrument Serif',serif;
  font-size:22px;letter-spacing:-0.02em;line-height:1.1;
  margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cinema-card-rating{
  display:inline-flex;align-items:center;gap:4px;
  color:#FFD700;font-size:14px;font-weight:600;margin-bottom:10px;
}
.cinema-card-release{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;color:rgba(245,241,234,0.5);
  letter-spacing:0.08em;margin-bottom:14px;
  padding:8px 10px;background:rgba(245,241,234,0.05);
  border-radius:8px;border-left:2px solid rgba(255,215,0,0.4);
}
.cinema-card-release strong{color:rgba(245,241,234,0.8);display:block;margin-bottom:2px;font-size:10px}
.cinema-card-actions{margin-top:auto;padding-top:8px}
.cinema-card-actions .btn{
  width:100%;padding:12px;font-size:13px;
  justify-content:center;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.btn-cgv{background:#E30613;color:white}
.btn-cgv:hover{background:#b8040f;color:white;transform:translateY(-1px)}
.btn-xxi{background:#003D7A;color:white}
.btn-xxi:hover{background:#002a5c;color:white;transform:translateY(-1px)}

/* ===== SCROLL NAVIGATION (shared for trending, cinema rails) ===== */
.rail-wrap{position:relative}
.rail-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(245,241,234,0.08);
  border:1px solid rgba(245,241,234,0.15);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--paper);font-size:20px;
  display:flex;align-items:center;justify-content:center;
  z-index:10;cursor:pointer;transition:all 0.2s;
  opacity:0;pointer-events:none;
}
.rail-wrap:hover .rail-nav{opacity:1;pointer-events:auto}
.rail-nav:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-50%) scale(1.1)}
.rail-nav.rail-prev{left:16px}
.rail-nav.rail-next{right:16px}
.rail-nav.disabled{opacity:0!important;pointer-events:none!important}
/* On light-bg sections */
.cinema-section .rail-nav{background:rgba(255,215,0,0.1);border-color:rgba(255,215,0,0.2)}
.cinema-section .rail-nav:hover{background:var(--accent);border-color:var(--accent)}
/* Always visible on mobile */
@media (max-width:768px){
  .rail-wrap .rail-nav{opacity:1;pointer-events:auto;width:40px;height:40px;font-size:18px}
}

/* Movie grid/carousel */
.movies-scroll{
  display:flex;gap:16px;overflow-x:auto;
  padding:0 32px 20px;scrollbar-width:none;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.movies-scroll::-webkit-scrollbar{display:none}
.movie-item{
  flex:0 0 auto;width:220px;
  scroll-snap-align:start;
  cursor:pointer;transition:transform 0.3s;
}
.movie-item:hover{transform:translateY(-8px)}
.movie-poster{
  aspect-ratio:2/3;border-radius:16px;overflow:hidden;
  background:#222;position:relative;
  box-shadow:0 10px 40px rgba(0,0,0,0.2);
}
.movie-poster img{width:100%;height:100%;object-fit:cover}
.movie-poster-placeholder{
  width:100%;height:100%;
  background:linear-gradient(135deg,var(--accent),#8B2522);
  display:flex;align-items:center;justify-content:center;
  padding:20px;text-align:center;color:white;font-weight:600;
}
.movie-poster .play{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.3s;
}
.movie-item:hover .play{opacity:1}
.play-icon{
  width:50px;height:50px;border-radius:50%;
  background:var(--accent);color:white;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.movie-meta{padding:12px 4px 0}
.movie-meta-title{font-size:15px;font-weight:600;margin-bottom:4px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.movie-meta-sub{font-size:12px;color:rgba(245,241,234,0.5);display:flex;gap:8px}
.section:not(.section-dark) .movie-meta-sub{color:var(--dim)}
.movie-rating{color:var(--accent);font-weight:600}

/* ================ ROULETTE ================ */
.roulette-wrap{
  padding:80px 32px;
  background:var(--ink);
  color:var(--paper);
}
/* Wildcard variant — slightly subdued so Spin clearly sits below Swipe in
   visual weight. Still a real section, just not competing for top billing. */
.roulette-section-wildcard .roulette-wrap{
  padding:64px 32px 68px;
  background:linear-gradient(180deg,#0a0a0b 0%,#0f0f10 100%);
  border-top:1px solid rgba(245,241,234,0.06);
}
.roulette-eyebrow{
  display:inline-block;color:rgba(212,167,74,0.9);font-size:10.5px;letter-spacing:0.22em;
  font-weight:700;margin-bottom:14px;
}
.roulette-wrap .section-title{color:var(--paper)}
.roulette-wrap .section-info{color:rgba(245,241,234,0.55)}
@media (max-width:780px){
  .roulette-section-wildcard .roulette-wrap{padding:48px 20px 52px}
}
.roulette-modes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;margin-bottom:60px;
  max-width:1200px;margin-left:auto;margin-right:auto;
}
@media (max-width:900px){.roulette-modes{grid-template-columns:1fr}}
.mode-card{
  background:rgba(245,241,234,0.06);border:1.5px solid rgba(245,241,234,0.1);
  border-radius:24px;padding:44px 36px;
  cursor:pointer;transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
  display:flex;flex-direction:column;gap:20px;
  position:relative;overflow:hidden;
}
.mode-card::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg,rgba(224,60,40,0.1),rgba(224,60,40,0.03));
  opacity:0;transition:opacity 0.4s;border-radius:24px;
}
.mode-card:hover::before{opacity:1}
.mode-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 24px 64px rgba(224,60,40,0.15),0 8px 24px rgba(0,0,0,0.3)}
.mode-card.active{border-color:var(--accent);background:rgba(224,60,40,0.1)}
.mode-card.active::before{opacity:0}
.mode-card.active .mode-icon{transform:scale(1.15)}
.mode-icon{font-size:48px;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);position:relative;z-index:1;width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:rgba(224,60,40,0.1);border-radius:18px}
.mode-card.active .mode-icon{background:rgba(224,60,40,0.2)}
.mode-card h3{font-family:'Instrument Serif',serif;font-size:34px;font-weight:400;letter-spacing:-0.02em;position:relative;z-index:1;color:var(--paper)}
.mode-card p{color:rgba(245,241,234,0.5);font-size:15px;line-height:1.6;position:relative;z-index:1}
.mode-card .mode-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);padding:5px 12px;border:1px solid rgba(224,60,40,0.25);border-radius:6px;position:relative;z-index:1}
.mode-card.active .mode-tag{background:rgba(224,60,40,0.15)}
.mode-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.mode-card-cta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:16px;
  border-top:1px dashed rgba(245,241,234,0.12);
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(245,241,234,0.65);
  position:relative;z-index:1;
  transition:color 0.3s;
}
.mode-card-arrow{font-size:18px;transition:transform 0.3s cubic-bezier(.2,.8,.2,1)}
.mode-card:hover .mode-card-cta{color:var(--accent)}
.mode-card:hover .mode-card-arrow{transform:translateX(6px)}

/* ========= ROULETTE MODAL (popup containing the 3 panels) ========= */
.roulette-modal{
  position:fixed;inset:0;z-index:300;
  background:rgba(10,10,10,0.85);backdrop-filter:blur(8px);
  display:none;align-items:flex-start;justify-content:center;
  padding:32px 16px calc(32px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
}
.roulette-modal.active{display:flex;animation:rouletteFadeIn 0.25s ease}
@keyframes rouletteFadeIn{from{opacity:0}to{opacity:1}}
.roulette-modal-inner{
  position:relative;width:100%;max-width:1100px;
  margin:auto;
  animation:rouletteSlideUp 0.35s cubic-bezier(.2,.8,.2,1);
}
@keyframes rouletteSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.roulette-modal .roulette-interactive{
  margin:0;padding:56px 40px 48px;
}
@media (max-width:900px){
  /* Mobile: bottom sheet pattern instead of fullscreen modal */
  .roulette-modal{
    padding:0;align-items:flex-end;
    background:rgba(10,10,10,0.6);backdrop-filter:blur(4px);
  }
  .roulette-modal-inner{
    max-width:100%;max-height:90dvh;min-height:auto;
    width:100%;margin:0;
    background:var(--ink);
    border-top-left-radius:20px;border-top-right-radius:20px;
    box-shadow:0 -16px 48px rgba(0,0,0,0.6);
    display:flex;flex-direction:column;
    animation:rouletteBottomSheetUp 0.3s cubic-bezier(.2,.8,.2,1);
    overflow:hidden;
    position:relative;
  }
  @keyframes rouletteBottomSheetUp{
    from{transform:translateY(100%);opacity:0.6}
    to{transform:translateY(0);opacity:1}
  }
  /* Drag handle affordance at top */
  .roulette-modal-inner::before{
    content:'';display:block;position:absolute;top:8px;left:50%;
    transform:translateX(-50%);width:44px;height:4px;
    background:rgba(245,241,234,0.3);border-radius:2px;
    pointer-events:none;
  }
  .roulette-modal .roulette-interactive{
    border-radius:0;padding:28px 20px calc(24px + env(safe-area-inset-bottom));
    flex:1;min-height:auto;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .roulette-modal-close{top:12px;right:12px;width:36px;height:36px;font-size:20px}
}
.roulette-modal-close{
  position:absolute;top:16px;right:16px;z-index:10;
  width:44px;height:44px;border-radius:50%;
  background:rgba(245,241,234,0.1);color:var(--paper);
  border:1px solid rgba(245,241,234,0.15);
  font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.roulette-modal-close:hover{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}

.roulette-interactive{
  background:rgba(245,241,234,0.04);color:var(--paper);
  border-radius:32px;padding:48px 40px;
  max-width:1200px;margin:0 auto;
  min-height:480px;
  position:relative;overflow:hidden;
  border:1px solid rgba(245,241,234,0.08);
}
/* Decorative rotating ring in background */
.roulette-interactive::before{
  content:'';position:absolute;
  top:50%;right:-180px;
  width:500px;height:500px;
  border-radius:50%;
  border:2px dashed rgba(224,60,40,0.15);
  transform:translateY(-50%);
  animation:rotate 60s linear infinite;
  pointer-events:none;
}
.roulette-interactive::after{
  content:'';position:absolute;
  top:50%;right:-80px;
  width:300px;height:300px;
  border-radius:50%;
  border:1px solid rgba(245,241,234,0.08);
  transform:translateY(-50%);
  animation:rotate 30s linear infinite reverse;
  pointer-events:none;
}
@keyframes rotate{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}

.roulette-panel{display:none;position:relative;z-index:2}
.roulette-panel.active{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
@media (max-width:900px){.roulette-panel.active{grid-template-columns:1fr}}

/* Decorative floating posters for panels */
.panel-visual{
  position:relative;height:360px;
  display:flex;align-items:center;justify-content:center;
}
.panel-visual .dice-wrap{
  position:relative;width:240px;height:240px;
}
.panel-visual .big-icon{
  font-size:140px;
  animation:float 4s ease-in-out infinite;
  filter:drop-shadow(0 20px 40px rgba(224,60,40,0.4));
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(5deg)}}

/* ===== SINGLE POSTER REEL (more cinematic, focused animation) ===== */
.slot-stage{
  text-align:center;padding:40px 20px;position:relative;
}
.poster-spinner{
  width:220px;height:330px;margin:24px auto 32px;
  position:relative;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 2px rgba(224,60,40,0.3);
  background:#000;
}
.poster-spinner-track{
  display:flex;flex-direction:column;
  will-change:transform;
}
.poster-spinner-track img{
  width:220px;height:330px;object-fit:cover;flex-shrink:0;
  display:block;
}
.poster-spinner.spinning .poster-spinner-track{animation:posterSpin 0.25s linear infinite}
.poster-spinner.slowing .poster-spinner-track{animation:posterSpin 0.8s linear infinite}
.poster-spinner.stopped .poster-spinner-track{transition:transform 1.2s cubic-bezier(0.15,1,0.3,1)}
@keyframes posterSpin{
  from{transform:translateY(0)}
  to{transform:translateY(-330px)}
}
/* Spotlight effect */
.poster-spinner::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0.4) 0%,transparent 15%,transparent 85%,rgba(0,0,0,0.4) 100%);
}
/* Scanning line during spin */
.poster-spinner.spinning::after,.poster-spinner.slowing::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:3px;z-index:4;
  background:var(--accent);
  box-shadow:0 0 20px var(--accent),0 0 40px var(--accent);
  animation:scanPulse 0.6s ease-in-out infinite;
}
@keyframes scanPulse{0%,100%{opacity:0.4}50%{opacity:1}}

.spinning-label{
  color:var(--accent);font-family:'JetBrains Mono',monospace;
  font-size:13px;letter-spacing:0.2em;margin-bottom:8px;
  animation:labelBlink 1s ease-in-out infinite;
}
@keyframes labelBlink{0%,100%{opacity:1}50%{opacity:0.4}}

.slot-handle{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 40px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),#e52d21);
  color:white;font-size:17px;font-weight:700;
  letter-spacing:0.02em;
  box-shadow:0 15px 40px rgba(224,60,40,0.4),inset 0 2px 0 rgba(255,255,255,0.3);
  cursor:pointer;transition:all 0.2s;
  border:2px solid rgba(255,255,255,0.2);
}
.slot-handle:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(224,60,40,0.5),inset 0 2px 0 rgba(255,255,255,0.3)}
.slot-handle:active{transform:translateY(1px)}
.slot-handle:disabled{opacity:0.5;cursor:not-allowed}

.slot-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--accent);letter-spacing:0.2em;margin-bottom:8px;
}
.slot-winner{
  font-family:'Instrument Serif',serif;font-size:48px;
  letter-spacing:-0.03em;line-height:1;margin-bottom:24px;
  animation:winnerPop 0.6s cubic-bezier(0.2,1.5,0.3,1);
}
@keyframes winnerPop{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ===== WINNER CARD (new layout) ===== */
.winner-stage{
  text-align:center;padding:32px 20px;
  max-width:500px;margin:0 auto;
}
.winner-poster-wrap{
  position:relative;display:inline-block;margin:20px auto 28px;
}
.winner-poster{
  width:260px;max-width:55vw;aspect-ratio:2/3;object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(224,60,40,0.2);
}
.winner-rating{
  position:absolute;top:12px;right:-16px;
  background:var(--accent);color:white;
  padding:8px 14px;border-radius:999px;
  font-weight:700;font-size:15px;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.05em;
  box-shadow:0 10px 30px rgba(224,60,40,0.5);
}
.winner-rating::before{content:'★ ';color:#FFD700}
.winner-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(36px,5vw,60px);
  letter-spacing:-0.03em;line-height:1;
  margin-bottom:8px;color:var(--paper);
  font-weight:400;
}
.winner-meta{
  font-family:'JetBrains Mono',monospace;font-size:13px;
  color:rgba(245,241,234,0.5);letter-spacing:0.1em;margin-bottom:20px;
}
.winner-overview{
  color:rgba(245,241,234,0.7);font-size:15px;line-height:1.6;
  margin-bottom:32px;max-width:460px;margin-left:auto;margin-right:auto;
}
/* AI reasoning block on winner card (Surprise Me + Auto Random) */
.winner-ai-reason{
  max-width:480px;margin:0 auto 28px;padding:16px 22px;
  background:linear-gradient(135deg,rgba(224,60,40,0.1),rgba(224,60,40,0.03));
  border:1px solid rgba(224,60,40,0.3);border-radius:14px;
  text-align:left;position:relative;
  animation:aiReasonFadeIn 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.winner-ai-reason-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.18em;
  color:var(--accent);margin-bottom:6px;text-transform:uppercase;font-weight:600;
}
.winner-ai-reason p{
  color:var(--paper);font-size:14px;line-height:1.55;margin:0;font-weight:500;
}
@keyframes aiReasonFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.winner-actions{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
.btn-lg-action{
  display:flex!important;flex-direction:column;align-items:center;gap:4px;
  padding:14px 28px;font-size:14px;font-weight:600;
  line-height:1.2;min-width:130px;
}
.btn-lg-action .icon{font-size:22px;line-height:1}
.btn-lg-action .label{font-size:13px;letter-spacing:0.02em}

/* ===== SCREEN SHAKE effect ===== */
.shake-wild{animation:shakeWild 0.5s linear}
@keyframes shakeWild{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-8px,-4px)}
  20%{transform:translate(8px,-6px)}
  30%{transform:translate(-10px,4px)}
  40%{transform:translate(8px,-2px)}
  50%{transform:translate(-6px,6px)}
  60%{transform:translate(10px,0)}
  70%{transform:translate(-4px,-8px)}
  80%{transform:translate(6px,4px)}
  90%{transform:translate(-8px,-2px)}
}

/* ===== DICE SHAKING for Surprise Me ===== */
.dice-stage{text-align:center;padding:40px 20px;position:relative;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dice-3d{
  width:160px;height:160px;margin:0 auto 32px;
  position:relative;transform-style:preserve-3d;
  filter:drop-shadow(0 20px 40px rgba(224,60,40,0.5));
}
.dice-3d.shaking{animation:diceShake 0.15s linear infinite}
.dice-3d.rolling{animation:diceRoll 2s cubic-bezier(0.3,0.1,0.3,1)}
@keyframes diceShake{
  0%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-6px,-4px) rotate(-8deg)}
  50%{transform:translate(6px,4px) rotate(10deg)}
  75%{transform:translate(-4px,6px) rotate(-6deg)}
  100%{transform:translate(0,0) rotate(0)}
}
@keyframes diceRoll{
  0%{transform:translate(0,0) rotate(0) scale(1)}
  25%{transform:translate(-30px,-40px) rotate(-180deg) scale(1.2)}
  50%{transform:translate(30px,20px) rotate(180deg) scale(0.9)}
  75%{transform:translate(-20px,-20px) rotate(-360deg) scale(1.1)}
  100%{transform:translate(0,0) rotate(0) scale(1)}
}
.dice-3d .face{
  font-size:140px;line-height:1;
}

/* Sparkle burst around dice */
.sparkle{
  position:absolute;pointer-events:none;
  font-size:30px;opacity:0;
  animation:sparkleBurst 1.5s ease-out;
}
@keyframes sparkleBurst{
  0%{opacity:0;transform:translate(0,0) scale(0)}
  30%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1.2)}
  100%{opacity:0;transform:translate(calc(var(--tx)*1.5),calc(var(--ty)*1.5)) scale(0.3)}
}

/* Dice glow ring effect — replaces broken floating posters */
.dice-wrap::before{
  content:'';position:absolute;inset:-40px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(224,60,40,0.2) 0%,transparent 60%);
  z-index:-1;
  animation:glowPulse 3s ease-in-out infinite;
}
.dice-wrap::after{
  content:'';position:absolute;top:50%;left:50%;
  width:280px;height:280px;
  border:2px dashed rgba(224,60,40,0.2);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:slowRotate 20s linear infinite;
  z-index:-1;
}
@keyframes glowPulse{
  0%,100%{opacity:0.4;transform:scale(1)}
  50%{opacity:0.8;transform:scale(1.08)}
}
@keyframes slowRotate{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ===== SPINNING WHEEL (Pilihan Kamu — wheelofnames style) ===== */
.wheel-stage{
  text-align:center;padding:30px 20px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.wheel-glow{
  position:absolute;top:50%;left:50%;width:460px;height:460px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(224,60,40,0.25) 0%,transparent 65%);
  animation:wheelGlow 2s ease-in-out infinite;pointer-events:none;z-index:0;
}
.wheel-wrapper{position:relative;display:inline-block;z-index:1}
.wheel-outer-ring{
  border-radius:50%;padding:10px;
  background:linear-gradient(135deg,rgba(224,60,40,0.25),rgba(224,60,40,0.08));
  box-shadow:0 0 60px rgba(224,60,40,0.3),0 0 120px rgba(224,60,40,0.1),
             inset 0 0 30px rgba(224,60,40,0.08);
  transition:box-shadow 0.6s;
}
.wheel-outer-ring canvas{display:block;border-radius:50%}
.wheel-outer-ring.wheel-landed{
  box-shadow:0 0 100px rgba(224,60,40,0.6),0 0 200px rgba(224,60,40,0.3),
             inset 0 0 50px rgba(224,60,40,0.2);
}
.wheel-pointer-wrap{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:5;
  filter:drop-shadow(0 4px 12px rgba(224,60,40,0.6));
}
.wheel-pointer{
  width:0;height:0;
  border-left:14px solid transparent;border-right:14px solid transparent;
  border-top:26px solid #E03C28;
}
.wheel-center-hub{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;background:#0E0E0E;border:3px solid #E03C28;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:24px;z-index:3;box-shadow:0 0 20px rgba(224,60,40,0.4);
}
.wheel-spin-label{animation:labelBlink 1s ease-in-out infinite}
@keyframes wheelGlow{
  0%,100%{opacity:0.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}

/* ===== CONFETTI BURST ===== */
@keyframes confettiFall{
  0%{opacity:1;transform:translate(0,0) rotate(0) scale(0)}
  15%{opacity:1;transform:translate(calc(var(--tx)*0.3),calc(var(--ty)*-0.5)) rotate(calc(var(--rot)*0.3)) scale(1.2)}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(0.3)}
}

/* ===== FOLLOW TOAST (audit S2 P-04) ===== */
.follow-toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%, 0);
  display:flex;flex-direction:column;gap:2px;
  padding:14px 22px;min-width:280px;max-width:90vw;
  background:#151210;border:1px solid rgba(212,167,74,0.32);
  border-left:3px solid #D4A74A;color:var(--paper);
  box-shadow:0 18px 40px -12px rgba(0,0,0,0.6);z-index:9998;
  animation:ftoIn .35s cubic-bezier(.16,1,.3,1);
}
.follow-toast strong{
  font-size:14px;font-weight:600;color:#D4A74A;
}
.follow-toast span{
  font-size:12.5px;line-height:1.5;color:rgba(245,241,234,0.72);
}
.follow-toast.ftout{animation:ftoOut .25s ease forwards}
@keyframes ftoIn{from{opacity:0;transform:translate(-50%, 12px)}to{opacity:1;transform:translate(-50%, 0)}}
@keyframes ftoOut{to{opacity:0;transform:translate(-50%, 8px)}}
@media (max-width:520px){
  .follow-toast{bottom:80px;padding:12px 16px;min-width:260px}
  .follow-toast span{font-size:12px}
}

/* ===== ENHANCED SLOT EFFECTS (Auto Random) ===== */
.slot-glow-ring{
  position:absolute;top:50%;left:50%;width:260px;height:380px;
  transform:translate(-50%,-55%);
  border:2px solid rgba(224,60,40,0.12);border-radius:20px;
  box-shadow:0 0 50px rgba(224,60,40,0.15),inset 0 0 40px rgba(224,60,40,0.05);
  animation:glowPulse 2s ease-in-out infinite;pointer-events:none;z-index:0;
}
.slot-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.slot-particle{
  position:absolute;width:3px;height:3px;background:#E03C28;border-radius:50%;
  left:var(--x);bottom:-10px;opacity:0;
  animation:particleRise var(--dur) ease-out var(--delay) infinite;
}
.poster-spinner.medium .poster-spinner-track{animation:posterSpin 0.5s linear infinite}
.poster-spinner.crawling .poster-spinner-track{animation:posterSpin 2s ease-in-out infinite}
@keyframes particleRise{
  0%{opacity:0;transform:translateY(0) scale(0)}
  20%{opacity:0.7;transform:translateY(-80px) scale(1)}
  100%{opacity:0;transform:translateY(-400px) scale(0.2)}
}
@keyframes flashReveal{0%{opacity:0.8}100%{opacity:0}}

/* ===== CARD SHUFFLE (Auto Random) ===== */
.shuffle-stage{
  text-align:center;padding:40px 20px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:500px;
}
.shuffle-bg-glow{
  position:absolute;top:50%;left:50%;width:400px;height:500px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(224,60,40,0.18) 0%,transparent 70%);
  pointer-events:none;animation:wheelGlow 2s ease-in-out infinite;
}
.shuffle-card-container{position:relative;perspective:800px}
.shuffle-card{
  width:220px;height:330px;position:relative;
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 2px rgba(224,60,40,0.25);
  transform-style:preserve-3d;background:#111;
}
.shuffle-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
}
.shuffle-poster.active{opacity:1}
.shuffle-ring{
  position:absolute;inset:-10px;border-radius:22px;
  border:2px solid rgba(224,60,40,0.12);
  box-shadow:0 0 30px rgba(224,60,40,0.08);
  pointer-events:none;transition:all 0.6s;
}
.shuffle-ring.landed{
  border-color:rgba(224,60,40,0.6);
  box-shadow:0 0 60px rgba(224,60,40,0.4),0 0 120px rgba(224,60,40,0.2);
}
.shuffle-dots{
  display:flex;gap:6px;justify-content:center;margin-top:20px;
}
.shuffle-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(245,241,234,0.15);transition:all 0.3s;
}
.shuffle-dot.active{
  background:var(--accent);
  box-shadow:0 0 8px rgba(224,60,40,0.5);
  transform:scale(1.3);
}

/* ===== ENHANCED SURPRISE PORTAL ===== */
.surprise-stage{
  text-align:center;padding:40px 20px;position:relative;
  min-height:400px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.portal-vortex{
  position:absolute;top:50%;left:50%;width:320px;height:320px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(224,60,40,0.3),transparent,rgba(224,60,40,0.2),transparent,
    rgba(224,60,40,0.3),transparent,rgba(224,60,40,0.2),transparent);
  animation:portalSpin 3s linear infinite;pointer-events:none;opacity:0.6;
}
.portal-vortex::after{
  content:'';position:absolute;inset:40px;border-radius:50%;
  background:conic-gradient(from 180deg,
    rgba(224,60,40,0.2),transparent,rgba(224,60,40,0.15),transparent,
    rgba(224,60,40,0.2),transparent);
  animation:portalSpin 2s linear infinite reverse;
}
@keyframes portalSpin{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
.surprise-dice{
  position:relative;z-index:2;width:130px;height:130px;margin:0 auto 20px;
  perspective:600px;
}
.dice-inner{width:100%;height:100%;transform-style:preserve-3d}
.dice-inner.shaking{animation:diceShake3d 0.12s linear infinite}
.dice-inner.rolling{animation:diceRoll3d 2.5s cubic-bezier(0.25,0.1,0.25,1)}
@keyframes diceShake3d{
  0%{transform:rotateX(0) rotateY(0)}
  25%{transform:rotateX(-15deg) rotateY(10deg) translate(-4px,-3px)}
  50%{transform:rotateX(10deg) rotateY(-15deg) translate(4px,3px)}
  75%{transform:rotateX(-8deg) rotateY(12deg) translate(-3px,4px)}
  100%{transform:rotateX(0) rotateY(0)}
}
@keyframes diceRoll3d{
  0%{transform:rotateX(0) rotateY(0) scale(1)}
  20%{transform:rotateX(360deg) rotateY(-180deg) scale(1.3) translateY(-40px)}
  40%{transform:rotateX(720deg) rotateY(180deg) scale(0.9) translateY(20px)}
  60%{transform:rotateX(1080deg) rotateY(-360deg) scale(1.15) translateY(-20px)}
  80%{transform:rotateX(1440deg) rotateY(360deg) scale(1.05)}
  100%{transform:rotateX(1800deg) rotateY(0) scale(1)}
}

/* Custom mode — input */
.custom-search{
  display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;
}
.search-input{
  flex:1;min-width:250px;
  padding:16px 20px;border-radius:999px;
  background:rgba(245,241,234,0.08);
  border:1px solid rgba(245,241,234,0.15);
  color:var(--paper);font-family:inherit;font-size:15px;
}
.search-input:focus{outline:none;border-color:var(--accent)}
.search-results{
  display:grid;gap:8px;margin-bottom:24px;
  max-height:300px;overflow-y:auto;
}
.search-result{
  display:flex;gap:12px;padding:10px;
  background:rgba(245,241,234,0.05);border-radius:12px;
  cursor:pointer;align-items:center;transition:background 0.2s;
}
.search-result:hover{background:rgba(245,241,234,0.1)}
.search-result img{width:40px;height:60px;object-fit:cover;border-radius:6px;background:#222}
.search-result-info{flex:1}
.search-result-title{font-weight:600;font-size:14px}
.search-result-sub{font-size:12px;color:rgba(245,241,234,0.5)}
.selected-movies{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;
  min-height:40px;
}
.selected-chip{
  background:var(--accent);color:white;
  padding:8px 16px;border-radius:999px;
  font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:8px;
}
.selected-chip button{color:white;font-size:16px;line-height:1}

/* Spin result */
.spin-stage{
  text-align:center;padding:40px 20px;
}
.spin-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(32px,5vw,60px);
  margin-bottom:16px;letter-spacing:-0.03em;
}
.spin-sub{color:rgba(245,241,234,0.6);margin-bottom:32px}
.spin-result{
  display:flex;gap:24px;align-items:center;
  background:rgba(245,241,234,0.05);
  border-radius:20px;padding:24px;
  max-width:600px;margin:0 auto;
}
@media (max-width:600px){.spin-result{flex-direction:column;text-align:center}}
.spin-result img{width:120px;border-radius:12px}
.spin-result-info h3{font-family:'Instrument Serif',serif;font-size:28px;margin-bottom:8px}
.spin-result-info p{color:rgba(245,241,234,0.6);font-size:14px;margin-bottom:16px;max-width:400px}
.spinning{
  font-size:80px;animation:spin 0.5s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================ COMING SOON / WATCH PARTY ================ */
.comingsoon{
  padding:0 32px 100px;
  background:linear-gradient(135deg,#1a0a08 0%,var(--ink) 100%);
  color:var(--paper);position:relative;overflow:hidden;
}
/* BIG COMING SOON banner */
.comingsoon-banner{
  max-width:1400px;margin:0 auto 60px;padding:60px 0 40px;
  text-align:center;position:relative;
  border-bottom:1px solid rgba(245,241,234,0.08);
}
.comingsoon-banner h2{
  font-family:'Instrument Serif',serif;
  font-size:clamp(80px,15vw,220px);
  line-height:0.85;letter-spacing:-0.06em;
  font-weight:400;
  background:linear-gradient(180deg,var(--accent) 0%,#8B2522 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:16px;
}
.comingsoon-banner .tag{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(245,241,234,0.5);
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:0.2em;
}
.comingsoon-banner .tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.5s infinite}

/* ===== SPOTLIGHT ROOM CARD (Watch Party) ===== */
.wp-room-spotlight{
  position:relative;
  background:linear-gradient(135deg,rgba(224,60,40,0.15) 0%,rgba(26,10,8,0.9) 100%);
  border:1px solid rgba(224,60,40,0.4);
  border-radius:24px;padding:24px;
  box-shadow:0 0 60px rgba(224,60,40,0.15),0 30px 80px rgba(0,0,0,0.4);
  overflow:hidden;
}
/* Animated glow ring */
.wp-room-spotlight::before{
  content:'';position:absolute;
  top:-50%;left:-50%;width:200%;height:200%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(224,60,40,0.3) 90deg,transparent 180deg,rgba(224,60,40,0.2) 270deg,transparent 360deg);
  animation:spotlightRotate 8s linear infinite;
  pointer-events:none;
  opacity:0.4;
}
.wp-room-spotlight::after{
  content:'';position:absolute;inset:2px;
  border-radius:22px;background:linear-gradient(135deg,rgba(40,15,12,0.95),rgba(20,8,8,0.95));
  pointer-events:none;
}
.wp-room-spotlight > *{position:relative;z-index:2}
@keyframes spotlightRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.wp-spotlight-header{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.wp-live-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:white;
  padding:5px 12px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:0.15em;font-weight:700;
  box-shadow:0 0 20px rgba(224,60,40,0.6);
}
.wp-live-badge .pulse-dot{
  width:8px;height:8px;border-radius:50%;background:white;
  animation:pulse 1.2s infinite;
}
.wp-room-code{
  color:rgba(245,241,234,0.5);
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.12em;
}

.wp-movie-row{
  display:flex;gap:16px;align-items:center;margin-bottom:24px;
}
.wp-movie-poster{
  width:100px;aspect-ratio:2/3;border-radius:12px;flex-shrink:0;
  box-shadow:0 15px 40px rgba(0,0,0,0.6);
  object-fit:cover;
}
.wp-movie-info{flex:1;min-width:0}
.wp-movie-title{
  font-family:'Instrument Serif',serif;
  font-size:32px;line-height:1;letter-spacing:-0.02em;
  margin-bottom:6px;
}
.wp-movie-episode{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(245,241,234,0.5);letter-spacing:0.12em;
}

.wp-avatars-row{
  padding-top:20px;
  border-top:1px solid rgba(245,241,234,0.1);
}
.wp-avatars-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.15em;color:var(--accent);
  margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.wp-avatars-label::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:#00C853;box-shadow:0 0 10px #00C853;
  animation:pulse 1.5s infinite;
}
.wp-avatars{display:flex;gap:8px;flex-wrap:wrap}
.wp-avatar{
  display:flex;align-items:center;gap:10px;
  background:rgba(245,241,234,0.06);
  border:1px solid rgba(245,241,234,0.1);
  padding:6px 14px 6px 6px;border-radius:999px;
  transition:all 0.2s;
}
.wp-avatar:hover{background:rgba(245,241,234,0.1);border-color:rgba(224,60,40,0.3)}
.wp-avatar-img{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;
  color:white;flex-shrink:0;
}
.wp-avatar.a1 .wp-avatar-img{background:linear-gradient(135deg,#E03C28,#B92E23)}
.wp-avatar.a2 .wp-avatar-img{background:linear-gradient(135deg,#00A04D,#005F2D)}
.wp-avatar.a3 .wp-avatar-img{background:linear-gradient(135deg,#2196F3,#0D47A1)}
.wp-avatar.a4 .wp-avatar-img{background:linear-gradient(135deg,#FFC107,#F57F17);color:#0A0A0A}
.wp-avatar-name{font-size:13px;font-weight:600;color:var(--paper)}
.comingsoon-grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:60px;
  max-width:1400px;margin:0 auto;align-items:center;
}
@media (max-width:900px){.comingsoon-grid{grid-template-columns:1fr}}
.cs-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(44px,7vw,96px);
  line-height:0.95;letter-spacing:-0.04em;
  margin-bottom:32px;
}
.cs-title .italic{font-style:italic;color:var(--accent)}
.cs-desc{
  font-size:18px;color:rgba(245,241,234,0.7);
  max-width:500px;margin-bottom:32px;line-height:1.5;
}
.cs-features{display:grid;gap:16px;margin-bottom:32px}
.cs-feature{display:flex;gap:16px;align-items:flex-start}
.cs-feature-num{
  font-family:'JetBrains Mono',monospace;
  color:var(--accent);font-size:12px;padding-top:4px;min-width:40px;
}
.cs-feature strong{display:block;margin-bottom:4px}
.cs-feature p{color:rgba(245,241,234,0.6);font-size:14px}
.cs-premium-badge{
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:var(--accent);color:white;
  font-size:12px;font-weight:600;letter-spacing:0.05em;
}

.cs-visual{
  background:var(--ink);
  border:1px solid rgba(245,241,234,0.1);
  border-radius:24px;padding:32px;
  position:relative;
}
.cs-devices{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.cs-device{
  background:rgba(245,241,234,0.05);
  border-radius:16px;padding:20px;text-align:center;
  border:1px solid rgba(245,241,234,0.1);
}
.cs-device .icon{font-size:48px;margin-bottom:8px}
.cs-device .label{font-size:12px;color:rgba(245,241,234,0.6)}
.cs-sync-line{
  text-align:center;font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--accent);letter-spacing:0.2em;
  padding:16px 0;position:relative;
}
.cs-sync-line::before,.cs-sync-line::after{
  content:'';position:absolute;top:50%;width:30%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent));
}
.cs-sync-line::before{left:0}
.cs-sync-line::after{right:0;background:linear-gradient(-90deg,transparent,var(--accent))}
.cs-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ================ AI QUIZ CTA ================ */
.quiz-cta{
  padding:100px 32px;
  background:var(--accent);color:white;
  text-align:center;position:relative;overflow:hidden;
}
.quiz-cta h2{
  font-family:'Instrument Serif',serif;
  font-size:clamp(44px,8vw,120px);
  line-height:0.95;letter-spacing:-0.04em;
  font-weight:400;margin-bottom:24px;
}
.quiz-cta h2 em{font-style:italic;opacity:0.7}
.quiz-cta p{font-size:18px;max-width:600px;margin:0 auto 32px;opacity:0.9}

/* ================ FOOTER ================ */
footer{
  background:var(--ink);color:var(--paper);
  padding:80px 32px 32px;
}
.footer-top{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1.2fr;gap:40px;
  max-width:1400px;margin:0 auto 60px;
}
@media (max-width:1200px){.footer-top{grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}.footer-app-col{grid-column:span 4}}
@media (max-width:1100px){.footer-top{grid-template-columns:2fr 1fr 1fr;gap:32px}.footer-app-col{grid-column:span 3}}
@media (max-width:800px){.footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-app-col{grid-column:span 2}}
.footer-logo{
  font-family:'Instrument Serif',serif;font-weight:400;font-size:48px;letter-spacing:-0.012em;
  margin-bottom:16px;
}
.footer-logo i{color:var(--accent);font-style:italic}
.footer-col h5{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(245,241,234,0.5);margin-bottom:16px}
.footer-col a{display:block;padding:6px 0;color:rgba(245,241,234,0.8);font-size:14px;transition:color 0.2s}
.footer-col a:hover{color:var(--accent)}
/* App download badges — shadcn-ish pill buttons w/ coming-soon state */
.footer-app-col{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.app-badge{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;min-height:52px;
  width:100%;box-sizing:border-box;
  background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.14);
  border-radius:12px;cursor:pointer;
  color:var(--paper);text-decoration:none;
  transition:background 0.18s,border-color 0.18s,transform 0.12s;
  font-family:inherit;
}
.app-badge:hover{background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.28)}
.app-badge-install{
  background:rgba(224,60,40,0.14);border-color:rgba(224,60,40,0.45);
}
.app-badge-install:hover{background:rgba(224,60,40,0.22);border-color:var(--accent);transform:translateY(-1px)}
.app-badge .ab-icon{
  font-size:22px;line-height:1;flex-shrink:0;
  width:28px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--paper);
}
.app-badge .ab-icon svg{display:block}
.app-badge .ab-text{display:flex;flex-direction:column;gap:1px;line-height:1.15;text-align:left}
.app-badge .ab-top{
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(245,241,234,0.7);font-family:'JetBrains Mono',monospace;font-weight:600;
}
.app-badge-install .ab-top{color:var(--accent);font-weight:700}
.app-badge .ab-bottom{font-size:14px;font-weight:600;letter-spacing:-0.01em;color:var(--paper);display:inline-flex;align-items:center;gap:6px}
.app-badge .ab-pwa-tag{
  display:inline-flex;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:0.12em;
  padding:2px 6px;border-radius:4px;
  background:rgba(224,60,40,0.18);color:var(--accent);
  border:1px solid rgba(224,60,40,0.35);
  line-height:1;cursor:help;
}
.app-badge .ab-hint{
  font-size:10.5px;line-height:1.3;margin-top:2px;
  color:rgba(245,241,234,0.55);font-weight:400;letter-spacing:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
/* No light-theme override for ab-pwa-tag / ab-hint — footer bg is always
   dark so default cream styling works in both themes. */
.app-badge-disabled{
  cursor:not-allowed;position:relative;
  background:rgba(245,241,234,0.05);
  border-style:dashed;
}
.app-badge-disabled .ab-top{color:#D4A74A;font-weight:700}
.app-badge-disabled .ab-bottom{color:rgba(245,241,234,0.75)}
.app-badge-disabled .ab-icon{opacity:0.85}
.app-badge-disabled:hover{background:rgba(245,241,234,0.05);border-color:rgba(245,241,234,0.14);transform:none}
/* NOTE: footer always has dark (var(--ink)) background in BOTH themes, so the
   default app-badge styling (cream text on dark) is correct even in light mode.
   No body.theme-light overrides needed — previous overrides made text dark-on-
   dark and invisible. */
.footer-bottom{
  max-width:1400px;margin:0 auto;padding-top:24px;
  border-top:1px solid rgba(245,241,234,0.1);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:rgba(245,241,234,0.5);
  font-family:'JetBrains Mono',monospace;letter-spacing:0.05em;text-transform:uppercase;
}

/* ================ MOVIE MODAL ================ */
.modal-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.85);
  display:none;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;
  backdrop-filter:blur(8px);
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--ink);color:var(--paper);
  max-width:900px;width:100%;border-radius:24px;
  overflow:hidden;position:relative;
  max-height:90dvh;overflow-y:auto;
  border:1px solid rgba(245,241,234,0.1);
}
.modal-close{
  position:absolute;top:16px;right:16px;z-index:10;
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
  color:white;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,0.15);
  transition:background 0.2s;
}
.modal-close:hover,.modal-close:focus{background:rgba(224,60,40,0.9)}
@media (max-width:640px){
  /* On mobile, movie detail modal adopts bottom-sheet pattern (post eval v2):
     anchors to bottom, rounded top corners, slide-up animation, drag handle.
     This fixes Android swipe-back gesture conflict flagged by skeptical mobile user. */
  .modal-overlay{
    align-items:flex-end;padding:0;
    background:rgba(10,10,10,0.6);backdrop-filter:blur(4px);
  }
  .modal{
    max-width:100%;max-height:92vh;width:100%;
    border-radius:20px 20px 0 0;border-bottom:none;
    animation:modalSheetUp 0.3s cubic-bezier(.2,.8,.2,1);
    position:relative;
  }
  /* Drag handle affordance at top */
  .modal::before{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:44px;height:4px;background:rgba(245,241,234,0.3);
    border-radius:2px;pointer-events:none;z-index:12;
  }
  @keyframes modalSheetUp{
    from{transform:translateY(100%);opacity:0.5}
    to{transform:translateY(0);opacity:1}
  }
  .modal-close{top:18px;right:12px;width:36px;height:36px;font-size:18px}
  .modal-close-bottom{
    position:fixed;bottom:calc(env(safe-area-inset-bottom,0) + 16px);left:50%;
    transform:translateX(-50%);z-index:11;
    min-width:120px;height:44px;padding:0 20px;border-radius:22px;
    background:rgba(10,10,10,0.9);backdrop-filter:blur(12px);
    color:white;font-size:14px;font-weight:600;
    border:1px solid rgba(255,255,255,0.15);
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
}
.modal-close-bottom{display:none}
@media (max-width:640px){.modal-overlay.active .modal-close-bottom{display:flex}}
.modal-backdrop{
  height:280px;background-size:cover;background-position:center;
  position:relative;
}
.modal-backdrop::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent,var(--ink));
}
.modal-body{padding:24px 32px 40px;position:relative}
.modal-head{display:flex;gap:24px;margin-top:-120px;position:relative;z-index:2;margin-bottom:24px}
.modal-poster{width:180px;flex-shrink:0;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.modal-info{flex:1;padding-top:100px}
.modal-title{font-family:'Instrument Serif',serif;font-size:40px;letter-spacing:-0.02em;margin-bottom:8px;line-height:1.05}
.modal-meta{display:flex;gap:12px;flex-wrap:wrap;color:rgba(245,241,234,0.6);font-size:14px;margin-bottom:16px}
.modal-genres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.genre-chip{
  padding:4px 12px;border-radius:999px;
  background:rgba(245,241,234,0.08);
  font-size:12px;color:rgba(245,241,234,0.8);
}
.modal-overview{font-size:15px;line-height:1.6;color:rgba(245,241,234,0.85);margin-bottom:24px}
.modal-section-title{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.trailer-wrap{position:relative;padding-bottom:56.25%;height:0;border-radius:12px;overflow:hidden;margin-bottom:24px}
.trailer-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
.trailer-thumb{
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  margin-bottom:24px;cursor:pointer;display:block;
  background:#000;
}
.trailer-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s}
.trailer-thumb:hover img{transform:scale(1.03)}
.trailer-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.3),transparent 40%,rgba(0,0,0,0.2));
  pointer-events:none;
}
.trailer-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.trailer-thumb #ytPlayerContainer,.trailer-thumb #ytPlayerContainer iframe{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:none!important;
}
.trailer-hint{
  position:absolute;bottom:16px;left:20px;z-index:2;
  color:white;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.15em;
  background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);
  padding:8px 14px;border-radius:999px;
  pointer-events:none;
}
.no-trailer{padding:40px;background:rgba(245,241,234,0.05);border-radius:12px;text-align:center;color:rgba(245,241,234,0.5);margin-bottom:24px}

/* ===== STREAMING PROVIDERS (centered + bigger) ===== */
.providers-section{margin-bottom:32px;text-align:center}
.providers-section .modal-section-title{text-align:center}
.provider-group{margin-bottom:24px}
.provider-group:last-child{margin-bottom:0}
.provider-group-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.15em;color:rgba(245,241,234,0.5);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
  justify-content:center;
}
.provider-group-label::before,.provider-group-label::after{
  content:'';width:50px;height:1px;background:rgba(245,241,234,0.15);
}
.provider-list{
  display:flex;gap:14px;flex-wrap:wrap;
  justify-content:center;
}
.provider-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(245,241,234,0.05);
  border:1px solid rgba(245,241,234,0.12);
  padding:18px 24px;border-radius:16px;
  transition:all 0.25s;cursor:pointer;text-decoration:none;color:inherit;
  min-width:170px;max-width:200px;
  text-align:center;
}
.provider-card:hover{
  background:rgba(224,60,40,0.08);
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 15px 40px rgba(224,60,40,0.25);
}
.provider-logo{
  width:64px;height:64px;border-radius:14px;
  object-fit:cover;flex-shrink:0;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.provider-name{
  font-weight:700;font-size:15px;
  color:var(--paper);line-height:1.2;
  max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.provider-action{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.12em;color:var(--accent);
  font-weight:700;
}
.providers-empty{
  padding:24px;background:rgba(245,241,234,0.03);
  border-radius:14px;text-align:center;
  color:rgba(245,241,234,0.5);font-size:13px;line-height:1.5;
}
.providers-empty strong{color:var(--paper);display:block;margin-bottom:6px;font-size:14px}

/* Cinema fallback (when movie still in theaters) */
.cinema-fallback{
  background:linear-gradient(135deg,rgba(255,215,0,0.08),rgba(224,60,40,0.05));
  border:1px solid rgba(255,215,0,0.25);
  border-radius:16px;padding:24px;
  text-align:center;
}
.cinema-fallback .cf-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.15em;color:#FFD700;
  margin-bottom:12px;
  padding:6px 12px;background:rgba(255,215,0,0.1);border-radius:999px;
}
.cinema-fallback .cf-label::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#FFD700;
  animation:pulse 1.5s infinite;box-shadow:0 0 10px #FFD700;
}
.cinema-fallback .cf-title{
  font-family:'Instrument Serif',serif;font-size:22px;
  letter-spacing:-0.02em;margin-bottom:6px;
}
.cinema-fallback .cf-desc{
  color:rgba(245,241,234,0.6);font-size:13px;
  margin-bottom:18px;
}
.cinema-fallback-buttons{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}

/* Modal actions (centered, moved below providers) */
.modal-actions-centered{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid rgba(245,241,234,0.08);
}
@media (max-width:700px){
  .modal-head{flex-direction:column;margin-top:-80px}
  .modal-poster{width:140px}
  .modal-info{padding-top:0}
  .modal-title{font-size:30px}
}

/* ================ QUIZ OVERLAY ================ */
.quiz-overlay{
  position:fixed;inset:0;z-index:400;
  background:var(--paper);
  display:none;overflow-y:auto;
}
.quiz-overlay.active{display:block}
.quiz-header{
  position:sticky;top:0;z-index:10;
  background:rgba(245,241,234,0.95);backdrop-filter:blur(12px);
  padding:20px 32px;
  display:flex;align-items:center;gap:16px;
  border-bottom:1px solid var(--line);
}
.quiz-back,.quiz-close{
  width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}

/* Screen-reader only (WCAG visually-hidden) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}

/* Skip-to-content link (WCAG 2.4.1) */
.skip-link{position:absolute;top:-40px;left:8px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;z-index:9999;font-weight:600;font-size:14px;transition:top 0.2s}
.skip-link:focus{top:8px}

/* Sticky mobile CTA — appears after user scrolls past hero (mobile only) */
.sticky-mobile-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:95;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,10,0.92);backdrop-filter:blur(12px);
  border-top:1px solid rgba(245,241,234,0.1);
  transform:translateY(100%);transition:transform 0.3s cubic-bezier(.2,.8,.2,1);
  display:none;
}
.sticky-mobile-cta.visible{transform:translateY(0)}
.sticky-mobile-cta .btn{width:100%;min-height:48px;font-size:15px;font-weight:600;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.sticky-mobile-cta .smc-sub{text-align:center;font-size:11px;color:rgba(245,241,234,0.5);margin-top:4px;font-family:'JetBrains Mono',monospace;letter-spacing:0.08em;text-transform:uppercase}
@media (max-width:900px){.sticky-mobile-cta{display:block}}
/* Hide sticky CTA when overlays/modals are active */
body.lock-scroll .sticky-mobile-cta,
.quiz-overlay.active ~ .sticky-mobile-cta{transform:translateY(100%) !important}
.progress-bar{flex:1;height:4px;background:var(--line);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);width:0%;transition:width 0.4s ease}
.progress-text{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);min-width:40px}

/* Quiz quota chip — sits next to progress text. Soft-state for free users
   (Audit S2 Q-05). 4 visual states: free-low, free-warn, free-urgent, pro. */
.quiz-quota-chip{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:5px 9px;border:1px solid rgba(245,241,234,0.18);
  background:rgba(245,241,234,0.04);color:rgba(245,241,234,0.65);
  text-decoration:none;line-height:1;white-space:nowrap;border-radius:3px;
  display:inline-flex;align-items:center;gap:5px;cursor:default;transition:all .2s ease;
}
.quiz-quota-chip[hidden]{display:none}
.quiz-quota-chip.qqc-warn{
  border-color:rgba(212,167,74,0.55);color:#D4A74A;background:rgba(212,167,74,0.07);cursor:pointer;
}
.quiz-quota-chip.qqc-warn:hover{background:rgba(212,167,74,0.14);color:#F5C177}
.quiz-quota-chip.qqc-urgent{
  border-color:rgba(224,60,40,0.55);color:#E03C28;background:rgba(224,60,40,0.07);cursor:pointer;
}
.quiz-quota-chip.qqc-urgent:hover{background:rgba(224,60,40,0.14)}
.quiz-quota-chip.qqc-pro{
  border-color:rgba(212,167,74,0.55);color:#D4A74A;background:rgba(212,167,74,0.06);
}
.quiz-quota-chip .qqc-spark{font-size:11px;line-height:1}
@media (max-width:520px){
  .quiz-quota-chip{font-size:9.5px;padding:4px 7px;letter-spacing:0.06em}
  .quiz-quota-chip .qqc-label{display:none}
}

/* Soft-tease toast — appears post-result for free users when count>=5.
   Bottom-pinned, dismissible, once-per-session via sessionStorage. */
.quiz-softtease{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:#151210;border:1px solid rgba(212,167,74,0.32);border-left:3px solid #D4A74A;
  box-shadow:0 18px 40px -12px rgba(0,0,0,0.6);max-width:560px;width:calc(100% - 32px);
  z-index:730;animation:qstFadeIn .4s cubic-bezier(.16,1,.3,1);
}
.quiz-softtease[hidden]{display:none}
@keyframes qstFadeIn{from{opacity:0;transform:translate(-50%, 12px)}to{opacity:1;transform:translate(-50%, 0)}}
.qst-icon{
  font-family:'Instrument Serif',serif;font-size:24px;font-style:italic;color:#D4A74A;
  flex-shrink:0;line-height:1;
}
.qst-body{flex:1;font-size:13px;line-height:1.5;color:rgba(245,241,234,0.78)}
.qst-body strong{color:var(--paper);font-weight:600}
.qst-body span{display:block;font-size:12.5px;color:rgba(245,241,234,0.7);margin-top:2px}
.qst-link{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:#D4A74A;
  text-decoration:none;padding:6px 10px;border:1px solid rgba(212,167,74,0.45);
  flex-shrink:0;transition:all .2s;
}
.qst-link:hover{background:rgba(212,167,74,0.12);color:#F5C177}
.qst-close{
  background:transparent;border:0;color:rgba(245,241,234,0.4);
  font-size:14px;cursor:pointer;padding:4px 6px;line-height:1;flex-shrink:0;
}
.qst-close:hover{color:rgba(245,241,234,0.8)}
@media (max-width:520px){
  .quiz-softtease{bottom:80px;padding:12px 14px;gap:10px}
  .qst-body{font-size:12px}
  .qst-body span{font-size:11.5px}
  .qst-link{padding:5px 8px;font-size:10px}
}

.quiz-content{max-width:800px;margin:0 auto;padding:60px 32px 80px}
.quiz-question{animation:slideIn 0.4s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.quiz-question h2{
  font-family:'Instrument Serif',serif;
  font-size:clamp(32px,5vw,56px);
  letter-spacing:-0.03em;font-weight:400;margin-bottom:12px;
}
.quiz-question .sub{color:var(--dim);margin-bottom:32px;font-size:16px}
.quiz-options{display:grid;gap:12px}
/* The "theme toggle" only flips accents/nav — body bg is always var(--paper)
   (cream) in both modes. So cards stay white and text MUST always be dark.
   Previously text used var(--paper) (cream) which gave cream-on-white = 1.05:1
   and was invisible in both modes regardless of theme-light. */
.quiz-option{
  background:#fff;border:1px solid var(--line);
  padding:20px 24px;border-radius:16px;
  text-align:left;font-size:16px;font-weight:500;color:#1A1408;
  display:flex;align-items:center;gap:16px;
  transition:all 0.2s;
}
.quiz-option:hover{border-color:var(--accent);transform:translateX(4px)}
.quiz-option.selected{border-color:var(--accent);background:var(--accent-soft)}

/* ===== 3-Q minimum checkpoint (audit S2 Q-02) =====
   Body bg is always var(--paper) (cream) in both themes — same as .quiz-option
   above. Text MUST be dark; previous color:var(--paper) gave cream-on-cream and
   was invisible. Gold #D4A74A also fails contrast on cream (~1.7:1) → use the
   darker bronze #8E6A1E that the rest of light-theme already adopts. */
.quiz-checkpoint{max-width:560px;margin:0 auto;padding:40px 0;text-align:center;animation:slideIn 0.4s ease}
.qcp-eyebrow{
  display:inline-block;font-size:10.5px;letter-spacing:0.22em;color:#8E6A1E;
  text-transform:uppercase;font-weight:700;margin-bottom:18px;
}
.qcp-title{
  font-family:'Instrument Serif',serif;font-size:clamp(32px,5vw,52px);
  line-height:1.05;letter-spacing:-0.02em;color:#1A1408;font-weight:400;
  margin:0 0 16px;
}
.qcp-title em{font-style:italic;color:#8E6A1E}
.qcp-reading{
  font-size:14.5px;line-height:1.65;color:rgba(26,20,8,0.72);
  margin:0 auto 32px;max-width:480px;
}
.qcp-reading strong{color:#1A1408;font-weight:600}
.qcp-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin:0 auto}
.qcp-btn{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:24px 18px;border-radius:14px;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid var(--line);
  color:#1A1408;transition:all .2s ease;
}
.qcp-btn:hover{background:#FAF7F0;border-color:rgba(26,20,8,0.25);transform:translateY(-2px)}
.qcp-btn-icon{font-size:32px;line-height:1}
.qcp-btn-block{display:flex;flex-direction:column;gap:3px;text-align:center}
.qcp-btn-block strong{font-size:14.5px;font-weight:600;letter-spacing:-0.005em}
.qcp-btn-block small{font-size:11.5px;color:rgba(26,20,8,0.6);font-style:italic;font-family:'Instrument Serif',serif}
.qcp-fast{
  background:linear-gradient(135deg,rgba(212,167,74,0.18),rgba(255,255,255,0.95));
  border-color:rgba(142,106,30,0.4);
}
.qcp-fast:hover{background:linear-gradient(135deg,rgba(212,167,74,0.3),rgba(255,255,255,0.85));border-color:#8E6A1E}
.qcp-deep{
  background:linear-gradient(135deg,rgba(184,50,34,0.10),rgba(255,255,255,0.95));
  border-color:rgba(184,50,34,0.4);
}
.qcp-deep:hover{background:linear-gradient(135deg,rgba(184,50,34,0.18),rgba(255,255,255,0.85));border-color:#B83222}
@media (max-width:520px){
  .qcp-actions{grid-template-columns:1fr;gap:10px}
  .qcp-btn{flex-direction:row;text-align:left;padding:18px 16px;gap:14px}
  .qcp-btn-icon{font-size:24px}
  .qcp-btn-block{text-align:left}
}

/* ===== Scenario picker (audit Fase 4 / Q-01) — colored-tint icon boxes ===== */
/* Each scenario option has its own warm/cool tint behind the emoji to make the
   first quiz question feel deliberate, not utilitarian. Tag pill on the right
   shows the inner mood label (VALIDASI / ESCAPE / ...) until selected, then
   flips to ✓ red. Spec from Fase 4 deck: 42×42 colored boxes. */
.qo-scenarios{display:flex;flex-direction:column;gap:10px}
.quiz-option.qo-scenario{
  display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;
  padding:12px 16px;text-align:left;
}
.qo-iconbox{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;font-size:22px;flex-shrink:0;
  transition:transform .18s ease;
}
.quiz-option.qo-scenario:hover .qo-iconbox{transform:scale(1.05)}
.qo-text-block{display:flex;flex-direction:column;min-width:0;gap:2px}
/* Dark text — page is cream-themed in both modes, cards are white. */
.qo-text-block strong{font-size:14.5px;font-weight:600;color:#1A1408;line-height:1.2;letter-spacing:-0.01em}
.qo-text-block small{font-size:11.5px;font-style:italic;font-family:'Instrument Serif',serif;color:rgba(20,20,20,0.62);line-height:1.3}
.qo-tag{
  font-size:9.5px;letter-spacing:0.18em;font-weight:700;
  color:#D4A74A;text-transform:uppercase;line-height:1;flex-shrink:0;
  padding:5px 8px;border:1px solid rgba(212,167,74,0.35);border-radius:4px;
  background:rgba(212,167,74,0.06);transition:all .18s ease;
}
.quiz-option.qo-scenario.selected .qo-tag{
  color:#fff;background:var(--accent);border-color:var(--accent);
  font-size:14px;letter-spacing:0;padding:4px 10px;
}
/* Per-scenario tints — warm/cool palette pulled from Fase 4 spec.
   Emoji background is faded; the option border picks up the same hue
   on hover so the choice feels tangibly different. */
.qo-tint-validation .qo-iconbox{background:#3b2c2a;color:#F5C177}
.qo-tint-validation:hover{border-color:rgba(245,193,119,0.3)}
.qo-tint-escape .qo-iconbox{background:#2d2f3d;color:#C8B6FF}
.qo-tint-escape:hover{border-color:rgba(200,182,255,0.3)}
.qo-tint-connection .qo-iconbox{background:#3d342a;color:#D4A74A}
.qo-tint-connection:hover{border-color:rgba(212,167,74,0.4)}
.qo-tint-thrill .qo-iconbox{background:#2a2d3b;color:#5EC3E7}
.qo-tint-thrill:hover{border-color:rgba(94,195,231,0.3)}
.qo-tint-healing .qo-iconbox{background:#2a3a2d;color:#7AA67D}
.qo-tint-healing:hover{border-color:rgba(122,166,125,0.4)}
.qo-tint-curiosity .qo-iconbox{background:#343d2d;color:#A4C49C}
.qo-tint-curiosity:hover{border-color:rgba(164,196,156,0.3)}
.qo-tint-nostalgia .qo-iconbox{background:#3d2e2a;color:#E89BB0}
.qo-tint-nostalgia:hover{border-color:rgba(232,155,176,0.3)}
@media (max-width:520px){
  .quiz-option.qo-scenario{grid-template-columns:40px 1fr auto;gap:11px;padding:10px 12px}
  .qo-iconbox{width:36px;height:36px;font-size:18px}
  .qo-text-block strong{font-size:13.5px}
  .qo-text-block small{font-size:11px}
  .qo-tag{font-size:8.5px;padding:4px 6px;letter-spacing:0.14em}
}
.quiz-option .emoji{font-size:32px}
.quiz-option .text strong{display:block;color:#1A1408}
.quiz-option .text small{color:rgba(20,20,20,0.62);font-weight:400;font-size:13px}
.quiz-actions{margin-top:32px;text-align:center}
.hint{color:var(--dim);font-size:13px;text-align:center;margin-top:12px}
/* Skip button — bold black pill, confident & aesthetic. Uses ink/paper palette consistent with brand. */
.btn-skip{
  background:var(--ink)!important;
  color:var(--paper)!important;
  border:1px solid var(--ink)!important;
  padding:16px 36px!important;
  font-size:15px!important;
  font-weight:600!important;
  letter-spacing:0.01em;
  box-shadow:0 4px 16px rgba(10,10,10,0.12), 0 1px 3px rgba(10,10,10,0.08);
  position:relative;
  overflow:hidden;
  line-height:1.25;
}
/* 2-line skip label: big "Skip" on top, muted sub-text + arrow below */
.btn-skip .skip-stack{
  display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;
}
.btn-skip .skip-main{
  font-size:17px;font-weight:700;letter-spacing:0.02em;
}
.btn-skip .skip-sub{
  font-size:12px;font-weight:400;opacity:0.62;letter-spacing:0.015em;
}
.btn-skip:hover{
  background:#1a1a1a!important;
  border-color:#1a1a1a!important;
  color:var(--paper)!important;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,10,10,0.2), 0 2px 6px rgba(10,10,10,0.12);
}
.btn-skip:active{transform:translateY(0);box-shadow:0 2px 8px rgba(10,10,10,0.1)}
/* Subtle shimmer line on hover for aesthetic polish */
.btn-skip::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(245,241,234,0.08) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
}
.btn-skip:hover::before{transform:translateX(100%)}

/* ===== Reference Films question (taste fingerprint) ===== */
.quiz-reference-input{display:flex;flex-direction:column;gap:20px}
.ref-search-box{position:relative}
.ref-search-box input{width:100%;padding:18px 22px;border:1px solid var(--line);border-radius:14px;font-size:16px;font-family:inherit;background:white;transition:border-color 0.2s;box-sizing:border-box}
.ref-search-box input:focus{outline:none;border-color:var(--accent)}
.ref-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;z-index:100;max-height:360px;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.12)}
.ref-search-results:empty{display:none}
.ref-search-result{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--line-soft,rgba(0,0,0,0.05));transition:background 0.15s}
.ref-search-result:last-child{border-bottom:none}
.ref-search-result:hover{background:var(--accent-soft)}
.ref-search-result img{width:46px;height:68px;object-fit:cover;border-radius:6px;flex-shrink:0;background:#eee}
.ref-search-info{flex:1;min-width:0}
.ref-search-title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-search-sub{color:var(--dim);font-size:12px;margin-top:2px}
.ref-empty{padding:16px;text-align:center;color:var(--dim);font-size:14px}
.ref-chips{display:flex;flex-wrap:wrap;gap:10px}
.ref-chip{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:100px;padding:6px 14px 6px 6px;font-size:14px;font-weight:500}
.ref-chip img{width:32px;height:48px;object-fit:cover;border-radius:6px;background:#eee}
.ref-chip-noposter{width:32px;height:48px;display:flex;align-items:center;justify-content:center;background:#eee;border-radius:6px;font-size:18px}
.ref-chip span{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-chip button{background:transparent;border:none;font-size:20px;cursor:pointer;color:var(--accent);padding:0 4px;line-height:1;font-weight:300}
.ref-chip button:hover{color:var(--fg)}

/* ===== Textarea question (open-ended mood prompt) ===== */
.quiz-textarea-input{display:flex;flex-direction:column;gap:8px}
.quiz-textarea-input textarea{width:100%;padding:18px 22px;border:1px solid var(--line);border-radius:14px;font-size:16px;font-family:inherit;background:white;resize:vertical;min-height:120px;line-height:1.5;transition:border-color 0.2s;box-sizing:border-box}
.quiz-textarea-input textarea:focus{outline:none;border-color:var(--accent)}
.textarea-meta{text-align:right;color:var(--dim);font-size:12px}

/* Loading */
.loading-screen{text-align:center;padding:100px 20px}
.loading-screen .popcorn{font-size:80px;animation:bounce 1s infinite;margin-bottom:24px}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.loading-screen h2{font-family:'Instrument Serif',serif;font-size:40px;margin-bottom:12px;letter-spacing:-0.02em}
.loading-screen p{color:var(--dim)}

/* AI thinking dot-typing — audit S2 Q-01. Pre-results "AI thinking" feel.
   Three pulsing dots underneath the loading h2 so the quiz feels live, not
   like a static spinner. Pure CSS keyframes — adds no JS work. */
.loading-screen .ai-dots{
  display:inline-flex;gap:6px;margin-top:12px;
  align-items:center;justify-content:center;
}
.loading-screen .ai-dots span{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#D4A74A;animation:aiDotPulse 1.2s ease-in-out infinite;
}
.loading-screen .ai-dots span:nth-child(2){animation-delay:0.18s;background:#E03C28}
.loading-screen .ai-dots span:nth-child(3){animation-delay:0.36s}
@keyframes aiDotPulse{
  0%,80%,100%{opacity:0.25;transform:scale(0.8)}
  40%{opacity:1;transform:scale(1.15)}
}

/* Results page */
.results-head{text-align:center;padding:40px 20px}
.results-head h1{font-family:'Instrument Serif',serif;font-size:clamp(36px,6vw,72px);letter-spacing:-0.03em;margin-bottom:12px;line-height:1}
.results-head p{color:var(--dim);max-width:600px;margin:0 auto}
.results-head .quiz-source{color:#39342d;font-size:14px;line-height:1.5;margin-bottom:12px}
.quiz-source button{color:#9a2c1e!important;text-decoration:underline;font-weight:600}
.results-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:24px;padding:40px 0;
}

/* ============ QUIZ OVERLAY BACKGROUND DECORATION ============ */
.quiz-overlay::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(224,60,40,0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(224,60,40,0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.02) 0%, transparent 60%);
}
.quiz-overlay::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 40px, rgba(10,10,10,0.015) 40px, rgba(10,10,10,0.015) 80px);
}
.quiz-content{position:relative;z-index:2}
.quiz-header{position:sticky;top:0;z-index:5}

/* Results background — poster wall grid on left & right sides */
.results-bg-wall{
  position:fixed;top:56px;bottom:0;width:220px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:10px;pointer-events:none;z-index:0;
  opacity:0.07;overflow:hidden;align-content:start;
}
.results-bg-wall.wall-left{left:0;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0.9),transparent);mask-image:linear-gradient(to right,rgba(0,0,0,0.9),transparent)}
.results-bg-wall.wall-right{right:0;-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,0.9),transparent);mask-image:linear-gradient(to left,rgba(0,0,0,0.9),transparent)}
.results-bg-wall img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  border-radius:10px;filter:blur(1px) grayscale(30%);
}
@media(max-width:1100px){.results-bg-wall{width:140px;opacity:0.05}}
@media(max-width:900px){.results-bg-wall{display:none}}

/* ============ SLIDE CAROUSEL (Top 3 + Feedback Slide) — COMPACT ============ */
.results-carousel{
  position:relative;margin:24px auto 0;max-width:980px;
  padding:0 64px;z-index:2;
}
@media(max-width:800px){.results-carousel{padding:0 28px}}
.carousel-viewport-wrap{position:relative}
.carousel-viewport{
  overflow:hidden;border-radius:20px;
  background:var(--ink);
}
.carousel-track{
  display:flex;transition:transform 0.5s cubic-bezier(0.3,1,0.4,1);
  will-change:transform;
}
.carousel-slide{
  flex:0 0 100%;min-width:100%;
  padding:24px 28px;
  display:grid;grid-template-columns:240px 1fr;gap:28px;
  color:var(--paper);
  align-items:center;
}
@media (max-width:800px){
  .carousel-slide{grid-template-columns:1fr;padding:24px 20px;text-align:center;gap:20px}
}
.slide-poster{
  width:240px;aspect-ratio:2/3;object-fit:cover;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,0.5),0 0 0 1px rgba(245,241,234,0.08);
}
@media (max-width:800px){.slide-poster{width:180px;margin:0 auto}}
.slide-content{position:relative}
.slide-rank{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.12em;font-weight:700;
  margin-bottom:14px;
}
.rank-1 .slide-rank{background:linear-gradient(135deg,var(--accent),#B92E23);color:white;box-shadow:0 6px 20px rgba(224,60,40,0.4)}
.rank-2 .slide-rank{background:rgba(245,241,234,0.1);color:var(--paper)}
.rank-3 .slide-rank{background:rgba(245,241,234,0.05);color:rgba(245,241,234,0.7)}
.slide-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(28px,4vw,44px);
  line-height:1;letter-spacing:-0.02em;
  margin-bottom:10px;
}
.slide-meta{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  color:rgba(245,241,234,0.6);font-size:13px;
}
.slide-meta .rating{color:#FFD700;font-weight:600}
.slide-reason{
  background:rgba(224,60,40,0.08);
  border-left:3px solid var(--accent);
  padding:14px 16px;border-radius:10px;
  font-size:14px;line-height:1.55;margin-bottom:16px;
  color:rgba(245,241,234,0.92);
}
.slide-reason strong{color:var(--accent);display:block;font-size:10px;letter-spacing:0.15em;margin-bottom:6px;font-family:'JetBrains Mono',monospace}
/* Predictable button grid: primary CTAs (Watch Now, Lihat Detail, Next Rank)
   stretch full width; the 3 secondary share/save buttons fill a single 3-col
   row. Avoids the previous flex-wrap chaos where each button had unpredictable
   line breaks depending on label length. */
.slide-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slide-actions > .watch-now-cta,
.slide-actions > .btn-primary,
.slide-actions > .btn-next-rank{grid-column:1 / -1}
.slide-actions > .wl-btn,
.slide-actions > .wl-share-btn,
.slide-actions > .wl-ig-btn{width:100%;justify-content:center;padding:10px 8px;font-size:12.5px}
@media (max-width:380px){
  .slide-actions{grid-template-columns:1fr 1fr}
  .slide-actions > .wl-ig-btn{grid-column:1 / -1}
}

/* ===== CINEMA BONUS SLIDE ===== */
.carousel-slide.cinema-bonus-slide{
  position:relative;overflow:hidden;
}
.cinema-bonus-slide::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(255,215,0,0.08) 0%,transparent 60%);
  pointer-events:none;z-index:0;
}
.cinema-bonus-slide .slide-content,
.cinema-bonus-slide .slide-poster{position:relative;z-index:1}
.cinema-bonus-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  background:linear-gradient(135deg,#FFD700,#F0A500);color:#1a1a1a;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.12em;font-weight:700;
  margin-bottom:14px;
  box-shadow:0 4px 16px rgba(255,215,0,0.3);
}
.cinema-bonus-reason{
  background:rgba(255,215,0,0.08);
  border-left:3px solid #FFD700;
  padding:14px 16px;border-radius:10px;
  font-size:14px;line-height:1.55;margin-bottom:16px;
  color:rgba(245,241,234,0.92);
}
.cinema-bonus-reason strong{
  color:#FFD700;display:block;font-size:10px;
  letter-spacing:0.15em;margin-bottom:6px;
  font-family:'JetBrains Mono',monospace;
}
.cinema-bonus-chains{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;
}
.cinema-bonus-chains .chain-chip{
  padding:4px 10px;border-radius:6px;
  font-size:11px;font-weight:600;letter-spacing:0.05em;
  font-family:'JetBrains Mono',monospace;
}
.chain-chip.cgv{background:#E30613;color:white}
.chain-chip.xxi{background:#003D7A;color:white}
.cinema-bonus-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:800px){.cinema-bonus-actions{justify-content:center}}

/* ===== FEEDBACK SLIDE (4th slide) ===== */
.carousel-slide.feedback-slide{
  grid-template-columns:1fr;text-align:center;
  padding:48px 32px;min-height:380px;
  background:radial-gradient(ellipse at center,rgba(224,60,40,0.15) 0%,var(--ink) 70%);
  justify-content:center;align-items:center;
}
.feedback-slide-inner{max-width:500px;margin:0 auto}
.feedback-icon{font-size:48px;margin-bottom:16px}
.feedback-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(36px,5vw,56px);
  line-height:1;letter-spacing:-0.02em;margin-bottom:12px;
}
.feedback-title em{color:var(--accent);font-style:italic}
.feedback-desc{color:rgba(245,241,234,0.7);margin-bottom:24px;font-size:15px;line-height:1.5}
.feedback-slide-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.feedback-slide-actions .btn{padding:14px 24px;font-size:14px}

/* ===== IG STORY SHARE CARD (hidden, 1080×1920) ===== */
/* Uses opacity+transform to hide instead of left:-9999px which breaks
   mobile rendering (Safari/Chrome skip layout for extreme off-screen elements) */
#shareCard{
  position:fixed;left:0;top:0;z-index:-999;
  width:1080px;min-height:1920px;height:auto;
  background:#0A0A0A;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:#F5F1EA;
  overflow:visible;
  opacity:0;
  pointer-events:none;
  transform:scale(0.001);
  transform-origin:top left;
}
#shareCard.capturing{
  opacity:1;
  transform:none;
  /* Still behind everything but fully laid out for capture */
}
.sc-grain{
  /* Simplified grain — removed inline SVG filter which can fail in
     html-to-image's SVG foreignObject clone on mobile */
  position:absolute;inset:0;
  background:repeating-conic-gradient(rgba(245,241,234,0.03) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  pointer-events:none;
}
.sc-accent-glow{
  position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(224,60,40,0.18) 0%,transparent 70%);
  pointer-events:none;
}
.sc-inner{position:relative;z-index:1;padding:80px 72px;height:100%;display:flex;flex-direction:column}
.sc-header{text-align:center;margin-bottom:48px}
.sc-logo{
  font-family:'Instrument Serif',serif;font-size:52px;
  letter-spacing:-0.03em;color:#F5F1EA;margin-bottom:8px;
}
.sc-logo span{color:#E03C28}
.sc-tagline{font-size:20px;color:rgba(245,241,234,0.5);letter-spacing:0.5px}
.sc-vibe{text-align:center;margin-bottom:56px}
.sc-vibe-label{font-size:22px;color:rgba(245,241,234,0.5);margin-bottom:12px;text-transform:uppercase;letter-spacing:2px}
.sc-vibe-text{
  font-family:'Instrument Serif',serif;font-size:56px;line-height:1.15;
  letter-spacing:-0.02em;
}
.sc-vibe-text em{color:#E03C28;font-style:italic}
.sc-picks{flex:1;display:flex;flex-direction:column;gap:24px}
.sc-pick{
  display:flex;gap:28px;align-items:center;
  background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.08);
  border-radius:16px;padding:20px 24px;
}
.sc-pick-rank{
  font-family:'Instrument Serif',serif;font-size:64px;
  color:rgba(224,60,40,0.25);font-weight:400;min-width:60px;text-align:center;
  line-height:1;
}
.sc-pick-rank.r1{color:#E03C28}
.sc-pick-poster{width:110px;height:165px;border-radius:10px;object-fit:cover;flex-shrink:0}
.sc-pick-info{flex:1;min-width:0}
.sc-pick-title{font-size:30px;font-weight:600;line-height:1.2;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-pick-meta{font-size:20px;color:rgba(245,241,234,0.5)}
.sc-pick-meta .rating-star{color:#E03C28}
.sc-cinema{
  margin-top:16px;padding:20px 28px;
  background:linear-gradient(135deg,rgba(255,215,0,0.08),rgba(255,215,0,0.02));
  border:1px solid rgba(255,215,0,0.2);border-radius:14px;
  text-align:center;
}
.sc-cinema-label{font-size:18px;color:rgba(255,215,0,0.6);margin-bottom:6px;text-transform:uppercase;letter-spacing:1.5px}
.sc-cinema-title{font-family:'Instrument Serif',serif;font-size:32px;color:#FFD700}
.sc-cinema-chains{margin-top:8px;display:flex;gap:8px;justify-content:center}
.sc-cinema-chip{
  padding:4px 14px;border-radius:20px;font-size:16px;font-weight:600;
}
.sc-cinema-chip.cgv{background:rgba(200,16,46,0.2);color:#C8102E}
.sc-cinema-chip.xxi{background:rgba(0,51,160,0.2);color:#6B9FFF}
.sc-footer{text-align:center;margin-top:48px;padding-top:32px;border-top:1px solid rgba(245,241,234,0.08)}
.sc-footer-url{font-size:22px;color:rgba(245,241,234,0.4);letter-spacing:0.5px}
.sc-footer-url strong{color:rgba(245,241,234,0.7)}
.share-btn-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.share-spinner{
  display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,0.3);border-top-color:white;
  border-radius:50%;animation:spin 0.6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== CAROUSEL NAVIGATION (compact) ===== */
.carousel-nav{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;gap:12px;flex-wrap:wrap;
  padding:0 4px;
}
.carousel-dots{display:flex;gap:8px}
.carousel-dot{
  width:32px;height:6px;border-radius:999px;
  background:var(--line);cursor:pointer;
  transition:all 0.3s;border:none;
}
.carousel-dot.active{background:var(--accent);width:48px}
.carousel-dot:hover{background:var(--dim)}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  border:none;cursor:pointer;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;z-index:10;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.carousel-arrow:hover{background:var(--accent);transform:translateY(-50%) scale(1.1)}
.carousel-arrow:disabled{opacity:0.2;cursor:not-allowed;transform:translateY(-50%)}
.carousel-arrow.side-prev{left:-56px}
.carousel-arrow.side-next{right:-56px}
@media(max-width:800px){
  .carousel-arrow{width:40px;height:40px;font-size:18px}
  .carousel-arrow.side-prev{left:-18px}
  .carousel-arrow.side-next{right:-18px}
}

.carousel-counter{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--dim);letter-spacing:0.08em;
}
.carousel-counter strong{color:var(--ink);font-size:16px}

.carousel-progress{
  height:2px;background:var(--line);border-radius:999px;
  margin-top:12px;overflow:hidden;
}
.carousel-progress-fill{
  height:100%;background:var(--accent);
  transition:width 0.5s cubic-bezier(0.3,1,0.4,1);
}
.result-card{
  background:white;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;
  transition:all 0.3s;position:relative;
}
.result-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,0.1)}
.result-card.rank-1{border:2px solid var(--accent);box-shadow:0 10px 40px rgba(224,60,40,0.2)}
.result-card.rank-1:hover{box-shadow:0 30px 80px rgba(224,60,40,0.3)}
.result-rank-badge{
  position:absolute;top:-1px;left:20px;z-index:5;
  background:var(--ink);color:var(--paper);
  padding:8px 16px;border-radius:0 0 10px 10px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:0.12em;font-weight:700;
}
.rank-1 .result-rank-badge{
  background:linear-gradient(135deg,var(--accent),#B92E23);
  color:white;
}
.result-poster{aspect-ratio:2/3;background:#eee;position:relative;cursor:pointer}
.result-poster img{width:100%;height:100%;object-fit:cover}
.result-info{padding:16px}
.result-title{font-family:'Instrument Serif',serif;font-size:22px;letter-spacing:-0.02em;margin-bottom:6px;line-height:1.2}
.result-meta{display:flex;gap:8px;font-size:12px;color:var(--dim);margin-bottom:12px}
.result-reason{background:var(--accent-soft);border-radius:12px;padding:12px;font-size:13px;line-height:1.5;margin-bottom:12px;color:var(--ink)}
.result-reason strong{color:var(--accent);display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px}
.result-platforms{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.platform-tag{font-size:11px;background:var(--ink);color:var(--paper);padding:3px 10px;border-radius:999px}

/* ===== RESULT FEEDBACK (match atau belum) ===== */
.results-feedback{
  background:linear-gradient(135deg,rgba(224,60,40,0.08),rgba(22,33,62,0.5));
  border:1px solid rgba(224,60,40,0.25);
  border-radius:24px;padding:32px;margin:20px 0;
  text-align:center;
}
.results-feedback h3{
  font-family:'Instrument Serif',serif;
  font-size:32px;letter-spacing:-0.02em;margin-bottom:8px;
  color:var(--ink);
}
.results-feedback p{color:var(--dim);margin-bottom:24px;font-size:15px}
.feedback-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.feedback-actions .btn{padding:16px 28px;font-size:15px;font-weight:600}

/* ===== FOLLOW-UP QUIZ SEARCH INPUT ===== */
.followup-search-wrap{
  background:var(--ink);border:1px solid var(--line);border-radius:16px;padding:20px;
  color:var(--paper);margin-bottom:20px;
}
.followup-search-wrap input{
  width:100%;padding:14px 20px;border-radius:999px;
  background:rgba(245,241,234,0.08);border:1px solid rgba(245,241,234,0.15);
  color:var(--paper);font-family:inherit;font-size:15px;
}
.followup-search-wrap input:focus{outline:none;border-color:var(--accent)}
.followup-search-results{display:grid;gap:8px;margin-top:12px;max-height:280px;overflow-y:auto}
.followup-search-result{
  display:flex;gap:12px;padding:10px;background:rgba(245,241,234,0.05);
  border-radius:12px;cursor:pointer;align-items:center;transition:background 0.2s;
}
.followup-search-result:hover{background:rgba(245,241,234,0.1)}
.followup-search-result img{width:40px;height:60px;object-fit:cover;border-radius:6px;background:#222}
.followup-selected{
  display:flex;align-items:center;gap:12px;padding:12px;
  background:rgba(0,200,83,0.1);border:1px solid rgba(0,200,83,0.3);
  border-radius:12px;margin-top:12px;
}
.followup-selected img{width:50px;height:75px;object-fit:cover;border-radius:6px}
.followup-selected .label{font-family:'JetBrains Mono',monospace;font-size:10px;color:#00C853;letter-spacing:0.1em}

/* Waitlist */
.waitlist-box{
  background:var(--ink);color:var(--paper);
  border-radius:24px;padding:40px;margin:40px 0;text-align:center;
}
.waitlist-box h3{font-family:'Instrument Serif',serif;font-size:32px;margin-bottom:12px;letter-spacing:-0.02em}
.waitlist-box p{color:rgba(245,241,234,0.7);margin-bottom:24px;max-width:500px;margin-left:auto;margin-right:auto}
.waitlist-form{display:flex;gap:8px;max-width:420px;margin:0 auto;flex-wrap:wrap}
.waitlist-form input{
  flex:1;min-width:200px;padding:14px 20px;border-radius:999px;
  background:rgba(245,241,234,0.08);border:1px solid rgba(245,241,234,0.15);
  color:var(--paper);font-family:inherit;font-size:15px;
}
.waitlist-form input:focus{outline:none;border-color:var(--accent)}

/* Admin panel CSS moved to /admin.html (admin.tontonyuk.com subdomain). */

/* ===== AUTH / PROFILE UI ===== */
.lang-selector{display:flex;gap:4px;align-items:center}
.lang-pill{background:none;border:1px solid rgba(245,241,234,0.15);color:rgba(245,241,234,0.5);padding:4px 8px;border-radius:999px;font-size:11px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all 0.2s;letter-spacing:0.05em}
.lang-pill:hover{border-color:rgba(245,241,234,0.4);color:var(--paper)}
.lang-pill.active{background:var(--accent);border-color:var(--accent);color:white;font-weight:700}
.nav-auth{display:flex;align-items:center;gap:12px}
.nav-login-btn{
  background:transparent;color:white;border:1px solid rgba(255,255,255,0.3);
  padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;
  transition:background 0.2s,border-color 0.2s;
}
.nav-login-btn:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.5)}
.nav-user{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer}
.nav-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:white;text-transform:uppercase;
}
.nav-username{font-size:13px;font-weight:600;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;min-width:180px;
  background:var(--ink);border:1px solid rgba(245,241,234,0.12);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);overflow:hidden;display:none;z-index:200;
}
.nav-dropdown.open{display:block}
.nav-dropdown a,.nav-dropdown button{
  display:block;width:100%;padding:12px 16px;text-align:left;
  font-size:13px;color:var(--paper);background:transparent;border:none;cursor:pointer;
  transition:background 0.15s;text-decoration:none;
}
.nav-dropdown a:hover,.nav-dropdown button:hover{background:rgba(245,241,234,0.06)}
.nav-dropdown .sep{height:1px;background:rgba(245,241,234,0.08);margin:0}
/* Prominent gold-styled Upgrade CTA inside the avatar dropdown (free users only).
   Stands apart from the flat menu items so it reads as a conversion surface. */
.nav-dropdown a.nav-dd-upgrade{
  background:linear-gradient(135deg,rgba(212,167,74,0.18),rgba(212,167,74,0.08));
  color:#F0D49A;font-weight:700;letter-spacing:0.01em;
  border-top:1px solid rgba(212,167,74,0.25);border-bottom:1px solid rgba(212,167,74,0.25);
}
.nav-dropdown a.nav-dd-upgrade:hover{
  background:linear-gradient(135deg,rgba(212,167,74,0.28),rgba(212,167,74,0.14));
  color:#FFDFA0;
}

/* Auth modal */
.auth-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.7);
  display:none;justify-content:center;align-items:center;padding:20px;
}
.auth-overlay.active{display:flex}
.auth-modal{
  background:var(--ink);border:1px solid rgba(245,241,234,0.1);border-radius:20px;
  padding:48px 40px;max-width:420px;width:100%;color:var(--paper);text-align:center;
  position:relative;
}
.auth-modal h2{font-family:'Instrument Serif',serif;font-size:32px;margin-bottom:8px;letter-spacing:-0.02em}
.auth-modal .sub{color:rgba(245,241,234,0.6);font-size:14px;margin-bottom:28px;line-height:1.5}
.auth-input{
  width:100%;padding:14px 18px;border-radius:10px;border:1px solid rgba(245,241,234,0.15);
  background:rgba(245,241,234,0.04);color:var(--paper);font-size:15px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;margin-bottom:16px;outline:none;
  transition:border-color 0.2s;
}
.auth-input:focus{border-color:var(--accent)}
.auth-input.error{border-color:#e74c3c}
.auth-input.success{border-color:#2ecc71}
.auth-btn{
  width:100%;padding:14px;border-radius:10px;background:var(--accent);color:white;
  font-weight:600;font-size:15px;border:none;cursor:pointer;
  transition:opacity 0.2s;
}
.auth-btn:disabled{opacity:0.5;cursor:not-allowed}
.auth-btn:hover:not(:disabled){opacity:0.9}

/* iOS-style toggle switch used in Pengaturan (privacy, digest) */
.settings-toggle{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;cursor:pointer}
.settings-toggle input{opacity:0;width:0;height:0;position:absolute}
.settings-toggle .toggle-slider{
  position:absolute;inset:0;background:rgba(245,241,234,0.15);border-radius:999px;
  transition:background 0.2s;
}
.settings-toggle .toggle-slider::before{
  content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:#F5F1EA;border-radius:50%;transition:transform 0.22s cubic-bezier(0.3,0.1,0.3,1);
}
.settings-toggle input:checked + .toggle-slider{background:var(--accent)}
.settings-toggle input:checked + .toggle-slider::before{transform:translateX(20px)}
.settings-toggle input:focus-visible + .toggle-slider{box-shadow:0 0 0 2px rgba(224,60,40,0.35)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:rgba(245,241,234,0.3);font-size:12px;font-family:'JetBrains Mono',monospace}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(245,241,234,0.1)}
.auth-google{
  width:100%;padding:14px 18px;border-radius:10px;
  background:rgba(245,241,234,0.04);color:var(--paper);
  font-weight:500;font-size:15px;letter-spacing:0.01em;
  border:1px solid rgba(245,241,234,0.14);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  transition:background 0.2s ease,border-color 0.2s ease,transform 0.15s ease;
}
.auth-google:hover{background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.28)}
.auth-google:active{transform:scale(0.995)}
.auth-google svg{width:18px;height:18px;flex-shrink:0;opacity:0.92}

/* OAuth context modal — audit S2 AU-02 */
.oauth-ctx-modal{
  background:#151210;color:var(--paper);max-width:440px;width:calc(100% - 32px);
  border:1px solid rgba(212,167,74,0.28);border-radius:14px;
  padding:32px 28px 24px;margin:0 16px;text-align:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.65);
  animation:oacFadeIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes oacFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.oac-icon{font-size:38px;margin-bottom:12px;line-height:1}
.oac-title{
  font-family:'Instrument Serif',serif;font-size:26px;line-height:1.15;
  letter-spacing:-0.01em;margin:0 0 10px;font-weight:400;
}
.oac-italic{font-style:italic;color:#D4A74A}
.oac-sub{
  font-size:13.5px;line-height:1.5;color:rgba(245,241,234,0.7);
  margin:0 0 18px;
}
.oac-list{
  list-style:none;padding:0;margin:0 0 18px;text-align:left;
  border-top:1px solid rgba(245,241,234,0.08);border-bottom:1px solid rgba(245,241,234,0.08);
}
.oac-list li{
  display:flex;gap:12px;padding:11px 4px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:rgba(245,241,234,0.78);
  border-bottom:1px dashed rgba(245,241,234,0.06);
}
.oac-list li:last-child{border-bottom:0}
.oac-list li strong{color:var(--paper);font-weight:600}
.oac-list li em{color:rgba(245,241,234,0.5);font-style:italic}
.oac-bullet{
  flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:#7AA67D;color:#0a0907;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.oac-bullet.opt{background:transparent;border:1px solid rgba(245,241,234,0.3);color:rgba(245,241,234,0.5)}
.oac-promise{
  font-size:12px;line-height:1.55;color:rgba(245,241,234,0.6);
  margin:0 0 22px;
}
.oac-promise strong{color:#D4A74A;font-weight:600}
.oac-actions{display:flex;gap:10px;flex-direction:column}
.oac-confirm{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:#1a1408;border:0;
  font-family:inherit;font-size:14.5px;font-weight:600;
  padding:13px 18px;border-radius:10px;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}
.oac-confirm:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(255,255,255,0.3)}
.oac-confirm:active{transform:translateY(0)}
.oac-arrow{font-size:14px}
.oac-cancel{
  background:transparent;color:rgba(245,241,234,0.65);
  border:1px solid rgba(245,241,234,0.18);border-radius:10px;
  font-family:inherit;font-size:13px;padding:11px 16px;cursor:pointer;
  transition:all .2s;
}
.oac-cancel:hover{color:rgba(245,241,234,0.9);border-color:rgba(245,241,234,0.35)}
.nav-avatar-img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(245,241,234,0.15)}
.auth-close{
  position:absolute;top:16px;right:16px;background:none;border:none;
  color:rgba(245,241,234,0.4);font-size:24px;cursor:pointer;
}
.auth-close:hover{color:var(--paper)}
.auth-check{font-size:14px;color:rgba(245,241,234,0.5);margin-top:4px;min-height:20px;text-align:left}
.auth-check.avail{color:#2ecc71}
.auth-check.taken{color:#e74c3c}
.auth-sent{padding:20px 0}
.auth-sent .emoji{font-size:48px;margin-bottom:16px}

/* Profile overlay */
.profile-overlay{
  position:fixed;inset:0;z-index:250;background:var(--ink);
  overflow-y:auto;display:none;color:var(--paper);
}
.profile-overlay.active{display:block}
.profile-inner{max-width:800px;margin:0 auto;padding:60px 24px 60px}
.profile-hero{
  text-align:center;padding:48px 24px 40px;margin-bottom:32px;
  background:linear-gradient(135deg,rgba(224,60,40,0.08) 0%,rgba(224,60,40,0.02) 50%,rgba(245,241,234,0.03) 100%);
  border:1px solid rgba(245,241,234,0.06);border-radius:20px;position:relative;overflow:hidden;
}
.profile-hero::before{
  content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(224,60,40,0.1) 0%,transparent 70%);pointer-events:none;
}
.profile-avatar{
  width:96px;height:96px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:40px;color:white;text-transform:uppercase;
  margin:0 auto 16px;box-shadow:0 0 0 4px rgba(224,60,40,0.15),0 8px 32px rgba(0,0,0,0.3);
}
.profile-hero h2{
  font-family:'Instrument Serif',serif;font-size:36px;letter-spacing:-0.02em;margin-bottom:6px;
}
.profile-hero .profile-meta{color:rgba(245,241,234,0.45);font-size:13px;font-family:'JetBrains Mono',monospace;letter-spacing:0.03em}
.profile-hero .profile-stats{
  display:flex;justify-content:center;gap:32px;margin-top:24px;padding-top:24px;
  border-top:1px solid rgba(245,241,234,0.06);
}
.profile-hero .profile-stat{text-align:center}
.profile-hero .profile-stat .stat-num{font-size:24px;font-weight:700;color:var(--paper)}
.profile-hero .profile-stat .stat-label{font-size:11px;color:rgba(245,241,234,0.4);font-family:'JetBrains Mono',monospace;letter-spacing:0.1em;text-transform:uppercase;margin-top:4px}
.profile-features{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;margin-bottom:32px;
}
.profile-feat{
  padding:20px 16px;border-radius:14px;text-align:center;cursor:pointer;
  background:rgba(245,241,234,0.03);border:1px solid rgba(245,241,234,0.06);
  transition:all 0.2s;position:relative;overflow:hidden;
}
.profile-feat:hover{background:rgba(224,60,40,0.06);border-color:rgba(224,60,40,0.2);transform:translateY(-2px)}
.profile-feat .feat-icon{font-size:28px;margin-bottom:10px;display:block}
.profile-feat .feat-name{font-size:13px;font-weight:700;margin-bottom:4px;color:var(--paper)}
.profile-feat .feat-desc{font-size:11px;color:rgba(245,241,234,0.4);line-height:1.4}
.profile-section{margin-bottom:40px}
.profile-section h3{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);
  letter-spacing:0.15em;text-transform:uppercase;margin-bottom:16px;
}
.profile-tabs{display:flex;gap:8px;margin-bottom:24px}
.profile-tab{
  padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;
  border:1px solid rgba(245,241,234,0.15);background:transparent;color:var(--paper);
  cursor:pointer;transition:all 0.2s;
}
.profile-tab.active{background:var(--accent);border-color:var(--accent)}
.profile-close{
  position:fixed;top:20px;right:24px;z-index:260;background:none;border:none;
  color:rgba(245,241,234,0.5);font-size:28px;cursor:pointer;
}
.profile-close:hover{color:var(--paper)}
.watchlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.watchlist-card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;transition:transform 0.2s}
.watchlist-card:hover{transform:scale(1.03)}
.watchlist-card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.watchlist-card .wl-info{
  position:absolute;bottom:0;left:0;right:0;padding:10px;
  background:linear-gradient(transparent,rgba(0,0,0,0.85));
}
.watchlist-card .wl-title{font-size:12px;font-weight:600;line-height:1.3}
.watchlist-card .wl-meta{font-size:10px;color:rgba(245,241,234,0.6);margin-top:2px}
.watchlist-remove{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,0.6);border:none;color:white;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;
}
.watchlist-card:hover .watchlist-remove{opacity:1}
.empty-state{text-align:center;padding:48px 20px;color:rgba(245,241,234,0.4)}
.empty-state .emoji{font-size:48px;margin-bottom:12px}
.empty-state p{font-size:14px;line-height:1.5}
.history-list{display:flex;flex-direction:column;gap:12px}
.history-item{
  padding:16px;border-radius:12px;
  background:rgba(245,241,234,0.03);border:1px solid rgba(245,241,234,0.06);
  cursor:pointer;transition:background 0.15s;
}
.history-item:hover{background:rgba(245,241,234,0.06)}
.history-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:0.05em}
.history-summary{font-size:14px;margin-top:6px;line-height:1.4}
.history-posters{display:flex;gap:6px;margin-top:10px}
.history-posters img{width:44px;height:66px;border-radius:6px;object-fit:cover}
.history-share-btn{
  background:rgba(224,60,40,0.12);border:1px solid rgba(224,60,40,0.25);
  color:#E03C28;border-radius:8px;padding:6px 10px;cursor:pointer;
  transition:all 0.15s;display:flex;align-items:center;gap:4px;font-size:11px;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.5px;
}
.history-share-btn:hover{background:rgba(224,60,40,0.2);border-color:rgba(224,60,40,0.4)}
.history-share-btn:disabled{opacity:0.5;cursor:not-allowed}
@media(max-width:900px){
  .nav-username{display:none}
  .auth-modal{padding:36px 24px}
  .profile-inner{padding:48px 14px 40px}
  .profile-hero{padding:32px 16px 28px}
  .profile-hero h2{font-size:28px}
  .profile-avatar{width:80px;height:80px;font-size:34px}
  .profile-hero .profile-stats{gap:20px}
  .profile-features{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .profile-feat{padding:16px 12px}
  .watchlist-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
}
/* ===== SIMILAR MOVIES IN MODAL ===== */
/* ========= PROFILE BACKDROP (Pro customization) ========= */
.profile-backdrop{
  position:absolute;top:0;left:0;right:0;height:260px;z-index:-1;
  background-size:cover;background-position:center;
  mask-image:linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
}

/* ====================================================================
   Swipe + Roulette as MODAL overlays (user-requested: no longer inline
   on homepage; trio pillar cards open them in-place as popup).
   Default: hidden. On trio click, add .modal-active → full-screen.
   ==================================================================== */
.swipe-section, .roulette-section-wildcard{display:none}
body.swipe-modal-open .swipe-section,
body.roulette-modal-open .roulette-section-wildcard{
  display:flex;flex-direction:column;align-items:center;
  position:fixed;inset:0;z-index:1000;
  overflow-y:auto;overflow-x:hidden;
  background:var(--ink);
  animation:modalFadeIn 0.22s cubic-bezier(0.2,0.8,0.2,1);
  padding:64px 20px 32px;
  /* Reset homepage-tuned spacing — modal owns its own padding now */
}
/* In modal mode, treat the hero block as a centered header strip and the
   card stack as the visual focus dead-center. Avoids the awkward split-
   layout where copy hugs top-left and the card floats orphaned mid-page.
   NOTE: do NOT set background:transparent here — same specificity as the
   .swipe-section rule above means it'd override the modal's solid var(--ink)
   bg and let the homepage scroll bleed through. Force-set var(--ink) here
   so the order doesn't matter. */
body.swipe-modal-open .swipe-section-featured{padding:0;background:var(--ink)}
body.swipe-modal-open .swipe-section-featured::before{display:none}
body.swipe-modal-open .swipe-hero{
  margin:0 auto 24px;text-align:center;display:block;max-width:560px;
}
body.swipe-modal-open .swipe-hero-copy{max-width:none;margin:0 auto}
body.swipe-modal-open .swipe-title{font-size:30px;margin-bottom:10px}
body.swipe-modal-open .swipe-sub{font-size:14px;margin:0 auto 16px;max-width:480px}
body.swipe-modal-open .swipe-legend{
  grid-template-columns:1fr 1fr;gap:10px;max-width:520px;margin:0 auto;
}
body.swipe-modal-open .swipe-legend-item{padding:8px 12px;text-align:left}
body.swipe-modal-open .swipe-legend-text strong{font-size:12px}
body.swipe-modal-open .swipe-legend-text span{font-size:10.5px}
body.swipe-modal-open .swipe-container{margin:0 auto;width:100%;max-width:380px}
@media (max-width:600px){
  body.swipe-modal-open .swipe-section{padding:52px 16px 18px}
  body.swipe-modal-open .swipe-hero{margin:0 auto 14px}
  body.swipe-modal-open .swipe-eyebrow{font-size:10px;margin-bottom:8px}
  body.swipe-modal-open .swipe-title{font-size:24px;margin-bottom:8px;line-height:1.2}
  body.swipe-modal-open .swipe-sub{font-size:13px;margin:0 auto 14px;line-height:1.4;max-width:100%}
  body.swipe-modal-open .swipe-legend{grid-template-columns:1fr 1fr;gap:8px;max-width:100%}
  body.swipe-modal-open .swipe-legend-item{padding:8px 10px;gap:10px}
  body.swipe-modal-open .swipe-legend-arrow{width:30px;height:30px;font-size:14px;flex-shrink:0}
  body.swipe-modal-open .swipe-legend-text strong{font-size:12px}
  body.swipe-modal-open .swipe-legend-text span{font-size:10.5px}
  body.swipe-modal-open .swipe-container{gap:18px}
  body.swipe-modal-open .swipe-counter{font-size:12px}
  body.swipe-modal-open .swipe-stack,
  body.swipe-modal-open .swipe-card{width:280px;height:400px}
  body.swipe-modal-open .swipe-card-title{font-size:21px}
  body.swipe-modal-open .swipe-card-info{padding:18px 20px 16px}
  body.swipe-modal-open .swipe-actions-labeled{gap:36px}
  body.swipe-modal-open .swipe-btn{width:60px;height:60px}
  body.swipe-modal-open .swipe-btn svg{width:26px;height:26px}
  body.swipe-modal-open .swipe-btn-label{font-size:10px}
}
@media (max-width:600px) and (max-height:740px){
  body.swipe-modal-open .swipe-section{padding:46px 14px 14px}
  body.swipe-modal-open .swipe-hero{margin:0 auto 10px}
  body.swipe-modal-open .swipe-title{font-size:21px;margin-bottom:6px}
  body.swipe-modal-open .swipe-sub{font-size:12px;margin:0 auto 10px}
  body.swipe-modal-open .swipe-container{gap:12px}
  body.swipe-modal-open .swipe-stack,
  body.swipe-modal-open .swipe-card{width:250px;height:350px}
  body.swipe-modal-open .swipe-actions-labeled{gap:28px}
  body.swipe-modal-open .swipe-btn{width:54px;height:54px}
  body.swipe-modal-open .swipe-btn svg{width:24px;height:24px}
}
/* Roulette modal — same recentering pattern */
body.roulette-modal-open .roulette-section-wildcard{padding-top:64px}
body.roulette-modal-open .roulette-wrap{max-width:1100px;margin:0 auto;width:100%}
body.roulette-modal-open .section-head{text-align:center;margin-bottom:32px !important}
body.roulette-modal-open .section-head .section-title{font-size:36px}
@media (max-width:600px){
  body.roulette-modal-open .section-head .section-title{font-size:26px}
}

@keyframes modalFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-close-top{
  position:fixed;top:18px;right:20px;z-index:1010;
  width:40px;height:40px;border-radius:50%;
  background:rgba(10,9,7,0.82);color:var(--paper);
  border:1px solid rgba(245,241,234,0.18);cursor:pointer;
  font-size:20px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background 0.15s,border-color 0.15s;
}
.modal-close-top:hover{background:rgba(224,60,40,0.85);border-color:var(--accent);color:#fff}
body.theme-light .modal-close-top{background:rgba(243,238,227,0.9);color:#1A1408;border-color:rgba(26,20,8,0.2)}
body.theme-light .modal-close-top:hover{background:#B83222;color:#F3EEE3}
body.swipe-modal-open, body.roulette-modal-open{overflow:hidden}
/* X-style banner cover strip — solid rectangle at profile top. Sharper than
   .profile-backdrop (which fades), sits ABOVE it in z-order so a user can
   set both: backdrop for atmosphere, banner for branding. */
.profile-banner{
  position:absolute;top:0;left:0;right:0;height:300px;z-index:0;
  background-size:cover;background-position:center;
  border-bottom:1px solid rgba(10,9,7,0.3);
  box-shadow:inset 0 -110px 110px -50px rgba(10,9,7,0.6);
}
.profile-page .profile-header{z-index:1}
@media (max-width:720px){.profile-banner{height:220px}}

/* Profile font presets — scoped to .profile-page so they don't leak to app */
.profile-page.pf-serif{font-family:'Instrument Serif',Georgia,serif}
.profile-page.pf-mono{font-family:'JetBrains Mono','SF Mono',monospace}
.profile-page.pf-display{font-family:'DM Serif Display',Georgia,serif}
.profile-page.pf-grotesk{font-family:'Space Grotesk',-apple-system,sans-serif}
.profile-page.pf-anime{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:0.02em}
.profile-page.pf-editorial{font-family:'Playfair Display',Georgia,serif}
.profile-page.pf-retro{font-family:'Major Mono Display',monospace;letter-spacing:0.04em}
.profile-page.pf-gothic{font-family:'UnifrakturCook','UnifrakturMaguntia',serif}
/* Heading tightening for wide-caps fonts */
.profile-page.pf-anime h1, .profile-page.pf-anime h2{letter-spacing:0.04em}
.profile-page.pf-retro, .profile-page.pf-gothic{font-size:15px}
.profile-page.active{position:fixed}
.profile-page .profile-header{position:relative}

/* Pinned list card (shown at top of profile) */
.pinned-list-wrap{margin-bottom:28px}
.pinned-list-label{
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:#D4A74A;font-family:'JetBrains Mono',monospace;margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
}

/* Featured review card */
.featured-review-wrap{margin-bottom:28px}
.featured-review-card{
  padding:18px 20px;background:linear-gradient(135deg,rgba(212,167,74,0.08),rgba(212,167,74,0.02));
  border:1px solid rgba(212,167,74,0.25);border-radius:14px;position:relative;
}
.featured-review-label{
  position:absolute;top:-10px;left:16px;background:#151515;
  padding:2px 10px;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:#D4A74A;font-family:'JetBrains Mono',monospace;
  border:1px solid rgba(212,167,74,0.3);border-radius:6px;
}

/* ========= ADVANCED STATS (Pro) — genre/country/director ========= */
.adv-stats-block{
  margin-top:18px;padding-top:14px;border-top:1px dashed rgba(245,241,234,0.1);
}
.adv-stats-head{font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:#D4A74A;font-family:'JetBrains Mono',monospace;margin-bottom:10px}
.adv-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.adv-stats-card{padding:12px 14px;background:rgba(245,241,234,0.04);border-radius:10px}
.adv-stats-card h4{margin:0 0 8px;font-size:12px;color:rgba(245,241,234,0.55);letter-spacing:0.08em;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.adv-stats-row{display:flex;align-items:center;gap:10px;margin:5px 0;font-size:13px}
.adv-stats-bar{flex:1;height:6px;background:rgba(245,241,234,0.06);border-radius:3px;overflow:hidden;position:relative}
.adv-stats-bar-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#D4A74A,rgba(212,167,74,0.4));border-radius:3px}
.adv-stats-name{color:var(--paper);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%}
.adv-stats-count{color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace;font-size:11.5px}

/* ========= REFERRAL / GIFT SECTIONS (shared styling) ========= */
.ref-block, .gift-block{
  padding:18px 20px;background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;margin-bottom:14px;
}
.ref-block h3, .gift-block h3{
  margin:0 0 10px;font-family:'Instrument Serif',serif;font-size:20px;color:var(--paper);
}
.ref-code-row{
  display:flex;gap:8px;align-items:center;margin-top:10px;
}
.ref-code-display{
  flex:1;padding:10px 14px;background:rgba(212,167,74,0.1);border:1px dashed rgba(212,167,74,0.35);
  border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;
  color:#D4A74A;text-align:center;letter-spacing:0.15em;
}
.ref-stats{
  display:flex;gap:18px;margin-top:12px;font-size:12px;color:rgba(245,241,234,0.6);
}
.ref-stats strong{color:var(--paper);font-size:15px;display:block;font-family:'Instrument Serif',serif}

/* Gift-code redeem page */
.gift-redeem-page{display:none;color:var(--paper)}
.gift-redeem-page.active{
  display:flex;position:fixed;inset:0;z-index:90;background:var(--ink);
  align-items:center;justify-content:center;padding:32px;
}
.gift-redeem-card{
  max-width:460px;width:100%;padding:32px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.08);border-radius:18px;text-align:center;
}
.gift-redeem-card h2{font-family:'Instrument Serif',serif;font-size:32px;margin:0 0 8px;color:var(--paper)}
.gift-redeem-card input{
  width:100%;padding:14px 16px;margin:14px 0;text-align:center;
  background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.14);
  border-radius:10px;color:var(--paper);font-family:'JetBrains Mono',monospace;
  font-size:18px;letter-spacing:0.15em;font-weight:700;text-transform:uppercase;
  outline:none;
}
.gift-redeem-card input:focus{border-color:#D4A74A}

/* ========= DIARY CALENDAR VIEW (Pro) ========= */
.diary-view-toggle{
  display:inline-flex;gap:2px;padding:3px;background:rgba(245,241,234,0.05);
  border:1px solid rgba(245,241,234,0.1);border-radius:999px;margin-left:8px;
}
.diary-view-toggle button{
  background:none;border:none;padding:5px 12px;border-radius:999px;
  color:rgba(245,241,234,0.65);font-size:11.5px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all 0.15s;
}
.diary-view-toggle button.active{background:var(--accent);color:white}

.diary-calendar{margin-top:12px}
.diary-cal-month{margin-bottom:28px}
.diary-cal-month-head{
  font-family:'Instrument Serif',serif;font-size:22px;color:var(--paper);
  margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(245,241,234,0.08);
}
.diary-cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.diary-cal-dow{
  font-size:9.5px;color:rgba(245,241,234,0.4);text-align:center;padding:4px 0;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.08em;text-transform:uppercase;
}
.diary-cal-cell{
  aspect-ratio:2/3;border-radius:6px;background:rgba(245,241,234,0.04);
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:flex-start;
  font-family:'JetBrains Mono',monospace;
}
.diary-cal-cell.empty{background:rgba(245,241,234,0.02);cursor:default}
.diary-cal-cell img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.diary-cal-day-num{
  position:relative;z-index:2;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);
  color:white;font-size:10px;padding:2px 5px;border-radius:0 0 6px 0;font-weight:700;
}
.diary-cal-cell.has-watch{box-shadow:inset 0 0 0 2px rgba(212,167,74,0.45)}
@media(max-width:640px){
  .diary-cal-dow{font-size:8px}
  .diary-cal-day-num{font-size:9px;padding:1px 3px}
}

/* Gift purchase modal */
.gift-modal{
  max-width:480px;width:94vw;background:#151515;color:var(--paper);
  border-radius:16px;padding:24px;
}

/* ========= TOP 4/8 FAVORITES (profile hallmark, Letterboxd-style) ========= */
.favorites-section{margin-bottom:40px}
.favorites-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.favorites-title{
  font-family:'Instrument Serif',serif;font-size:22px;margin:0;color:var(--paper);
}
.favorites-edit-btn{
  background:none;border:1px solid rgba(245,241,234,0.18);color:rgba(245,241,234,0.7);
  padding:5px 14px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all 0.15s;
}
.favorites-edit-btn:hover{color:var(--paper);border-color:rgba(245,241,234,0.35)}
.favorites-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fav-slot{
  aspect-ratio:2/3;border-radius:12px;overflow:hidden;position:relative;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  cursor:pointer;transition:all 0.2s;
}
.fav-slot:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.4)}
.fav-slot img{width:100%;height:100%;object-fit:cover;display:block}
.fav-empty{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:rgba(245,241,234,0.3);font-family:'Instrument Serif',serif;font-size:56px;
  line-height:1;user-select:none;
}
.fav-remove{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,0.75);color:white;border:none;cursor:pointer;font-size:16px;
  display:none;align-items:center;justify-content:center;
}
.fav-slot:hover .fav-remove{display:flex}
.fav-slot-pro-locked::after{
  content:'Tonton+';position:absolute;inset:0;background:rgba(0,0,0,0.7);
  color:#D4A74A;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;
  font-weight:700;backdrop-filter:blur(4px);
}
@media(max-width:520px){
  .favorites-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .fav-empty{font-size:40px}
}

/* Favorites picker modal */
.fav-picker{
  max-width:520px;width:94vw;background:#151515;color:var(--paper);
  border-radius:16px;padding:20px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;
}
.fav-picker-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.fav-picker-title{font-family:'Instrument Serif',serif;font-size:22px;margin:0}
.fav-picker-sub{font-size:11.5px;color:rgba(245,241,234,0.55);margin:0 0 14px;font-family:'JetBrains Mono',monospace}
.fav-picker-current{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;
  padding:10px;background:rgba(245,241,234,0.04);border-radius:10px;
}
.fav-picker-current .fav-slot{aspect-ratio:2/3;border-radius:8px}
.fav-picker-source{flex:1;min-height:0;overflow-y:auto;padding-right:4px}
.fav-source-head{font-size:11px;color:rgba(245,241,234,0.55);letter-spacing:0.08em;text-transform:uppercase;margin:8px 0 6px;font-family:'JetBrains Mono',monospace}
.fav-source-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fav-source-item{
  aspect-ratio:2/3;border-radius:6px;overflow:hidden;cursor:pointer;position:relative;
  border:2px solid transparent;transition:all 0.12s;
}
.fav-source-item:hover{border-color:var(--accent);transform:scale(1.05)}
.fav-source-item.selected{border-color:var(--accent)}
.fav-source-item img{width:100%;height:100%;object-fit:cover}
.fav-source-item .fav-source-tick{
  position:absolute;top:2px;right:2px;background:var(--accent);color:white;
  width:18px;height:18px;border-radius:50%;display:none;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.fav-source-item.selected .fav-source-tick{display:flex}
.fav-picker-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid rgba(245,241,234,0.08)}

/* ========= PRO-GATED BUTTON STYLE ========= */
.pro-gated-btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  background:rgba(212,167,74,0.1);border:1px solid rgba(212,167,74,0.35);
  color:#D4A74A;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all 0.15s;text-decoration:none;
}
.pro-gated-btn:hover{background:rgba(212,167,74,0.2);transform:translateY(-1px)}
.pro-gated-btn .pgl-star{font-size:11px}

/* ========= THEMES (Pro — pre-defined color palettes) ========= */
/* Legacy 5 themes — kept for back-compat with existing profiles */
body[data-theme="sunset"]{--accent:#FF6B4A;--dim:#D4A74A}
body[data-theme="ocean"]{--accent:#4A9EFF;--dim:#6AB7D4}
body[data-theme="forest"]{--accent:#4AA874;--dim:#B0B860}
body[data-theme="amethyst"]{--accent:#9B6BFF;--dim:#D4A74A}
body[data-theme="mono"]{--accent:#F5F1EA;--dim:#B8B4AE}

/* ========= REVAMP 05 · 8 TRIBE THEMES =========
   Each theme = full-bleed profile banner + accent color + ring + typography nod.
   Keys t01..t08; when user picks, profile overlay gets .tribe-t0N class. */
body[data-theme="t01"]{--accent:#F5C177;--dim:#E8924A}
body[data-theme="t02"]{--accent:#FF6B9D;--dim:#FFD1E3}
body[data-theme="t03"]{--accent:#E89BB0;--dim:#9B4B68}
body[data-theme="t04"]{--accent:#D4A74A;--dim:#8B0000}
body[data-theme="t05"]{--accent:#C8B6FF;--dim:#7B6FAA}
body[data-theme="t06"]{--accent:#00F5FF;--dim:#FF00FF}
body[data-theme="t07"]{--accent:#E03C28;--dim:#8B0000}
body[data-theme="t08"]{--accent:#7AA67D;--dim:#A4C49C}

/* Full tribe theme backdrop — applied to profile overlay / hero banner when set */
.profile-overlay.tribe-t01 .profile-inner{background:radial-gradient(ellipse at top left,#E8924A 0%,#8B3A1F 35%,#2D1810 70%,#0A0604 100%)}
.profile-overlay.tribe-t02 .profile-inner{background:linear-gradient(180deg,#FFB3D1 0%,#FF6B9D 40%,#C41E5C 80%,#4A0920 100%)}
.profile-overlay.tribe-t03 .profile-inner{background:linear-gradient(135deg,#FFE5EC 0%,#FFC8DD 40%,#F5B5C7 70%,#E89BB0 100%);color:#4A2838}
.profile-overlay.tribe-t04 .profile-inner{background:#0a0604;position:relative}
.profile-overlay.tribe-t04 .profile-inner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(139,0,0,.25),transparent 50%),radial-gradient(circle at 70% 80%,rgba(212,167,74,.08),transparent 40%);pointer-events:none;z-index:0}
.profile-overlay.tribe-t05 .profile-inner{background:linear-gradient(135deg,#E6E0FF 0%,#C8B6FF 30%,#AEDFF7 70%,#D1F0E6 100%);color:#3D3560}
.profile-overlay.tribe-t06 .profile-inner{background:linear-gradient(180deg,#0a0015 0%,#1a0033 50%,#330066 100%)}
.profile-overlay.tribe-t07 .profile-inner{background:#050202;position:relative}
.profile-overlay.tribe-t07 .profile-inner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(139,0,0,.4),transparent 40%),radial-gradient(circle at 80% 70%,rgba(40,0,0,.8),transparent 50%);pointer-events:none;z-index:0}
.profile-overlay.tribe-t08 .profile-inner{background:linear-gradient(180deg,#E8DCB8 0%,#C7D4A8 40%,#A4C49C 80%,#7AA67D 100%);color:#2A3A2A}
/* Ensure inner content stacks above the ::before radial */
.profile-overlay[class*="tribe-t"] .profile-inner > *{position:relative;z-index:1}

/* ========= REVAMP 04 · 4 EDITORIAL RAILS ========= */
.rail-jurnal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
  padding:0 4px;
}
.rail-jurnal-card{
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;transition:all .15s ease;cursor:pointer;
}
.rail-jurnal-card:hover{background:rgba(245,241,234,0.08);border-color:rgba(245,241,234,0.2)}
.rjc-head{display:flex;align-items:center;gap:10px}
.rjc-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;
  background-size:cover;background-position:center;flex-shrink:0;
}
.rjc-user{flex:1;min-width:0}
.rjc-name{font-size:13px;font-weight:600;color:var(--paper);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rjc-time{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(245,241,234,0.45);letter-spacing:.08em}
.rjc-stars{color:#D4A74A;font-size:13px;letter-spacing:.05em;flex-shrink:0}
.rjc-film{
  display:flex;gap:10px;padding:10px;background:rgba(245,241,234,0.04);border-radius:6px;
}
.rjc-poster{width:44px;height:66px;background:#1a1a1a;border-radius:4px;flex-shrink:0;
  background-size:cover;background-position:center;}
.rjc-film-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rjc-film-title{font-family:'Instrument Serif',serif;font-size:16px;line-height:1.1;color:var(--paper);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rjc-film-year{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(245,241,234,0.5);letter-spacing:.1em}
.rjc-body{
  font-size:13.5px;line-height:1.55;color:rgba(245,241,234,0.75);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}

/* ========= AI DISCOVERY HUB PAGE (Revamp · #/discovery) ========= */
.discovery-hub-page{display:none}
.discovery-hub-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 80px;overflow-y:auto;
  background:var(--ink);color:var(--paper);
}
.discovery-hub-page.active > *{max-width:1200px;margin-left:auto;margin-right:auto}
.dhp-head{margin:20px 0 48px}
.dhp-eyebrow{color:var(--accent);font-size:11px;letter-spacing:.24em;margin-bottom:18px}
.dhp-title{
  font-family:'Instrument Serif',serif;font-size:clamp(40px,8vw,80px);
  line-height:.96;letter-spacing:-.03em;font-weight:400;margin:0 0 16px;
}
.dhp-title .italic{font-style:italic;color:var(--accent)}
.dhp-title-dim{color:rgba(245,241,234,0.55)}
.dhp-deck{max-width:58ch;color:rgba(245,241,234,0.65);font-size:16px;line-height:1.65;margin:12px 0 0}
.dhp-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(245,241,234,0.12);border:1px solid rgba(245,241,234,0.12);
  margin-bottom:60px;
}
@media (max-width:900px){.dhp-grid{grid-template-columns:1fr}}
.dhp-mode{
  background:var(--ink);padding:36px 30px 32px;display:flex;flex-direction:column;
  min-height:380px;transition:background .2s ease;position:relative;
  cursor:pointer;border:none;color:inherit;text-align:left;font-family:inherit;text-decoration:none;
}
.dhp-mode:hover{background:#14110C}
.dhp-mode-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.dhp-mode-num{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:54px;line-height:.8;
  letter-spacing:-.02em;color:rgba(245,241,234,0.35);
}
.dhp-mode-primary .dhp-mode-num{color:var(--accent)}
.dhp-mode-tag{font-size:10px;letter-spacing:.2em;color:rgba(245,241,234,0.5);text-align:right;max-width:140px;text-transform:uppercase}
.dhp-mode-title{
  font-family:'Instrument Serif',serif;font-weight:400;font-size:42px;
  line-height:1;letter-spacing:-.02em;margin:0 0 14px;
}
.dhp-mode-title .italic{font-style:italic;color:var(--accent)}
.dhp-mode-desc{color:rgba(245,241,234,0.65);font-size:14px;line-height:1.55;flex:1;margin:0 0 18px;max-width:42ch}
.dhp-mode-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.dhp-chip{
  font-size:9px;letter-spacing:.14em;padding:4px 8px;
  border:1px solid rgba(245,241,234,0.18);color:rgba(245,241,234,0.65);text-transform:uppercase;
}
.dhp-mode-cta{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  color:var(--paper);text-transform:uppercase;font-weight:700;
}
.dhp-mode-primary .dhp-mode-cta{color:var(--accent)}

.dhp-box-head{padding:40px 0 0;border-top:1px solid rgba(245,241,234,0.1);margin-bottom:32px}
.dhp-box-eye{font-size:10.5px;letter-spacing:.22em;color:rgba(245,241,234,0.5);margin-bottom:10px}
.dhp-box-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:34px;line-height:1.05;letter-spacing:-.01em;margin:0}
.dhp-box-title .italic{font-style:italic;color:var(--accent)}
.dhp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(245,241,234,0.12);border:1px solid rgba(245,241,234,0.12)}
@media (max-width:900px){.dhp-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dhp-stats{grid-template-columns:1fr}}
.dhp-stat{background:var(--ink);padding:22px 24px}
.dhp-stat-v{font-family:'Instrument Serif',serif;font-style:italic;font-size:44px;color:var(--accent);line-height:.9;letter-spacing:-.02em}
.dhp-stat-l{font-size:10px;letter-spacing:.18em;color:var(--paper);margin-top:8px;text-transform:uppercase}
.dhp-stat p{font-size:12.5px;color:rgba(245,241,234,0.65);line-height:1.55;margin:8px 0 0}

/* --- Tribe theme applied to .profile-page when open --- */
body[data-theme="t01"] .profile-page.active{background:radial-gradient(ellipse at top left,#E8924A 0%,#8B3A1F 35%,#2D1810 70%,#0A0604 100%)}
body[data-theme="t02"] .profile-page.active{background:linear-gradient(180deg,#FFB3D1 0%,#FF6B9D 40%,#C41E5C 80%,#4A0920 100%)}
body[data-theme="t03"] .profile-page.active{background:linear-gradient(135deg,#FFE5EC 0%,#FFC8DD 40%,#F5B5C7 70%,#E89BB0 100%);color:#4A2838}
body[data-theme="t03"] .profile-page.active .uname,body[data-theme="t03"] .profile-page.active h1,body[data-theme="t03"] .profile-page.active h2{color:#4A2838}
body[data-theme="t04"] .profile-page.active{background:radial-gradient(circle at 30% 20%,rgba(139,0,0,.25),transparent 50%),radial-gradient(circle at 70% 80%,rgba(212,167,74,.08),transparent 40%),#0a0604}
body[data-theme="t05"] .profile-page.active{background:linear-gradient(135deg,#E6E0FF 0%,#C8B6FF 30%,#AEDFF7 70%,#D1F0E6 100%);color:#3D3560}
body[data-theme="t05"] .profile-page.active h1,body[data-theme="t05"] .profile-page.active h2{color:#3D3560}
body[data-theme="t06"] .profile-page.active{background:linear-gradient(180deg,#0a0015 0%,#1a0033 50%,#330066 100%)}
body[data-theme="t07"] .profile-page.active{background:radial-gradient(circle at 20% 30%,rgba(139,0,0,.4),transparent 40%),radial-gradient(circle at 80% 70%,rgba(40,0,0,.8),transparent 50%),#050202}
body[data-theme="t08"] .profile-page.active{background:linear-gradient(180deg,#E8DCB8 0%,#C7D4A8 40%,#A4C49C 80%,#7AA67D 100%);color:#2A3A2A}
body[data-theme="t08"] .profile-page.active h1,body[data-theme="t08"] .profile-page.active h2{color:#2A3A2A}

/* --- Tribe theme PICKER — shown in profile edit modal --- */
.tribe-picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
@media (max-width:560px){.tribe-picker-grid{grid-template-columns:repeat(2,1fr)}}
.tribe-chip{
  padding:10px 8px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(245,241,234,0.12);background:rgba(245,241,234,0.04);
  color:var(--paper);font-family:inherit;text-align:left;
  transition:all .15s ease;display:flex;flex-direction:column;gap:4px;
}
.tribe-chip:hover{border-color:rgba(245,241,234,0.3);transform:translateY(-1px)}
.tribe-chip.active{border-color:#D4A74A;box-shadow:0 0 0 2px rgba(212,167,74,.3)}
.tribe-chip .tc-swatch{
  width:100%;height:28px;border-radius:5px;position:relative;
}
.tribe-chip .tc-name{font-family:'Instrument Serif',serif;font-size:13px;line-height:1.1}
.tribe-chip .tc-sub{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.tribe-t01 .tc-swatch{background:radial-gradient(ellipse at top left,#E8924A,#8B3A1F,#2D1810)}
.tribe-t02 .tc-swatch{background:linear-gradient(180deg,#FFB3D1,#FF6B9D,#C41E5C)}
.tribe-t03 .tc-swatch{background:linear-gradient(135deg,#FFE5EC,#FFC8DD,#E89BB0)}
.tribe-t04 .tc-swatch{background:#0a0604;box-shadow:inset 0 0 20px rgba(139,0,0,.5)}
.tribe-t05 .tc-swatch{background:linear-gradient(135deg,#C8B6FF,#AEDFF7,#D1F0E6)}
.tribe-t06 .tc-swatch{background:linear-gradient(180deg,#0a0015,#330066);box-shadow:inset 0 0 12px #00F5FF}
.tribe-t07 .tc-swatch{background:#050202;box-shadow:inset 0 0 12px rgba(224,60,40,.5)}
.tribe-t08 .tc-swatch{background:linear-gradient(180deg,#E8DCB8,#A4C49C,#7AA67D)}

/* ========= AVATAR FRAMES (Pro badges) ========= */
.profile-avatar.frame-pro{
  box-shadow:0 0 0 3px #0A0A0A, 0 0 0 5px #D4A74A,
             0 8px 32px rgba(212,167,74,0.35);
  position:relative;
}
.profile-avatar.frame-pro::after{
  content:'⭐';position:absolute;bottom:-4px;right:-4px;
  background:#D4A74A;color:#0A0A0A;width:22px;height:22px;border-radius:50%;
  font-size:11px;display:flex;align-items:center;justify-content:center;
  border:2px solid #0A0A0A;box-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.profile-avatar.frame-pro-patron{
  box-shadow:0 0 0 3px #0A0A0A, 0 0 0 5px #E03C28,
             0 0 20px rgba(224,60,40,0.55), 0 8px 32px rgba(212,167,74,0.35);
}
.fl-avatar.frame-pro{box-shadow:0 0 0 2px #0A0A0A, 0 0 0 3px #D4A74A}

/* ========= UNLISTED LIST BADGE ========= */
.list-visibility-unlisted{color:rgba(212,167,74,0.85)}

/* ========= REVIEW FANS BUTTON ========= */
.rvx-btn.fanned{color:#E03C28}
.rvx-btn.fanned span:first-child{filter:drop-shadow(0 0 3px rgba(224,60,40,0.5))}

/* ========= FILMOGRAPHY COMPLETION BAR (person page) ========= */
.film-completion{
  display:flex;align-items:center;gap:10px;padding:10px 14px;margin:12px 0;
  background:rgba(212,167,74,0.08);border:1px solid rgba(212,167,74,0.25);
  border-radius:10px;font-size:12.5px;color:rgba(245,241,234,0.85);
}
.film-completion-bar{
  flex:1;height:8px;background:rgba(245,241,234,0.06);border-radius:4px;overflow:hidden;position:relative;
}
.film-completion-bar-fill{
  position:absolute;inset:0;background:linear-gradient(90deg,#D4A74A,#E03C28);
  transform-origin:left;border-radius:4px;transition:transform 0.4s;
}
.film-completion-num{font-family:'JetBrains Mono',monospace;color:#D4A74A;font-weight:700}

/* ========= DEDICATED PAGES (generic wrapper) ========= */
.generic-page{display:none;color:var(--paper)}
.generic-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 48px;overflow-y:auto;background:var(--ink);
}
.generic-page.active > *{max-width:1100px;margin-left:auto;margin-right:auto}
@media(max-width:640px){.generic-page.active{padding:72px 20px 40px}}

/* ========= ADVANCED FILM SEARCH ========= */
.search-filters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;
  margin:16px 0 20px;padding:14px;background:rgba(245,241,234,0.03);
  border:1px solid rgba(245,241,234,0.08);border-radius:12px;
}
.search-filter{display:flex;flex-direction:column;gap:4px}
.search-filter label{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(245,241,234,0.5);font-family:'JetBrains Mono',monospace}
.search-filter input,.search-filter select{
  padding:8px 10px;background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.12);
  color:var(--paper);border-radius:8px;font-size:13px;font-family:inherit;outline:none;
}
.search-filter input:focus,.search-filter select:focus{border-color:var(--accent)}

/* ========= MEMBERS DIRECTORY ========= */
.members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.member-card{
  display:flex;align-items:center;gap:12px;padding:12px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;text-decoration:none;color:inherit;transition:all 0.15s;
}
.member-card:hover{background:rgba(245,241,234,0.08);transform:translateY(-2px)}

/* ========= FILM COMPARE ========= */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.compare-col{background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);border-radius:14px;padding:18px}
.compare-poster{width:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:#222;margin-bottom:12px}
.compare-poster img{width:100%;height:100%;object-fit:cover}
.compare-title{font-family:'Instrument Serif',serif;font-size:24px;line-height:1.15;margin:0 0 6px;color:var(--paper)}
.compare-meta{font-size:12.5px;color:rgba(245,241,234,0.6);font-family:'JetBrains Mono',monospace;margin-bottom:10px}
.compare-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(245,241,234,0.06);font-size:12.5px}
.compare-row:last-child{border-bottom:none}
.compare-row-label{color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace;letter-spacing:0.02em;font-size:11px;text-transform:uppercase}
.compare-row-value{color:var(--paper);font-weight:500}
@media(max-width:640px){.compare-grid{grid-template-columns:1fr}}

/* ========= DM / MESSAGING ========= */
.dm-inbox{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.dm-thread-card{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;text-decoration:none;color:inherit;cursor:pointer;
}
.dm-thread-card:hover{background:rgba(245,241,234,0.08)}
.dm-thread-body{flex:1;min-width:0}
.dm-thread-name{font-weight:600;color:var(--paper);font-size:13.5px}
.dm-thread-preview{font-size:11.5px;color:rgba(245,241,234,0.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.dm-thread-time{font-size:10.5px;color:rgba(245,241,234,0.4);font-family:'JetBrains Mono',monospace}

.dm-chat{display:flex;flex-direction:column;height:calc(100dvh - 130px);max-width:720px;margin:0 auto}
.dm-header{padding:16px;border-bottom:1px solid rgba(245,241,234,0.08);display:flex;align-items:center;gap:12px}
.dm-messages-scroll{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.dm-bubble{
  max-width:70%;padding:9px 14px;border-radius:16px;font-size:13px;line-height:1.4;word-wrap:break-word;
}
.dm-bubble.me{
  align-self:flex-end;background:var(--accent);color:white;border-bottom-right-radius:4px;
}
.dm-bubble.them{
  align-self:flex-start;background:rgba(245,241,234,0.06);color:var(--paper);border-bottom-left-radius:4px;
}
.dm-bubble-time{font-size:9.5px;opacity:0.55;margin-top:3px;font-family:'JetBrains Mono',monospace}
/* CSS grid keeps the input/attach/send row tidy on its own line and lets
   the attached-film chip and film-search panel stack ABOVE the input row
   via grid-column:1 / -1 — flex-wrap couldn't pull this off cleanly
   because the auto-shrink of the row stretched the input + buttons
   vertically when the search panel grew taller than them. */
.dm-composer{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:12px 16px;border-top:1px solid rgba(245,241,234,0.08);align-items:center}
.dm-composer #dmAttachedFilm,.dm-composer #dmFilmSearch{grid-column:1 / -1}
.dm-composer input#dmInput{padding:10px 14px;background:rgba(245,241,234,0.05);border:1px solid rgba(245,241,234,0.14);color:var(--paper);border-radius:999px;font-size:13px;font-family:inherit;outline:none;width:100%;box-sizing:border-box;min-width:0}
.dm-composer button[type="submit"]{padding:10px 18px;background:var(--accent);color:white;border:none;border-radius:999px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;white-space:nowrap}
.dm-attach-btn{padding:10px 14px;background:rgba(245,241,234,0.06);color:var(--paper);border:1px solid rgba(245,241,234,0.14);border-radius:999px;font-size:13px;cursor:pointer;font-family:inherit;line-height:1}
.dm-attach-btn:hover{background:rgba(245,241,234,0.10)}
.dm-attach-btn.active{background:rgba(224,60,40,0.18);border-color:rgba(224,60,40,0.5)}
.dm-film-attached{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(245,241,234,0.04);border:1px dashed rgba(245,241,234,0.18);border-radius:12px;font-size:12px;color:rgba(245,241,234,0.85)}
.dm-film-attached img{width:32px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0}
.dm-film-attached .dfa-info{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-film-attached .dfa-remove{padding:4px 10px;background:rgba(245,241,234,0.08);border:none;border-radius:8px;color:var(--paper);cursor:pointer;font-size:11px}
.dm-film-search{background:rgba(0,0,0,0.35);border:1px solid rgba(245,241,234,0.12);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.dm-film-search input{padding:8px 12px;background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.12);color:var(--paper);border-radius:999px;font-size:12.5px;outline:none;font-family:inherit}
.dm-film-search-results{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.dm-film-search-results .dfsr{display:flex;gap:10px;padding:6px;border-radius:8px;cursor:pointer;background:rgba(245,241,234,0.02);border:1px solid transparent;transition:all 0.12s;align-items:center}
.dm-film-search-results .dfsr:hover{background:rgba(245,241,234,0.06);border-color:rgba(245,241,234,0.12)}
.dm-film-search-results .dfsr img{width:36px;height:54px;object-fit:cover;border-radius:4px;flex-shrink:0}
.dm-film-search-results .dfsr-info{flex:1;min-width:0}
.dm-film-search-results .dfsr-title{font-size:12.5px;color:var(--paper);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-film-search-results .dfsr-sub{font-size:10.5px;color:rgba(245,241,234,0.55);margin-top:2px}
.dm-film-empty{padding:14px;text-align:center;color:rgba(245,241,234,0.45);font-size:12px}
.dm-bubble.has-film{padding:8px;max-width:82%}
.dm-film-card{display:flex;gap:10px;background:rgba(0,0,0,0.22);border-radius:10px;padding:8px;cursor:pointer;text-decoration:none;color:inherit;align-items:stretch;width:240px}
.dm-bubble.them .dm-film-card{background:rgba(245,241,234,0.04)}
.dm-film-card:hover{background:rgba(0,0,0,0.32)}
.dm-bubble.them .dm-film-card:hover{background:rgba(245,241,234,0.07)}
.dm-film-card img{width:54px;height:80px;object-fit:cover;border-radius:6px;flex-shrink:0;background:rgba(0,0,0,0.4)}
.dm-film-card .dfc-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.dm-film-card .dfc-tag{font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.7);font-family:'JetBrains Mono',monospace}
.dm-bubble.them .dm-film-card .dfc-tag{color:rgba(245,241,234,0.5)}
.dm-film-card .dfc-title{font-size:13px;font-weight:700;line-height:1.25;margin:2px 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dm-film-card .dfc-year{font-size:11px;opacity:0.75}
.dm-bubble-caption{margin-top:8px;font-size:13px;line-height:1.4;padding:0 4px}

/* ========= FILM CLUBS ========= */
.club-card{
  display:flex;flex-direction:column;background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:14px;padding:16px;text-decoration:none;color:inherit;transition:all 0.15s;
}
.club-card:hover{background:rgba(245,241,234,0.08);transform:translateY(-2px)}
.club-card h3{font-family:'Instrument Serif',serif;font-size:20px;margin:0 0 4px;color:var(--paper)}
.club-card .cc-meta{font-size:11.5px;color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace}
.club-card .cc-desc{font-size:12.5px;color:rgba(245,241,234,0.7);margin-top:6px;line-height:1.4}

/* ========= CHALLENGES ========= */
.challenge-card{
  padding:18px 20px;background:linear-gradient(135deg,rgba(212,167,74,0.1),rgba(224,60,40,0.05));
  border:1px solid rgba(212,167,74,0.3);border-radius:14px;margin-bottom:12px;
}
.challenge-card h3{font-family:'Instrument Serif',serif;font-size:22px;margin:0 0 4px;color:var(--paper)}
.challenge-meta{font-size:11.5px;color:rgba(245,241,234,0.6);font-family:'JetBrains Mono',monospace;letter-spacing:0.04em}
.challenge-progress{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:12px}
.challenge-progress-bar{flex:1;height:8px;background:rgba(245,241,234,0.06);border-radius:4px;overflow:hidden}
.challenge-progress-fill{height:100%;background:linear-gradient(90deg,#D4A74A,#E03C28);border-radius:4px}

/* ========= LIVE ACTIVITY FEED (Twitch/YouTube-style realtime stream) ========= */
.live-indicator{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  background:rgba(224,60,40,0.12);border:1px solid rgba(224,60,40,0.4);
  border-radius:999px;color:var(--accent);font-size:10.5px;font-weight:700;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.12em;text-transform:uppercase;
}
.live-indicator-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(224,60,40,0.8);animation:livePulse 1.5s infinite;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,60,40,0.7)}
  50%{box-shadow:0 0 0 6px rgba(224,60,40,0)}
}

/* "New" highlight animation when a review streams in */
@keyframes liveEntryIn{
  0%{opacity:0;transform:translateY(-8px);background:rgba(224,60,40,0.15)}
  70%{background:rgba(224,60,40,0.08)}
  100%{opacity:1;transform:translateY(0);background:rgba(245,241,234,0.04)}
}
.af-card.live-new,.live-entry.live-new{animation:liveEntryIn 1.6s ease-out}

/* Dedicated #/live page — Twitch-chat-style vertical stream */
.live-page{display:none;color:var(--paper)}
.live-page.active{
  display:flex;position:fixed;inset:0;z-index:90;background:var(--ink);
  flex-direction:column;padding:72px 0 0;
}
.live-head{
  max-width:860px;margin:0 auto;padding:0 24px 16px;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.live-back{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
  background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.12);
  border-radius:999px;color:var(--paper);text-decoration:none;font-size:12.5px;cursor:pointer;
}
.live-title{
  font-family:'Instrument Serif',serif;font-size:28px;line-height:1;
  color:var(--paper);margin:0;letter-spacing:-0.02em;
}
.live-stream-wrap{
  flex:1;overflow-y:auto;max-width:860px;width:100%;margin:0 auto;
  padding:8px 24px 40px;display:flex;flex-direction:column;gap:8px;
}
.live-entry{
  display:flex;gap:10px;padding:10px 14px;align-items:flex-start;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.06);
  border-radius:12px;transition:background 0.2s;
}
.live-entry:hover{background:rgba(245,241,234,0.08)}
.live-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),#D4A74A);
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-size:16px;color:white;text-decoration:none;
}
.live-avatar img{width:100%;height:100%;object-fit:cover}
.live-body{flex:1;min-width:0}
.live-line-1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:rgba(245,241,234,0.6);margin-bottom:3px}
.live-user{color:#D4A74A;font-weight:700;text-decoration:none}
.live-user:hover{text-decoration:underline}
.live-film-link{color:var(--paper);font-weight:600;text-decoration:none}
.live-film-link:hover{color:var(--accent)}
.live-stars{color:#D4A74A;font-size:12px;letter-spacing:0.5px}
.live-time{color:rgba(245,241,234,0.4);font-size:10.5px;font-family:'JetBrains Mono',monospace;letter-spacing:0.04em}
.live-text{font-size:12.5px;color:rgba(245,241,234,0.78);line-height:1.45;font-style:italic;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.live-text em.no-text{font-style:normal;color:rgba(245,241,234,0.4)}
.live-poster{flex-shrink:0;width:38px;aspect-ratio:2/3;border-radius:5px;overflow:hidden;background:#222;cursor:pointer}
.live-poster img{width:100%;height:100%;object-fit:cover}
.live-empty{padding:40px 20px;text-align:center;color:rgba(245,241,234,0.5);font-size:13px}
.live-pause-btn{
  padding:5px 12px;background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.12);
  color:rgba(245,241,234,0.75);border-radius:999px;font-size:11.5px;cursor:pointer;font-family:inherit;
}
.live-pause-btn.paused{background:rgba(255,140,0,0.15);border-color:rgba(255,140,0,0.4);color:#FFA040}

/* ========= ONBOARDING WIZARD ========= */
.onboard-page{display:none;color:var(--paper)}
.onboard-page.active{
  display:flex;position:fixed;inset:0;z-index:95;background:var(--ink);
  flex-direction:column;padding:40px 24px;overflow-y:auto;align-items:center;
}
.onboard-card{max-width:680px;width:100%;margin:0 auto}
.onboard-step-label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.2em;
  color:#D4A74A;text-transform:uppercase;margin-bottom:10px;
}
.onboard-title{
  font-family:'Instrument Serif',serif;font-size:40px;line-height:1.05;
  color:var(--paper);margin:0 0 14px;letter-spacing:-0.02em;
}
.onboard-sub{color:rgba(245,241,234,0.65);font-size:14.5px;line-height:1.55;margin:0 0 28px;max-width:560px}
.onboard-films-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.onboard-film{
  position:relative;cursor:pointer;border-radius:10px;overflow:hidden;
  border:2px solid transparent;transition:all 0.15s;
}
.onboard-film:hover{transform:translateY(-2px)}
.onboard-film img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.onboard-film-rate{
  position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.85));
  display:flex;flex-direction:column;justify-content:flex-end;padding:8px;
}
.onboard-film-title{font-size:11.5px;color:var(--paper);font-weight:600;line-height:1.2;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.onboard-film-stars{display:flex;gap:2px}
.onboard-star{flex:1;padding:6px 0;text-align:center;font-size:12px;cursor:pointer;background:rgba(0,0,0,0.5);border-radius:4px;color:rgba(245,241,234,0.5)}
.onboard-star:hover{color:#D4A74A;background:rgba(0,0,0,0.75)}
.onboard-star.active{color:#D4A74A;background:rgba(212,167,74,0.25)}
.onboard-film.rated{border-color:#D4A74A}
.onboard-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}
.onboard-users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.onboard-user{
  display:flex;align-items:center;gap:12px;padding:14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;cursor:pointer;transition:all 0.15s;
}
.onboard-user:hover{background:rgba(245,241,234,0.08)}
.onboard-user.followed{border-color:#D4A74A;background:rgba(212,167,74,0.08)}
.onboard-user-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),#D4A74A);
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-size:20px;color:white;
}
.onboard-user-avatar img{width:100%;height:100%;object-fit:cover}
.onboard-user-body{flex:1;min-width:0}
.onboard-user-name{font-size:14px;font-weight:600;color:var(--paper)}
.onboard-user-bio{font-size:11.5px;color:rgba(245,241,234,0.55);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.onboard-follow-btn{padding:5px 12px;background:var(--accent);color:white;border:none;border-radius:999px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.onboard-user.followed .onboard-follow-btn{background:rgba(245,241,234,0.1);color:var(--paper)}
.onboard-progress{display:flex;gap:6px;margin-bottom:24px}
.onboard-progress-dot{width:10px;height:10px;border-radius:50%;background:rgba(245,241,234,0.15)}
.onboard-progress-dot.active{background:var(--accent)}
.onboard-progress-dot.done{background:#D4A74A}

/* ========= LIST LIKES + POPULAR LISTS ========= */
.list-like-btn{
  background:none;border:1px solid rgba(245,241,234,0.2);color:rgba(245,241,234,0.7);
  padding:6px 12px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:12px;
  display:inline-flex;align-items:center;gap:5px;transition:all 0.15s;
}
.list-like-btn:hover{border-color:var(--accent);color:var(--accent)}
.list-like-btn.liked{background:rgba(224,60,40,0.12);border-color:var(--accent);color:var(--accent)}
.list-like-count{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600}

/* ========= BIO SOCIAL LINKS ========= */
.profile-socials{display:flex;gap:10px;margin:10px 0 6px;flex-wrap:wrap}
.profile-social-link{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  background:rgba(245,241,234,0.05);border:1px solid rgba(245,241,234,0.12);
  border-radius:999px;color:rgba(245,241,234,0.75);font-size:11.5px;
  text-decoration:none;font-family:'JetBrains Mono',monospace;letter-spacing:0.02em;
  transition:all 0.15s;
}
.profile-social-link:hover{background:rgba(245,241,234,0.12);color:var(--paper)}

/* ========= FRIEND SUGGESTIONS PAGE ========= */
.friend-suggestions-page, .trending-page, .popular-lists-page, .follow-requests-page{display:none;color:var(--paper)}
.friend-suggestions-page.active, .trending-page.active, .popular-lists-page.active, .follow-requests-page.active{
  display:block;position:fixed;inset:0;z-index:90;padding:80px 32px 48px;overflow-y:auto;background:var(--ink);
}
.friend-suggestions-page.active > *, .trending-page.active > *,
.popular-lists-page.active > *, .follow-requests-page.active > *{max-width:960px;margin-left:auto;margin-right:auto}
.suggest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:20px}
.suggest-card{
  display:flex;align-items:center;gap:12px;padding:14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;
}
.suggest-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#D4A74A);display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:18px;color:white;overflow:hidden;flex-shrink:0}
.suggest-avatar img{width:100%;height:100%;object-fit:cover}
.suggest-body{flex:1;min-width:0}
.suggest-name{font-weight:600;color:var(--paper);font-size:14px}
.suggest-name a{color:inherit;text-decoration:none}
.suggest-reason{font-size:11px;color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace;margin-top:2px}

/* ========= FOLLOW REQUESTS INBOX ========= */
.fr-item{
  display:flex;align-items:center;gap:12px;padding:14px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;margin-bottom:10px;
}
.fr-item-body{flex:1;min-width:0}
.fr-item-actions{display:flex;gap:6px}
.fr-accept-btn{background:var(--accent);color:white;border:none;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.fr-decline-btn{background:none;border:1px solid rgba(245,241,234,0.2);color:rgba(245,241,234,0.65);padding:6px 14px;border-radius:999px;font-size:12px;cursor:pointer;font-family:inherit}

/* ========= NESTED COMMENT REPLY ========= */
.rcp-replies{margin-left:32px;margin-top:6px;padding-left:10px;border-left:2px solid rgba(245,241,234,0.08)}
.rcp-reply-link{background:none;border:none;color:rgba(245,241,234,0.45);font-size:10.5px;cursor:pointer;padding:2px 4px;margin-left:6px;font-family:inherit;font-family:'JetBrains Mono',monospace}
.rcp-reply-link:hover{color:#D4A74A}
.rcp-reply-form{margin-top:6px;display:flex;gap:6px;margin-left:32px}
.rcp-reply-form input{flex:1;padding:6px 10px;background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.14);color:var(--paper);border-radius:6px;font-size:12px;font-family:inherit;outline:none}
.rcp-reply-form button{padding:6px 12px;background:var(--accent);color:white;border:none;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer}

/* ========= MORE MENU (mute/block/report) on user ========= */
.user-more-btn{
  background:none;border:1px solid rgba(245,241,234,0.18);color:rgba(245,241,234,0.6);
  padding:5px 10px;border-radius:999px;cursor:pointer;font-size:11px;font-family:inherit;
}
.user-more-menu{
  position:absolute;top:calc(100% + 4px);right:0;background:#151515;
  border:1px solid rgba(245,241,234,0.14);border-radius:10px;padding:4px;z-index:100;
  min-width:180px;box-shadow:0 10px 30px rgba(0,0,0,0.6);
}
.user-more-menu button{
  display:block;width:100%;text-align:left;background:none;border:none;color:var(--paper);
  padding:8px 10px;border-radius:6px;font-size:12.5px;cursor:pointer;font-family:inherit;
}
.user-more-menu button:hover{background:rgba(245,241,234,0.06)}
.user-more-menu button.danger{color:#f87171}

/* ========= FILM MEMBER COUNT + STREAK BADGE ========= */
.film-member-row{
  display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:rgba(245,241,234,0.65);
  padding:10px 14px;background:rgba(245,241,234,0.03);border-radius:10px;margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;letter-spacing:0.02em;
}
.film-member-row strong{color:var(--paper);font-size:14px;font-family:'Instrument Serif',serif;font-weight:700;margin-right:3px}
.streak-badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  background:linear-gradient(135deg,rgba(255,140,0,0.15),rgba(212,167,74,0.1));
  border:1px solid rgba(255,140,0,0.3);border-radius:999px;
  font-size:11px;color:#FFA040;font-weight:700;font-family:'JetBrains Mono',monospace;
}

/* ========= REVIEW SORT DROPDOWN ========= */
.fc-sort-row{display:flex;gap:6px;align-items:center;margin-bottom:10px;font-size:11px;color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;text-transform:uppercase}
.fc-sort-btn{
  background:none;border:1px solid rgba(245,241,234,0.14);color:rgba(245,241,234,0.7);
  padding:4px 10px;border-radius:999px;font-size:11px;cursor:pointer;font-family:inherit;
}
.fc-sort-btn.active{background:rgba(212,167,74,0.15);border-color:rgba(212,167,74,0.35);color:#D4A74A}

/* ========= WATCHLIST SORT + BULK ========= */
.wl-sort-bar{
  display:flex;gap:6px;align-items:center;padding:10px 20px 2px;
  flex-wrap:wrap;font-size:11px;font-family:'JetBrains Mono',monospace;
  border-bottom:1px solid rgba(245,241,234,0.04);
}
.wl-sort-btn{
  background:transparent;border:1px solid rgba(245,241,234,0.12);
  color:rgba(245,241,234,0.7);padding:5px 10px;border-radius:999px;
  font-family:inherit;font-size:10.5px;letter-spacing:0.06em;font-weight:600;
  cursor:pointer;transition:all 0.15s ease;
}
.wl-sort-btn:hover{border-color:rgba(245,241,234,0.3);color:var(--paper)}
.wl-sort-btn.active{background:rgba(212,167,74,0.15);border-color:rgba(212,167,74,0.4);color:#D4A74A}
.wl-bulk-toggle{margin-left:auto}
.bulk-actions-bar{
  position:sticky;top:0;z-index:5;background:#151515;padding:10px 20px;
  border-top:1px solid rgba(245,241,234,0.06);
  border-bottom:1px solid rgba(245,241,234,0.1);display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
/* Checkbox overlay sits in the top-left corner of each watchlist card, only
   visible when bulk mode is active (parent .bulk-on). */
.wl-item-checkbox{
  position:absolute;top:8px;left:8px;z-index:3;
  width:24px;height:24px;border-radius:6px;
  background:rgba(0,0,0,0.6);border:1.5px solid rgba(245,241,234,0.5);
  color:var(--paper);font-size:14px;line-height:20px;text-align:center;
  display:none;backdrop-filter:blur(4px);pointer-events:none;
}
.wl-modal.bulk-on .wl-item{cursor:pointer}
.wl-modal.bulk-on .wl-item-checkbox{display:block}
.wl-modal.bulk-on .wl-item-remove{display:none}
.wl-item{position:relative}
.wl-item.selected{outline:2px solid var(--accent);outline-offset:-2px}
.wl-item.selected .wl-item-checkbox{background:var(--accent);border-color:var(--accent);color:white}

/* ========= RATING HISTOGRAM + FOLLOWERS ACTIVITY (film modal) ========= */
.fc-histogram{
  display:flex;align-items:flex-end;gap:3px;height:50px;margin-top:8px;padding:0 4px;
}
.fc-histogram-bar{
  flex:1;background:linear-gradient(180deg,#D4A74A,rgba(212,167,74,0.3));
  border-radius:3px 3px 0 0;min-height:3px;position:relative;cursor:help;
}
.fc-histogram-bar:hover::after{
  content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.88);color:white;padding:3px 8px;border-radius:4px;font-size:10px;
  white-space:nowrap;margin-bottom:6px;font-family:'JetBrains Mono',monospace;z-index:5;
}
.fc-histogram-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;background:rgba(245,241,234,0.03);border-radius:10px;margin-top:10px;
}
.fc-histogram-axis{
  display:flex;justify-content:space-between;font-size:9px;color:rgba(245,241,234,0.4);
  padding:2px 4px 0;font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;
}
.fc-followers-activity{
  margin-top:14px;padding:12px 14px;background:rgba(212,167,74,0.06);
  border:1px solid rgba(212,167,74,0.2);border-radius:10px;
}
.fc-followers-label{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#D4A74A;
  font-family:'JetBrains Mono',monospace;margin-bottom:8px;
}
.fc-follower-row{
  display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;
}
.fc-follower-user{color:#D4A74A;font-weight:600;text-decoration:none}
.fc-follower-user:hover{text-decoration:underline}
.fc-follower-inline-badges{display:inline-flex;align-items:center;gap:4px;color:rgba(245,241,234,0.7)}

/* ========= MILESTONES / BADGES (profile) ========= */
.milestones-section{margin-top:20px;padding-top:18px;border-top:1px dashed rgba(245,241,234,0.1)}
.milestones-head{font-family:'Instrument Serif',serif;font-size:20px;color:var(--paper);margin:0 0 12px}
.milestones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.milestone-chip{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);
  transition:all 0.15s;
}
.milestone-chip.achieved{
  background:linear-gradient(135deg,rgba(212,167,74,0.12),rgba(212,167,74,0.04));
  border-color:rgba(212,167,74,0.4);box-shadow:0 4px 16px rgba(212,167,74,0.08);
}
.milestone-chip.locked{opacity:0.4}
.milestone-icon{font-size:26px;line-height:1;flex-shrink:0}
.milestone-body{flex:1;min-width:0}
.milestone-title{font-size:12.5px;font-weight:600;color:var(--paper);line-height:1.2}
.milestone-desc{font-size:10.5px;color:rgba(245,241,234,0.55);line-height:1.3;margin-top:2px;font-family:'JetBrains Mono',monospace}

/* ========= COMPATIBILITY SCORE (viewing other users) ========= */
.compat-card{
  padding:14px 18px;background:linear-gradient(135deg,rgba(224,60,40,0.08),rgba(212,167,74,0.06));
  border:1px solid rgba(212,167,74,0.25);border-radius:14px;margin-bottom:22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.compat-score{
  font-family:'Instrument Serif',serif;font-size:44px;line-height:1;color:#D4A74A;
  font-weight:700;letter-spacing:-0.02em;min-width:80px;text-align:center;
}
.compat-body{flex:1;min-width:180px}
.compat-title{font-size:14px;font-weight:600;color:var(--paper);margin-bottom:3px}
.compat-sub{font-size:12px;color:rgba(245,241,234,0.65);line-height:1.45}
.compat-sub strong{color:#D4A74A}

/* ========= PERSON (director/actor) PAGE ========= */
.person-page{display:none;color:var(--paper)}
.person-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 48px;overflow-y:auto;background:var(--ink);
}
.person-page.active > *{max-width:1100px;margin-left:auto;margin-right:auto}
.person-header{
  display:flex;gap:24px;align-items:flex-start;margin-bottom:28px;
  padding-bottom:20px;border-bottom:1px solid rgba(245,241,234,0.08);flex-wrap:wrap;
}
.person-avatar{
  width:160px;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#222;
  flex-shrink:0;
}
.person-avatar img{width:100%;height:100%;object-fit:cover}
.person-info{flex:1;min-width:220px}
.person-name{
  font-family:'Instrument Serif',serif;font-size:44px;line-height:1.05;
  color:var(--paper);margin:0 0 8px;letter-spacing:-0.02em;
}
.person-meta{
  color:rgba(245,241,234,0.55);font-size:13px;font-family:'JetBrains Mono',monospace;
  letter-spacing:0.04em;margin-bottom:14px;
}
.person-bio{color:rgba(245,241,234,0.82);font-size:14px;line-height:1.6;max-width:720px}
.person-section-head{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:#D4A74A;margin:24px 0 10px;
}
.person-films-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;
}
.person-film{text-decoration:none;color:inherit;cursor:pointer;position:relative}
.person-film img{width:100%;aspect-ratio:2/3;border-radius:8px;background:#222;display:block;transition:transform 0.15s}
.person-film:hover img{transform:translateY(-3px)}
.person-film-title{font-size:12.5px;color:var(--paper);margin-top:6px;line-height:1.2;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.person-film-year{font-size:10.5px;color:rgba(245,241,234,0.45);font-family:'JetBrains Mono',monospace}
.person-film-mine{
  position:absolute;top:6px;right:6px;padding:3px 7px;border-radius:6px;
  background:rgba(0,0,0,0.75);color:#D4A74A;font-size:10px;font-weight:700;
  font-family:'JetBrains Mono',monospace;
}
.clickable-name{color:#D4A74A;text-decoration:none;font-weight:600}
.clickable-name:hover{text-decoration:underline}

/* Lock body scroll while any full-screen page overlay is active. Without
   this rule, both the overlay (position:fixed + overflow-y:auto) AND the
   body underneath remain scrollable, producing two stacked scrollbars on
   the right edge. :has() is supported in all current browsers; the same
   group of overlays all use position:fixed inset:0, so one rule covers
   every case. */
body:has(.releases-page.active),
body:has(.lists-page.active),
body:has(.journal-page.active),
body:has(.trending-page.active),
body:has(.live-page.active),
body:has(.profile-page.active),
body:has(.popular-lists-page.active),
body:has(.friend-suggestions-page.active),
body:has(.follow-requests-page.active),
body:has(.tag-page.active),
body:has(.person-page.active),
body:has(.pricing-page.active),
body:has(.discovery-hub-page.active),
body:has(.stats-page.active),
body:has(.tier-success-page.active),
body:has(.legal-page.active){
  overflow:hidden;
}

/* ========= RELEASE CALENDAR PAGE ========= */
.releases-page{display:none;color:var(--paper)}
.releases-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 48px;overflow-y:auto;background:var(--ink);
}
.releases-page.active > *{max-width:1100px;margin-left:auto;margin-right:auto}
.releases-week{margin-bottom:32px}
.releases-week-head{
  font-family:'Instrument Serif',serif;font-size:22px;color:var(--paper);margin:0 0 12px;
  padding-bottom:6px;border-bottom:1px solid rgba(245,241,234,0.08);
}
/* auto-fit collapses empty grid tracks so a section with 2 films doesn't
   leave 5 empty tracks on the right. minmax(150px, 200px) caps card width
   so a single-film section doesn't stretch one poster across the entire
   1100px container. justify-content:start keeps every section's cards
   left-aligned consistently regardless of how many films land in the week. */
.releases-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,200px));gap:16px;
  justify-content:start;
}
@media (max-width:520px){
  .releases-grid{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));}
}
.release-card{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;position:relative;
}
.release-card img{width:100%;aspect-ratio:2/3;border-radius:10px;background:#222;display:block;transition:transform 0.15s;cursor:pointer}
.release-card:hover img{transform:translateY(-3px)}
.release-title{font-size:13px;font-weight:600;color:var(--paper);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.release-date{font-size:11px;color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace}
.release-remind-btn{
  margin-top:4px;padding:5px 10px;background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.14);
  color:rgba(245,241,234,0.85);font-size:11px;border-radius:999px;cursor:pointer;font-family:inherit;
  transition:all 0.15s;
}
.release-remind-btn:hover{background:rgba(212,167,74,0.15);border-color:rgba(212,167,74,0.4);color:#D4A74A}
.release-remind-btn.reminded{background:rgba(212,167,74,0.18);border-color:rgba(212,167,74,0.5);color:#D4A74A}

/* Log-rewatch toggle inside composer */
.rc-mode-toggle{
  display:inline-flex;gap:2px;padding:3px;background:rgba(245,241,234,0.05);
  border:1px solid rgba(245,241,234,0.1);border-radius:999px;margin:8px 0 0;
}
.rc-mode-toggle button{
  background:none;border:none;padding:5px 12px;border-radius:999px;
  color:rgba(245,241,234,0.65);font-size:11.5px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all 0.15s;
}
.rc-mode-toggle button.active{background:var(--accent);color:white}

@media(max-width:640px){
  .person-page.active, .releases-page.active{padding:72px 20px 40px}
  .person-name{font-size:32px}
  .person-avatar{width:120px}
  .compat-score{font-size:36px;min-width:60px}
}

/* ========= FILM COMMUNITY SECTION (inside movie modal) ========= */
.film-community-section{
  margin-top:28px;border-top:1px solid rgba(245,241,234,0.1);padding-top:24px;
}
.fc-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:16px;flex-wrap:wrap;
}
.fc-stats{display:flex;align-items:center;gap:12px}
.fc-avg{
  display:flex;align-items:baseline;gap:8px;padding:6px 14px;
  background:rgba(212,167,74,0.1);border:1px solid rgba(212,167,74,0.3);
  border-radius:10px;
}
.fc-avg-num{
  font-family:'Instrument Serif',serif;font-size:28px;font-weight:600;
  color:#D4A74A;line-height:1;letter-spacing:-0.02em;
}
.fc-avg .stars-display{font-size:15px}
.fc-count{font-size:12px;color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace;letter-spacing:0.04em}
.fc-count strong{color:var(--paper)}
.fc-empty{color:rgba(245,241,234,0.5);font-size:13px;padding:18px 0;font-style:italic}
.fc-reviews{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.fc-review{
  display:flex;gap:12px;padding:12px 14px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.06);border-radius:10px;
}
.fc-review-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),#D4A74A);
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-size:15px;color:white;
}
.fc-review-avatar img{width:100%;height:100%;object-fit:cover}
.fc-review-body{flex:1;min-width:0}
.fc-review-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:11.5px;color:rgba(245,241,234,0.55);flex-wrap:wrap}
.fc-review-user{color:#D4A74A;font-weight:600;text-decoration:none}
.fc-review-user:hover{text-decoration:underline}
.fc-review-text{font-size:13px;line-height:1.5;color:rgba(245,241,234,0.82)}
.fc-review-text em{color:rgba(245,241,234,0.5)}
.fc-write{
  padding:7px 14px;background:var(--accent);color:white;border:none;border-radius:999px;
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
}
.fc-more{
  display:block;width:100%;margin-top:8px;padding:10px;
  background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.1);
  border-radius:8px;color:rgba(245,241,234,0.75);font-size:12.5px;cursor:pointer;font-family:inherit;
}
.fc-more:hover{background:rgba(245,241,234,0.08);color:var(--paper)}

/* ========= TAG FILTER PAGE ========= */
.tag-page{display:none;color:var(--paper)}
.tag-page.active{
  display:block;position:fixed;inset:0;z-index:90;
  padding:80px 32px 48px;overflow-y:auto;background:var(--ink);
}
.tag-page.active > *{max-width:960px;margin-left:auto;margin-right:auto}
.tag-head{
  margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(245,241,234,0.08);
}
.tag-title{
  font-family:'Instrument Serif',serif;font-size:40px;line-height:1.05;
  color:var(--paper);margin:0 0 6px;letter-spacing:-0.02em;
}
.tag-title .hash{color:rgba(245,241,234,0.3);font-style:italic}
.tag-sub{color:rgba(245,241,234,0.55);font-size:13px;margin:0}

/* ========= USER SEARCH ========= */
.user-search-wrap{
  position:relative;display:inline-flex;align-items:center;
}
.user-search-btn{
  background:rgba(245,241,234,0.06);border:1px solid rgba(245,241,234,0.12);
  color:var(--paper);width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  transition:all 0.15s;
}
.user-search-btn:hover{background:rgba(245,241,234,0.14)}
.user-search-panel{
  position:absolute;top:calc(100% + 8px);right:0;width:320px;max-width:92vw;
  background:#151515;border:1px solid rgba(245,241,234,0.14);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);z-index:200;overflow:hidden;
  max-height:70vh;display:flex;flex-direction:column;
}
.user-search-panel input{
  width:100%;padding:12px 14px;background:rgba(245,241,234,0.05);
  border:none;border-bottom:1px solid rgba(245,241,234,0.1);
  color:var(--paper);font-size:13px;font-family:inherit;outline:none;
}
.user-search-results{overflow-y:auto;flex:1;padding:4px}
.us-item{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;
  cursor:pointer;text-decoration:none;color:inherit;
}
.us-item:hover{background:rgba(245,241,234,0.06)}
.us-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),#D4A74A);
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Serif',serif;font-size:14px;color:white;
}
.us-avatar img{width:100%;height:100%;object-fit:cover}
.us-body{flex:1;min-width:0}
.us-name{font-size:13px;font-weight:600;color:var(--paper);line-height:1.2}
.us-bio{font-size:11px;color:rgba(245,241,234,0.5);line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.us-empty{padding:24px 16px;text-align:center;color:rgba(245,241,234,0.45);font-size:12.5px}
.us-history-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 4px;font-size:10.5px;letter-spacing:0.08em;color:rgba(245,241,234,0.45);text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.us-history-clear{background:none;border:none;color:rgba(245,241,234,0.45);font-size:10.5px;cursor:pointer;padding:0;text-transform:none;letter-spacing:0;font-family:inherit}
.us-history-clear:hover{color:var(--accent)}
.us-item-row{display:flex;align-items:center;gap:4px;padding:0 4px}
.us-item-row .us-item{flex:1;min-width:0}
.us-history-remove{background:none;border:none;color:rgba(245,241,234,0.4);cursor:pointer;font-size:14px;padding:6px 8px;border-radius:6px;flex-shrink:0}
.us-history-remove:hover{color:var(--paper);background:rgba(245,241,234,0.06)}
/* Mobile-only sheet variant — mounted on body since .nav-auth (which holds
   the desktop dropdown anchor) is display:none on mobile. Behaves like the
   notif-panel-mobile sheet: full-width, top-anchored, scrollable, X to close. */
.user-search-panel-mobile{
  position:fixed;top:60px;left:8px;right:8px;
  background:#151515;border:1px solid rgba(245,241,234,0.14);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);z-index:8500;overflow:hidden;
  max-height:calc(100dvh - 80px);display:flex;flex-direction:column;
}
.user-search-panel-mobile .usp-mobile-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid rgba(245,241,234,0.08);
}
.user-search-panel-mobile .usp-mobile-title{
  margin:0;font-size:14px;font-weight:600;color:var(--paper);
  font-family:'Instrument Serif',serif;font-style:italic;
}
.user-search-panel-mobile .usp-mobile-close{
  background:none;border:none;color:rgba(245,241,234,0.6);
  font-size:22px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:6px;
}
.user-search-panel-mobile .usp-mobile-close:hover,
.user-search-panel-mobile .usp-mobile-close:active{
  color:var(--paper);background:rgba(245,241,234,0.08);
}
.user-search-panel-mobile input{
  width:100%;padding:12px 14px;background:rgba(245,241,234,0.05);
  border:none;border-bottom:1px solid rgba(245,241,234,0.1);
  color:var(--paper);font-size:14px;font-family:inherit;outline:none;
}
.user-search-panel-mobile .user-search-results{overflow-y:auto;flex:1;padding:6px;-webkit-overflow-scrolling:touch}
body.theme-light .user-search-panel-mobile{background:#FFFFFF;border-color:rgba(26,20,8,0.14)}
body.theme-light .user-search-panel-mobile .usp-mobile-title{color:#1A1408}
body.theme-light .user-search-panel-mobile input{background:rgba(26,20,8,0.04);color:#1A1408;border-bottom-color:rgba(26,20,8,0.1)}

/* User/Film search tabs (shared by desktop dropdown + mobile sheet) */
.us-tabs{display:flex;gap:0;border-bottom:1px solid rgba(245,241,234,0.08);background:rgba(245,241,234,0.02)}
.us-tab{flex:1;background:none;border:none;color:rgba(245,241,234,0.55);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;padding:11px 6px;cursor:pointer;position:relative;font-weight:600;transition:color 0.15s}
.us-tab:hover{color:var(--paper)}
.us-tab.active{color:var(--paper)}
.us-tab.active::after{content:'';position:absolute;left:14%;right:14%;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
body.theme-light .us-tabs{background:rgba(26,20,8,0.02);border-bottom-color:rgba(26,20,8,0.08)}
body.theme-light .us-tab{color:rgba(26,20,8,0.55)}
body.theme-light .us-tab:hover, body.theme-light .us-tab.active{color:#1A1408}
/* Film result row inside the search panel — same layout language as us-item */
.us-film-poster{width:36px;height:54px;border-radius:6px;flex-shrink:0;overflow:hidden;background:#222}
.us-film-poster img{width:100%;height:100%;object-fit:cover;display:block}
.us-film-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(245,241,234,0.5);letter-spacing:0.06em;text-transform:uppercase;margin-top:3px}
body.theme-light .us-film-meta{color:rgba(26,20,8,0.55)}

/* In-genre quick search input — slots into the filter bar */
.genre-search-row{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.genre-search-input{flex:1;padding:10px 14px;background:rgba(245,241,234,0.05);border:1px solid rgba(245,241,234,0.12);color:var(--paper);border-radius:10px;font-family:inherit;font-size:13.5px;outline:none;transition:border-color 0.15s}
.genre-search-input:focus{border-color:var(--accent)}
.genre-search-input::placeholder{color:rgba(245,241,234,0.35)}
body.theme-light .genre-search-input{background:rgba(26,20,8,0.04);color:#1A1408;border-color:rgba(26,20,8,0.12)}
body.theme-light .genre-search-input::placeholder{color:rgba(26,20,8,0.35)}

/* Film modal — Share row sits between TONTON DI and the action buttons */
.modal-share-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0 18px;padding:14px 12px;background:rgba(245,241,234,0.04);border:1px solid rgba(245,241,234,0.08);border-radius:14px}
.modal-share-row .msr-label{width:100%;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(245,241,234,0.5);margin-bottom:4px}
.msr-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(245,241,234,0.18);background:rgba(245,241,234,0.04);color:var(--paper);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.18s;text-decoration:none}
.msr-btn:hover{background:rgba(245,241,234,0.1);border-color:rgba(245,241,234,0.3);transform:translateY(-1px)}
body.theme-light .modal-share-row{background:rgba(26,20,8,0.04);border-color:rgba(26,20,8,0.1)}
body.theme-light .modal-share-row .msr-label{color:rgba(26,20,8,0.55)}
body.theme-light .msr-btn{background:rgba(26,20,8,0.04);color:#1A1408;border-color:rgba(26,20,8,0.18)}
/* Branded action buttons — placed AFTER theme overrides so the gradient/green/red
   wins in both dark and light themes (these are brand colors, not surface colors). */
.modal-share-row .msr-btn.msr-ig{background:linear-gradient(135deg,#833AB4 0%,#FD1D1D 50%,#FCB045 100%);border-color:transparent;color:#fff}
.modal-share-row .msr-btn.msr-ig:hover{filter:brightness(1.1)}
.modal-share-row .msr-btn.msr-wa{background:#25D366;border-color:transparent;color:#0a3a1a}
.modal-share-row .msr-btn.msr-wa:hover{filter:brightness(1.05)}
.modal-share-row .msr-btn.msr-send{background:var(--accent);border-color:transparent;color:#fff}
.modal-share-row .msr-btn.msr-send:hover{filter:brightness(1.1)}

/* Send-to-Following picker overlay */
.stf-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:8800;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.2s}
.stf-overlay.active{opacity:1;pointer-events:auto}
.stf-modal{background:#151515;border:1px solid rgba(245,241,234,0.14);border-radius:16px;width:min(440px,100%);max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
.stf-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(245,241,234,0.08)}
.stf-title{font-family:'Instrument Serif',serif;font-size:20px;color:var(--paper);font-style:italic;margin:0}
.stf-close{background:none;border:none;color:rgba(245,241,234,0.6);font-size:22px;cursor:pointer;padding:2px 8px;border-radius:6px;line-height:1}
.stf-close:hover{color:var(--paper);background:rgba(245,241,234,0.06)}
.stf-search{padding:10px 14px;border-bottom:1px solid rgba(245,241,234,0.06)}
.stf-search input{width:100%;padding:10px 12px;background:rgba(245,241,234,0.05);border:1px solid rgba(245,241,234,0.1);color:var(--paper);border-radius:10px;font-family:inherit;font-size:13px;outline:none}
.stf-list{overflow-y:auto;flex:1;padding:6px}
.stf-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background 0.12s}
.stf-row:hover{background:rgba(245,241,234,0.05)}
.stf-row .stf-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--accent),#D4A74A);display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:16px;color:#fff}
.stf-row .stf-avatar img{width:100%;height:100%;object-fit:cover}
.stf-name{flex:1;min-width:0;font-size:14px;color:var(--paper);font-weight:600;line-height:1.2}
.stf-name .stf-bio{font-size:11.5px;color:rgba(245,241,234,0.5);font-weight:400;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stf-action{padding:6px 12px;border-radius:999px;border:1px solid rgba(245,241,234,0.18);background:transparent;color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;cursor:pointer;font-weight:600;flex-shrink:0;transition:all 0.15s;text-transform:uppercase}
.stf-action:hover{background:var(--accent);border-color:var(--accent)}
.stf-action.sent{background:rgba(36,168,80,0.18);color:#7ee5a3;border-color:rgba(36,168,80,0.3);pointer-events:none}
.stf-empty{padding:32px 16px;text-align:center;color:rgba(245,241,234,0.5);font-size:13px}
.stf-foot{padding:10px 14px;border-top:1px solid rgba(245,241,234,0.06);background:rgba(245,241,234,0.02)}
.stf-foot textarea{width:100%;padding:10px 12px;background:rgba(245,241,234,0.05);border:1px solid rgba(245,241,234,0.1);color:var(--paper);border-radius:10px;font-family:inherit;font-size:13px;outline:none;resize:none;min-height:54px}
body.theme-light .stf-modal{background:#FFFFFF;border-color:rgba(26,20,8,0.14)}
body.theme-light .stf-title{color:#1A1408}
body.theme-light .stf-search input, body.theme-light .stf-foot textarea{background:rgba(26,20,8,0.04);color:#1A1408;border-color:rgba(26,20,8,0.1)}
body.theme-light .stf-name{color:#1A1408}
body.theme-light .stf-action{color:#1A1408;border-color:rgba(26,20,8,0.2)}

/* ========= DIARY TAB ========= */
.diary-list{display:flex;flex-direction:column;gap:4px}
.diary-month-head{
  font-family:'Instrument Serif',serif;font-size:20px;color:var(--paper);
  padding:14px 4px 6px;letter-spacing:-0.01em;
  border-bottom:1px solid rgba(245,241,234,0.08);margin-bottom:6px;
}
.diary-item{
  display:grid;grid-template-columns:52px 52px 1fr auto;gap:14px;
  align-items:center;padding:10px 4px;cursor:pointer;transition:background 0.12s;
  border-radius:8px;text-decoration:none;color:inherit;
}
.diary-item:hover{background:rgba(245,241,234,0.05)}
.diary-day{
  text-align:center;font-family:'JetBrains Mono',monospace;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.diary-day-num{font-size:22px;font-weight:700;color:var(--paper);line-height:1}
.diary-day-name{font-size:10px;color:rgba(245,241,234,0.5);letter-spacing:0.08em;text-transform:uppercase}
.diary-poster{width:52px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:#222}
.diary-poster img{width:100%;height:100%;object-fit:cover}
.diary-film{min-width:0}
.diary-title{font-size:15px;font-weight:600;color:var(--paper);line-height:1.25;margin-bottom:4px}
.diary-meta{font-size:11.5px;color:rgba(245,241,234,0.55);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.diary-rating{color:#D4A74A;font-size:13px}
@media(max-width:640px){
  .diary-item{grid-template-columns:40px 44px 1fr auto;gap:10px}
  .diary-title{font-size:14px}
  .diary-day-num{font-size:18px}
  .tag-page.active{padding:72px 20px 40px}
  .tag-title{font-size:30px}
}

.similar-section{margin-top:28px;border-top:1px solid rgba(245,241,234,0.1);padding-top:24px}
.similar-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.15em;color:var(--accent);margin-bottom:14px;text-transform:uppercase}
.similar-rail-wrap{position:relative}
.similar-rail-wrap::before,.similar-rail-wrap::after{content:'';position:absolute;top:0;bottom:8px;width:48px;pointer-events:none;z-index:1;transition:opacity 0.2s;opacity:0}
.similar-rail-wrap::before{left:0;background:linear-gradient(to right,var(--ink) 0%,transparent 100%)}
.similar-rail-wrap::after{right:0;background:linear-gradient(to left,var(--ink) 0%,transparent 100%)}
.similar-rail-wrap[data-scroll-start="false"]::before{opacity:1}
.similar-rail-wrap[data-scroll-end="false"]::after{opacity:1}
.similar-rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.similar-rail::-webkit-scrollbar{display:none}
.similar-item{flex-shrink:0;width:100px;cursor:pointer;transition:transform 0.3s}
.similar-item:hover{transform:scale(1.08)}
.similar-item img{width:100px;height:150px;object-fit:cover;border-radius:10px;background:#222}
.similar-item-title{font-size:11px;margin-top:6px;color:rgba(245,241,234,0.7);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mal-overlap{
  display:inline-block;margin-top:3px;padding:2px 6px;border-radius:999px;
  background:rgba(212,167,74,0.15);color:#D4A74A;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.06em;
  font-weight:700;
}
.similar-nav{position:absolute;top:calc(50% - 4px);transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(10,10,10,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(245,241,234,0.18);color:var(--paper);font-size:22px;line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:background 0.2s,border-color 0.2s,opacity 0.2s,transform 0.2s;padding:0}
.similar-nav:hover:not(:disabled){background:var(--accent);border-color:var(--accent);transform:translateY(-50%) scale(1.08)}
.similar-nav:disabled{opacity:0;cursor:default;pointer-events:none}
.similar-nav-prev{left:-6px}
.similar-nav-next{right:-6px}
@media(hover:none) and (pointer:coarse){.similar-nav{display:none}}

/* ===== GENRE BROWSE SECTION ===== */
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;padding:0 32px;max-width:1280px;margin:0 auto}
.genre-card{position:relative;height:200px;border-radius:24px;overflow:hidden;cursor:pointer;transition:transform 0.35s cubic-bezier(0.2,0.8,0.2,1),box-shadow 0.35s;display:flex;align-items:flex-end;padding:28px 28px}
.genre-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.genre-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.15) 100%);z-index:1}
.genre-card::after{content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(135deg,rgba(255,255,255,0.08),transparent);transition:opacity 0.35s;z-index:1}
.genre-card:hover::after{opacity:1}
.genre-card-content{position:relative;z-index:2}
.genre-card-emoji{font-size:36px;margin-bottom:10px}
.genre-card-name{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-weight:700;font-size:22px;color:#fff;letter-spacing:-0.01em}
.genre-card-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,0.45);margin-top:5px;text-transform:uppercase;letter-spacing:0.08em}
.genre-overlay{position:fixed;inset:0;background:rgba(10,10,10,0.97);z-index:8000;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.35s;-webkit-overflow-scrolling:touch}
.genre-overlay.active{opacity:1;pointer-events:auto}
.genre-overlay-inner{max-width:1200px;margin:0 auto;padding:80px 32px 60px}
.genre-overlay-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:16px}
.genre-filter-bar{display:flex;flex-direction:column;gap:14px;margin-bottom:32px;padding:20px;background:rgba(245,241,234,0.03);border:1px solid rgba(245,241,234,0.08);border-radius:16px}
.gf-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gf-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(245,241,234,0.4);min-width:72px;flex-shrink:0}
.gf-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.gf-chip{padding:7px 14px;border-radius:999px;border:1px solid rgba(245,241,234,0.15);background:transparent;color:rgba(245,241,234,0.7);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.gf-chip:hover{border-color:rgba(224,60,40,0.4);color:var(--paper)}
.gf-chip.active{background:var(--accent);border-color:var(--accent);color:white;font-weight:600}
.gf-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(245,241,234,0.4);margin-left:auto;white-space:nowrap}
@media(max-width:720px){
  .gf-row{gap:10px}
  .gf-label{min-width:100%;margin-bottom:4px}
  .gf-chip{font-size:12px;padding:6px 12px}
  .gf-count{margin:8px 0 0;width:100%}
}
.genre-overlay-title{font-family:'Instrument Serif',serif;font-size:42px;color:var(--paper);letter-spacing:-0.02em}
.genre-close{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(245,241,234,0.2);background:transparent;color:var(--paper);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;flex-shrink:0}
.genre-close:hover{background:var(--accent);border-color:var(--accent)}
.genre-movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px}
.genre-movie-card{cursor:pointer;transition:transform 0.3s}.genre-movie-card:hover{transform:scale(1.05)}
.genre-movie-card img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:12px;background:#222}
.genre-movie-card .gm-title{font-size:13px;margin-top:8px;color:var(--paper);font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.genre-movie-card .gm-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(245,241,234,0.4);margin-top:4px}
.genre-loading{text-align:center;padding:60px;color:rgba(245,241,234,0.4);font-family:'JetBrains Mono',monospace;font-size:13px}

/* ===== SWIPE DISCOVERY SECTION ===== */
.swipe-section{padding:80px 32px;background:var(--ink);overflow:hidden;position:relative}
/* Featured Swipe variant — richer intro block + labeled action rail.
   Used on homepage as the second-star section (AI Swipe). */
.swipe-section-featured{
  padding:76px 32px 72px;
  background:linear-gradient(180deg,#0f0f10 0%,#0a0a0b 100%);
}
.swipe-section-featured::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 18% 8%,rgba(224,60,40,0.09) 0%,transparent 55%),radial-gradient(circle at 82% 92%,rgba(212,167,74,0.06) 0%,transparent 55%);
}
.swipe-hero{max-width:1100px;margin:0 auto 44px;position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:24px}
.swipe-hero-copy{max-width:680px}
.swipe-eyebrow{
  display:inline-block;color:var(--accent);font-size:10.5px;letter-spacing:0.22em;
  font-weight:700;margin-bottom:14px;
}
.swipe-title{
  font-family:'Instrument Serif',serif;font-size:42px;line-height:1.04;
  color:var(--paper);margin-bottom:14px;letter-spacing:-0.01em;
}
.swipe-title .italic{font-style:italic;color:var(--accent)}
.swipe-sub{
  font-size:15.5px;line-height:1.55;color:rgba(245,241,234,0.72);
  margin-bottom:24px;max-width:580px;
}
.swipe-legend{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px;
}
.swipe-legend-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:12px;border:1px solid rgba(245,241,234,0.1);
  background:rgba(245,241,234,0.03);
}
.swipe-legend-skip{border-color:rgba(248,113,113,0.25);background:rgba(248,113,113,0.04)}
.swipe-legend-like{border-color:rgba(224,60,40,0.3);background:rgba(224,60,40,0.05)}
.swipe-legend-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  font-size:16px;font-weight:800;
  background:rgba(245,241,234,0.08);color:var(--paper);
}
.swipe-legend-skip .swipe-legend-arrow{background:rgba(248,113,113,0.18);color:#f87171}
.swipe-legend-like .swipe-legend-arrow{background:rgba(224,60,40,0.22);color:var(--accent)}
.swipe-legend-text{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.swipe-legend-text strong{font-size:13px;color:var(--paper);font-weight:700}
.swipe-legend-text span{font-size:11.5px;color:rgba(245,241,234,0.6)}
/* Labeled action buttons so the affordance is explicit, not just icon-only */
.swipe-actions-labeled{align-items:flex-start;gap:40px}
.swipe-action-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.swipe-btn-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;
  font-weight:700;color:rgba(245,241,234,0.55);
}
.swipe-btn-label-skip{color:rgba(245,241,234,0.55)}
.swipe-btn-label-like{color:var(--accent)}
@media (max-width:780px){
  .swipe-section-featured{padding:52px 20px 56px}
  .swipe-hero{margin-bottom:28px}
  .swipe-title{font-size:30px}
  .swipe-sub{font-size:14px;margin-bottom:18px}
  .swipe-legend{grid-template-columns:1fr;gap:10px;max-width:none}
  .swipe-legend-item{padding:10px 12px}
  .swipe-actions-labeled{gap:32px}
  .swipe-btn-label{font-size:9.5px}
}
.swipe-container{display:flex;flex-direction:column;align-items:center;gap:28px;max-width:400px;margin:0 auto;position:relative}
.swipe-stack{position:relative;width:320px;height:480px;margin:0 auto}
.swipe-card{position:absolute;width:320px;height:480px;border-radius:24px;overflow:hidden;background:#111;box-shadow:0 20px 60px rgba(0,0,0,0.5);cursor:grab;user-select:none;touch-action:none;will-change:transform}
.swipe-card.animating{transition:transform 0.45s cubic-bezier(0.2,0.8,0.2,1),opacity 0.45s;pointer-events:none}
.swipe-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.swipe-card-info{position:absolute;bottom:0;left:0;right:0;padding:20px 22px 18px;background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.6) 60%,transparent 100%);z-index:2}
.swipe-card-title{font-family:'Instrument Serif',serif;font-size:24px;color:var(--paper);line-height:1.2;margin-bottom:4px;text-shadow:0 2px 8px rgba(0,0,0,0.5)}
.swipe-card-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:0.05em;margin-bottom:6px}
.swipe-card-desc{font-size:12px;color:rgba(245,241,234,0.7);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.swipe-label{position:absolute;top:24px;padding:10px 20px;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-weight:700;font-size:22px;letter-spacing:0.05em;opacity:0;transition:opacity 0.15s;z-index:5;pointer-events:none;border:3px solid}
.swipe-label-like{right:24px;color:var(--accent);border-color:var(--accent);background:rgba(224,60,40,0.18);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif}
.swipe-label-skip{left:24px;color:rgba(245,241,234,0.9);border-color:rgba(245,241,234,0.8);background:rgba(30,30,30,0.5);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif}
/* ===== AI CURATOR INSIGHT pill + reveal panel (on swipe cards) ===== */
.swipe-ai-pill{
  position:absolute;top:16px;left:16px;z-index:6;
  display:inline-flex;align-items:center;gap:7px;
  height:28px;padding:0 13px;border-radius:100px;
  background:rgba(10,10,10,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(224,60,40,0.45);
  color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:11px;font-weight:600;letter-spacing:0.04em;
  cursor:pointer;transition:all 0.2s;user-select:none;touch-action:manipulation;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  line-height:1;
}
.swipe-ai-pill:hover{background:rgba(20,20,20,0.92);border-color:var(--accent);transform:translateY(-1px)}
.swipe-ai-pill.active{background:var(--accent);border-color:var(--accent);color:white}
/* Pulsing accent-color dot — replaces the unreliable emoji rendering */
.swipe-ai-pill .ai-pill-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(224,60,40,0.6);
  animation:aiPillPulse 2s ease-in-out infinite;
}
.swipe-ai-pill.active .ai-pill-dot{background:white;box-shadow:0 0 0 0 rgba(255,255,255,0.4)}
.swipe-ai-pill .ai-pill-label{line-height:1;white-space:nowrap}
@keyframes aiPillPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,60,40,0.6);opacity:1}
  50%{box-shadow:0 0 0 5px rgba(224,60,40,0);opacity:0.8}
}
.swipe-ai-insight{
  position:absolute;top:56px;left:16px;right:16px;z-index:5;
  padding:14px 18px;border-radius:14px;
  background:linear-gradient(135deg,rgba(10,10,10,0.94),rgba(30,10,10,0.92));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(224,60,40,0.35);
  opacity:0;pointer-events:none;transform:translateY(-6px) scale(0.97);
  transition:opacity 0.25s, transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
  max-height:45%;overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,0.55);
}
.swipe-ai-insight.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.swipe-ai-insight .ai-insight-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.16em;
  color:var(--accent);margin-bottom:6px;text-transform:uppercase;font-weight:600;
}
.swipe-ai-insight p{
  color:var(--paper);font-size:13px;line-height:1.5;margin:0;font-weight:500;
}
@media(max-width:600px){
  .swipe-ai-pill{top:12px;left:12px;font-size:10px;height:26px;padding:0 11px;gap:6px}
  .swipe-ai-pill .ai-pill-dot{width:6px;height:6px}
  .swipe-ai-insight{top:46px;left:12px;right:12px;padding:12px 14px}
  .swipe-ai-insight p{font-size:12px}
}
.swipe-actions{display:flex;gap:24px;align-items:center}
/* When the deck shows loading / results / no-match instead of cards, hide the
   Skip/Like buttons — clicking them with no card under the hand is confusing
   and looks like the UI is half-broken (esp. while "Menganalisis selera kamu"
   is on screen). */
.swipe-container.swipe-done .swipe-actions{display:none}
.swipe-btn{width:64px;height:64px;border-radius:50%;border:2px solid rgba(245,241,234,0.15);background:transparent;font-size:28px;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;color:var(--paper)}
.swipe-btn:hover{transform:scale(1.12)}.swipe-btn-skip:hover{border-color:#f87171;color:#f87171;background:rgba(248,113,113,0.1)}
.swipe-btn-like:hover{border-color:var(--accent);color:var(--accent);background:rgba(224,60,40,0.1)}
.swipe-btn-info{width:48px;height:48px;font-size:20px;border-color:rgba(245,241,234,0.1)}.swipe-btn-info:hover{border-color:var(--accent);color:var(--accent)}
.swipe-empty{text-align:center;color:rgba(245,241,234,0.4);font-family:'JetBrains Mono',monospace;font-size:13px;padding:40px;width:100%}
.swipe-results{width:100%;text-align:center}
.swipe-results-title{font-family:'Instrument Serif',serif;font-size:36px;color:var(--paper);margin-bottom:6px}
.swipe-results-sub{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(245,241,234,0.4);margin-bottom:32px}
.swipe-results-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-bottom:32px}
.swipe-results-item{cursor:pointer;border-radius:16px;overflow:hidden;position:relative;aspect-ratio:2/3;transition:transform 0.3s,box-shadow 0.3s;box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.swipe-results-item:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 20px 50px rgba(0,0,0,0.6)}
.swipe-results-item img{width:100%;height:100%;object-fit:cover}
.swipe-results-item .sri-title{position:absolute;bottom:0;left:0;right:0;padding:14px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,0.9) 40%);font-size:14px;color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.3;font-weight:600}
.swipe-results-item .sri-ai-badge{
  position:absolute;top:8px;left:8px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(20,20,20,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.15);color:var(--accent);
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:0;
  pointer-events:none;
}
.swipe-ai-reasons{
  margin-top:4px;margin-bottom:32px;
  display:flex;flex-direction:column;gap:10px;
  text-align:left;
}
.swipe-ai-reasons-head{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--accent);letter-spacing:0.12em;margin-bottom:4px;
  text-align:center;
}
.swipe-ai-reason{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;border-radius:12px;
  background:rgba(20,20,20,0.55);border:1px solid rgba(255,255,255,0.06);
  transition:background 0.2s,border-color 0.2s;
  cursor:pointer;
}
.swipe-ai-reason:hover{background:rgba(25,25,25,0.8);border-color:rgba(224,60,40,0.25)}
.swipe-ai-reason-num{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:rgba(224,60,40,0.15);color:var(--accent);
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
}
.swipe-ai-reason-body{flex:1;min-width:0}
.swipe-ai-reason-title{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:13px;font-weight:600;
  color:var(--paper);margin-bottom:3px;line-height:1.3;
}
.swipe-ai-reason-why{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:12px;line-height:1.5;
  color:rgba(245,241,234,0.72);margin:0;
}
.swipe-results-none{color:rgba(245,241,234,0.35);font-size:13px;font-family:'JetBrains Mono',monospace;padding:20px 0}
.swipe-counter{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(245,241,234,0.3);letter-spacing:0.05em}
.swipe-liked-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:#4ade80;color:#000;padding:12px 24px;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-weight:600;font-size:14px;opacity:0;transition:all 0.35s;z-index:9000;pointer-events:none}
.swipe-liked-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.swipe-flash{position:fixed;inset:0;pointer-events:none;z-index:8999;opacity:0;transition:opacity 0.4s}
.swipe-flash.like{background:radial-gradient(circle at center,rgba(224,60,40,0.3),transparent 65%);opacity:1}
.swipe-flash.skip{background:radial-gradient(circle at center,rgba(150,150,150,0.28),transparent 65%);opacity:1}
.swipe-btn.bounce{animation:swipeBtnBounce 0.7s cubic-bezier(0.2,0.8,0.2,1)}
@keyframes swipeBtnBounce{0%{transform:scale(1)}20%{transform:scale(1.6) rotate(-8deg)}45%{transform:scale(0.8) rotate(6deg)}65%{transform:scale(1.2) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
.swipe-btn-like:active,.swipe-btn.tapped-like{color:var(--accent)!important;border-color:var(--accent)!important;background:rgba(224,60,40,0.18)!important;box-shadow:0 0 0 6px rgba(224,60,40,0.15),0 0 24px rgba(224,60,40,0.35)!important}
.swipe-btn-skip:active,.swipe-btn.tapped-skip{color:#f87171!important;border-color:#f87171!important;background:rgba(248,113,113,0.18)!important;box-shadow:0 0 0 6px rgba(248,113,113,0.14),0 0 24px rgba(248,113,113,0.3)!important}
.swipe-particle{position:fixed;pointer-events:none;z-index:9001;font-size:26px;will-change:transform,opacity;animation:swipeFloat 1.4s cubic-bezier(0.25,0.5,0.4,1) forwards;text-shadow:0 2px 8px rgba(0,0,0,0.4)}
@keyframes swipeFloat{
  0%{opacity:0;transform:translate(0,0) scale(0.3) rotate(0deg)}
  10%{opacity:1;transform:translate(calc(var(--dx,0) * 0.2),calc(var(--dy,-140px) * 0.15)) scale(1.1) rotate(calc(var(--dr,360deg) * 0.15))}
  60%{opacity:1;transform:translate(calc(var(--dx,0) * 0.75),calc(var(--dy,-140px) * 0.75)) scale(1) rotate(calc(var(--dr,360deg) * 0.6))}
  100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-140px)) scale(0.2) rotate(var(--dr,360deg))}
}

/* Confetti burst rings */
.swipe-ring{position:fixed;pointer-events:none;z-index:9000;border:3px solid;border-radius:50%;opacity:0.8;animation:swipeRing 0.9s ease-out forwards}
@keyframes swipeRing{
  0%{width:20px;height:20px;opacity:0.9;border-width:6px}
  100%{width:320px;height:320px;opacity:0;border-width:1px}
}

/* Card being thrown into trash / heart bucket — juicy, multi-stage */
.swipe-card.tossing-skip{animation:tossToTrash 1.05s cubic-bezier(0.34,0,0.64,1) forwards;pointer-events:none;box-shadow:0 20px 60px rgba(150,150,150,0.3)}
.swipe-card.tossing-like{animation:tossToLike 1.05s cubic-bezier(0.34,0,0.64,1) forwards;pointer-events:none;box-shadow:0 20px 60px rgba(224,60,40,0.35)}
@keyframes tossToTrash{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}
  12%{transform:translate(30px,-5px) rotate(8deg) scale(1.05);opacity:1}
  30%{transform:translate(-100px,-90px) rotate(-22deg) scale(1);opacity:1}
  55%{transform:translate(-180px,-110px) rotate(-180deg) scale(0.75);opacity:1}
  80%{transform:translate(calc(var(--tx,-280px) * 0.7),calc(var(--ty,260px) * 0.4)) rotate(-360deg) scale(0.4);opacity:0.9}
  100%{transform:translate(var(--tx,-280px),var(--ty,260px)) rotate(-720deg) scale(0.02);opacity:0}
}
@keyframes tossToLike{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}
  12%{transform:translate(-30px,-5px) rotate(-8deg) scale(1.05);opacity:1}
  30%{transform:translate(100px,-90px) rotate(22deg) scale(1);opacity:1}
  55%{transform:translate(180px,-110px) rotate(180deg) scale(0.75);opacity:1}
  80%{transform:translate(calc(var(--tx,280px) * 0.7),calc(var(--ty,260px) * 0.4)) rotate(360deg) scale(0.4);opacity:0.9}
  100%{transform:translate(var(--tx,280px),var(--ty,260px)) rotate(720deg) scale(0.02);opacity:0}
}

/* Defensive: hide any legacy swipe-target bubble (trash/heart dashed) if it appears via cache */
.swipe-target,.swipe-target-skip,.swipe-target-like{display:none!important}

/* Big stamp shown at mid-screen on swipe */
.swipe-stamp{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5) rotate(-15deg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-weight:900;font-size:120px;letter-spacing:0.08em;text-transform:uppercase;border:10px solid;padding:20px 48px;border-radius:24px;opacity:0;pointer-events:none;z-index:9002;transition:none;white-space:nowrap;text-shadow:0 8px 24px rgba(0,0,0,0.3)}
.swipe-stamp.show-like{color:var(--accent);border-color:var(--accent);background:rgba(224,60,40,0.15);animation:stampPop 1.2s cubic-bezier(0.2,0.8,0.2,1) forwards;box-shadow:0 0 60px rgba(224,60,40,0.3),inset 0 0 30px rgba(224,60,40,0.1)}
.swipe-stamp.show-skip{color:rgba(245,241,234,0.9);border-color:rgba(245,241,234,0.9);background:rgba(50,50,50,0.5);animation:stampPop 1.2s cubic-bezier(0.2,0.8,0.2,1) forwards;box-shadow:0 0 40px rgba(150,150,150,0.25)}
@keyframes stampPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.2) rotate(-30deg)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(-10deg)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(0.9) rotate(-16deg)}
  45%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(-12deg)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-14deg)}
  85%{opacity:1;transform:translate(-50%,-50%) scale(1.02) rotate(-14deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(-14deg)}
}
@media(max-width:600px){
  .genre-grid{grid-template-columns:repeat(2,1fr);padding:0 16px;gap:12px}
  .genre-card{height:150px;padding:20px}
  .genre-card-emoji{font-size:28px}
  .genre-card-name{font-size:17px}
  .genre-overlay-inner{padding:60px 16px 40px}
  .genre-overlay-title{font-size:28px}
  .genre-movie-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
  .swipe-stack,.swipe-card{width:280px;height:420px}
  .swipe-card-title{font-size:20px}
  .swipe-results-grid{grid-template-columns:repeat(6,1fr);gap:10px;row-gap:10px}
  .swipe-results-grid > .swipe-results-item:nth-child(-n+2){grid-column:span 3}
  .swipe-results-grid > .swipe-results-item:nth-child(n+3){grid-column:span 2}
  .swipe-results-grid.expanded > .swipe-results-item{grid-column:span 2}
  .swipe-results-title{font-size:24px}
  .swipe-results-item .sri-title{font-size:11px;padding:10px 8px 8px}
  .swipe-results-item{border-radius:12px}
  .swipe-results-item .sri-ai-badge{top:6px;left:6px;width:20px;height:20px;font-size:9px}
  .swipe-ai-reason{padding:10px 12px;gap:10px}
  .swipe-ai-reason-num{width:22px;height:22px;font-size:10px}
  .swipe-ai-reason-title{font-size:12px}
  .swipe-ai-reason-why{font-size:11px;line-height:1.4}
}

/* ================================================================
   FASE 7 · Theme System + Trio Pillar + IG Studio v3
   ================================================================ */

/* --- Theme toggle button (in nav) — icon-only day/night --- */
.theme-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:50%;
  background:rgba(245,241,234,0.08);color:rgba(245,241,234,0.9);
  border:1px solid rgba(245,241,234,0.14);
  cursor:pointer;transition:all .2s ease;mix-blend-mode:normal;
  font-size:16px;line-height:1;flex-shrink:0;
}
.theme-toggle-btn:hover{background:rgba(245,241,234,0.18);color:#fff;transform:rotate(12deg)}
.theme-toggle-btn .ttb-icon-dark,.theme-toggle-btn .ttb-icon-light{display:none}
.theme-toggle-btn .ttb-icon-dark{display:block}
body.theme-light .theme-toggle-btn .ttb-icon-dark{display:none}
body.theme-light .theme-toggle-btn .ttb-icon-light{display:block}
body.theme-light .theme-toggle-btn{background:rgba(26,20,8,0.08);color:#1A1408;border-color:rgba(26,20,8,0.18)}
body.theme-light .theme-toggle-btn:hover{background:rgba(26,20,8,0.16)}

/* --- Lang selector nav (compact dropdown) --- */
.lang-nav-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.lang-nav-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  width:auto;height:34px;padding:0 10px;border-radius:999px;
  background:rgba(245,241,234,0.08);color:rgba(245,241,234,0.9);
  border:1px solid rgba(245,241,234,0.14);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:all .2s ease;mix-blend-mode:normal;
  line-height:1;
}
.lang-nav-btn:hover{background:rgba(245,241,234,0.18);color:#fff}
.lang-nav-btn .lnb-flag{font-size:14px;line-height:1}
.lang-nav-btn .lnb-caret{font-size:9px;opacity:.65;margin-left:2px}
body.theme-light .lang-nav-btn{background:rgba(26,20,8,0.08);color:#1A1408;border-color:rgba(26,20,8,0.18)}
body.theme-light .lang-nav-btn:hover{background:rgba(26,20,8,0.16)}
.lang-nav-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:#14110C;border:1px solid rgba(245,241,234,0.14);
  border-radius:10px;padding:6px;display:none;flex-direction:column;gap:2px;
  min-width:140px;box-shadow:0 12px 32px rgba(0,0,0,.45);z-index:101;
}
.lang-nav-wrap.open .lang-nav-menu{display:flex}
body.theme-light .lang-nav-menu{background:#F3EEE3;border-color:rgba(26,20,8,0.14)}
.lang-nav-menu .lang-pill{
  padding:8px 12px;font-size:12px;min-height:34px;
  background:transparent;color:rgba(245,241,234,0.8);
  border:none;border-radius:6px;
  display:flex;align-items:center;gap:8px;cursor:pointer;justify-content:flex-start;
  font-family:'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  transition:background .12s ease;width:100%;text-align:left;
}
body.theme-light .lang-nav-menu .lang-pill{color:#1A1408}
.lang-nav-menu .lang-pill:hover{background:rgba(245,241,234,0.08)}
body.theme-light .lang-nav-menu .lang-pill:hover{background:rgba(26,20,8,0.08)}
.lang-nav-menu .lang-pill.active{background:var(--accent);color:#fff}
body.theme-light .lang-nav-menu .lang-pill.active{background:#B83222;color:#F3EEE3}
.lang-nav-menu .lang-pill .lang-flag{font-size:15px}
.lang-nav-menu .lang-pill .lang-code{font-weight:600}
.lang-nav-menu .lang-pill[hidden]{display:none}

@media (max-width:560px){
  .lang-nav-btn .lnb-code{display:none}
  .lang-nav-btn{padding:0 8px;min-width:34px}
}

/* --- Light Cinematic theme override ---
   Scope: body-level variables + a few hardcoded rgba fallbacks on hero/sections
   that can't be re-tokenized without mass rewrite. Light mode mimics a Criterion
   booklet / A24 press-kit feel: warm cream paper, charcoal ink, muted red+gold. */
body.theme-light{
  --ink:#1A1408;
  --paper:#F3EEE3;
  --accent:#B83222;
  --accent-soft:#F5E4DE;
  --dim:#8a8172;
  --line:rgba(26,20,8,0.14);
  --line-dark:rgba(26,20,8,0.10);
  background:#F3EEE3;color:#1A1408;
}
body.theme-light .hero{
  background:#EBE4D4;color:#1A1408;
}
/* The logged-in greeting band wraps the .ih-card. Default (dark theme) it sits
   on var(--ink) so cream text inside reads cleanly. In light theme the rest
   of the page is cream; without this override the band stayed dark while every
   .ih-* text override expects a light parent — result: dark-on-dark. */
body.theme-light .identity-hero{
  background:#EBE4D4;color:#1A1408;
}
body.theme-light .hero-title,
body.theme-light .hero-sub,
body.theme-light .hero-tag{color:#1A1408}
body.theme-light .hero-tag{color:#5a5244}
body.theme-light .hero-sub strong{color:#1A1408}
body.theme-light .hero-quiz-btn{background:#B83222;color:#F3EEE3}
body.theme-light .hero-quiz-secondary{color:#5a5244}
body.theme-light .hero-quiz-secondary:hover{color:#1A1408}
body.theme-light .hero-swipe-btn{background:#F3EEE3;border-color:rgba(184,50,34,0.35);color:#1A1408;box-shadow:0 6px 16px -8px rgba(26,20,8,0.15),inset 0 1px 0 rgba(255,255,255,0.5)}
body.theme-light .hero-swipe-btn:hover{background:#EBE4D4;border-color:#B83222;box-shadow:0 14px 30px -12px rgba(184,50,34,0.35)}
body.theme-light .hsb-label{color:#1A1408}
body.theme-light .hsb-meta{color:rgba(26,20,8,0.65)}
body.theme-light .hsb-badge{background:#B83222;color:#F3EEE3}
body.theme-light .mood-picker-hero .mood-btn{
  background:rgba(26,20,8,0.04);border:1px solid rgba(26,20,8,0.12);color:#1A1408;
}
body.theme-light .mood-picker-label .mono{color:#8a8172}
body.theme-light .hero-trust-line{background:rgba(26,20,8,0.05);border-color:rgba(26,20,8,0.12);color:rgba(26,20,8,0.75)}
body.theme-light .hero-trust-line strong{color:#1A1408}
body.theme-light .hero-trust-line a{color:#8E6A1E}
body.theme-light .hero-trust-line a:hover{color:#B83222}
/* "Gimana AI-nya kerja?" transparency link — !important because the base
   color:rgba(245,241,234,0.6) was somehow winning specificity in browser
   cascade checks against body.theme-light override */
body.theme-light .ai-transparency-link{color:rgba(26,20,8,0.72) !important}
body.theme-light .ai-transparency-link:hover{color:#8E6A1E !important}
/* Personal counter pill (green) — rebalance for cream bg */
body.theme-light .hero-personal-counter{background:rgba(0,150,60,0.1);border-color:rgba(0,150,60,0.35);color:rgba(26,20,8,0.82)}
body.theme-light .hero-personal-counter strong{color:#00963C}
body.theme-light .hero-personal-counter a{color:#8E6A1E}
body.theme-light .hero-personal-counter a:hover{color:#B83222}
body.theme-light .hpc-icon{background:#00963C}
body.theme-light .marquee{background:rgba(26,20,8,0.06);color:#1A1408;border-color:rgba(26,20,8,0.08)}
/* Non-highlighted marquee spans had color:rgba(245,241,234,0.5) (cream, dark-mode
   text) — invisible on light background. Override to muted ink. */
body.theme-light .marquee-track span{color:rgba(26,20,8,0.55)}
body.theme-light .marquee-track span.hl{color:#B83222}
body.theme-light .marquee-track span::after{color:#B83222}
body.theme-light .poster-track img{box-shadow:0 10px 40px rgba(26,20,8,0.18)}
body.theme-light .hero-visual::before{background:radial-gradient(circle,rgba(184,50,34,0.18),transparent 70%)}
body.theme-light .nav{mix-blend-mode:normal;color:#1A1408}
body.theme-light .nav .nav-logo{color:#1A1408}
body.theme-light .nav .nav-logo i{color:#B83222}
body.theme-light .nav-links a{color:#1A1408}
body.theme-light .nav-cta{background:#1A1408;color:#F3EEE3}
body.theme-light .nav-quiz-mobile,body.theme-light .nav-burger{color:#1A1408}
body.theme-light .theme-toggle-btn{
  background:rgba(26,20,8,0.06);color:#1A1408;border-color:rgba(26,20,8,0.16);
}
body.theme-light .theme-toggle-btn:hover{background:rgba(26,20,8,0.12)}
body.theme-light .sticky-bottom-nav{background:#EBE4D4;border-top-color:rgba(26,20,8,0.12)}
body.theme-light .sbn-label{color:#1A1408}
body.theme-light .sbn-primary .sbn-label{color:#B83222}
body.theme-light .discovery-modes{background:#EBE4D4;border-top-color:rgba(26,20,8,0.08);border-bottom-color:rgba(26,20,8,0.08)}
/* Trio Pillar head + copy — all the cream-on-cream invisibility bugs fixed here */
body.theme-light .dm-title{color:var(--ink)}
body.theme-light .dm-title .italic{color:#B83222}
body.theme-light .dm-sub{color:rgba(26,20,8,0.65)}
body.theme-light .dm-eyebrow{color:#B83222}
/* Cards */
body.theme-light .dm-card{background:#F3EEE3;border-color:rgba(26,20,8,0.14);color:var(--ink)}
body.theme-light .dm-card:hover{border-color:#B83222;box-shadow:0 22px 50px -18px rgba(26,20,8,0.18)}
body.theme-light .dm-card-quiz{background:linear-gradient(165deg,#F8EDE6 0%,#F3EEE3 100%);border-color:rgba(184,50,34,0.28)}
body.theme-light .dm-card-quiz:hover{border-color:rgba(184,50,34,0.7)}
body.theme-light .dm-card-title{color:var(--ink)}
body.theme-light .dm-card-desc{color:rgba(26,20,8,0.7)}
body.theme-light .dm-card-tag{color:rgba(26,20,8,0.55)}
body.theme-light .dm-card-icon{background:rgba(184,50,34,0.12);color:#B83222}
body.theme-light .dm-card-swipe .dm-card-icon{background:rgba(142,106,30,0.14);color:#8E6A1E}
body.theme-light .dm-card-cta{color:var(--ink)}
body.theme-light .dm-card:hover .dm-card-cta{color:#B83222}
body.theme-light .dm-card-foot{border-top-color:rgba(26,20,8,0.12)}
body.theme-light .dm-card-meta{color:rgba(26,20,8,0.55)}
/* Preview boxes inside cards */
body.theme-light .dm-card-preview{background:rgba(26,20,8,0.04);border-color:rgba(26,20,8,0.08)}
body.theme-light .dm-quiz-rank{color:#B83222}
body.theme-light .dm-quiz-q{color:rgba(26,20,8,0.72)}
body.theme-light .dm-quiz-line{background:linear-gradient(90deg,rgba(184,50,34,0.22) 0%,rgba(184,50,34,0.08) 65%,rgba(26,20,8,0.06) 100%)}
body.theme-light .dm-swipe-back{background:linear-gradient(165deg,#C5BBA4 0%,#8a8172 100%)}
body.theme-light .dm-swipe-mid{background:linear-gradient(165deg,#D4CBB8 0%,#8E6A1E 100%)}
body.theme-light .dm-swipe-card{border-color:rgba(26,20,8,0.1);box-shadow:0 8px 22px rgba(26,20,8,0.18)}
body.theme-light .dm-swipe-info-title{color:#F5F1EA}
body.theme-light .dm-swipe-stamp-skip{color:rgba(26,20,8,0.82);border-color:rgba(26,20,8,0.7);background:rgba(243,238,227,0.8)}
body.theme-light .dm-swipe-stamp-like{color:#B83222;border-color:#B83222;background:rgba(184,50,34,0.14)}
body.theme-light .dm-swipe-hint{color:rgba(26,20,8,0.55)}
body.theme-light .dm-swipe-hint-skip{color:rgba(26,20,8,0.6)}
body.theme-light .dm-swipe-hint-like{color:#B83222}
body.theme-light .dm-card-quiz .dm-card-desc,
body.theme-light .dm-card-swipe .dm-card-desc{color:rgba(26,20,8,0.7)}
body.theme-light .dm-badge-new{background:#B83222;box-shadow:0 4px 12px rgba(184,50,34,0.3)}
/* Footnote below the grid */
body.theme-light .dm-footnote{background:rgba(26,20,8,0.04);border-color:rgba(142,106,30,0.3);color:rgba(26,20,8,0.7)}
body.theme-light .dm-footnote-link{color:#8E6A1E}
body.theme-light .dm-footnote-link:hover{color:#B83222}

/* --- Trio Pillar (3-col discovery-modes) --- */
.discovery-modes.trio .dm-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;
}
@media (max-width:1024px){
  .discovery-modes.trio .dm-grid{grid-template-columns:1fr 1fr;gap:14px}
}
@media (max-width:700px){
  .discovery-modes.trio .dm-grid{grid-template-columns:1fr;gap:12px}
}

/* --- PWA-only horizontal slider for trio (Android/iOS standalone) ---
   On homepage in installed PWA, stack-stack-stack of 3 long cards eats screen
   real estate. Convert to a swipeable scroll-snap slider so user sees one
   pillar at a time + can flick through the other 2. Only inside .pwa-standalone
   so the regular browser layout is untouched. */
@media (max-width:700px){
  body.pwa-standalone .discovery-modes.trio .dm-grid{
    display:flex;flex-direction:row;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-padding:0 20px;
    padding:6px 20px 18px;
    margin:0 -20px;
    scrollbar-width:none;
  }
  body.pwa-standalone .discovery-modes.trio .dm-grid::-webkit-scrollbar{display:none}
  body.pwa-standalone .discovery-modes.trio .dm-grid > .dm-card{
    flex:0 0 86%;max-width:86%;scroll-snap-align:center;
  }
  /* Page-dot indicators below the slider */
  body.pwa-standalone .discovery-modes.trio .dm-inner::after{
    content:'← geser untuk lihat 3 cara →';
    display:block;text-align:center;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;
    color:rgba(245,241,234,0.4);text-transform:uppercase;
    margin-top:10px;
  }
  body.theme-light.pwa-standalone .discovery-modes.trio .dm-inner::after{
    color:rgba(26,20,8,0.5);
  }
}
.dm-badge-popular{
  position:absolute;top:10px;right:14px;
  background:var(--accent);color:#fff;
  padding:3px 10px;font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.18em;font-weight:700;
  border-radius:3px;white-space:nowrap;z-index:3;
}
body.theme-light .dm-badge-popular{background:#B83222;color:#F3EEE3}
.dm-card-quiz{position:relative}
.dm-card-roulette{
  position:relative;overflow:hidden;
}
.dm-card-roulette .dm-roulette-preview{
  position:relative;height:120px;display:flex;align-items:center;justify-content:center;
  margin:14px 0 16px;
}
.dm-roulette-wheel{
  width:96px;height:96px;border-radius:50%;
  border:2px dashed rgba(212,167,74,0.55);
  background:radial-gradient(circle at 50% 50%, rgba(212,167,74,0.18), transparent 70%);
  position:relative;
  animation:dmRouletteSpin 12s linear infinite;
}
.dm-roulette-wheel::before,
.dm-roulette-wheel::after{
  content:'';position:absolute;top:50%;left:50%;width:14px;height:14px;
  border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);
  box-shadow:0 0 18px rgba(224,60,40,.5);
}
.dm-roulette-wheel::after{
  width:80%;height:80%;background:transparent;
  border-top:2px solid rgba(245,241,234,0.25);
  border-right:2px solid rgba(212,167,74,0.4);
  border-bottom:2px solid rgba(245,241,234,0.1);
  border-left:2px solid rgba(212,167,74,0.2);
  box-shadow:none;
}
body.theme-light .dm-roulette-wheel{border-color:rgba(142,106,30,0.5)}
body.theme-light .dm-roulette-wheel::before{background:#B83222;box-shadow:0 0 18px rgba(184,50,34,0.35)}
@keyframes dmRouletteSpin{to{transform:rotate(360deg)}}

/* --- IG Picker overlay (Fase 7 IG Studio v3) --- */
.ig-picker-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(10,8,6,0.94);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:none;align-items:flex-start;justify-content:center;
  padding:24px 20px;overflow-y:auto;
}
.ig-picker-overlay.active{display:flex}
.ig-picker-inner{
  max-width:980px;width:100%;
  background:#0e0c09;border:1px solid rgba(245,241,234,0.08);
  border-radius:18px;padding:32px 28px 28px;
  position:relative;color:#f5f1e8;
  /* margin:auto centers the modal vertically when the viewport has room
     (no more huge dark void below the picker on tall screens) and falls
     back to flex-start scroll when the content overflows — the broken
     "align-items:center + overflow-y:auto" combo silently clips the top
     and the user can't scroll up. */
  margin:auto;
}
.ig-picker-close{
  position:absolute;top:14px;right:14px;width:36px;height:36px;
  border-radius:50%;background:rgba(245,241,234,0.08);color:#f5f1e8;
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.ig-picker-close:hover{background:rgba(245,241,234,0.16)}
.ig-picker-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.22em;color:#E03C28;text-transform:uppercase;margin-bottom:10px;
}
.ig-picker-title{
  font-family:'Instrument Serif',serif;font-size:30px;line-height:1.1;
  margin:0 0 8px;letter-spacing:-.01em;
}
.ig-picker-title em{font-style:italic;color:#D4A74A}
.ig-picker-sub{
  font-size:13px;color:#a9a396;line-height:1.55;margin:0 0 20px;max-width:60ch;
}
.ig-picker-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
@media (max-width:1024px){.ig-picker-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){
  /* Mobile: horizontal-swipe carousel instead of long vertical scroll.
     12 templates stacked 1-per-row was 12 screens of scroll — now it's a
     single swipeable rail with snap-to-card. */
  .ig-picker-grid{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;scroll-snap-stop:always;
    scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:-20px;margin-right:-20px;
    padding:18px 18vw 28px;
    /* Side padding pushes first/last cards into the centered snap zone */
    overscroll-behavior-x:contain;
  }
  .ig-picker-grid::-webkit-scrollbar{display:none}
  .ig-picker-grid > .ig-tpl-card{
    flex:0 0 62vw;max-width:260px;
    scroll-snap-align:center;scroll-snap-stop:always;
    transform-origin:50% 50%;
    transform:scale(.84) translateZ(0);
    opacity:.42;
    filter:saturate(.7);
    transition:
      transform .55s cubic-bezier(.34,1.46,.55,1),
      opacity .42s ease,
      filter .42s ease,
      box-shadow .42s ease,
      border-color .25s ease;
    will-change:transform,opacity;
    animation:igPickerCardIn .55s cubic-bezier(.16,1,.3,1) both;
  }
  .ig-picker-grid > .ig-tpl-card.is-snap-center{
    transform:scale(1) translateZ(0);
    opacity:1;
    filter:saturate(1);
    box-shadow:0 18px 48px rgba(224,60,40,.28),0 6px 18px rgba(0,0,0,.45);
  }
  .ig-picker-grid > .ig-tpl-card.selected{opacity:1;filter:saturate(1)}
  .ig-picker-grid > .ig-tpl-card:active{
    transform:scale(.92) translateZ(0);
    transition:transform .14s cubic-bezier(.4,0,.6,1);
  }
  .ig-picker-grid > .ig-tpl-card.is-snap-center:active{
    transform:scale(.96) translateZ(0);
  }
  /* Stagger the entrance fade-in */
  .ig-picker-grid > .ig-tpl-card:nth-child(1){animation-delay:.02s}
  .ig-picker-grid > .ig-tpl-card:nth-child(2){animation-delay:.07s}
  .ig-picker-grid > .ig-tpl-card:nth-child(3){animation-delay:.12s}
  .ig-picker-grid > .ig-tpl-card:nth-child(4){animation-delay:.17s}
  .ig-picker-grid > .ig-tpl-card:nth-child(5){animation-delay:.22s}
  .ig-picker-grid > .ig-tpl-card:nth-child(6){animation-delay:.27s}
  .ig-picker-grid > .ig-tpl-card:nth-child(n+7){animation-delay:.32s}
}
@keyframes igPickerCardIn{
  from{opacity:0;transform:scale(.7) translateY(24px)}
  60%{opacity:.6}
  to{opacity:.42;transform:scale(.84) translateY(0)}
}
@media (max-width:460px){
  .ig-picker-grid{padding-left:16vw;padding-right:16vw}
  .ig-picker-grid > .ig-tpl-card{flex-basis:70vw}
}
@media (prefers-reduced-motion:reduce){
  .ig-picker-grid > .ig-tpl-card{
    animation:none;transition:opacity .2s ease,box-shadow .2s ease;
    transform:none;opacity:1;filter:none;
  }
  .ig-picker-grid{scroll-behavior:auto}
}
.ig-tpl-card{
  display:flex;flex-direction:column;gap:8px;
  padding:10px;background:#14110C;border:1px solid rgba(245,241,234,0.08);
  border-radius:12px;cursor:pointer;transition:all .2s ease;
  text-align:left;
}
.ig-tpl-card:hover{border-color:#E03C28;transform:translateY(-2px)}
.ig-tpl-card.selected{border-color:#D4A74A;box-shadow:0 0 0 2px rgba(212,167,74,.3)}
.ig-tpl-thumb{
  aspect-ratio:9/16;border-radius:8px;overflow:hidden;
  background:#0a0907;position:relative;
}
.ig-tpl-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:6px;padding:2px 2px 0}
.ig-tpl-meta-l{flex:1;min-width:0}
.ig-tpl-name{
  font-family:'Instrument Serif',serif;font-size:15px;line-height:1;color:#f5f1e8;
  margin-bottom:2px;
}
.ig-tpl-desc{
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.14em;
  color:#6b6658;text-transform:uppercase;
}
.ig-tpl-cta-badge{
  font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.12em;
  color:#D4A74A;text-transform:uppercase;white-space:nowrap;
  padding:2px 5px;border:1px solid rgba(212,167,74,.3);border-radius:3px;
}
.ig-picker-actions{
  display:flex;gap:10px;justify-content:flex-end;margin-top:22px;
  padding-top:16px;border-top:1px solid rgba(245,241,234,0.08);
}
.ig-picker-btn-primary{
  padding:11px 20px;background:#E03C28;color:#f5f1e8;border:none;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
  font-weight:700;text-transform:uppercase;cursor:pointer;border-radius:3px;
  transition:all .15s ease;
}
.ig-picker-btn-primary:hover{background:#c52d1b}
.ig-picker-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.ig-picker-btn-ghost{
  padding:11px 18px;background:transparent;color:#a9a396;border:1px solid rgba(245,241,234,0.18);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;border-radius:3px;
}
.ig-picker-btn-ghost:hover{color:#f5f1e8;border-color:rgba(245,241,234,0.32)}

/* --- Customizer: lets user pick which films appear in the poster --- */
.ig-picker-customizer{
  margin:18px 0 22px;padding:14px 16px;background:rgba(245,241,234,0.04);
  border:1px solid rgba(245,241,234,0.08);border-radius:10px;
}
.ig-cust-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:12px}
.ig-cust-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  color:#D4A74A;text-transform:uppercase;
}
.ig-cust-hint{font-size:11px;color:#a9a396;font-style:italic}
.ig-cust-strip{
  display:flex;gap:8px;overflow-x:auto;padding:4px 2px 6px;
  scrollbar-width:thin;scrollbar-color:rgba(245,241,234,0.2) transparent;
}
.ig-cust-strip::-webkit-scrollbar{height:6px}
.ig-cust-strip::-webkit-scrollbar-thumb{background:rgba(245,241,234,0.2);border-radius:3px}
.ig-cust-film{
  position:relative;flex-shrink:0;width:54px;height:80px;
  background:#14110C;border:2px solid rgba(245,241,234,0.12);border-radius:6px;
  overflow:hidden;cursor:pointer;padding:0;transition:all .15s ease;
}
.ig-cust-film:hover{border-color:rgba(212,167,74,0.6);transform:translateY(-2px)}
.ig-cust-film.selected{border-color:#E03C28;box-shadow:0 0 0 2px rgba(224,60,40,.25)}
.ig-cust-film img{width:100%;height:100%;object-fit:cover;display:block}
.ig-cust-fallback{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-family:'Instrument Serif',serif;font-size:24px;color:rgba(245,241,234,0.4);
}
.ig-cust-rank{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#E03C28;color:#fff;font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  z-index:2;box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.ig-cust-empty{
  font-size:12px;color:#6b6658;font-style:italic;padding:18px 4px;text-align:center;
  font-family:'Instrument Serif',serif;width:100%;
}

/* === RITE OF THE REEL — single-film customizer panel === */
/* Treated like a museum chroma chip + contact sheet, not a settings panel.
   Uses mono labels at clinical small sizes and Pantone-style swatches. */
.ig-picker-customizer .rc-row{display:flex;flex-direction:column;gap:10px;padding:10px 0;border-top:1px solid rgba(245,241,234,0.06)}
.ig-picker-customizer .rc-row:first-child{border-top:0;padding-top:4px}
.rc-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;
  color:#D4A74A;text-transform:uppercase;font-weight:700;display:flex;
  align-items:baseline;gap:8px;
}
.rc-hint{font-size:9.5px;letter-spacing:.08em;color:rgba(245,241,234,0.45);font-weight:400;text-transform:none;font-style:italic}
.rc-images{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;
  scrollbar-width:thin;scrollbar-color:rgba(245,241,234,0.2) transparent;
}
.rc-images::-webkit-scrollbar{height:6px}
.rc-images::-webkit-scrollbar-thumb{background:rgba(245,241,234,0.2);border-radius:3px}
.rc-img{
  position:relative;flex-shrink:0;width:64px;height:96px;
  background:#14110C;border:2px solid rgba(245,241,234,0.14);border-radius:6px;
  overflow:hidden;cursor:pointer;padding:0;transition:all .18s ease;
}
.rc-img.rc-img-wide{width:120px;height:68px}
.rc-img:hover{border-color:rgba(212,167,74,0.7);transform:translateY(-2px)}
.rc-img.active{border-color:#E03C28;box-shadow:0 0 0 2px rgba(224,60,40,.28),0 6px 18px rgba(224,60,40,.16)}
.rc-img img{width:100%;height:100%;object-fit:cover;display:block}
.rc-img-tag{
  position:absolute;top:3px;left:3px;background:rgba(10,9,7,.82);color:#D4A74A;
  font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.16em;
  padding:2px 4px;border-radius:3px;font-weight:700;line-height:1;
  text-transform:uppercase;
}
.rc-img.active .rc-img-tag{background:#E03C28;color:#fff}
.rc-img-tag-upload{background:#7CC9A1 !important;color:#0a3a1a !important}
.rc-img.active .rc-img-tag-upload{background:#E03C28 !important;color:#fff !important}
/* Upload button — same footprint as a poster swatch but with a + icon */
.rc-img-upload{
  background:rgba(245,241,234,0.04);border-style:dashed;border-color:rgba(245,241,234,0.3);
  display:flex;align-items:center;justify-content:center;
}
.rc-img-upload:hover{background:rgba(212,167,74,0.08);border-color:rgba(212,167,74,0.7)}
.rc-upload-inner{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:rgba(245,241,234,0.65);transition:color .18s;
}
.rc-img-upload:hover .rc-upload-inner{color:#D4A74A}
.rc-upload-label{
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.22em;font-weight:700;
}
body.theme-light .rc-img-upload{background:rgba(26,20,8,0.04);border-color:rgba(26,20,8,0.28)}
body.theme-light .rc-upload-inner{color:rgba(26,20,8,0.6)}
.rc-loading{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(245,241,234,0.4);
  padding:12px 4px;letter-spacing:.18em;text-transform:uppercase;
}
.rc-colors{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px}
.rc-chip{
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;
  background:rgba(245,241,234,0.04);border:1.5px solid rgba(245,241,234,0.12);
  border-radius:999px;cursor:pointer;transition:all .18s ease;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  color:rgba(245,241,234,0.7);text-transform:uppercase;font-weight:700;
}
.rc-chip:hover{border-color:rgba(245,241,234,0.32);color:#f5f1e8}
.rc-chip.active{border-color:var(--swatch);background:rgba(245,241,234,0.06);color:#f5f1e8;box-shadow:0 0 0 2px rgba(255,255,255,.04),0 4px 12px rgba(0,0,0,.4)}
.rc-chip-swatch{
  width:18px;height:18px;border-radius:50%;background:var(--swatch);
  flex-shrink:0;border:1.5px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
.rc-chip-name{line-height:1}
body.theme-light .rc-label{color:#7c5a14}
body.theme-light .rc-hint{color:rgba(26,20,8,0.5)}
body.theme-light .rc-img{background:#f0ebe0;border-color:rgba(26,20,8,0.18)}
body.theme-light .rc-chip{background:rgba(26,20,8,0.04);border-color:rgba(26,20,8,0.16);color:rgba(26,20,8,0.7)}
body.theme-light .rc-chip.active{color:#1a1408}
body.theme-light .rc-loading{color:rgba(26,20,8,0.5)}

/* --- Thumbnail mini-renderers (just visual hint in picker grid) --- */
.ig-thumb-base{position:absolute;inset:0;color:#f5f1e8;overflow:hidden;padding:10px 8px}
.ig-thumb-title{
  font-family:'Instrument Serif',serif;font-size:10px;text-align:center;line-height:1.1;
}
.ig-thumb-title em{font-style:italic;color:#E03C28}
.ig-thumb-title em.gold{color:#D4A74A}
.ig-thumb-footer{
  position:absolute;left:6px;right:6px;bottom:10px;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:5px;letter-spacing:.14em;color:#f5f1e8;
}
.ig-thumb-cta{
  display:inline-block;background:#E03C28;color:#f5f1e8;
  padding:2px 6px;font-weight:700;margin-top:2px;
}