*{box-sizing:border-box;margin:0;padding:0}
:root{
  --y:#f5c518; --y2:rgba(245,197,24,.12); --yg:rgba(245,197,24,.5);
  --v:#7c3aed; --v2:rgba(124,58,237,.16); --vl:#a78bfa; --vg:rgba(124,58,237,.5);
  --b0:#050508; --b1:#0a0a12; --b2:#0f0f1c; --b3:#161626; --b4:#1e1e32; --b5:#252540;
  --t1:#f1f0ff; --t2:#b4b0d8; --t3:#938fb0;
  --r:10px; --r2:14px; --r3:20px;
  --expo:cubic-bezier(0.16,1,0.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --smooth:cubic-bezier(0.2,0,0,1);
}
html{scroll-behavior:smooth}
body{background:var(--b0);color:var(--t1);font-family:'DM Sans',sans-serif;overflow-x:hidden;min-height:100vh;}
h1,h2,h3,.sec-title,.logo-text,.spin-btn,.trend-title,.trend-btn{font-family:'Syne',sans-serif}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(18, 18, 20, 0.4);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--v) 0%, var(--vl) 100%);
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--vl);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size:180px;opacity:.4;
}

/* ── NAVBAR ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:0 48px;height:62px;
  display:flex;align-items:center;gap:28px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--smooth),border-color .4s var(--smooth),backdrop-filter .4s var(--smooth),-webkit-backdrop-filter .4s var(--smooth),transform .35s var(--smooth);
}
#nav.nav-hidden{
  transform:translateY(-100%);
}
body.hero-video-active #nav {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.hero-video-active .tiktok-nav {
  transform: translateY(200%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.hero-video-active {
  overflow: hidden !important;
}
#nav.solid, #nav.scrolled{
  background:rgba(5,5,8,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.theme-toggle-btn {
  position: relative;
  width: 36px;
  height: 36px;
  margin-right: 14px;
  border-radius:8px; corner-shape: squircle; /* elegant rounded rectangle */
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: #f8fafc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--smooth);
  overflow: hidden;
}
.theme-toggle-btn:hover {
  background: rgba(255,255,255,0.1);
  transform: scale(1.05);
}
.theme-toggle-btn i {
  position: absolute;
  font-size: 16px;
  transition: all .2s var(--smooth);
}
.theme-toggle-btn .fa-sun {
  opacity: 0;
  transform: translateY(20px) rotate(45deg);
}
.theme-toggle-btn .fa-moon {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

body.light-theme .theme-toggle-btn {
  color: #0f172a;
  border-color: rgba(0,0,0,0.1);
}
body.light-theme .theme-toggle-btn:hover {
  background: rgba(0,0,0,0.05);
}
body.light-theme .theme-toggle-btn .fa-moon {
  opacity: 0;
  transform: translateY(-20px) rotate(-45deg);
}
body.light-theme .theme-toggle-btn .fa-sun {
  opacity: 1;
  transform: translateY(0) rotate(0);
}
body.light-theme {
  --b0:#f7f8ff;
  --b1:#ffffff;
  --b2:#f1f3fb;
  --b3:#eef1fb;
  --b4:#d8dce9;
  --b5:#c4c9d8;
  --t1:#111827;
  --t2:#475569;
  --t3:#64748b;
  --v:#5b21b6;
  --v2:rgba(91,33,182,.12);
  --vl:#7c3aed;
  --vg:rgba(124,58,237,.16);
  --y:#f59e0b;
  --y2:rgba(245,158,11,.12);
  --yg:rgba(245,158,11,.35);
}
body.light-theme #nav.solid,
body.light-theme #nav.scrolled {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
body.light-theme .logo-text {
  color: var(--t1);
}
body.light-theme .theme-toggle-btn {
  border-color: rgba(15,23,42,.16);
  background: rgba(15,23,42,.05);
  color: var(--t1);
}
body.light-theme .profile-dropdown {
  background: #ffffff;
  border-color: rgba(15,23,42,.08);
  box-shadow: 0 20px 40px rgba(15,23,42,.08);
}
body.light-theme .pd-item {
  color: var(--t2);
}
body.light-theme .pd-item:hover {
  background: rgba(15,23,42,.05);
  color: var(--t1);
}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-icon{width:30px;height:30px;border-radius:7px; corner-shape: squircle;background:var(--y);display:flex;align-items:center;justify-content:center;}
.logo-icon i{color:#000;font-size:14px}
.logo-text{font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--t1)}
.logo-text em{color:var(--y);font-style:normal}
.nav-links{display:flex;margin-left:4px}
.nav-right{margin-left:auto;display:flex;align-items:center}

/* ── PILL NAV (React Bits) ── */
.pill-nav-items {
  --nav-h: 38px;
  --pill-pad-x: 18px;
  --pill-gap: 3px;
  position: relative;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
  padding: 3px;
}

.pill-list {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: var(--pill-gap);
  margin: 0;
  padding: 0;
  height: 100%;
}

.pill-list > li {
  display: flex;
  height: 100%;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 var(--pill-pad-x);
  background: transparent;
  color: var(--t2);
  text-decoration: none;
  border-radius: 9999px;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .2s var(--smooth);
}

.pill .hover-circle {
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 50%;
  background: var(--y);
  z-index: 1;
  display: block;
  pointer-events: none;
  will-change: transform;
}

.pill .label-stack {
  position: relative;
  display: inline-block;
  line-height: 1;
  z-index: 2;
  height: 13px;
  overflow: visible;
}

.pill .pill-label {
  position: relative;
  z-index: 2;
  display: inline-block;
  line-height: 1;
  will-change: transform;
}

.pill .pill-label-hover {
  position: absolute;
  left: 0;
  top: 0;
  color: #000000;
  z-index: 3;
  display: inline-block;
  will-change: transform, opacity;
}

/* Style active pill as solid yellow capsule with dark text */
.pill.active::after, .pill.is-active::after {
  content: none;
}
.pill.active, .pill.is-active {
  background: var(--y);
  color: #000000;
}
.pill.active .pill-label, .pill.is-active .pill-label {
  color: #000000;
}
.nav-search{
  flex:1;max-width:280px;margin-left:auto;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:24px; corner-shape: squircle;padding:8px 16px;
  display:flex;align-items:center;gap:8px;
  transition:all .3s var(--smooth);
}
.nav-search:focus-within{background:var(--v2);border-color:rgba(124,58,237,.45);box-shadow:0 0 0 3px rgba(124,58,237,.1);}
.nav-search input{background:transparent;outline:none;border:none;color:var(--t1);font-size:13px;width:100%;font-family:inherit}
.nav-search input::placeholder{color:var(--t3)}
/* ─── TIKTOK STYLE BOTTOM NAV ─── */
/* ── TIKTOK-NAV INLINE SEARCH PANEL ── */
/* Centered modal with blurred overlay when Search is tapped */
.tt-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  animation: overlay-fade-in .15s var(--smooth) both;
}

@keyframes overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tt-search-panel {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 480px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: panel-scale-in .15s cubic-bezier(.34,1.3,.64,1) both;
}

@keyframes panel-scale-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.tt-search-panel-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 18, 20, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius:24px; corner-shape: squircle;
  padding: 8px 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-by-plot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--t2);
  border-radius:20px; corner-shape: squircle;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s var(--smooth);
}
.btn-by-plot:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.4);
  color: var(--vl);
}
.btn-by-plot.active {
  background: linear-gradient(135deg, var(--v) 0%, #a855f7 100%);
  border-color: rgba(168, 85, 247, 0.6);
  color: #fff;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
}
.btn-by-plot i {
  font-size: 11px;
}
/* The search wrapper inside the panel fills remaining space */
.tt-search-panel .tt-search-wrapper {
  flex: 1;
  margin-bottom: 0;
  max-width: none;
  z-index: auto; /* inherits panel z-index */
}
/* Suggestions dropdown inside panel — positioned relative to the wrapper */
.tt-search-panel .search-suggestions-dropdown {
  top: calc(100% + 8px);
  bottom: auto;
  border-radius:16px; corner-shape: squircle;
}
/* Clear button inside input */
.tt-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--t3);
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  line-height: 1;
  transition: color .15s;
}
.tt-search-clear:hover { color: var(--t1); }
/* Close (×) button on the right of the panel */
.tt-search-panel-close {
  background: transparent;
  border: none;
  color: var(--t3);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  transition: color .15s;
  line-height: 1;
}
.tt-search-panel-close:hover { color: var(--t1); }
/* Taste tuner when it opens from the panel */
.tt-search-panel .taste-tuner-drawer {
  margin-top: 8px;
  border-radius:18px; corner-shape: squircle;
  background: rgba(18, 18, 20, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.tiktok-nav {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 400px;
  background: rgba(18, 18, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius:40px; corner-shape: squircle;
  padding: 8px 16px;
  z-index: 1000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}

.tt-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius:20px; corner-shape: squircle;
  color: var(--t3);
  text-decoration: none;
  transition: all .15s var(--smooth);
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
}

.tt-item:hover {
  color: var(--t2);
}

.tt-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.tt-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.tt-icon-wrap svg {
  width: 22px;
  height: 22px;
  transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tt-item.active .tt-icon-wrap svg {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
}

.tt-label {
  font-size:12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.8;
}

.tt-item.active .tt-label {
  opacity: 1;
}

.tt-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  border: 2px solid rgba(18, 18, 20, 0.9);
}

/* SEARCH WRAPPER */
.tt-search-wrapper {
  position: relative;
  margin-bottom: 24px;
  max-width: 600px;
  z-index: 600;
}
.tt-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  font-size: 14px;
}
.tt-search-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius:30px; corner-shape: squircle;
  padding: 14px 16px 14px 40px;
  color: var(--t1);
  font-size: 15px;
  font-family: inherit;
  transition: all .15s var(--smooth);
  outline: none;
}
.tt-search-input:focus {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
}
.watchlist-btn {
  display:flex;align-items:center;gap:7px;
  background:var(--y2);border:1px solid rgba(245,197,24,.3);
  border-radius:24px; corner-shape: squircle;padding:7px 16px;
  font-size:12px;font-weight:700;color:var(--y);
  cursor:pointer;transition:all .25s var(--smooth);font-family:'Syne',sans-serif;
}
.watchlist-btn:hover{background:rgba(245,197,24,.2);box-shadow:0 0 20px rgba(245,197,24,.2)}
.watchlist-badge{
  background:var(--y);color:#000;font-size:12px;font-weight:900;
  width:17px;height:17px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  transition:transform .35s var(--spring);
}
.watchlist-badge.bump{transform:scale(1.55)}
.avatar{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(124,58,237,.35);cursor:pointer;
  transition:border-color .25s var(--smooth),transform .25s var(--smooth);
}
.avatar:hover{border-color:var(--vl);transform:scale(1.05)}

/* ── HERO ── */
#hero{position:relative;height:92vh;min-height:580px;overflow:hidden}
.hero-img{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1534809027769-b00d750a6bac?w=1800&q=85') center/cover no-repeat;
  transform:scale(1.06);animation:hzoom 24s var(--smooth) infinite alternate;will-change:transform;
}
@keyframes hzoom{from{transform:scale(1.06)}to{transform:scale(1.12)}}
.hero-fade{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,5,8,.1) 0%,rgba(5,5,8,.0) 30%,rgba(5,5,8,.65) 68%,var(--b0) 100%);
}
.hero-side{position:absolute;inset:0;background:linear-gradient(to right,rgba(5,5,8,.88) 0%,rgba(5,5,8,.25) 55%,transparent 100%)}

/* Hero Inline Video Player */
.hero-video-container {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-video-container.hidden {
  display: none !important;
}
.hero-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.video-top-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 45;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}
.hero-video-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2010;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 15, 25, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, color 0.2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}
.hero-video-container:hover .video-top-overlay,
.hero-video-container:hover .hero-video-close,
.m-hero:hover .video-top-overlay,
.m-hero:hover .m-close,
.video-top-overlay:hover,
.video-top-overlay:hover ~ .hero-video-close,
.video-top-overlay:hover ~ .m-close {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.hero-video-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  color: var(--y);
}

.hero-content{position:absolute;bottom:90px;left:64px;right:64px;animation:hfade .9s var(--expo) both;}
@keyframes hfade{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.match-chip {
  display: none;
}
.hero-title {
  font-size: clamp(44px, 6.5vw, 76px);
  font-weight: 800;
  letter-spacing: -2.5px;
  line-height: .93;
  margin-bottom: 14px;
  font-family: 'Syne', sans-serif;
  background: linear-gradient(135deg, #ffffff 20%, #c4c0e8 65%, var(--vl) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 30px rgba(124, 58, 237, 0.15);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.hero-title .title-word {
  display: block;
  white-space: nowrap;
  overflow: visible;
}
.hero-sub{font-size:13px;color:var(--t2);margin-bottom:14px;letter-spacing:.02em}
.hero-synopsis{font-size:14px;line-height:1.75;color:#c4c0e8;margin-bottom:22px;max-width:420px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.why-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--v2);border:1px solid rgba(124, 58, 237,.35);
  border-radius:20px; corner-shape: squircle;padding:5px 14px;font-size:12px;color:var(--vl);margin-bottom:26px;
}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}

/* ── HERO AUTO-ROTATION: dots ── */
.hero-dots {
  position: absolute;
  bottom: 18px;
  right: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background .2s var(--smooth), width .2s cubic-bezier(.34,1.56,.64,1), border-radius .2s var(--smooth);
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.hero-dot.active {
  background: var(--y);
  width: 22px;
  border-radius:3px; corner-shape: squircle;
}
.hero-dot:hover:not(.active) {
  background: rgba(255,255,255,0.6);
}

/* ── HERO CUSTOM CURSOR with PROGRESS RING ── */
#hero { cursor: default; }
#hero.hero-hover-active { cursor: none; }

/* Hide cursor on hero interactive elements so the custom cursor is seamless */
#hero.hero-hover-active .hero-content,
#hero.hero-hover-active .hero-content * ,
#hero.hero-hover-active .hero-dots,
#hero.hero-hover-active .hero-dots * {
  cursor: none !important;
}

.hero-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(12, 12, 22, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate3d(-100px, -100px, 0) scale(0.5);
  transition: opacity 0.15s var(--smooth);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}
.hero-cursor.visible {
  opacity: 1;
}
.hero-cursor.clicking {
  /* instant feedback on click */
}
.hero-cursor-icon {
  position: relative;
  z-index: 2;
  font-size: 14px;
  color: var(--t1);
  transition: transform 0.25s var(--spring), color 0.2s var(--smooth);
}
/* Flip arrow for left side */
.hero-cursor.cursor-left .hero-cursor-icon {
  transform: rotate(180deg);
}

/* SVG Progress Ring */
.hero-progress-ring {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.hero-progress-ring .ring-bg {
  fill: none;
  stroke: rgba(124, 58, 237, 0.18);
  stroke-width: 2.5;
}
.hero-progress-ring .ring-fill {
  fill: none;
  stroke: var(--vl);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 169.646; /* 2 * pi * 27 */
  stroke-dashoffset: 169.646;
  transition: stroke-dashoffset 0.08s linear;
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.5));
}
/* Complete state — flash gold */
.hero-cursor.ring-complete .ring-fill {
  stroke: var(--y);
  filter: drop-shadow(0 0 8px rgba(245, 197, 24, 0.6));
}
.hero-cursor.ring-complete .hero-cursor-icon {
  color: var(--y);
}

@media (max-width: 768px) {
  .hero-cursor { display: none !important; }
  .hero-dots { right: 24px !important; left: auto !important; transform: none !important; }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--y) 0%, #ffd700 100%);
  color: #000;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .03em;
  border-radius:30px; corner-shape: squircle;
  padding: 12px 28px;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 15px rgba(245, 197, 24, 0.2);
  transition: all .25s var(--spring);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 25px rgba(245, 197, 24, 0.4), 0 0 0 4px rgba(245, 197, 24, 0.15);
}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--t1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
  font-size: 13px;
  border-radius:30px; corner-shape: squircle;
  padding: 12px 24px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .25s var(--smooth);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}
.btn-secondary.added{background:var(--y);color:#000;border-color:var(--y)}
.btn-secondary.added:hover{background:#f9d44a}
.btn-icon{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  cursor:pointer;color:var(--t1);font-size:14px;transition:all .22s var(--smooth);
}
.btn-icon:hover, .btn-icon.added{background:var(--y2);border-color:rgba(245,197,24,.45);color:var(--y)}

/* ── MAIN ── */
main{background:var(--b0);padding:0 48px 100px;position:relative;z-index:2}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.sec-title{
  font-size:18px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:10px;
  position: relative;
  padding-left: 14px;
}
.sec-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: var(--y);
  border-radius:4px; corner-shape: squircle;
}
.sec-sub{font-size:12px;color:var(--t3);margin-top:4px;font-weight:400}
.sec-tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:4px; corner-shape: squircle;}
.tag-yellow{background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.28);color:var(--y)}
.tag-violet{background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.28);color:var(--vl)}
.tag-hot{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#f87171}
.see-all{font-size:12px;font-weight:600;color:var(--t2);text-decoration:none;display:flex;align-items:center;gap:4px;transition:color .2s var(--smooth);}
.see-all:hover{color:var(--y)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--expo),transform .6s var(--expo)}
.reveal.in{opacity:1;transform:none}

/* ══════════════════════════════════════
   MOVIE ROW CARDS
   Popup is a SHARED FLOATING element positioned by JS
   so it is never clipped by overflow:hidden/auto
══════════════════════════════════════ */
.row-wrap{position:relative;padding:0;}
.row-scroll{
  display:flex;gap:4px;
  overflow-x:auto;overflow-y:visible;
  padding:20px 4px 24px;scrollbar-width:none;
  scroll-behavior:auto;
}
.row-scroll::-webkit-scrollbar{display:none}

.movie-card {
  flex:0 0 168px;border-radius:8px; corner-shape: squircle;overflow:visible;
  cursor:pointer;position:relative;z-index:1;
  transition:z-index 0s .2s;
  will-change: transform, opacity, z-index;
}
.movie-card.card-is-expanded,
.movie-card.selected-card { z-index:500; transition:z-index 0s 0s; }

/* ── BASE POSTER THUMB ── */
.card-thumb{
  width:168px;aspect-ratio:2/3;height:auto;border-radius:8px; corner-shape: squircle;overflow:hidden;
  position:relative;background:var(--b3);border:1px solid rgba(255,255,255,.06);
  transition:border-color .3s var(--smooth), box-shadow .3s var(--smooth);
  will-change:transform;
}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.m-badge{
  position:absolute;top:8px;left:8px;z-index:3;
  display:flex;align-items:center;gap:4px;
  font-size:12px;font-weight:700;color:#fff;
  background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.12);
  border-radius:6px; corner-shape: squircle;padding:3px 7px;letter-spacing:.02em;font-family:'DM Sans',sans-serif;
  white-space:nowrap;line-height:1;
  transition:opacity .2s var(--smooth);
}
.movie-card.card-is-expanded .m-badge { opacity:0; }

.person-badge {
  position: absolute; bottom: 8px; left: 8px; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  font-size:12px; font-weight: 600; color: var(--y);
  background: rgba(15, 10, 25, 0.85); border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius:4px; corner-shape: squircle; padding: 2px 6px; letter-spacing: .02em; font-family: 'DM Sans', sans-serif;
  white-space: nowrap; line-height: 1.2; pointer-events: none;
  transition: opacity .2s var(--smooth);
}
.movie-card.card-is-expanded .person-badge { opacity: 0; }

.m-stars-inline{
  color:#FFD700;
  font-size:12px;
  letter-spacing:-0.5px;
  line-height:1;
}
.card-quick-add{
  position:absolute;top:8px;right:8px;z-index:3;
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.72);border:1.5px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--t1);cursor:pointer;
  opacity:0;transform:scale(.6);
  transition:opacity .2s var(--smooth),transform .25s var(--spring),background .2s,border-color .2s;
}
.movie-card:hover .card-quick-add,
.movie-card.selected-card .card-quick-add { opacity:1; transform:scale(1); }
.card-quick-add:hover,.card-quick-add.added { background:var(--y);border-color:var(--y);color:#000; }

/* ══════════════════════════════════════
   IN-CARD EXPAND PANEL
   Absolutely positioned, grows the card in-place over neighbours.
   The card wrapper keeps its original 168×240 footprint — no layout shift.
══════════════════════════════════════ */
.card-expand {
  position:absolute;
  top:0; left:0;
  width:240px;
  background:var(--b3);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px; corner-shape: squircle;
  overflow:hidden;
  box-shadow:0 28px 60px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06);
  transform-origin:top center;
  transform:scaleX(0.7) scaleY(0.85) translateY(0px);
  opacity:0;
  pointer-events:none;
  transition:
    transform .32s cubic-bezier(.22,.68,0,1.15),
    opacity .22s var(--smooth),
    box-shadow .3s var(--smooth);
  will-change:transform,opacity;
  /* horizontally centred over the 168px card */
  margin-left:calc((168px - 240px)/2);
}

/* Shift expand panel left when card is near right edge of viewport */
.movie-card.expand-left .card-expand,
.trend-card.expand-left .card-expand,
.plat-card.expand-left .card-expand {
  transform-origin:top right;
}
.movie-card.expand-right .card-expand,
.trend-card.expand-right .card-expand,
.plat-card.expand-right .card-expand {
  transform-origin:top left;
}
/* movie-card edge margin overrides */
.movie-card.expand-left .card-expand  { margin-left:calc(168px - 240px); }
.movie-card.expand-right .card-expand { margin-left:0; }

.movie-card.card-is-expanded .card-expand,
.trend-card.card-is-expanded .card-expand,
.plat-card.card-is-expanded .card-expand {
  transform:scaleX(1) scaleY(1) translateY(0px);
  opacity:1;
  pointer-events:all;
}

/* Poster strip at top of expand panel */
.ce-poster {
  position:relative;
  width:100%;
  height:134px;
  overflow:hidden;
  flex-shrink:0;
}
.ce-poster img {
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--expo);
  will-change: transform;
}
.movie-card.card-is-expanded .ce-poster img,
.trend-card.card-is-expanded .ce-poster img,
.plat-card.card-is-expanded .ce-poster img { transform:scale(1.04); }
.ce-poster-fade {
  position:absolute;bottom:0;left:0;right:0;height:55px;
  background:linear-gradient(to bottom,transparent,var(--b3));
  pointer-events:none;
}

/* Body of expand panel */
.ce-body {
  padding: 10px 14px 20px 14px;
}

/* Action row */
.ce-actions {
  display:flex;align-items:center;gap:7px;margin-bottom:10px;
}
.ce-btn {
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;flex-shrink:0;
  transition:transform .18s var(--spring),background .18s var(--smooth),border-color .18s var(--smooth);
}
.ce-btn:hover { transform:scale(1.12); }
.ce-play {
  background:var(--t1);color:#000;border:2px solid var(--t1);
  font-size:12px;
}
.ce-play:hover { background:rgba(255,255,255,.85); }
.ce-add {
  background:transparent;color:var(--t1);
  border:2px solid rgba(255,255,255,.45);font-size:12px;
}
.ce-add:hover, .ce-add.added { border-color:var(--y);background:var(--y);color:#000; }
.ce-like {
  background:transparent;color:var(--t1);
  border:2px solid rgba(255,255,255,.45);font-size:12px;
}
.ce-like:hover { border-color:var(--t1); }
.ce-info {
  margin-left:auto;
  background:transparent;color:var(--t1);
  border:2px solid rgba(255,255,255,.45);font-size:12px;
}
.ce-info:hover { border-color:var(--t1); }

/* Meta row */
.ce-meta {
  display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;
}
.ce-match { font-size:12px;font-weight:700;color:#4ade80; }
.ce-rating {
  font-size:12px;font-weight:700;color:var(--y);
  display:flex;align-items:center;gap:3px;
}
.ce-cert {
  font-size:12px;font-weight:700;
  border:1.5px solid rgba(255,255,255,.3);
  border-radius:3px; corner-shape: squircle;padding:1px 5px;color:var(--t2);
}
.ce-title {
  font-size:13px;font-weight:700;letter-spacing:-.2px;
  margin-bottom:4px;font-family:'Syne',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ce-genres {
  font-size:12px;color:var(--t2);
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;line-height:1.5;
}
.ce-dot {
  width:3px;height:3px;border-radius:50%;
  background:var(--t3);flex-shrink:0;display:inline-block;
}

/* Suppress old floating popup entirely */
#card-popup { display:none !important; }
.pg-dot{width:3px;height:3px;border-radius:50%;background:var(--t3);flex-shrink:0;display:inline-block}

/* Row scroll arrows */
.arr{
  position:absolute;top:0;bottom:0;width:48px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:rgba(255,255,255,.9);
  cursor:pointer;z-index:300;opacity:0;transition:opacity .2s var(--smooth);
}
.row-wrap:hover .arr{opacity:1}
.arr.L{left:0;background:transparent;}
.arr.R{right:0;background:transparent;}
.arr:hover{color:var(--y)}

/* Smooth masked glass effect for all row arrows */
.arr::before, .trend-arr::before, .plat-arr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.arr.L::before, .trend-arr.L::before, .plat-arr.L::before {
  background: linear-gradient(to right, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0) 100%);
  -webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%);
  mask-image: linear-gradient(to right, black 20%, transparent 100%);
}
.arr.R::before, .trend-arr.R::before, .plat-arr.R::before {
  background: linear-gradient(to left, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0) 100%);
  -webkit-mask-image: linear-gradient(to left, black 20%, transparent 100%);
  mask-image: linear-gradient(to left, black 20%, transparent 100%);
}

/* ══════════════════════════════════════
   TRENDING — horizontal scroll row
   (same row structure as movie rows but with number overlay)
══════════════════════════════════════ */
#trending-section{padding:56px 0 0}
.trend-scroll-wrap{position:relative;padding:0;}
.trend-row{
  display:flex;gap:10px;
  overflow-x:auto;overflow-y:visible;
  padding:20px 4px 24px;scrollbar-width:none;scroll-behavior:smooth;
}
.trend-row::-webkit-scrollbar{display:none}
.trend-arr{
  position:absolute;top:0;bottom:0;width:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:rgba(255,255,255,.9);
  cursor:pointer;z-index:300;opacity:0;transition:opacity .2s var(--smooth);
}
.trend-scroll-wrap:hover .trend-arr{opacity:1}
.trend-arr.L{left:0;background:transparent;}
.trend-arr.R{right:0;background:transparent;}
.trend-arr:hover{color:var(--y)}

.trend-card{
  flex:0 0 175px;border-radius:var(--r2); corner-shape: squircle;overflow:visible;cursor:pointer;
  background:transparent;border:none;
  position:relative;flex-shrink:0;
  z-index:1;
  transition:z-index 0s .4s;
}
/* The actual visible poster lives inside .trend-card > img, give it rounded corners */
.trend-card > img {
  border-radius:var(--r2); corner-shape: squircle;
  border:1px solid rgba(255,255,255,.06);
}
.trend-card.card-is-expanded,
.trend-card.selected-card{
  z-index:500;
  transition:z-index 0s 0s;
}
.trend-card img{width:100%;aspect-ratio:2/3;height:auto;object-fit:cover;display:block;transition:transform .55s var(--expo);}
.trend-num{
  position:absolute;top:-4px;left:6px;
  font-size:90px;font-weight:900;line-height:1;
  font-family:'Syne',sans-serif;color:transparent;
  -webkit-text-stroke:2px rgba(245,197,24,.55);
  pointer-events:none;z-index:2;
  transition:opacity .3s var(--smooth),-webkit-text-stroke .3s var(--smooth);
}
.trend-card.card-is-expanded .trend-num { opacity:0; }
.trend-badge{
  position:absolute;top:10px;right:10px;z-index:3;
  font-size:12px;font-weight:700;background:rgba(239,68,68,.9);
  border-radius:5px; corner-shape: squircle;padding:2px 8px;color:#fff;
  display:flex;align-items:center;gap:4px;font-family:'Syne',sans-serif;
  transition:opacity .2s var(--smooth);
}
.trend-card.card-is-expanded .trend-badge { opacity:0; }
.trend-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,5,8,.98) 0%,rgba(5,5,8,.4) 50%,transparent 100%);
  border-radius:var(--r2); corner-shape: squircle;
  transition:opacity .3s var(--smooth);
}
.trend-card.card-is-expanded .trend-overlay { opacity:0; }
.trend-info{position:absolute;bottom:0;left:0;right:0;padding:14px;z-index:3;
  transition:opacity .2s var(--smooth);}
.trend-card.card-is-expanded .trend-info { opacity:0; pointer-events:none; }
.trend-title{font-size:13px;font-weight:700;letter-spacing:-.2px;margin-bottom:3px;}
.trend-meta{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:5px;margin-bottom:8px}
.trend-rating{color:var(--y);font-weight:700;display:flex;align-items:center;gap:3px;font-size:12px}
.trend-btns{
  display:flex;gap:6px;
  opacity:0;transform:translateY(8px);
  transition:opacity .28s var(--smooth),transform .3s var(--expo);
}
.trend-btn{
  font-size:10.5px;font-weight:700;border:none;cursor:pointer;
  border-radius:6px; corner-shape: squircle;padding:6px 12px;
  display:flex;align-items:center;gap:4px;transition:all .2s var(--smooth);
}
.trend-btn.play{background:var(--y);color:#000}
.trend-btn.play:hover{background:#f9d44a}
.trend-btn.add{background:rgba(255,255,255,.1);color:var(--t1);border:1px solid rgba(255,255,255,.12)}
.trend-btn.add:hover{background:rgba(255,255,255,.18)}

/* trend-card expand panel — wider to match its 175px base */
.trend-card .card-expand {
  width:256px;
  margin-left:calc((175px - 256px)/2);
}
.trend-card.expand-left .card-expand { margin-left:calc(175px - 256px); }
.trend-card.expand-right .card-expand { margin-left:0; }

/* ══════════════════════════════════════
   PLATFORM BROWSER
══════════════════════════════════════ */
#platforms-section{padding:64px 0 0}
.platform-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;
}
.plat-tab{
  display:flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:9px; corner-shape: squircle;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  cursor:pointer;font-size:12px;font-weight:600;color:var(--t2);
  transition:all .25s var(--smooth);font-family:'Syne',sans-serif;
  user-select:none;
}
.plat-tab:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);color:var(--t1)}
.plat-tab.active{background:var(--y2);border-color:rgba(245,197,24,.4);color:var(--y)}
.plat-tab i{font-size:14px}
.plat-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* type toggle pills */
.type-toggle{display:flex;gap:6px;margin-left:auto}
.type-pill{
  font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px; corner-shape: squircle;
  cursor:pointer;transition:all .2s var(--smooth);
  border:1px solid rgba(255,255,255,.1);color:var(--t2);background:transparent;
  font-family:'Syne',sans-serif;
}
.type-pill.active{background:var(--v);border-color:var(--v);color:#fff}
.type-pill:hover:not(.active){border-color:rgba(255,255,255,.25);color:var(--t1)}

.platform-panel{display:none}
.platform-panel.active{display:block}
.plat-content{
  transition:opacity .3s var(--smooth),transform .3s var(--expo);
}
.plat-content.fading{opacity:0;transform:translateY(10px)}

/* platform card — wider landscape style */
.plat-row{
  display:flex;gap:10px;overflow-x:auto;overflow-y:visible;
  padding:20px 4px 24px;scrollbar-width:none;scroll-behavior:smooth;
}
.plat-row::-webkit-scrollbar{display:none}
.plat-wrap{position:relative;padding:0;}
.plat-arr{
  position:absolute;top:0;bottom:0;width:48px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:rgba(255,255,255,.9);
  cursor:pointer;z-index:300;opacity:0;transition:opacity .2s var(--smooth);
}
.plat-wrap:hover .plat-arr{opacity:1}
.plat-arr.L{left:0; background: linear-gradient(to right, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.plat-arr.R{right:0; background: linear-gradient(to left, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.plat-arr:hover{color:var(--y)}

.plat-card{
  flex:0 0 190px;border-radius:var(--r); corner-shape: squircle;overflow:visible;
  background:transparent;border:none;
  cursor:pointer;position:relative;flex-shrink:0;
  z-index:1;
  transition:z-index 0s .4s;
}
.plat-card > img {
  border-radius:var(--r); corner-shape: squircle;
  border:1px solid rgba(255,255,255,.06);
}
.plat-card.card-is-expanded,
.plat-card.selected-card{
  z-index:500;
  transition:z-index 0s 0s;
}
.plat-card img{width:100%;aspect-ratio:2/3;height:auto;object-fit:cover;display:block;transition:transform .55s var(--expo);}
.plat-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,5,8,.98) 0%,rgba(5,5,8,.3) 55%,transparent 100%);
  border-radius:var(--r); corner-shape: squircle;
  transition:opacity .3s var(--smooth);
}
.plat-card.card-is-expanded .plat-card-overlay { opacity:0; }
.plat-card-badge{
  position:absolute;top:9px;left:9px;z-index:3;
  font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px; corner-shape: squircle;
  font-family:'Syne',sans-serif;
  transition:opacity .2s var(--smooth);
}
.plat-card.card-is-expanded .plat-card-badge { opacity:0; }
.badge-series{background:rgba(124,58,237,.85);color:#e9d5ff}
.badge-movie{background:rgba(0,0,0,.75);border:1px solid rgba(245,197,24,.4);color:var(--y)}
.plat-card-info{position:absolute;bottom:0;left:0;right:0;padding:12px;z-index:3;
  transition:opacity .2s var(--smooth);}
.plat-card.card-is-expanded .plat-card-info { opacity:0; pointer-events:none; }
.plat-card-title{font-size:13px;font-weight:700;letter-spacing:-.1px;margin-bottom:2px;font-family:'Syne',sans-serif}
.plat-card-meta{font-size:12px;color:var(--t2);margin-bottom:8px}
.plat-card-actions{
  display:flex;gap:5px;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s var(--smooth),transform .28s var(--expo);
}
.pca-btn{
  font-size:12px;font-weight:700;border:none;cursor:pointer;
  border-radius:12px; corner-shape: squircle;padding:5px 12px;
  display:flex;align-items:center;gap:3px;transition:all .18s var(--smooth);
}
.pca-btn.play{background:var(--y);color:#000}
.pca-btn.play:hover{background:#f9d44a}
.pca-btn.add{background:rgba(255,255,255,.1);color:var(--t1);border:1px solid rgba(255,255,255,.12)}
.pca-btn.add:hover{background:rgba(255,255,255,.18)}

/* plat-card expand panel — wider to match its 190px base */
.plat-card .card-expand {
  width:264px;
  margin-left:calc((190px - 264px)/2);
}
.plat-card.expand-left .card-expand { margin-left:calc(190px - 264px); }
.plat-card.expand-right .card-expand { margin-left:0; }

/* ── SURPRISE ME ── */
#surprise-section{
  padding:52px 0;display:flex;flex-direction:column;align-items:center;gap:28px;
  border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);
  margin-top:64px;
}
.surprise-label{
  text-align:center;
}
.surprise-label h2{font-size:22px;font-weight:800;margin-bottom:6px;letter-spacing:-.4px}
.surprise-label p{font-size:13px;color:var(--t3);max-width:260px;line-height:1.7;margin:0 auto}
#surprise-section.has-result{gap:16px}

.surprise-orb{
  width:54px;height:54px;border-radius:50%;position:relative;
  background:conic-gradient(var(--y) 0deg,var(--v) 130deg,#ec4899 250deg,var(--y) 360deg);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;animation:orb-hue 10s linear infinite;
  box-shadow:0 0 20px rgba(124, 58, 237, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.2);
  transition:transform .3s var(--spring),box-shadow .3s var(--smooth),width .4s var(--expo),height .4s var(--expo);
  flex-shrink:0;
}
.surprise-orb::before{content:'';position:absolute;inset:3px;background:var(--b1);border-radius:50%;z-index:0;transition:inset .4s var(--expo);}
.surprise-orb.has-result{width:64px;height:64px;}
.surprise-orb.has-result::before{inset:4px}
.surprise-orb.loading {
  animation: orb-spin 0.8s linear infinite, orb-hue 2s linear infinite;
  pointer-events: none;
  box-shadow: 0 0 35px rgba(236, 72, 153, 0.7), 0 0 15px rgba(124, 58, 237, 0.5);
}
.surprise-orb:hover{transform:scale(1.12);box-shadow: 0 0 35px rgba(236, 72, 153, 0.6), 0 0 15px rgba(124, 58, 237, 0.4);}
.surprise-orb:active{transform:scale(.9)}
.surprise-orb i{position:relative;z-index:1;font-size:18px;color:var(--y);transition:transform .35s var(--spring),font-size .4s var(--expo);}
.surprise-orb.has-result i{font-size:22px}
.surprise-orb:hover i{transform:rotate(28deg) scale(1.15)}

@keyframes orb-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes orb-hue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}

#surprise-result{
  width:100%;max-width:480px;
  display:none;
  opacity:0;
  transform:scale(.9) translateY(15px);
  overflow:hidden;
}
#surprise-result:not(.hidden){
  display:block;
}
.s-card{
  background:rgba(22, 22, 38, 0.65);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(139, 92, 246, 0.25);
  border-radius:var(--r2); corner-shape: squircle;
  overflow:hidden;
  display:flex;
  box-shadow:0 8px 32px rgba(0, 0, 0, 0.3), 0 0 24px rgba(139, 92, 246, 0.1);
  transition:border-color .3s var(--smooth), box-shadow .3s var(--smooth);
}
.s-card:hover{
  border-color:rgba(236, 72, 153, 0.4);
  box-shadow:0 12px 40px rgba(0, 0, 0, 0.4), 0 0 32px rgba(236, 72, 153, 0.2);
}
.s-card-img{width:130px;flex-shrink:0;object-fit:cover;height:190px}
.s-card-body{padding:18px;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.s-card-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--y);background:var(--y2);border:1px solid rgba(245,197,24,.25);border-radius:4px; corner-shape: squircle;padding:2px 8px;margin-bottom:8px;font-family:'Syne',sans-serif;}
.s-card-title{font-size:15px;font-weight:800;margin-bottom:4px;font-family:'Syne',sans-serif;letter-spacing:-.2px}
.s-card-sub{font-size:12px;color:var(--t2);margin-bottom:8px}
.s-card-synopsis{font-size:12px;line-height:1.65;color:var(--t2);margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-card-btns{display:flex;gap:7px}

#watchlist-section{
  display:none;
  padding:80px 0 0;
}
body.watchlist-active #watchlist-section{
  /* Managed via GSAP crossfades in ui.js */
}
.wl-empty{text-align:center;padding:48px 0;color:var(--t3);display:flex;flex-direction:column;align-items:center;gap:12px;grid-column: 1 / -1;}
.wl-empty i{font-size:36px;color:var(--b5)}
.wl-empty p{font-size:13px}
#wl-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;min-height:80px}
.wl-item{
  width:62px;flex-shrink:0;border-radius:8px; corner-shape: squircle;overflow:hidden;position:relative;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.07);
  transition:border-color .25s var(--smooth),transform .3s var(--spring);
  animation:wl-in .4s var(--spring) both;
}
@keyframes wl-in{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
.wl-item:hover{border-color:rgba(245,197,24,.5);transform:translateY(-4px)}
.wl-item img{width:62px;height:90px;object-fit:cover;display:block}
.wl-item .wl-remove{position:absolute;inset:0;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;font-size:16px;color:#f87171;opacity:0;transition:opacity .2s;}
.wl-item:hover .wl-remove{opacity:1}
#roulette-wrap{
  background:var(--b2);border:1px solid rgba(255,255,255,.05);
  border-radius:16px; corner-shape: squircle;padding:28px 32px;
  display:none;flex-direction:column;align-items:center;gap:22px;
  margin-top:0;
}
#roulette-wrap.open{display:flex;animation:rl-in .5s var(--expo) both;}
@keyframes rl-in{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.roulette-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.2px}
.drum-wrap{position:relative;width:100%;max-width:620px;height:162px;overflow:hidden;border-radius:var(--r); corner-shape: squircle;border:1px solid rgba(124,58,237,.2);background:var(--b3);}
.drum-wrap::before,.drum-wrap::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:3;pointer-events:none;}
.drum-wrap::before{left:0;background:linear-gradient(to right,var(--b3),transparent)}
.drum-wrap::after{right:0;background:linear-gradient(to left,var(--b3),transparent)}
.drum-cursor{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:122px;height:144px;border:2px solid rgba(245,197,24,.65);border-radius:var(--r); corner-shape: squircle;z-index:4;pointer-events:none;box-shadow:0 0 24px rgba(245,197,24,.2),inset 0 0 20px rgba(245,197,24,.05);}
#drum-inner{display:flex;align-items:center;gap:10px;position:absolute;top:9px;left:0;will-change:transform;}
.drum-card{width:112px;flex-shrink:0;border-radius:8px; corner-shape: squircle;overflow:hidden;border:1.5px solid rgba(255,255,255,.05);transition:border-color .3s,box-shadow .3s;}
.drum-card img{width:112px;height:140px;object-fit:cover;display:block}
.drum-card.winner{border-color:var(--y);box-shadow:0 0 20px rgba(245,197,24,.4)}
.spin-btn{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--y2),var(--v2));
  border:1px solid rgba(245,197,24,.35);border-radius:10px; corner-shape: squircle;padding:14px 36px;
  font-size:14px;font-weight:700;color:var(--y);cursor:pointer;letter-spacing:.04em;
  transition:all .28s var(--smooth);position:relative;overflow:hidden;
}
.spin-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(245,197,24,.18),rgba(124,58,237,.18));opacity:0;transition:opacity .28s;}
.spin-btn:hover::after{opacity:1}
.spin-btn:hover{box-shadow:0 0 32px rgba(245,197,24,.3);border-color:rgba(245,197,24,.65);transform:translateY(-1px)}
.spin-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.spin-btn i{font-size:16px;transition:transform .35s}
.spin-btn:hover:not(:disabled) i{transform:rotate(90deg)}
@keyframes spin-icon{from{transform:rotate(0)}to{transform:rotate(720deg)}}
.spin-btn.spinning i{animation:spin-icon .9s linear infinite}
#winner-reveal{text-align:center;opacity:0;transform:translateY(10px);transition:all .5s var(--spring);min-height:60px;}
#winner-reveal.show{opacity:1;transform:none}
#winner-reveal h3{font-size:18px;font-weight:800;margin-bottom:4px;font-family:'Syne',sans-serif}
#winner-reveal p{font-size:13px;color:var(--t2)}

/* ── MODAL ── */
#overlay{
  position:fixed;inset:0;z-index:9999;background:rgba(5,5,8,.4);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--smooth);
  will-change: opacity;
}
#overlay.on{opacity:1;pointer-events:all}
#modal{
  background:var(--b2);border:1px solid rgba(124,58,237,.15);
  border-radius:18px; corner-shape: squircle;width:100%;max-width:840px;max-height:90vh;
  overflow-y:auto;transform:scale(.88) translateY(24px);
  transition:transform .4s var(--smooth);scrollbar-width:thin;scrollbar-color:var(--b5) transparent;
  position:relative;z-index:10;
}
#overlay.on #modal{transform:scale(1) translateY(0)}
.m-hero{position:relative;height:310px;border-radius:18px 18px 0 0; corner-shape: squircle;overflow:hidden}
.m-hero img{width:100%;height:100%;object-fit:cover}
.m-hero-fade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 15%,var(--b2) 100%)}
.m-hero-side{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.7),transparent 60%)}
.m-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t2);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background .22s, border-color .22s, color .22s, transform .22s;
  z-index: 50;
}
#modal:hover .m-close,
.m-hero:hover .m-close {
  opacity: 1;
  pointer-events: auto;
}
.m-close:hover {
  background: var(--y2);
  border-color: rgba(245,197,24,.5);
  color: var(--y);
}
.m-head{position:absolute;bottom:20px;left:26px;right:26px}
.m-body{padding:26px}
.m-body-title {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--t1);
  margin-bottom: 20px;
  line-height: 1.25;
}
.m-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px}
.m-stat p:first-child{font-size:12px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}
.m-stat p:last-child{font-size:14px;font-weight:600;color:var(--t1)}
.m-synopsis{font-size:13px;line-height:1.8;color:var(--t2);margin-bottom:22px}
.ai-box{background:var(--v2);border:1px solid rgba(124,58,237,.2);border-radius:10px; corner-shape: squircle;padding:15px;margin-bottom:22px;}
.ai-box-head{font-size:12px;font-weight:700;color:var(--vl);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.ai-pills{display:flex;flex-wrap:wrap;gap:6px}
.ai-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.28);border-radius:20px; corner-shape: squircle;padding:4px 12px;font-size:12px;color:var(--vl);}
.m-cast-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.m-cast-person{display:flex;flex-direction:column;align-items:center;gap:5px}
.m-cast-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(124,58,237,.25)}
.m-cast-person span, .m-director-person span{font-size:12px;color:var(--t2);text-align:center;max-width:56px;line-height:1.3;font-family:'DM Sans',sans-serif}
.m-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.05)}
.m-platforms{display:flex;gap:6px;flex-wrap:wrap}
.plat-badge{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px; corner-shape: squircle;padding:4px 10px;font-size:12px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:5px;}
.plat-logo{width:14px;height:14px;border-radius:4px; corner-shape: squircle;object-fit:cover;}
.danger-btn{display:flex;align-items:center;gap:6px;background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.22);border-radius:24px; corner-shape: squircle;padding:9px 16px;font-size:12px;font-weight:700;color:#f87171;cursor:pointer;transition:all .22s;margin-left:auto;}
.danger-btn:hover{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.48)}
.mini-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.mini-row::-webkit-scrollbar{display:none}
.mini{width:90px;flex-shrink:0;border-radius:6px; corner-shape: squircle;overflow:hidden;cursor:pointer;transition:transform .25s var(--smooth)}
.mini:hover{transform:scale(1.07)}
.mini img{width:90px;height:128px;object-fit:cover;display:block}
.mini-title{font-size:12px;color:var(--t2);padding:4px 5px;background:var(--b4);line-height:1.3}

/* ── ROULETTE PROMPT ── */
#roulette-prompt{
  display:none;
  margin:28px 0 0;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--expo), transform .45s var(--expo);
}
#roulette-prompt.show{
  display:block;
  animation:rp-in .45s var(--expo) forwards;
}
@keyframes rp-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.rp-inner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--b2);
  border:1px solid rgba(124,58,237,.2);
  border-radius:14px; corner-shape: squircle;padding:20px 24px;
  position:relative;overflow:hidden;
}
.rp-inner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 10% 50%, rgba(124,58,237,.08) 0%, transparent 65%);
  pointer-events:none;
}
.rp-icon{
  width:44px;height:44px;border-radius:12px; corner-shape: squircle;flex-shrink:0;
  background:linear-gradient(135deg, var(--v2), rgba(245,197,24,.1));
  border:1px solid rgba(124,58,237,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--y);
}
.rp-text{flex:1;min-width:180px}
.rp-title{font-size:15px;font-weight:700;font-family:'Syne',sans-serif;margin-bottom:3px}
.rp-sub{font-size:12px;color:var(--t2);line-height:1.5}
.rp-sub strong{color:var(--y)}
.rp-yes{
  display:flex;align-items:center;gap:8px;
  background:var(--y);color:#000;
  font-weight:700;font-size:13px;
  border-radius:9px; corner-shape: squircle;padding:11px 22px;
  cursor:pointer;border:none;
  font-family:'Syne',sans-serif;
  transition:background .2s, box-shadow .2s, transform .2s;
  flex-shrink:0;
}
.rp-yes:hover{background:#f9d44a;box-shadow:0 0 24px rgba(245,197,24,.4);transform:translateY(-1px)}
.rp-no{
  background:transparent;border:none;
  font-size:12px;color:var(--t3);cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:color .2s;flex-shrink:0;padding:4px;
}
.rp-no:hover{color:var(--t2)}

/* ── ROULETTE WRAP ── */
#roulette-wrap{
  background:var(--b2);border:1px solid rgba(255,255,255,.05);
  border-radius:16px; corner-shape: squircle;padding:28px 32px;
  display:none;flex-direction:column;align-items:center;gap:22px;
  margin-top:24px;
  animation:rl-in .5s var(--expo) forwards;
}
#roulette-wrap.open{display:flex}
@keyframes rl-in{
  from{opacity:0;transform:translateY(20px) scale(.97)}
  to{opacity:1;transform:none;scale:1}
}
.roulette-header{
  width:100%;display:flex;align-items:center;justify-content:space-between;
}
.roulette-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.2px;}
.roulette-close{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--t2);font-size:12px;
  transition:all .2s;
}
.roulette-close:hover{background:rgba(255,255,255,.12);color:var(--t1)}

/* winner label */
.winner-label{
  font-size:12px;color:var(--t3);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-family:'Syne',sans-serif
}

/* ── CONFETTI ── */
.confetti-dot{position:fixed;pointer-events:none;z-index:99999;border-radius:2px; corner-shape: squircle;animation:conf-fall 1.25s var(--smooth) forwards;}
@keyframes conf-fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(85vh) rotate(720deg)}}

/* ── LIVE DOT ── */
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f87171;margin-right:2px;vertical-align:middle;animation:live-pulse 1.15s var(--smooth) infinite;}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ── FOOTER ── */
footer{background:var(--b1);border-top:1px solid rgba(255,255,255,.04);padding:40px 48px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.footer-logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.footer-logo .logo-icon{width:26px;height:26px;border-radius:6px; corner-shape: squircle;background:var(--y);display:flex;align-items:center;justify-content:center}
.footer-logo .logo-icon i{font-size:12px;color:#000}
.footer-logo span{font-size:15px;font-weight:800;font-family:'Syne',sans-serif;color:var(--t1)}
.footer-logo em{color:var(--y);font-style:normal}
.footer-links{display:flex;gap:22px}
.footer-links a{font-size:12px;color:var(--t3);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--y)}
.footer-copy{font-size:12px;color:var(--t3)}

@media(max-width:768px){
  #nav{padding:0 18px}
  .nav-links{display:none}
  .nav-search{max-width:160px}
  main{padding:0 18px 60px}
  .hero-content{left:22px;right:22px;bottom:60px}
  .movie-card{flex:0 0 130px}
  .card-thumb{width:130px;height:186px}
  .trend-card{flex:0 0 140px}
  .trend-card img{height:196px}
  .plat-card{flex:0 0 148px}
  .plat-card img{height:210px}
  .m-grid{grid-template-columns:1fr 1fr}
  .drum-wrap{height:132px}
  .drum-card{width:90px}
  .drum-card img{width:90px;height:114px}
  .drum-cursor{width:98px;height:118px}
  footer{padding:28px 18px 24px;flex-direction:column;align-items:flex-start;gap:16px}
  .footer-links{flex-wrap:wrap;gap:14px}
}


/* ─── SETTINGS MODAL ─── */
#settings-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(5,5,8,.4);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--smooth);
}
#settings-overlay.on{opacity:1;pointer-events:all}
#settings-modal{
  background:var(--b2);border:1px solid rgba(124,58,237,.15);
  border-radius:18px; corner-shape: squircle;width:100%;max-width:440px;
  transform:scale(.88) translateY(24px);
  transition:transform .45s var(--spring);
  position:relative;z-index:10;
}
#settings-overlay.on #settings-modal{transform:scale(1) translateY(0)}

/* ─── STARS RATING BOX (modal) — two-state interactive component ─── */

/* Outer container */
.user-rating-box {
  margin: 15px 0 22px;
  background: var(--b3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius:14px; corner-shape: squircle;
  padding: 10px 14px;
  min-height: 58px;
}

/* Inner flex row */
.urb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.urb-inner.watched {
  justify-content: flex-start;
}

/* ── Watched pill ── */
.urb-watched-pill {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius:50px; corner-shape: squircle;
  padding: 9px 20px 9px 9px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background   .25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color .25s cubic-bezier(0.16, 1, 0.3, 1);
}

.urb-watched-pill:not(.active):hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.urb-watched-pill.active             { background: rgba(245,197,24,.12); border-color: var(--y); }
.urb-watched-pill.active:hover       { background: rgba(245,197,24,.2); }

/* ── Icon circle (watched pill) ── */
.urb-icon-wrap {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .25s cubic-bezier(0.16, 1, 0.3, 1), border-color .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.urb-watched-pill.active .urb-icon-wrap { background: var(--y); border-color: var(--y); }

.urb-icon-wrap i {
  position: absolute;
  font-size: 14px; color: var(--t2);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.urb-icon-q                          { opacity: 1; transform: scale(1) rotate(0deg); }
.urb-icon-eye                        { opacity: 0; transform: scale(0.5) rotate(-15deg); }
.urb-watched-pill.active .urb-icon-q   { opacity: 0; transform: scale(0.5) rotate(15deg); }
.urb-watched-pill.active .urb-icon-eye { opacity: 1; transform: scale(1) rotate(0deg); }
.urb-watched-pill.active .urb-icon-wrap i { color: #000; }

/* ── Watched label ── */
.urb-watched-label {
  font-size: 14px; font-weight: 700; color: var(--t1);
  letter-spacing: .01em; white-space: nowrap;
  font-family: 'Syne', sans-serif;
  transition: color .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.urb-watched-pill.active .urb-watched-label { color: var(--y); }

/* ══ Watchlist wrap — always in DOM, fades with transform ══ */
.urb-watchlist-wrap {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  transition:
    opacity   0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.urb-watchlist-wrap.hidden {
  opacity: 0;
  transform: translateX(12px) scale(0.92);
  pointer-events: none;
}

/* ── Watchlist pill ── */
.urb-watchlist-pill {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius:50px; corner-shape: squircle;
  padding: 9px 20px 9px 9px;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition:
    background   .15s var(--smooth),
    border-color .15s var(--smooth),
    transform    .15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.urb-watchlist-pill:not(.added):hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.urb-watchlist-pill:active            { transform: scale(.95); }
.urb-watchlist-pill.added             { background: rgba(167,139,250,.12); border-color: var(--vl); }
.urb-watchlist-pill.added:hover       { background: rgba(167,139,250,.2); }

/* ── Watchlist icon circle ── */
.urb-watchlist-icon {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .35s cubic-bezier(0.16, 1, 0.3, 1), border-color .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.urb-watchlist-pill.added .urb-watchlist-icon { background: var(--vl); border-color: var(--vl); }
.urb-watchlist-icon i {
  position: absolute; font-size: 14px; color: var(--t2);
  transition: opacity .3s var(--smooth), transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), color .3s var(--smooth);
}
.urb-icon-plus  { opacity: 1; transform: scale(1) rotate(0deg); }
.urb-icon-check { opacity: 0; transform: scale(0.5) rotate(-45deg); }
.urb-watchlist-pill.added .urb-icon-plus  { opacity: 0; transform: scale(0.5) rotate(45deg); }
.urb-watchlist-pill.added .urb-icon-check { opacity: 1; transform: scale(1) rotate(0deg); }
.urb-watchlist-pill.added .urb-watchlist-icon i { color: #000; }

/* ── Watchlist label ── */
.urb-watchlist-label {
  font-size: 14px; font-weight: 700; color: var(--t1);
  letter-spacing: .01em; white-space: nowrap;
  font-family: 'Syne', sans-serif;
  transition: color .35s var(--smooth);
}
.urb-watchlist-pill.added .urb-watchlist-label { color: var(--vl); }

/* ══ Rating side — always in DOM, fades with transform ══ */
.urb-rating-side {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 4px;
  opacity: 0;
  transform: translateX(-16px);
  pointer-events: none;
  transition:
    opacity   .25s cubic-bezier(0.16, 1, 0.3, 1),
    transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.urb-rating-side.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Vertical divider */
.urb-divider {
  width: 1px; height: 30px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0; margin: 0 4px 0 16px;
}

/* "Give Your Rating" label */
.urb-give-label {
  font-size: 13px; font-weight: 500; color: var(--t3); white-space: nowrap;
}

/* ── Stars ── */
.user-stars {
  display: flex;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.user-stars i {
  font-size: 20px;
  color: rgba(148,144,184,.4);
  transition: color .16s var(--smooth), transform .16s var(--spring);
}
.user-stars i:hover {
  transform: scale(1.2);
  color: rgba(245,197,24,.85);
}
.user-stars i.active {
  color: var(--y);
}

/* Light theme */
body.light-theme .user-rating-box {
  background: var(--b2);
  border-color: rgba(0,0,0,.07);
}
body.light-theme .urb-watched-pill {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
}
body.light-theme .urb-watched-label { color: #1f2937; }
body.light-theme .urb-icon-wrap { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); }
body.light-theme .urb-icon-wrap i { color: #6b7280; }
body.light-theme .urb-divider { background: rgba(0,0,0,.1); }
body.light-theme .user-stars i { color: rgba(107,114,128,.38); }

/* ─── CORS BANNER LAYOUT COMPENSATION ─── */
body.has-cors-banner #hero {
  padding-top: 44px;
}
body.has-cors-banner main {
  padding-top: 44px;
}


/* ─── MODAL CREW STYLING & INTERACTIVE HOVER ─── */
.m-cast-person, .m-director-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform .15s var(--spring);
}
.m-cast-person:hover, .m-director-person:hover {
  transform: translateY(-6px);
}
.m-director-row {
  display: flex;
  gap: 14px;
}
.m-director-person img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(251, 191, 36, 0.35);
}

@media(max-width:768px){
  .m-crew-container {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* ─── SEARCH ACTIVE CLEAR LAYOUT ─── */
/* search-section is HIDDEN by default — only shown when search/genre is active */
#search-section {
  display: none !important;
}
body.search-active #search-section {
  display: block !important;
}
body.search-active #hero,
body.search-active main > section:not(#search-section) {
  display: none !important;
}

/* ─── SEARCH RESULTS GRID ─── */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px 12px;
  padding: 4px 0 8px;
}
.search-results-grid .movie-card {
  flex: unset;
  width: 100%;
}
.search-results-grid .card-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}
.search-results-grid .movie-card.entering {
  animation: card-fade-in .35s var(--expo) both;
}
.search-results-grid .movie-card {
  opacity: 1;
}
#search-load-more-wrap {
  padding: 28px 0 12px;
}

/* ─── GRID MODE STYLING (SEE ALL) ─── */
.grid-active .row-scroll, 
.grid-active .trend-row, 
.grid-active .plat-row,
#wl-strip {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px !important;
  overflow-x: visible !important;
  flex-wrap: wrap !important;
  padding: 10px 0 !important;
}
.grid-active .arr, 
.grid-active .trend-arr, 
.grid-active .plat-arr,
.grid-active .plat-arr.L, 
.grid-active .plat-arr.R,
.grid-active .plat-wrap .plat-arr {
  display: none !important;
}
.grid-active .movie-card, 
.grid-active .trend-card, 
.grid-active .plat-card,
#wl-strip .movie-card {
  flex: 1 1 auto !important;
  width: 100% !important;
}
.grid-active .card-thumb,
#wl-strip .card-thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
}
.grid-active .trend-card img {
  height: auto !important;
  aspect-ratio: 175 / 248 !important;
}
.grid-active .plat-card img {
  height: auto !important;
  aspect-ratio: 190 / 268 !important;
}
/* Hide infinite-scroll clones when in grid ("See all") mode */
.grid-active [data-cloned="true"] {
  display: none !important;
}

@media(max-width:992px){
  .search-results-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .grid-active .row-scroll, 
  .grid-active .trend-row, 
  .grid-active .plat-row,
  #wl-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media(max-width:576px){
  .search-results-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
  }
  .grid-active .row-scroll, 
  .grid-active .trend-row, 
  .grid-active .plat-row,
  #wl-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ─── LANDING PAGE & AUTH STYLES ─── */

body.not-logged-in {
  overflow: hidden;
}

body.not-logged-in #nav,
body.not-logged-in main,
body.not-logged-in #hero,
body.not-logged-in footer,
body.not-logged-in #card-popup,
body.not-logged-in #overlay {
  display: none !important;
}

#landing-page {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--b0);
}

body.show-landing-page #landing-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide main content when landing page is shown */
body.show-landing-page #nav,
body.show-landing-page #hero,
body.show-landing-page main,
body.show-landing-page footer,
body.show-landing-page #card-popup,
body.show-landing-page #overlay {
  display: none !important;
}

/* Grid Motion Background */
.intro {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.intro::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 30%, rgba(5,5,8,0.7) 100%);
  pointer-events: none;
  z-index: 4;
}

.gridMotion-container {
  gap: 1rem;
  flex: none;
  position: relative;
  width: 150vw;
  height: 150vh;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: 100%;
  transform: rotate(-15deg);
  transform-origin: center center;
  z-index: 2;
  opacity: 0.85; /* Increased from 0.35 to make it much brighter */
}

.row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(7, 1fr);
  will-change: transform, filter;
}

.row__item {
  position: relative;
  aspect-ratio: 2 / 3;
}

.row__item-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius:10px; corner-shape: squircle;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row__item-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
  left: 0;
  filter: grayscale(15%); /* Reduced from 40% for brighter colors */
  transition: filter .2s var(--smooth);
}

.row__item:hover .row__item-img {
  filter: grayscale(0%);
}

.landing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 8, 0.15); /* Reduced opacity for a brighter background */
  z-index: 3;
}

/* Login Card */
.login-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  animation: rl-in 0.8s var(--expo) both;
}

.login-card {
  background: rgba(15, 15, 28, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius:20px; corner-shape: squircle;
  padding: 40px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--t2);
  margin-top: 8px;
}

.login-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  background: rgba(0,0,0,0.3);
  padding: 5px;
  border-radius:30px; corner-shape: squircle;
  border: 1px solid rgba(255,255,255,0.05);
}

.login-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--t2);
  font-size: 13px;
  font-weight: 700;
  padding: 10px;
  border-radius:24px; corner-shape: squircle;
  cursor: pointer;
  transition: all .15s var(--smooth);
}

.login-tab.active {
  background: var(--b4);
  color: var(--t1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size:12px;
  font-weight: 700;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 14px 16px;
  border-radius:12px; corner-shape: squircle;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--t1);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all .15s var(--smooth);
}

.form-group input:focus {
  border-color: var(--v);
  background: rgba(0,0,0,0.6);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}

.login-btn {
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: 14px;
  margin-top: 10px;
}

.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 24px 0;
  color: var(--t3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.login-divider span {
  padding: 0 10px;
}

.guest-btn {
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: 14px;
}

/* ─── PROFILE DROPDOWN ─── */

.profile-container {
  position: relative;
}

.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 14px;
  width: 220px;
  background: var(--b3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:14px; corner-shape: squircle;
  padding: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  pointer-events: none;
  transition: all .15s var(--spring);
  z-index: 1000;
}

.profile-dropdown.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.pd-user-info {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
}

.pd-username {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
  font-family: 'Syne', sans-serif;
}

.pd-role {
  font-size:12px;
  color: var(--t3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pd-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--t2);
  font-weight: 600;
  border-radius:8px; corner-shape: squircle;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all .15s var(--smooth);
}

.pd-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--t1);
}

.pd-item i {
  font-size: 14px;
  color: var(--t3);
  transition: color .15s;
}

.pd-item:hover i {
  color: var(--vl);
}

.pd-logout:hover i {
  color: #ef4444;
}

/* ─── SEARCH MODAL ─── */
#search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--smooth);
}
#search-overlay.on {
  opacity: 1;
  pointer-events: all;
}
#search-modal {
  background: rgba(15, 10, 30, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius:20px; corner-shape: squircle;
  width: 100%;
  max-width: 680px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.10);
  transform: scale(0.92) translateY(-20px);
  transition: transform .2s var(--spring);
}
#search-overlay.on #search-modal {
  transform: scale(1) translateY(0);
}

/* Header */
.sm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sm-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--t1);
}
.sm-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sm-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sm-dropdown {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius:20px; corner-shape: squircle;
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 7px 30px 7px 14px;
  cursor: pointer;
  outline: none;
  transition: all .15s var(--smooth);
}
.sm-dropdown:focus, .sm-dropdown:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.11);
  color: var(--t1);
}
.sm-dropdown option {
  background: var(--b3);
  color: var(--t1);
}
.sm-dropdown-arrow {
  position: absolute;
  right: 10px;
  font-size:12px;
  color: var(--t3);
  pointer-events: none;
}
.sm-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--t2);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s var(--smooth);
  flex-shrink: 0;
}
.sm-close-btn:hover {
  background: rgba(245,197,24,0.12);
  border-color: rgba(245,197,24,0.4);
  color: var(--y);
}

/* Search Input */
.sm-input-wrapper {
  position: relative;
  padding: 16px 22px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sm-search-icon {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t3);
  font-size: 15px;
  pointer-events: none;
}
.sm-input-wrapper input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius:30px; corner-shape: squircle;
  padding: 14px 44px 14px 46px;
  color: var(--t1);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: all .15s var(--smooth);
}
.sm-input-wrapper input:focus {
  background: rgba(255,255,255,0.09);
  border-color: rgba(124,58,237,0.5);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.sm-input-wrapper input::placeholder { color: var(--t3); }
.sm-clear-btn {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--t2);
  font-size:12px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}
.sm-clear-btn.visible { display: flex; }
.sm-clear-btn:hover { background: rgba(255,255,255,0.15); color: var(--t1); }

/* Results */
.sm-results-container {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--b5) transparent;
}
.sm-results-container::-webkit-scrollbar { width: 4px; }
.sm-results-container::-webkit-scrollbar-thumb { background: var(--b5); border-radius:4px; corner-shape: squircle; }

.sm-results-list { padding: 8px 0; }

.sm-placeholder {
  padding: 40px 22px;
  text-align: center;
  color: var(--t3);
  font-size: 14px;
}

.sm-loading {
  padding: 32px 22px;
  text-align: center;
  color: var(--t3);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.sm-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: var(--vl);
  border-radius: 50%;
  animation: sm-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }

.sm-no-results {
  padding: 40px 22px;
  text-align: center;
  color: var(--t3);
  font-size: 14px;
}

/* Result rows */
.sm-result-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.18s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sm-result-row:last-child { border-bottom: none; }
.sm-result-row:hover { background: rgba(255,255,255,0.05); }

.sm-result-thumb {
  width: 60px;
  height: 90px;
  border-radius:8px; corner-shape: squircle;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--b4);
  border: 1px solid rgba(255,255,255,0.07);
}
.sm-result-body {
  flex: 1;
  min-width: 0;
}
.sm-result-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  font-family: 'Syne', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.sm-result-meta {
  font-size: 12px;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sm-result-meta .sm-dot { color: var(--t3); }
.sm-result-type {
  display: inline-flex;
  align-items: center;
  font-size:12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius:4px; corner-shape: squircle;
  letter-spacing: 0.04em;
  font-family: 'Syne', sans-serif;
}
.sm-result-type.movie { background: rgba(245,197,24,0.12); color: var(--y); border: 1px solid rgba(245,197,24,0.25); }
.sm-result-type.tv { background: rgba(124,58,237,0.12); color: var(--vl); border: 1px solid rgba(124,58,237,0.25); }
.sm-result-rating { color: var(--y); font-weight: 700; display: flex; align-items: center; gap: 3px; }
.sm-result-rating i { font-size:12px; }

.sm-result-add {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.2);
  color: var(--t2);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.sm-result-add:hover, .sm-result-add.added {
  background: var(--y);
  border-color: var(--y);
  color: #000;
}

@media(max-width: 640px) {
  #search-overlay { padding: 20px 12px; align-items: flex-end; }
  #search-modal { max-height: 90vh; border-radius:20px 20px 14px 14px; corner-shape: squircle; }
}

/* ═══ PICK A MOVIE FOR ME ═══ */
#pick-movie-section {
  margin-top: 48px;
  padding: 0 24px 0;
}
.pick-glass-card {
  background: rgba(22, 22, 38, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  border-radius:32px !important; corner-shape: squircle;
  padding: 48px 32px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pick-glass-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border-radius:24px; corner-shape: squircle;
  background: linear-gradient(135deg, rgba(168,85,247,0.15), transparent 40%, rgba(245,197,24,0.08));
  pointer-events: none;
  z-index: 0;
}
.pick-glass-card > * { position: relative; z-index: 1; }
.pick-heading {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #f1f0ff, var(--vl));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.pick-sub {
  color: var(--t2);
  font-size: 14px;
  margin-bottom: 28px;
}
.pick-roll-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 44px;
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  border: none;
  border-radius:16px; corner-shape: squircle;
  cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #a855f7, #c084fc);
  box-shadow: 0 0 0 0 rgba(168,85,247,0.5), 0 8px 32px rgba(124,58,237,0.35);
  transition: transform .15s var(--spring), box-shadow .15s var(--smooth);
  margin-top: 24px;
  margin-bottom: 28px;
}
.pick-roll-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 30px rgba(168,85,247,0.55), 0 12px 40px rgba(124,58,237,0.4);
}
.pick-roll-btn:active {
  transform: scale(0.94);
}
.pick-roll-btn.spinning {
  pointer-events: none;
  animation: pickPulse .25s var(--smooth) infinite alternate;
}
@keyframes pickPulse {
  0% { box-shadow: 0 0 20px rgba(168,85,247,0.5), 0 8px 30px rgba(124,58,237,0.35); }
  100% { box-shadow: 0 0 45px rgba(168,85,247,0.7), 0 12px 50px rgba(124,58,237,0.5); }
}

/* Gallery container */
.pick-gallery-wrap {
  height: 420px;
  position: relative;
  border-radius:16px; corner-shape: squircle;
  overflow: hidden;
  margin-bottom: 8px;
}
.pick-gallery-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}
.pick-gallery-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Empty state */
.pick-empty-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--t3);
  font-size: 14px;
}

/* Result banner */
.pick-result {
  display: none;
  margin-top: 24px;
  animation: pickRevealIn .25s var(--expo) forwards;
}
.pick-result.show { display: block; }
@keyframes pickRevealIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pick-result-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius:16px; corner-shape: squircle;
  padding: 18px 24px;
  box-shadow: 0 0 30px rgba(168,85,247,0.2), inset 0 0 30px rgba(168,85,247,0.05);
  text-align: left;
}
.pick-result-poster {
  width: 72px;
  height: 108px;
  object-fit: cover;
  border-radius:10px; corner-shape: squircle;
  box-shadow: 0 0 20px rgba(168,85,247,0.35);
  flex-shrink: 0;
}
.pick-result-info { flex: 1; }
.pick-result-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size:12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--y);
  margin-bottom: 6px;
}
.pick-result-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.pick-result-meta {
  font-size: 12px;
  color: var(--t2);
  margin-bottom: 12px;
}
.pick-result-btns {
  display: flex;
  gap: 10px;
}
.pick-result-btns .btn-primary,
.pick-result-btns .btn-secondary { font-size: 12px; padding: 9px 18px; }

/* Locked State styling */
.pick-locked-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  color: var(--t2);
}
.lock-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--y);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
}
.lock-text {
  font-size: 15px;
  max-width: 320px;
  line-height: 1.5;
  color: var(--t2);
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ── TOAST NOTIFICATIONS ── */
.toast-alert {
  pointer-events: auto;
  min-width: 320px;
  max-width: 400px;
  background: rgba(15, 15, 28, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius:12px; corner-shape: squircle;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  animation: toastSlideIn .2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: opacity .15s, transform .15s;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
.toast-alert.hide {
  opacity: 0;
  transform: translateX(30px) scale(0.95);
}
.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.toast-alert.error .toast-icon { color: #f87171; }
.toast-alert.success .toast-icon { color: #34d399; }
.toast-alert.info .toast-icon { color: var(--y); }

.toast-content {
  flex: 1;
}
.toast-title {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.toast-message {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.45;
}
.toast-close {
  background: transparent;
  border: none;
  color: var(--t3);
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  margin-top: -2px;
  transition: color .15s;
}
.toast-close:hover {
  color: var(--t1);
}

/* Responsive */
@media(max-width: 768px) {
  #pick-movie-section { padding: 0 12px; }
  .pick-glass-card { padding: 32px 16px 28px; border-radius:18px !important; corner-shape: squircle; }
  .pick-heading { font-size: 22px; }
  .pick-roll-btn { font-size: 15px; padding: 13px 32px; }
  .pick-gallery-wrap { height: 320px; }
  .pick-result-inner { flex-direction: column; text-align: center; padding: 16px; }
  .pick-result-poster { width: 80px; height: 120px; }
  .pick-result-btns { justify-content: center; }
}

/* ── SETTINGS MODAL REDESIGN ── */
.settings-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
  gap: 8px;
}

.settings-tab-btn {
  background: none;
  border: none;
  color: var(--t3);
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-tab-btn:hover {
  color: var(--t1);
}

.settings-tab-btn.active {
  color: var(--y);
}

.settings-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--y);
  border-radius:2px 2px 0 0; corner-shape: squircle;
}

.settings-tab-content {
  display: none;
  animation: fadeIn .15s var(--smooth);
}

.settings-tab-content.active {
  display: block;
}

/* API Integration Details */
.status-indicator-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280; /* Gray default */
  box-shadow: 0 0 8px rgba(107, 114, 128, 0.5);
  transition: background-color .15s, box-shadow .15s;
}

.status-dot.connected {
  background: #10b981; /* Green */
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.status-dot.failed {
  background: #ef4444; /* Red */
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.status-dot.testing {
  background: #f59e0b; /* Yellow */
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.status-text {
  font-size: 12px;
  color: var(--t2);
}

/* User Preferences Tab: Genre Pills */
.genre-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 20px;
  max-height: 120px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Custom Scrollbar for Genre Container */
.genre-pills-container::-webkit-scrollbar {
  width: 4px;
}
.genre-pills-container::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
  border-radius:2px; corner-shape: squircle;
}
.genre-pills-container::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius:2px; corner-shape: squircle;
}

.genre-pill {
  padding: 6px 12px;
  background: var(--b3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius:20px; corner-shape: squircle;
  font-size:12px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s var(--smooth);
  user-select: none;
}

.genre-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--t1);
}

.genre-pill.selected {
  background: rgba(245, 158, 11, 0.15); /* light yellow tint */
  border-color: var(--y);
  color: var(--y);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

/* Streaming Providers Custom Checkboxes */
.providers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.provider-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--b3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius:8px; corner-shape: squircle;
  cursor: pointer;
  transition: all .15s;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  user-select: none;
}

.provider-checkbox-label:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--t1);
}

.provider-checkbox-label input {
  display: none;
}

.provider-checkbox-label.selected {
  border-color: var(--border-color, var(--y));
  background: rgba(255, 255, 255, 0.04);
  color: var(--t1);
}

.provider-check-box {
  width: 16px;
  height: 16px;
  border-radius:4px; corner-shape: squircle;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:12px;
  color: transparent;
  transition: all .15s;
}

.provider-checkbox-label.selected .provider-check-box {
  background: var(--bg-color, var(--y));
  border-color: var(--bg-color, var(--y));
  color: #000;
}

.provider-logo-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius:4px; corner-shape: squircle;
  font-size:12px;
  color: #fff;
  flex-shrink: 0;
}

/* Custom Controls for Roulette Tab */
.settings-control-group {
  margin-bottom: 16px;
}

.settings-control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Switch (Confetti) */
.switch-control {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch-control input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--b3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: .3s;
  border-radius:24px; corner-shape: squircle;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #a1a1aa;
  transition: .3s;
  border-radius: 50%;
}

.switch-control input:checked + .switch-slider {
  background-color: rgba(245, 158, 11, 0.2);
  border-color: var(--y);
}

.switch-control input:checked + .switch-slider:before {
  transform: translateX(20px);
  background-color: var(--y);
}

/* Slider (Bend Intensity) */
.slider-control {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius:3px; corner-shape: squircle;
  background: var(--b3);
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.slider-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--y);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  transition: transform 0.1s;
}

.slider-control::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.settings-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.settings-stat-card {
  background: var(--b3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius:8px; corner-shape: squircle;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-stat-val {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}

.settings-stat-lbl {
  font-size:12px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── GENRE POPOVER (GLASSMORPHIC DOCK STYLE) ─── */
.genre-popover {
  position: fixed;
  bottom: 104px; /* Float directly above the bottom nav */
  left: 50%;
  transform: translateX(-50%) translateY(20px) scale(0.95);
  width: 90%;
  max-width: 400px;
  background: rgba(18, 18, 20, 0.85); /* Matches bottom nav background */
  backdrop-filter: blur(8px); /* Matches bottom nav blur */
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12); /* Matches bottom nav border */
  border-radius:24px; corner-shape: squircle;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .2s var(--smooth);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.genre-popover.on {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}

.gp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.gp-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--t1);
  font-family: 'Syne', sans-serif;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gp-close-btn {
  background: transparent;
  border: none;
  color: var(--t3);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s;
}

.gp-close-btn:hover {
  color: var(--y);
}

.gp-pills-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.gp-pills-container::-webkit-scrollbar {
  width: 4px;
}
.gp-pills-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius:2px; corner-shape: squircle;
}

.gp-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius:12px; corner-shape: squircle;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s var(--smooth);
  text-align: center;
}

.gp-pill:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.4);
  color: var(--vl);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.gp-pill i {
  font-size: 12px;
  opacity: 0.85;
}

@media(max-width: 480px) {
  .genre-popover {
    bottom: 96px;
    width: 94%;
    padding: 16px;
  }
  .gp-pills-container {
    grid-template-columns: 1fr;
    max-height: 220px;
  }
}

.homepage-search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 20px 0;
}

body.watchlist-active .homepage-search-container {
  display: none !important;
}

/* ─── SEARCH SUGGESTIONS DROPDOWN ─── */
/* Floats above all content via z-index — no overlay, no blur, no dim */

/* homepage search container stays above the dropdown */
.homepage-search-container {
  position: relative;
  z-index: 600;
}

.search-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--b3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius:16px; corner-shape: squircle;
  overflow: hidden;
  z-index: 9999;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
}
.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s var(--smooth);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.suggestion-item:last-child {
  border-bottom: none;
}
.suggestion-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.suggestion-thumb {
  width: 36px;
  height: 50px;
  border-radius:6px; corner-shape: squircle;
  object-fit: cover;
  background: var(--b2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.suggestion-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
  min-width: 0;
}
.suggestion-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-meta {
  font-size:12px;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-match {
  font-size:12px;
  font-weight: 700;
  color: var(--y);
  padding: 2px 6px;
  background: rgba(251, 191, 36, 0.12);
  border-radius:4px; corner-shape: squircle;
  flex-shrink: 0;
}

/* ─── TASTE TUNER DRAWER ─── */
.tuner-toggle-btn {
  background: var(--b3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--t1);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all .15s var(--smooth);
  flex-shrink: 0;
}
.tuner-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}
.taste-tuner-drawer {
  background: var(--b3);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius:18px; corner-shape: squircle;
  padding: 20px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  margin-top: 8px;
  animation: slideDownTuner .2s var(--smooth) forwards;
}

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

.tuner-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.tuner-sliders {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tuner-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tuner-item label {
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  width: 120px;
  flex-shrink: 0;
}
.tuner-slider {
  flex-grow: 1;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.08);
  height: 6px;
  border-radius:3px; corner-shape: squircle;
  outline: none;
}
.tuner-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--y);
  cursor: pointer;
  transition: transform 0.15s var(--smooth);
}
.tuner-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}
.tuner-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--y);
  width: 45px;
  text-align: right;
  flex-shrink: 0;
}



/* ══════════════════════════════════════
   GENRE BROWSE — multi-row grid + Load More
══════════════════════════════════════ */
.genre-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 18px 12px;
  padding: 4px 0 8px;
  justify-content: center;
}

/* Each card in grid mode fills its cell */
.genre-results-grid .movie-card {
  flex: unset;
  width: 100%;
}

.genre-results-grid .card-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
}

/* Load More button */
.genre-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius:40px; corner-shape: squircle;
  padding: 13px 36px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  font-family: 'Syne', sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .25s var(--smooth);
}
.genre-load-more-btn:hover {
  background: var(--v2);
  border-color: rgba(124,58,237,.5);
  color: var(--vl);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,58,237,.2);
}
.genre-load-more-btn:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.genre-load-more-btn i {
  font-size: 15px;
  color: var(--vl);
}

/* Fade-in animation for newly appended cards */
@keyframes card-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.genre-results-grid .movie-card.entering {
  animation: card-fade-in .4s var(--expo) both;
}
.plat-card.entering {
  animation: card-fade-in .4s var(--expo) both;
}

/* ── Genre view: skeleton shimmer placeholders while TMDB loads ── */
.genre-skeleton {
  pointer-events: none;
}
.genre-skeleton-thumb {
  width: 168px;
  height: 240px;
  border-radius:14px; corner-shape: squircle;
  background: linear-gradient(90deg, var(--b3) 25%, var(--b4) 50%, var(--b3) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.15s var(--smooth) infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Genre view: search-section background so it's never transparent-black ── */
body.search-active #search-section {
  background: var(--b0);
  min-height: 100vh;
}

/* ══════════════════════════════════════
   ALREADY WATCHED — nav button, page, cards
══════════════════════════════════════ */

/* ── Nav button ── */
.watched-nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius:10px; corner-shape: squircle;
  padding: 7px 14px;
  color: var(--t2);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 10px;
  transition: background .22s var(--smooth), border-color .22s var(--smooth), color .22s var(--smooth), transform .18s var(--smooth);
  white-space: nowrap;
}
.watched-nav-btn:hover {
  background: rgba(245,197,24,.1);
  border-color: rgba(245,197,24,.4);
  color: var(--y);
  transform: translateY(-1px);
}
.watched-nav-btn i {
  font-size: 14px;
}
.watched-nav-label {
  letter-spacing: .01em;
}
.watched-nav-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--y);
  color: #000;
  font-size:12px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  min-width: 17px;
  height: 17px;
  border-radius:10px; corner-shape: squircle;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* ── Sort dropdown ── */
.watched-sort-select {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius:8px; corner-shape: squircle;
  color: var(--t2);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  outline: none;
  transition: border-color .2s var(--smooth), color .2s var(--smooth);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239490b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.watched-sort-select:hover,
.watched-sort-select:focus {
  border-color: rgba(245,197,24,.4);
  color: var(--t1);
}
.watched-sort-select option {
  background: var(--b2);
  color: var(--t1);
}

/* ── Empty state ── */
.watched-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 24px;
  color: var(--t3);
  text-align: center;
}
.watched-empty i {
  font-size: 42px;
  opacity: .35;
}
.watched-empty p {
  font-size: 14px;
  max-width: 320px;
  line-height: 1.5;
}

/* ── User-rating badge overlay on watched cards ── */
.watched-user-rating-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  pointer-events: none;
}
.watched-star-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(245,197,24,.35);
  border-radius:6px; corner-shape: squircle;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--y);
  letter-spacing: .5px;
  line-height: 1;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
}
.watched-star-badge em {
  font-style: normal;
  font-size:12px;
  color: var(--t2);
  font-weight: 600;
  margin-left: 2px;
}

/* ── Card enter animation (reuses genre grid animation) ── */
.watched-card.entering {
  animation: card-fade-in .4s var(--expo) both;
}

/* ── Light theme tweaks ── */
body.light-theme .watched-nav-btn {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.1);
  color: #4b5563;
}
body.light-theme .watched-nav-btn:hover {
  background: rgba(245,197,24,.12);
  border-color: rgba(234,179,8,.5);
  color: #92400e;
}
body.light-theme .watched-sort-select {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
  color: #374151;
}

/* ── Auth Form Animations ── */
.auth-slide-left {
  animation: authSlideLeft .2s var(--smooth) forwards;
}

.auth-slide-right {
  animation: authSlideRight .2s var(--smooth) forwards;
}

@keyframes authSlideLeft {
  0% { transform: translateX(25px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes authSlideRight {
  0% { transform: translateX(-25px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ─── GRADUAL BLUR OVERLAY SYSTEM ─── */
.gradual-blur {
  position: absolute;
  top: 0; bottom: 0;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  isolation: isolate;
  overflow: hidden;
  opacity: 1;
  transition: opacity .25s var(--smooth);
}
.row-wrap:hover .gradual-blur,
.trend-scroll-wrap:hover .gradual-blur,
.plat-wrap:hover .gradual-blur {
  opacity: 1;
}
#overlay .gradual-blur,
#settings-overlay .gradual-blur {
  opacity: 1 !important;
}
.gradual-blur-inner {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gradual-blur-inner > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}
@supports not (backdrop-filter: blur(1px)) {
  .gradual-blur-inner > div {
    background: rgba(5, 5, 8, 0.45);
    opacity: 0.6;
  }
}

/* ─── PICK TABS SWITCHER ─── */
.pick-tabs {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius:30px; corner-shape: squircle;
  padding: 4px;
  margin-bottom: 24px;
  width: fit-content;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}
.pick-tab {
  background: transparent;
  border: none;
  border-radius:20px; corner-shape: squircle;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .15s var(--smooth);
  font-family: 'Syne', sans-serif;
}
.pick-tab:hover {
  color: var(--t1);
  background: rgba(255, 255, 255, 0.02);
}
.pick-tab.active {
  color: #000;
  background: var(--y);
}

/* ─── SWIPE PANEL SETUP FORM ─── */
.swipe-setup-form {
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 0;
  text-align: left;
}
.form-row {
  display: flex;
  gap: 12px;
}
.form-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.swipe-setup-form label {
  font-size:12px;
  font-weight: 700;
  color: var(--t2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.swipe-select, .swipe-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius:8px; corner-shape: squircle;
  padding: 11px 14px;
  color: var(--t1);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.swipe-select:focus, .swipe-input:focus {
  border-color: rgba(245, 197, 24, 0.4);
  box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.1);
}
.actor-select-wrapper {
  position: relative;
}
.actor-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #141419;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius:8px; corner-shape: squircle;
  max-height: 180px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.actor-suggestion-item {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--t1);
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.actor-suggestion-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ─── SWIPE MATCH DECK GAME ─── */
.swipe-game-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
#swipe-progress-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--y);
  font-family: 'Syne', sans-serif;
}
.swipe-progress-bar-wrap {
  width: 100%;
  max-width: 320px;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius:3px; corner-shape: squircle;
  overflow: hidden;
}
.swipe-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--y);
  border-radius:3px; corner-shape: squircle;
  transition: width .2s var(--smooth);
}

/* ─── CARD STACK ─── */
.swipe-deck-container {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 420px;
  margin: 0 auto 28px;
  perspective: 1000px;
}
.swipe-card-stack {
  position: relative;
  width: 100%;
  height: 100%;
}
.swipe-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius:16px; corner-shape: squircle;
  overflow: hidden;
  background: #181820;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transform-origin: 50% 100%;
  transition: transform .15s var(--smooth), opacity .15s var(--smooth);
}
.swipe-card:active {
  cursor: grabbing;
}
.swipe-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.swipe-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,12,0.95) 0%, rgba(10,10,12,0.3) 40%, transparent 70%);
  pointer-events: none;
}
.swipe-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px;
  text-align: left;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.swipe-card-title {
  font-size: 18px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  color: var(--t1);
  letter-spacing: -0.4px;
  line-height: 1.25;
}
.swipe-card-meta {
  font-size: 12px;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.swipe-card-badge {
  background: rgba(245, 197, 24, 0.15);
  color: var(--y);
  padding: 2px 6px;
  border-radius:4px; corner-shape: squircle;
  font-size:12px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ─── SWIPE ACTION CONTROLS ─── */
.swipe-action-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}
.swipe-control-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all .15s var(--spring);
}
.swipe-control-btn.dislike {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.05);
}
.swipe-control-btn.dislike:hover {
  background: #ef4444;
  color: #000;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  transform: scale(1.12);
}
.swipe-control-btn.skip {
  color: var(--t2);
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  font-size: 16px;
}
.swipe-control-btn.skip:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--t1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  transform: scale(1.12);
}
.swipe-control-btn.like {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.05);
}
.swipe-control-btn.like:hover {
  background: #10b981;
  color: #000;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  transform: scale(1.12);
}

/* ─── COMPLETION GRID ─── */
.swipe-completion-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .swipe-completion-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .swipe-completion-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── ONBOARDING TASTE PILLS & TAG CHIPS ─── */
.genre-pill, .lang-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius:20px; corner-shape: squircle;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s var(--smooth);
  user-select: none;
}
.genre-pill:hover, .lang-pill:hover {
  color: var(--t1);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}
.genre-pill.active, .lang-pill.active {
  color: #000;
  background: var(--y);
  border-color: var(--y);
  box-shadow: 0 4px 15px rgba(245, 197, 24, 0.25);
}

.talent-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #c084fc;
  border-radius:20px; corner-shape: squircle;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  user-select: none;
}
.talent-tag i {
  cursor: pointer;
  color: var(--t3);
  font-size:12px;
  transition: color 0.15s;
}
.swipe-card-stack {
  position: relative;
  width: 100%;
  height: 100%;
}
.swipe-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius:16px; corner-shape: squircle;
  overflow: hidden;
  background: #181820;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transform-origin: 50% 100%;
  transition: transform .15s var(--smooth), opacity .15s var(--smooth);
}
.swipe-card:active {
  cursor: grabbing;
}
.swipe-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.swipe-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,12,0.95) 0%, rgba(10,10,12,0.3) 40%, transparent 70%);
  pointer-events: none;
}
.swipe-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px;
  text-align: left;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.swipe-card-title {
  font-size: 18px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  color: var(--t1);
  letter-spacing: -0.4px;
  line-height: 1.25;
}
.swipe-card-meta {
  font-size: 12px;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.swipe-card-badge {
  background: rgba(245, 197, 24, 0.15);
  color: var(--y);
  padding: 2px 6px;
  border-radius:4px; corner-shape: squircle;
  font-size:12px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ─── SWIPE ACTION CONTROLS ─── */
.swipe-action-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}
.swipe-control-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all .15s var(--spring);
}
.swipe-control-btn.dislike {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.05);
}
.swipe-control-btn.dislike:hover {
  background: #ef4444;
  color: #000;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  transform: scale(1.12);
}
.swipe-control-btn.skip {
  color: var(--t2);
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  font-size: 16px;
}
.swipe-control-btn.skip:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--t1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  transform: scale(1.12);
}
.swipe-control-btn.like {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.05);
}
.swipe-control-btn.like:hover {
  background: #10b981;
  color: #000;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  transform: scale(1.12);
}

/* ─── COMPLETION GRID ─── */
.swipe-completion-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .swipe-completion-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .swipe-completion-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── ONBOARDING TASTE PILLS & TAG CHIPS ─── */
.genre-pill, .lang-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius:20px; corner-shape: squircle;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s var(--smooth);
  user-select: none;
}
.genre-pill:hover, .lang-pill:hover {
  color: var(--t1);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}
.genre-pill.active, .lang-pill.active {
  color: #000;
  background: var(--y);
  border-color: var(--y);
  box-shadow: 0 4px 15px rgba(245, 197, 24, 0.25);
}

.talent-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #c084fc;
  border-radius:20px; corner-shape: squircle;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  user-select: none;
}
.talent-tag i {
  cursor: pointer;
  color: var(--t3);
  font-size:12px;
  transition: color 0.15s;
}
.talent-tag i:hover {
  color: #ef4444;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.grid-active .plat-load-more {
  display: block !important;
}
/* ── AUTO-GENERATED UTILITY CLASSES ── */
.pt-44 { padding-top: 44px; }
.text-xs { font-size:12px; }
.text-sm { font-size:12px; }
.text-xxs { font-size:12px; }
.hidden { display: none !important; }
.load-more-wrap { display: none; text-align: center; padding: 32px 0 8px; }
.mb-16 { margin-bottom: 16px; }
.sub-label-1 { font-size:12px; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 10px; }
.sub-label-2 { display: block; font-size:12px; font-weight: 700; color: var(--t2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.title-sm { font-size: 12px; font-weight: 700; color: var(--t1); margin-bottom: 2px; }
.text-muted-sm { font-size:12px; color: var(--t3); }
.card-box { padding: 14px; background: var(--b3); border-radius:10px; corner-shape: squircle; border: 1px solid rgba(255, 255, 255, .05); }
.text-yellow { color: var(--y); }
.label-uppercase { font-size:12px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 13px; }
.text-left { text-align: left; }
.mb-28 { margin-bottom: 28px; }
.flex-wrap-8 { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── AUTO-GENERATED UNIQUE CLASSES ── */
.u-hidden-0 { display:none;padding:56px 0 0 }
.u-flex-1 { display:flex;flex-wrap:wrap;gap:8px;margin-top:10px }
.u-margin-top-24px-2 { margin-top:24px }
.u-position-relative-3 { position:relative; }
.u-syne-header { font-family:'Syne',sans-serif;font-size:14px;font-weight:800;color:var(--y) }
.u-width-100-justify-content-center-5 { width:100%;justify-content:center;background:#e74c3c;color:#fff }
.u-flex-6 { display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--b3);border-radius:10px; corner-shape: squircle;border:1px solid rgba(255,255,255,.05);margin-bottom:16px }
.u-font-size-12px-padding-9px-7 { font-size:12px; padding:9px 16px; border-radius:12px; corner-shape: squircle; cursor:pointer; }
.u-position-absolute-right-14px-8 { position:absolute;right:14px;bottom:14px;background:none;border:none;color:var(--t3);cursor:pointer;padding:0;line-height:1; }
.u-background-113ccf-9 { background:#113ccf }
.u-position-fixed-bottom-24px-10 { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none; }
.u-font-size-12px-font-weight-700-11 { font-size:12px;font-weight:700;color:var(--t1);margin-bottom:4px }
.u-background-002be0-12 { background:#002be0 }
.u-color--ef4444-13 { color: #ef4444; font-size: 14px; margin-bottom: 16px; display: none; }
.u-syne-header { font-family:'Syne',sans-serif;font-size:20px;font-weight:800;margin-bottom:18px;letter-spacing:-.4px }
.u-margin-bottom-12px-15 { margin-bottom:12px }
.u-color-var--vl-16 { color:var(--vl) }
.u-color-var--t2-font-size-15px-17 { color:var(--t2);font-size:15px;margin-bottom:32px }
.u-text-align-left-margin-bottom-36px-18 { text-align:left;margin-bottom:36px }
.u-height-440px-19 { height:440px }
.u-font-size--20px-20 { font-size: 20px; font-weight: 700; }
.u---bg-color-00a8e0---border-color-00a8e0-21 { --bg-color:#00a8e0;--border-color:#00a8e0 }
.u-hidden-22 { display:none;padding-top:44px }
.u-position--absolute-23 { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.u---bg-color-1ce783---border-color-1ce783-24 { --bg-color:#1ce783;--border-color:#1ce783 }
.u-margin-bottom-20px-25 { margin-bottom:20px }
.u-font-size-12px-padding-9px-26 { font-size:12px;padding:9px 14px }
.u-font-size-11px-color-var--t3-27 { font-size:12px;color:var(--t3);line-height:1.4 }
.u-syne-header { font-size:27px;font-weight:900;letter-spacing:-.6px;font-family:'Syne',sans-serif }
.u-display--none-29 { display: none; margin-bottom: 22px; border-radius:10px; corner-shape: squircle; overflow: hidden; position: relative; padding-bottom: 56.25%; height: 0 }
.u-background-transparent-border-none-30 { background:transparent;border:none;color:var(--t2);cursor:pointer;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px }
.u-hidden-31 { display:none;position:fixed;inset:0;background:var(--b0);z-index:99999;overflow-y:auto;padding:40px 20px; }
.u-background-444-32 { background:#444 }
.u---bg-color-002be0---border-color-002be0-33 { --bg-color:#002be0;--border-color:#002be0 }
.u-width-0-34 { width:0% }
.u-background-1ce783-color-000-35 { background:#1ce783;color:#000 }
.u-syne-header { font-family:'Syne',sans-serif;font-weight:800;font-size:32px;letter-spacing:-1px;color:var(--t1);margin-bottom:8px }
.u-background-00a8e0-37 { background:#00a8e0 }
.u-font-size-12px-color-var--t2-38 { font-size:12px;color:var(--t2);margin-top:5px }
.u-max-width-600px-margin-40px-39 { max-width:600px;margin:40px auto;text-align:center; }
.u-padding--24px-40 { padding: 24px; }
.u-display--flex-41 { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.u-width-60px-height-60px-42 { width:60px;height:60px;border:4px solid rgba(245,197,24,0.15);border-top-color:var(--y);border-radius:50%;margin:0 auto 24px;animation:spin 1.15s linear infinite; }
.u-font-size-13px-padding-10px-43 { font-size:13px; padding:10px 22px; display:none; gap:8px; align-items:center; cursor:pointer; }
.u-margin-right-8px-44 { margin-right:8px }
.u---bg-color-113ccf---border-color-113ccf-45 { --bg-color:#113ccf;--border-color:#113ccf }
.u-font-size-10px-color-var--vl-46 { font-size:12px;color:var(--vl) }
.u-flex-47 { display:flex;align-items:center;gap:16px; }
.u-color-var--y-margin-right-8px-48 { color:var(--y);margin-right:8px }
.u-position--relative-49 { position: relative; }
.u-display--flex-50 { display: flex; gap: 14px; }
.u-font-size-28px-color-var--t3-51 { font-size:28px;color:var(--t3) }
.u-background-transparent-border-none-52 { background:transparent;border:none;color:var(--t2);cursor:pointer;font-size:12px;font-weight:600 }
.u-syne-header { font-family:'Syne',sans-serif;font-size:32px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;justify-content:center;gap:10px }
.u---bg-color-e50914---border-color-e50914-54 { --bg-color:#e50914;--border-color:#e50914 }
.u-color-var--t2-font-size-13px-55 { color:var(--t2);font-size:13px;margin-top:8px }
.u-hidden-56 { display:none;max-width:400px;margin:100px auto;text-align:center; }
.u-font-size-12px-padding-9px-57 { font-size:12px;padding:9px 18px }
.u-avatar-md { width:36px;height:36px;border-radius:8px; corner-shape: squircle;object-fit:cover; }
.u-syne-header { font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--t1) }
.u-hidden-60 { display:none;max-width:400px;margin:20px auto;text-align:center; }
.u-background-e50914-61 { background:#e50914 }
.u-margin-bottom-10px-62 { margin-bottom:10px }
.u-display--flex-63 { display: flex; gap: 32px; margin-bottom: 20px; }
.u-margin-left-2px-font-size-10px-64 { margin-left:2px;font-size:12px }
.u-margin-bottom-24px-65 { margin-bottom:24px }
.u-padding-14px-28px-66 { padding:14px 28px;font-weight:700;font-size:15px;width:100%;border-radius:12px; corner-shape: squircle; }
.u-flex-67 { display:flex;align-items:center;gap:12px }
.u-width-100-justify-content-center-68 { width:100%;justify-content:center }
.u-padding-56px-0-69 { padding:56px 0 0 }
.u-display--none-70 { display: none; }
.u-cursor-pointer-71 { cursor:pointer }
.u-color-00E054-margin-right-4px-72 { color:#00E054; margin-right:4px; }
.u---bg-color-a2aaad---border-color-a2aaad-73 { --bg-color:#a2aaad;--border-color:#a2aaad }
.u-syne-header { font-family:'Syne',sans-serif;font-weight:800;font-size:24px;color:var(--t1);margin-bottom:4px }
.u-flex--1-75 { flex: 1; }
.u-avatar-sm { width:30px;height:30px;border-radius:7px; corner-shape: squircle;object-fit:cover;display:block; }
.u-padding-right-44px-77 { padding-right:44px; }
.u-color-var--t2-font-size-13px-78 { color:var(--t2);font-size:13px;margin-bottom:20px }

/* Play Trailer button on poster */
.hero-play-btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}

/* Inline Trailer Player */
#m-video-container {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
}
#m-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}