/* ── ICON SYSTEM ── */
/* SVG icon base reset — prevents 300×150 default on bare sprite use elements */
.m-icon svg,.nav-search-icon svg,.ds-btn svg,.pref-btn svg,.feat-check svg,.fh-btn-play svg,.btn-primary svg,.btn-outline svg,.detail-btns svg,.disc-chip svg{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;pointer-events:none}
.m-icon{display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.m-icon svg{width:22px;height:22px;}
.nav-search-icon svg{width:15px;height:15px;}
.ds-btn svg{width:15px;height:15px;flex-shrink:0}
.pref-btn svg{width:30px;height:30px;margin-bottom:6px;display:block;margin-left:auto;margin-right:auto}
.feat-check svg{width:8px;height:8px;flex-shrink:0}
.fh-btn-play svg{width:15px;height:15px;flex-shrink:0}
.btn-primary svg,.btn-outline svg,.detail-btns svg{width:14px;height:14px;flex-shrink:0}
:root {
  --bg:      #12121c;
  --surface: #1a1a28;
  --card:    #1e1e2e;
  --border:  rgba(255,255,255,0.08);
  --lime:    #c8ff00;
  --purple:  #7b5ea7;
  --muted:   rgba(255,255,255,0.45);
  --text:    #e8e8f0;
  --red:     #ff6b6b;
  --gold:    #f5c842;
  --r-card:  12px;
  --r-pill:  999px;
  --surface2: #22223a;
  --border2:  rgba(255,255,255,0.12);
  /* Legacy aliases — keep until all screens migrated */
  --accent:  #c8ff00;
  --accent2: #7b5ea7;
  --accent3: #ff6b6b;
  /* ── SPACING SCALE (8px base) ── */
  --sp1:  4px;
  --sp2:  8px;
  --sp3:  12px;
  --sp4:  16px;
  --sp5:  24px;
  --sp6:  32px;
  --sp7:  48px;
  --sp8:  64px;
  /* ── LAYOUT ── */
  --container: 1200px;
}
/* ── LIGHT MODE ── */
body.theme-light {
  --bg:      #f2f2f7;
  --surface: #ffffff;
  --card:    #e8e8f0;
  --border:  rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.12);
  --surface2:#ededf5;
  --text:    #111118;
  --muted:   rgba(0,0,0,0.45);
}
body.theme-light nav#main-nav {
  background: rgba(242,242,247,0.92);
}
body.theme-light .glass {
  background: rgba(255,255,255,0.7);
}
body.theme-light .glass-low {
  background: rgba(255,255,255,0.85);
}
/* ── GLASS UTILITIES ── */
.glass{background:rgba(31,31,41,0.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.08)}
.glass-low{background:rgba(13,13,23,0.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08)}
.glow-lime{box-shadow:0 0 24px rgba(200,255,0,0.25)}
.glow-lime:hover{box-shadow:0 0 36px rgba(200,255,0,0.45)}
/* Ambient glow pseudo-elements — added to specific containers */
.amb-glows{position:relative;overflow:hidden}
.amb-glows::before{content:'';position:absolute;top:-80px;left:-80px;width:480px;height:480px;background:radial-gradient(circle,rgba(200,255,0,0.07) 0%,transparent 65%);pointer-events:none;z-index:0}
.amb-glows::after{content:'';position:absolute;bottom:-80px;right:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(123,94,167,0.1) 0%,transparent 65%);pointer-events:none;z-index:0}
/* ── BUTTON SYSTEM ── */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-icon,
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.2, 0, 0, 1);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  height: 38px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--lime);
  color: #0a0a0f;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-secondary {
  height: 36px;
  padding: 0 18px;
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border2);
  color: var(--text);
}
.btn-secondary:hover { background: rgba(255,255,255,0.11); }
.btn-ghost {
  height: 36px;
  padding: 0 16px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border2);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255,255,255,0.09); }
.btn-icon {
  height: 36px;
  width: 36px;
  padding: 0;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border2);
  color: var(--muted);
}
.btn-icon:hover { color: var(--text); background: rgba(255,255,255,0.09); }
.btn-pill {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.btn-pill:hover { border-color: var(--border2); color: var(--text); }
.btn-pill.active {
  background: var(--lime);
  border-color: var(--lime);
  color: #0a0a0f;
}
/* Hero buttons — intentionally larger (42px) than the base system */
.btn-hero-primary,
.btn-hero-ghost {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.18s;
}
.btn-hero-primary {
  padding: 0 24px;
  background: var(--lime);
  color: #0a0a0f;
  border: none;
}
.btn-hero-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-hero-ghost {
  padding: 0 20px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text);
  font-weight: 600;
}
.btn-hero-ghost:hover { background: rgba(255,255,255,0.16); }
/* Mobile filter chips */
.disc-filter-chips{display:none;gap:8px;overflow-x:auto;padding:12px 16px 4px;margin:-8px -16px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.disc-filter-chips::-webkit-scrollbar{display:none}
.disc-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid var(--border2);background:var(--surface2);color:var(--muted);cursor:pointer;transition:all 0.18s;flex-shrink:0}
.disc-chip.active{background:var(--accent);color:#0a0a0f;border-color:var(--accent)}
.disc-chip svg{width:12px;height:12px;flex-shrink:0}
@media(max-width:768px){.disc-filter-chips{display:flex}}
/* nav-profile-btn removed — replaced by new nav system */
/* PREFERENCES MODAL */
.prefs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 28px}
.pref-btn{padding:18px 8px;border-radius:14px;background:var(--surface2);border:2px solid var(--border2);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;text-align:center;line-height:1.5;font-family:'Inter',sans-serif}
.pref-btn:hover{border-color:var(--accent2);color:var(--text)}
.pref-btn.selected{background:rgba(123,94,167,0.12);border-color:var(--accent2);color:var(--text)}
/* PROFILE EDIT MODAL */
.avi-upload-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:24px;gap:12px}
.avi-preview{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#1a2200,#0f1a00);border:3px solid var(--lime);display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:24px;font-weight:800;color:var(--lime);overflow:hidden;cursor:pointer}
.avi-preview img{width:100%;height:100%;object-fit:cover}
.avi-change-btn{font-size:12px;color:var(--purple);font-weight:600;cursor:pointer;background:rgba(123,94,167,0.1);border:1px solid rgba(123,94,167,0.3);padding:5px 14px;border-radius:20px;transition:background 0.2s}
.avi-change-btn:hover{background:rgba(123,94,167,0.2)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
button{cursor:pointer;font-family:'Inter',sans-serif}
/* ── TOUCH TARGETS ── */
button,[role="button"],a{min-height:44px}
.mn-tab{min-height:56px}
/* Card tray buttons are intentionally exempt (dense UI) */
.card-tray-btn,.quick-tray-btn,.nf-card-tray-btn{min-height:32px}
/* Filter chips — dense UI, relaxed to 36px (below 44px global rule) */
.disc-chip,.disc-sticky-pill{min-height:36px}
/* ── PAGE CONTAINER ── */
.page-container{max-width:var(--container);margin-left:auto;margin-right:auto;width:100%}
input,select,textarea{font-family:'Inter',sans-serif}

/* ── NAV ── */
nav#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 52px;
  padding: 0 var(--sp4);
  display: flex; align-items: center; gap: var(--sp3);
  background: rgba(18,18,28,0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) {
  nav#main-nav { height: 60px; padding: 0 var(--sp6); }
}
.logo {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 18px;
  color: var(--lime); background: none; border: none; cursor: pointer;
  letter-spacing: -0.03em; flex-shrink: 0; padding: 0;
}
.nav-links { display: flex; gap: var(--sp2); }
.nav-link {
  padding: 7px 12px; border-radius: 7px; font-size: 13px; font-weight: 500;
  color: var(--muted); background: transparent; border: none; cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-link.active { color: var(--lime); background: rgba(200,255,0,0.07); }
.nav-actions { display: flex; gap: var(--sp3); align-items: center; margin-left: auto; flex-shrink: 0; }
.nav-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: none;
  background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s; position: relative;
}
.nav-icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-bell-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); border: 2px solid var(--bg);
}
.btn-signin {
  padding: 7px 16px; border-radius: 7px; font-size: 13px; font-weight: 500;
  background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer;
  transition: border-color 0.15s;
}
.btn-signin:hover { border-color: var(--border2); }
.btn-signup {
  padding: 7px 16px; border-radius: 7px; font-size: 13px; font-weight: 700;
  background: var(--lime); color: #12121c; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: opacity 0.15s;
}
.btn-signup:hover { opacity: 0.9; }
.nav-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(200,255,0,0.15); border: 1.5px solid var(--lime);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 12px; color: var(--lime); overflow: hidden; padding: 0;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-dropdown {
  position: fixed; top: 56px; right: 32px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  min-width: 180px; z-index: 200;
}
.nav-dropdown button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--text);
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.nav-dropdown button:hover { background: rgba(255,255,255,0.06); }
.nav-dropdown .nd-danger { color: var(--red); }
.nd-divider { height: 1px; background: var(--border); margin: 4px 0; }
/* Mobile bottom nav */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: 60px; padding: 0 8px;
  background: rgba(18,18,28,0.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  align-items: center; justify-content: space-around;
}
.mn-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; flex: 1; min-height: 56px; padding: var(--sp1) var(--sp2);
  background: none; border: none; color: var(--muted);
  font-size: 10px; font-weight: 600; cursor: pointer;
  transition: color 0.15s; font-family: 'Inter', sans-serif;
}
.mn-tab.active,.mn-tab:hover { color: var(--lime); }
.mn-tab svg { flex-shrink: 0; }
@media (max-width: 768px) {
  nav#main-nav { padding: 0 16px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18,18,28,0.97); }
  .nav-links { display: none; }
  .mobile-nav { display: flex; }
  body { padding-bottom: 60px; }
  .nav-dropdown { right: 16px; }
  .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(31,31,41,0.95); }
  .glass-low { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(13,13,23,0.95); }
}
@media (max-width: 480px) {
  nav#main-nav { padding: 0 12px; }
  .logo { font-size: 16px; }
  .btn-signin, .btn-signup { padding: 6px 12px; font-size: 12px; }
}

/* PAGES */
.page{display:none;min-height:calc(100vh - 52px);padding-top:52px}
.page.active{display:block}
/* Home page starts at very top — nav is transparent overlay */
html body #page-home{margin-top:0!important;padding-top:0!important;min-height:100vh}
/* Home page — hero sits under transparent nav from very top */
#page-home{margin-top:0!important;min-height:100vh}

/* HOME */
.hero{min-height:88vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:80px 32px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(123,94,167,0.13) 0%,transparent 70%);pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:60px 60px;opacity:0.35;pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border2);padding:6px 16px;border-radius:20px;font-size:13px;color:var(--muted);margin-bottom:28px}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.3)}}
.hero h1{font-family:'Inter',sans-serif;font-size:clamp(40px,7vw,80px);font-weight:900;line-height:0.95;letter-spacing:-0.04em;margin-bottom:24px}
.hero h1 .outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.25)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{font-size:18px;color:var(--muted);max-width:500px;margin:0 0 44px;font-weight:300;line-height:1.7}
.hero-btns{display:flex;gap:14px;justify-content:flex-start}
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--lime); color: #12121c; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.9; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.07); border: 1px solid var(--border2);
  color: var(--text); cursor: pointer; font-size: 14px; font-weight: 600;
  transition: background 0.15s;
}
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.hero-stats{display:flex;gap:48px;margin-top:68px;padding-top:36px;border-top:1px solid var(--border)}
.stat-val{font-family:'Inter',sans-serif;font-size:30px;font-weight:800}
.stat-key{font-size:12px;color:var(--muted);margin-top:2px}
.home-section{max-width:1200px;margin:0 auto;padding:72px 32px}
.sec-label{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.sec-title{font-family:'Inter',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-0.025em;margin-bottom:28px}
.sec-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}
.sec-more{font-size:14px;color:var(--accent);font-weight:600;background:none;border:none}

/* CARDS */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.card{background:#141414;border-radius:var(--r-card);overflow:hidden;cursor:pointer;position:relative;transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),box-shadow 0.3s}
.card:hover{transform:scale(1.04);box-shadow:0 0 0 2px rgba(200,255,0,0.45),0 16px 40px rgba(0,0,0,0.9);z-index:2}
.card-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;background:#1a1a1a}
.card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 0.45s cubic-bezier(0.22,1,0.36,1);filter:brightness(1.05) saturate(1.1)}
.card:hover .card-thumb img{transform:scale(1.06)}
.card-grad{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.55) 38%,rgba(0,0,0,0.08) 65%,transparent 100%)}
.card-badge{position:absolute;top:10px;left:10px;z-index:3;background:rgba(20,20,28,0.82);backdrop-filter:blur(8px);border:1px solid rgba(200,255,0,0.25);padding:3px 9px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.card-pin{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px 12px;transition:padding-bottom 0.2s}
.card:hover .card-pin{padding-bottom:40px}
.card-title{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{font-size:11px;color:var(--muted);margin-top:2px}
.card-body{display:none}
.card-stats{display:none}
.card-actions{position:absolute;bottom:8px;right:8px;z-index:4;display:flex;gap:5px;opacity:0;transform:translateY(4px);transition:opacity 0.18s,transform 0.18s;pointer-events:none}
.card:hover .card-actions{opacity:1;transform:translateY(0);pointer-events:auto}
@media(max-width:768px){.cards-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:480px){
  .cards-grid{grid-template-columns:1fr;gap:16px}
  .card:hover,.nf-card:hover,.disc-card:hover{transform:none!important;box-shadow:none!important}
  .card-actions,.nf-card-actions,.disc-card-actions,.disc-card-play{display:none!important}
}

/* ── DISCOVER REDESIGN ── */
#page-discover{padding-top:52px}
.disc-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 52px)}
.disc-sidebar{position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;padding:20px 0;border-right:1px solid var(--border);scrollbar-width:none}
.disc-sidebar::-webkit-scrollbar{display:none}
.disc-main{padding:0;overflow-x:hidden}
.ds-section-label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);padding:12px 20px 6px;opacity:0.6}
.ds-label{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding:0 10px;margin-top:4px}
.ds-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 20px;font-size:13px;font-weight:500;color:var(--muted);background:none;border:none;cursor:pointer;border-left:2px solid transparent;text-align:left;transition:all 0.15s}
.ds-btn svg{width:14px;height:14px;flex-shrink:0}
.ds-btn:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.ds-btn.active{color:var(--lime);border-left-color:var(--lime);background:rgba(200,255,0,0.05)}
/* Discover hero banner */
.disc-hero{position:relative;overflow:hidden;padding:40px 32px 36px;background:linear-gradient(135deg,#0a0a18 0%,#120828 55%,#050e1e 100%);border-bottom:1px solid rgba(255,255,255,0.06)}
.disc-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 100% at 10% 50%,rgba(200,255,0,0.1) 0%,transparent 60%),radial-gradient(ellipse 50% 80% at 90% 30%,rgba(123,94,167,0.14) 0%,transparent 60%);pointer-events:none}
.disc-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.disc-hero-inner{position:relative;z-index:2;max-width:580px}
.disc-hero-badge{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);background:rgba(200,255,0,0.08);border:1px solid rgba(200,255,0,0.2);padding:4px 12px;border-radius:20px;margin-bottom:14px}
.disc-hero-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
.disc-hero-title{font-family:'Inter',sans-serif;font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin-bottom:10px;color:var(--text)}
.disc-hero-title em{font-style:normal;color:var(--accent)}
.disc-hero-sub{font-size:14px;color:rgba(180,180,200,0.7);margin-bottom:22px;font-weight:300;line-height:1.6}
.disc-hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.disc-hero-btn-primary {
  height: 42px; padding: 0 24px; border-radius: 10px;
  background: var(--lime); color: #0a0a0f;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all 0.18s;
}
.disc-hero-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.disc-hero-btn-ghost {
  height: 42px; padding: 0 20px; border-radius: 10px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: var(--text); font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all 0.18s;
}
.disc-hero-btn-ghost:hover { background: rgba(255,255,255,0.18); }
/* Featured strip - 3 cards */
.disc-hero-cards{position:absolute;right:32px;top:50%;transform:translateY(-50%);display:flex;gap:8px;pointer-events:none}
@media(max-width:900px){.disc-hero-cards{display:none}}
.disc-hero-mini-card{width:76px;border-radius:10px;overflow:hidden;opacity:0.9;flex-shrink:0}
.disc-hero-mini-card:nth-child(2){transform:translateY(-8px);opacity:1}
.disc-hero-mini-card:nth-child(3){transform:translateY(4px);opacity:0.7}
.disc-hero-mini-card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
/* Discover content area */
.disc-content-area{padding:28px 28px 40px}
@media(max-width:768px){.disc-content-area{padding:20px 16px 32px}}
/* Sticky genre bar */
.disc-sticky-bar{position:sticky;top:52px;z-index:50;background:rgba(10,10,15,0.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.06);display:flex;gap:6px;padding:10px 28px;overflow-x:auto;scrollbar-width:none}
.disc-sticky-bar::-webkit-scrollbar{display:none}
.disc-sticky-pill{padding:7px 16px;border-radius:20px;font-size:12px;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;cursor:pointer;transition:all 0.18s;white-space:nowrap;font-family:'Inter',sans-serif;flex-shrink:0}
.disc-sticky-pill:hover{color:var(--text);background:var(--surface2)}
.disc-sticky-pill.active{background:var(--accent);color:#0a0a0f;border-color:var(--accent)}
/* Discover stats bar */
.disc-stats-bar{display:flex;gap:24px;padding:16px 0 20px;border-bottom:1px solid var(--border);margin-bottom:24px;flex-wrap:wrap}
.disc-stat{display:flex;flex-direction:column}
.disc-stat-val{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;color:var(--text)}
.disc-stat-key{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;margin-top:1px}
/* Sort + count bar */
.disc-sort-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.disc-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.disc-count{font-size:13px;color:var(--muted)}
.disc-count strong{color:var(--text);font-weight:700}
.disc-sort{display:flex;align-items:center;gap:8px}
.disc-sort-label{font-size:12px;color:var(--muted)}
.disc-sort-sel{background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:7px 12px;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;outline:none}
/* Discover grid */
.disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp3)}
/* Discover card — Netflix Pure */
.disc-card{border-radius:var(--r-card);overflow:hidden;background:#141414;cursor:pointer;position:relative;transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),box-shadow 0.3s}
.disc-card:hover{transform:scale(1.05);box-shadow:0 0 0 2px rgba(200,255,0,0.45),0 16px 40px rgba(0,0,0,0.9);z-index:2}
.disc-card-thumb{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;display:block;background:#1a1a1a}
.disc-card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 0.45s cubic-bezier(0.22,1,0.36,1);filter:brightness(1.05) saturate(1.1)}
.disc-card:hover .disc-card-thumb img{transform:scale(1.06)}
.disc-card-grad{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.45) 40%,rgba(0,0,0,0.05) 70%,transparent 100%)}
.disc-card-pin{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px 8px;transition:padding-bottom 0.2s}
.disc-card:hover .disc-card-pin{padding-bottom:34px}
.disc-card-title{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-card-meta{font-size:11px;color:var(--muted);margin-top:2px}
.disc-card-rating{color:var(--accent);font-weight:700}
.disc-card-actions{position:absolute;bottom:8px;right:8px;z-index:4;display:flex;gap:5px;opacity:0;transform:translateY(4px);transition:opacity 0.18s,transform 0.18s;pointer-events:none}
.disc-card:hover .disc-card-actions{opacity:1;transform:translateY(0);pointer-events:auto}
.disc-card-body{display:none}
.disc-card-thumb-overlay{display:none}
.disc-card-cat-badge{display:none}
.disc-card-new{display:none}
.disc-card-play{display:none}
.disc-card-stats{display:none}
/* Discover page responsive */
@media(max-width:768px){.disc-layout{grid-template-columns:1fr}.disc-sidebar{display:none}.disc-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp3)}}
@media(max-width:480px){.disc-grid{grid-template-columns:repeat(2,1fr)}}
/* Featured wide card */
.disc-card.disc-card-wide{grid-column:span 2}
@media(max-width:600px){.disc-card.disc-card-wide{grid-column:span 1}}
.disc-card-wide .disc-card-thumb{aspect-ratio:21/9}
/* Section divider */
.disc-section-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;margin-top:8px}
.disc-section-head-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:800;letter-spacing:-0.01em;color:var(--text)}
.disc-section-head-line{flex:1;height:1px;background:var(--border)}
.disc-section-head-more{font-size:12px;color:var(--accent);font-weight:600;background:none;border:none;cursor:pointer}
/* Genres showcase row */
.disc-genre-pills-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.disc-genre-tag{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:10px;font-size:12px;font-weight:700;border:1px solid var(--border2);background:var(--surface);cursor:pointer;transition:all 0.18s;color:var(--muted)}
.disc-genre-tag:hover{border-color:rgba(200,255,0,0.3);color:var(--text);background:rgba(200,255,0,0.04)}
.disc-genre-tag.active{border-color:var(--accent);background:rgba(200,255,0,0.07);color:var(--accent)}
/* Creator spotlight cards in discover */
.disc-creator-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-bottom:28px}
.disc-creator-row::-webkit-scrollbar{display:none}
.disc-creator-mini{flex-shrink:0;width:120px;text-align:center;cursor:pointer;padding:16px 8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:all 0.2s}
.disc-creator-mini:hover{border-color:rgba(200,255,0,0.25);transform:translateY(-3px)}
.disc-creator-mini-avi{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#1a2200,#0f1a00);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:16px;font-weight:800;color:var(--accent);margin:0 auto 8px}
.disc-creator-mini-name{font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-creator-mini-count{font-size:10px;color:var(--muted);margin-top:2px}
/* Empty state in discover */
.disc-empty{text-align:center;padding:60px 24px;border:1px dashed rgba(255,255,255,0.08);border-radius:16px;color:var(--muted)}
.disc-empty-icon{font-size:48px;margin-bottom:14px;animation:emptyFloat 3s ease-in-out infinite}
/* Info count */
.disc-info-count{font-size:13px;color:var(--muted);padding:0 0 14px;display:flex;align-items:center;gap:6px}

/* PROFILE */
.prof-cover{height:260px;background:linear-gradient(135deg,#0f1a00,#1a2e00);position:relative;overflow:hidden}
.prof-cover-pattern{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(200,255,0,0.025) 0,rgba(200,255,0,0.025) 1px,transparent 1px,transparent 40px)}
.prof-header{max-width:1080px;margin:0 auto;padding:0 32px}
.prof-top{display:flex;align-items:flex-end;gap:20px;margin-top:-56px;margin-bottom:20px;position:relative;z-index:2}
.prof-avi{width:112px;height:112px;border-radius:50%;background:linear-gradient(135deg,#1a2200,#0f1a00);border:4px solid var(--bg);display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:36px;font-weight:800;color:var(--accent);flex-shrink:0}
.prof-name{font-family:'Inter',sans-serif;font-size:26px;font-weight:800;letter-spacing:-0.02em}
.prof-handle{font-size:14px;color:var(--muted);margin-top:3px}
.verified{display:inline-flex;align-items:center;gap:4px;background:rgba(200,255,0,0.08);border:1px solid rgba(200,255,0,0.2);color:var(--accent);padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;margin-left:8px;vertical-align:middle}
.prof-stats{display:flex;gap:28px;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:24px}
.p-stat-val{font-family:'Inter',sans-serif;font-size:20px;font-weight:700}
.p-stat-key{font-size:11px;color:var(--muted)}
.prof-body{max-width:1080px;margin:0 auto;padding:0 32px 80px}
.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp3)}
.empty-state{text-align:center;padding:60px 20px;border:1px dashed var(--border2);border-radius:16px}
.empty-icon{font-size:48px;margin-bottom:16px}
.empty-title{font-family:'Inter',sans-serif;font-size:20px;font-weight:700;margin-bottom:8px}
.empty-sub{color:var(--muted);font-size:14px;margin-bottom:24px}

/* PRICING */
.pricing-hero{text-align:center;padding:72px 32px 48px;position:relative;overflow:hidden}
.pricing-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(200,255,0,0.06),transparent 70%);pointer-events:none}
.billing-toggle{display:inline-flex;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:100px;padding:4px;gap:4px;margin-bottom:48px}
.bill-btn{padding:8px 22px;border-radius:100px;border:none;font-size:13px;font-weight:600;color:rgba(255,255,255,0.4);background:transparent;transition:all 0.2s;cursor:pointer;font-family:'Inter',sans-serif;display:inline-flex;align-items:center;gap:4px}
.bill-btn.active{background:#fff;color:#0a0a0f;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:0 auto;padding:0 24px 60px}
.plan{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:28px 22px;position:relative;display:flex;flex-direction:column;transition:all 0.28s}
.plan:hover{border-color:rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);transform:translateY(-3px);box-shadow:0 24px 60px rgba(0,0,0,0.5)}
.plan.featured{border-color:rgba(200,255,0,0.25);background:linear-gradient(160deg,rgba(10,18,0,0.9),rgba(12,12,20,0.95) 55%)}
.plan.featured:hover{border-color:rgba(200,255,0,0.4);box-shadow:0 24px 60px rgba(0,0,0,0.5),0 0 40px rgba(200,255,0,0.06)}
.plan-popular{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--lime);color:#0a0a0f;font-size:10px;font-weight:700;padding:4px 14px;border-radius:100px;font-family:'Inter',sans-serif;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;letter-spacing:0.01em}
.plan-tier{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.35);font-family:'Inter',sans-serif;margin-bottom:6px}
.plan-price{font-family:'Inter',sans-serif;font-size:32px;font-weight:800;letter-spacing:-0.025em;line-height:1;color:var(--text);margin:4px 0 2px}
.plan-price .mo{font-size:13px;font-weight:400;color:rgba(255,255,255,0.3);letter-spacing:0;font-family:'Inter',sans-serif}
.plan-divider{height:1px;background:rgba(255,255,255,0.07);margin:16px 0}
.plan-features{list-style:none;margin-bottom:24px;flex:1;display:flex;flex-direction:column}
.plan-features li{display:flex;align-items:flex-start;gap:10px;font-size:13px;padding:5px 0;color:rgba(255,255,255,0.72);font-family:'Inter',sans-serif;line-height:1.4}
.feat-check{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.plan-btn{width:100%;padding:12px;border-radius:100px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;border:none;transition:all 0.2s;cursor:pointer;letter-spacing:0.01em}
.plan-btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.4)}
.plan-btn.outline:hover{color:var(--text);border-color:rgba(255,255,255,0.2)}
.plan-btn.primary{background:var(--lime);color:#0a0a0f}
.plan-btn.primary:hover{opacity:0.9;box-shadow:0 8px 24px rgba(200,255,0,0.28)}
.plan-btn.gold{background:linear-gradient(135deg,#ffd700,#ff9900);color:#0a0a0f;border:1px solid rgba(255,215,0,0.3)}
.plan-btn.gold:hover{opacity:0.9;box-shadow:0 8px 24px rgba(255,215,0,0.28)}

/* NOTIFICATIONS PAGE */
#page-notifications{padding-top:52px}
.ntf-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;max-width:700px;margin:0 auto}
.ntf-title{font-family:'Inter',sans-serif;font-weight:800;font-size:22px;color:var(--text);letter-spacing:-0.02em}
.ntf-mark-all{font-size:12px;font-weight:600;color:var(--lime);background:none;border:none;cursor:pointer;transition:opacity 0.15s;font-family:inherit}
.ntf-mark-all:hover{opacity:0.7}
.ntf-tabs{display:flex;padding:12px 24px 0;max-width:700px;margin:0 auto;border-bottom:1px solid var(--border)}
.ntf-tab{padding:8px 16px;font-size:13px;font-weight:600;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all 0.15s;margin-bottom:-1px;font-family:inherit}
.ntf-tab.active{color:var(--lime);border-bottom-color:var(--lime)}
.ntf-tab:not(.active):hover{color:var(--text)}
.ntf-body{padding:0 24px 80px;max-width:700px;margin:0 auto}
.ntf-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity 0.15s;position:relative}
.ntf-item:last-child{border-bottom:none}
.ntf-item:hover{opacity:0.8}
.ntf-item.ntf-unread::before{content:'';position:absolute;left:-14px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--lime)}
.ntf-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ntf-icon-follow{background:rgba(200,255,0,0.1);color:var(--lime)}
.ntf-icon-comment{background:rgba(123,94,167,0.15);color:#b89ed4}
.ntf-icon-rating{background:rgba(245,200,66,0.12);color:var(--gold)}
.ntf-icon-system{background:rgba(255,255,255,0.06);color:var(--muted)}
.ntf-body-wrap{flex:1;min-width:0}
.ntf-text{font-size:13px;color:var(--text);line-height:1.5;margin-bottom:3px}
.ntf-text strong{font-weight:700}
.ntf-meta{font-size:11px;color:var(--muted)}
.ntf-thumb{width:48px;height:32px;border-radius:6px;object-fit:cover;background:var(--card);flex-shrink:0}
.ntf-empty{text-align:center;padding:80px 24px}
.ntf-empty-icon{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--muted)}
.ntf-empty-title{font-family:'Inter',sans-serif;font-weight:800;font-size:18px;color:var(--text);margin-bottom:6px}
.ntf-empty-sub{font-size:13px;color:var(--muted);line-height:1.6;max-width:300px;margin:0 auto}
.ntf-sign-in-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:11px 24px;border-radius:var(--r-pill);background:var(--lime);color:#12121c;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:800;font-size:14px;transition:opacity 0.15s}
.ntf-sign-in-cta:hover{opacity:0.9}
@media(max-width:768px){
  .ntf-header,.ntf-tabs{padding-left:16px;padding-right:16px}
  .ntf-body{padding-left:16px;padding-right:16px}
  .ntf-item.ntf-unread::before{left:-8px}
}
@media(max-width:480px){
  .ntf-title{font-size:18px}
  .ntf-thumb{width:40px;height:26px}
  .ntf-tab{padding:8px 10px;font-size:12px}
}

/* MODAL */
.modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
#auth-modal{z-index:9500;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
#auth-modal .modal{max-height:min(90dvh,720px);overscroll-behavior:contain}
#detail-modal {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); overflow-y: auto;
  display: none; flex-direction: column;
}
#detail-modal.open { display: flex; }
.modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;width:100%;max-width:440px;position:relative;box-shadow:0 32px 80px rgba(0,0,0,0.6);max-height:90vh;overflow-y:auto}
@keyframes modalIn{from{opacity:0;transform:scale(0.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-x{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,0.06);border:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:background 0.15s}
.modal-x:hover{background:rgba(255,255,255,0.12);color:var(--text)}
.modal-logo{font-family:'Inter',sans-serif;font-weight:800;font-size:22px;color:var(--lime);text-align:center;margin-bottom:20px;letter-spacing:-0.03em}
.modal-logo span{color:var(--text)}
.modal h2{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;margin-bottom:4px;letter-spacing:-0.02em}
.modal-sub{color:var(--muted);font-size:13px;margin-bottom:20px}
.auth-tabs{display:flex;background:rgba(255,255,255,0.05);border-radius:10px;padding:3px;margin-bottom:20px}
.auth-tab{flex:1;padding:8px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);background:transparent;transition:all 0.15s}
.auth-tab.active{background:var(--card);color:var(--text)}
/* Auth type picker cards */
.auth-type-card{padding:14px 10px;border-radius:var(--r-card);border:1.5px solid var(--border);background:var(--card);cursor:pointer;text-align:center;transition:border-color 0.15s;position:relative}
.auth-type-card.active{border-color:var(--lime)}
.atc-check{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;background:transparent;border:1.5px solid var(--border);display:none}
.auth-type-card.active .atc-check{display:flex;align-items:center;justify-content:center;background:var(--lime);border-color:var(--lime)}
.atc-icon{margin:0 auto 6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.atc-icon-viewer{color:var(--lime)}
.atc-icon-creator{color:var(--purple)}
/* Social sign-in */
.auth-social-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid var(--border2);color:var(--text);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;margin-bottom:10px}
.auth-social-btn:hover{background:rgba(255,255,255,0.1)}
.auth-social-btn svg{flex-shrink:0}
#auth-social-wrap>.auth-social-btn{height:40px;padding:0 16px;border-radius:4px;margin-bottom:10px}
.auth-or-divider{display:flex;align-items:center;gap:10px;margin:4px 0 16px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:0.03em}
.auth-or-divider::before,.auth-or-divider::after{content:'';flex:1;height:1px;background:var(--border2)}
.auth-intro{text-align:center;margin:-4px 0 18px}
.auth-intro h2{font-family:'Syne','Inter',sans-serif;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-0.025em;color:var(--text);margin:0 0 6px}
.auth-intro p{font-family:'DM Sans','Inter',sans-serif;font-size:13px;line-height:1.5;color:rgba(255,255,255,.68);margin:0}
#auth-modal .modal{font-family:'DM Sans','Inter',sans-serif;background:rgba(24,24,32,.94);backdrop-filter:blur(24px);border-color:rgba(255,255,255,.1)}
#auth-modal .modal-logo{font-family:'Syne','Inter',sans-serif}
#auth-modal .auth-tab,#auth-modal .auth-social-btn,#auth-modal .form-input,#auth-modal .submit-btn{font-family:'DM Sans','Inter',sans-serif}
#auth-modal .auth-social-btn{height:48px;min-height:48px;width:100%}
#auth-modal #auth-social-wrap>.auth-social-btn{height:48px;border-radius:8px}
#auth-modal .form-input{min-height:48px;border-radius:8px!important;color:#f4f4f6}
#auth-modal .form-label{color:rgba(255,255,255,.76);margin-bottom:6px;display:block}
#auth-modal .submit-btn{min-height:48px;border-radius:8px;font-weight:700}
.password-field-wrap{position:relative}
.password-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;background:none;border:none;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.66);display:flex;align-items:center;justify-content:center}
.password-toggle:hover,.password-toggle:focus-visible{color:var(--accent);background:rgba(255,255,255,.06);outline:none}
#fp-link-wrap{text-align:right;margin:4px 0 12px}
.forgot-pw-link-btn,.fp-back-link{font-family:'DM Sans','Inter',sans-serif;color:rgba(255,255,255,.78)!important;text-underline-offset:3px;min-height:36px}
#forgot-pw-view h3{font-family:'Syne','Inter',sans-serif!important;font-size:22px!important}
#fp-success-msg.auth-message-success{display:block;background:rgba(200,255,0,.08);border:1px solid rgba(200,255,0,.24);border-radius:8px;padding:10px 12px;color:var(--accent);font-size:13px;line-height:1.45;margin-top:12px}
#fp-error-msg{display:none;background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.22);border-radius:8px;padding:10px 12px;color:#ff9b9b;font-size:13px;line-height:1.45;margin-top:12px}
#auth-error-msg[role="alert"]{border-radius:8px!important;color:#ff9b9b!important}
@media(max-width:480px){#auth-modal{align-items:flex-start;overflow-y:auto}#auth-modal .modal{margin:auto 0;padding:22px 18px!important;max-height:calc(100dvh - 32px)!important;border-radius:16px!important}.auth-intro h2{font-size:22px}}
/* Forgot password */
#forgot-pw-view{display:none}
.fp-back-link{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;padding:0 0 2px;font-family:'Inter',sans-serif;margin-bottom:20px;display:inline-block;text-decoration:none}
.fp-back-link:hover{opacity:0.8}
#fp-success-msg{display:none;background:rgba(200,255,0,0.08);border:1px solid rgba(200,255,0,0.25);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--accent);margin-top:12px;text-align:center}
.forgot-pw-link-btn{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:6px 0 2px;font-family:'Inter',sans-serif;text-decoration:underline;text-underline-offset:2px;display:block;text-align:right}
.forgot-pw-link-btn:hover{color:var(--text)}
/* Username availability */
.username-status{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:5px;min-height:16px;line-height:1.3}
.username-status.loading{color:var(--muted)}
.username-status.available{color:#4caf50}
.username-status.taken{color:var(--red)}
.username-status.invalid{color:var(--red)}
#signin-fields{display:none}
/* Success screens */
.auth-success-new,.auth-success-return{display:none;animation:successScreenIn 0.4s cubic-bezier(0.22,1,0.36,1) both}
@keyframes successScreenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.asn-confetti{height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;gap:8px}
.asn-confetti-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:confPop 0.5s cubic-bezier(0.2,1.5,0.3,1) both}
.asn-confetti-icon:nth-child(1){animation-delay:0s}
.asn-confetti-icon:nth-child(2){animation-delay:0.07s}
.asn-confetti-icon:nth-child(3){animation-delay:0.14s}
@keyframes confPop{from{transform:scale(0.2) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.asn-title{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;color:var(--text)}
.asn-sub{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:16px;max-width:300px;margin-left:auto;margin-right:auto}
.asn-role-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:100px;margin-bottom:18px;font-size:11px;font-weight:700}
.asn-role-badge.viewer{background:rgba(200,255,0,0.08);border:1px solid rgba(200,255,0,0.2);color:var(--lime)}
.asn-role-badge.creator{background:rgba(123,94,167,0.1);border:1px solid rgba(123,94,167,0.25);color:rgba(200,170,255,0.9)}
.asn-cta{width:100%;padding:13px;border-radius:100px;background:var(--lime);color:#0a0a0f;font-family:'Inter',sans-serif;font-weight:800;font-size:15px;border:none;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.asn-cta:hover{opacity:0.9;transform:translateY(-1px);box-shadow:0 8px 24px rgba(200,255,0,0.25)}
.asn-cta.creator-cta{background:var(--purple)}
.asn-signin-link{margin-top:12px;font-size:12px;color:var(--muted);text-align:center}
.asn-signin-link a{color:var(--lime);text-decoration:none;font-weight:600}
/* Return user */
.asr-icon-ring{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#1a2200,#0f1a00);border:2px solid rgba(200,255,0,0.35);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 0 0 4px rgba(200,255,0,0.07),0 0 0 8px rgba(200,255,0,0.03);animation:ringPulse 0.5s cubic-bezier(0.22,1,0.36,1) both}
@keyframes ringPulse{from{transform:scale(0.6);opacity:0}to{transform:scale(1);opacity:1}}
.asr-initials{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;color:var(--lime)}
.asr-greeting{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;letter-spacing:-0.02em;margin-bottom:4px;color:var(--text)}
.asr-sub{font-size:13px;color:var(--muted);margin-bottom:8px}
.asr-streak{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:rgba(200,255,0,0.7);background:rgba(200,255,0,0.06);border:1px solid rgba(200,255,0,0.12);padding:3px 11px;border-radius:100px;margin-bottom:18px}
.asr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.asr-stat{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:10px 6px;text-align:center;animation:statSlide 0.4s cubic-bezier(0.22,1,0.36,1) both}
.asr-stat:nth-child(1){animation-delay:0.05s}
.asr-stat:nth-child(2){animation-delay:0.1s}
.asr-stat:nth-child(3){animation-delay:0.15s}
@keyframes statSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.asr-stat-val{font-family:'Inter',sans-serif;font-size:16px;font-weight:800;color:var(--lime)}
.asr-stat-key{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:1px}
.asr-cta{width:100%;padding:13px;border-radius:100px;background:rgba(200,255,0,0.08);color:var(--lime);font-family:'Inter',sans-serif;font-weight:800;font-size:14px;border:1px solid rgba(200,255,0,0.22);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.asr-cta:hover{background:rgba(200,255,0,0.14);border-color:rgba(200,255,0,0.38)}
.success-box{text-align:center;padding:10px 0}
.success-icon{font-size:52px;margin-bottom:14px;animation:successPop 0.5s cubic-bezier(0.2,1.5,0.3,1) both}
.success-box h3{font-family:'Inter',sans-serif;font-size:22px;font-weight:700;margin-bottom:8px}
.success-box p{color:var(--muted);font-size:13px;line-height:1.6;margin-bottom:20px}
/* ── GLOBAL BUTTON SHAPE: pill ── */
.btn-primary,.btn-outline,.btn-secondary,.submit-btn,.plan-btn,
.fh-btn-play,.fh-btn-info,.gho-btn-watch,.gho-btn-create,
.gsb-btn-primary,.eim-btn-primary,.eim-btn-ghost,
.swg-btn-primary,.swg-btn-secondary,
.fu-btn-next,.fu-btn-skip,.co-btn-next,.co-btn-skip,
.dash-btn-primary,.dash-btn-ghost,
.csb-btn,.csb-btn-primary,.csb-btn-outline,
.bill-btn,
.pwp-signup-nudge-btn,.pwp-share-btn.primary,
.srp-suggest-btn,.disc-sticky-pill,.srp-trending-chip,
.sd-chip{border-radius:100px!important}
/* Keep icon-only / modal close circular */
.dash-btn-icon,.srp-view-btn,.gsb-btn-close,.eim-close,.pwp-close-btn{border-radius:100px!important}
/* ── SEARCH BARS: rounder ── */
.form-input,.form-select,.co-form-input{border-radius:9px!important}
.wiz-field input,.wiz-field textarea,.wiz-field select{border-radius:14px!important}
#nav-search-input{border-radius:16px!important}
.search-dropdown{border-radius:22px!important}
.srp-sort{border-radius:14px!important}
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-label{font-size:12px;font-weight:600;color:var(--muted)}
.form-input,.form-select{background:rgba(255,255,255,0.05);border:1.5px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.15s}
.form-input:focus,.form-select:focus{border-color:var(--lime)}
.form-input::placeholder{color:var(--muted)}
.form-select option{background:var(--surface)}
.submit-btn{width:100%;padding:13px;border-radius:var(--r-pill);background:var(--lime);color:#12121c;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity 0.15s,transform 0.15s;margin-top:8px}
.submit-btn:hover{opacity:0.9;transform:translateY(-1px)}
.submit-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}

/* ADD SERIES MODAL */
.add-series-modal{max-width:560px;max-height:88vh;overflow-y:auto}
.ep-item{background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:14px;margin-bottom:10px}
.ep-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ep-num{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px}
.ep-remove{background:none;border:none;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color 0.15s;font-family:inherit}
.ep-remove:hover{color:#ff4444}
.ep-add-btn{width:100%;padding:10px;border-radius:8px;background:transparent;border:1.5px dashed var(--border2);color:var(--accent2);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;margin-top:4px;font-family:inherit}
.ep-add-btn:hover{border-color:var(--accent);color:var(--accent)}
/* CONTINUE WATCHING */
.cw-bar{position:absolute;bottom:0;left:0;right:0;height:5px;background:rgba(255,255,255,0.12);z-index:4;overflow:hidden}
.cw-fill{height:100%;background:linear-gradient(to right,var(--accent),rgba(200,255,0,0.7));border-radius:3px;box-shadow:0 0 8px rgba(200,255,0,0.4)}
.cw-remove{position:absolute;top:6px;right:6px;z-index:10;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,0.75);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity 0.2s;padding:0}
.nf-card:hover .cw-remove{opacity:1}
/* AUTO-PLAY OVERLAY */
.autoplay-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.88);z-index:20;display:flex;align-items:center;justify-content:center;border-radius:12px 12px 0 0}
.autoplay-box{text-align:center;padding:28px 24px;max-width:380px;width:100%}
.autoplay-label{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:10px}
.autoplay-ep{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;color:#fff;margin-bottom:4px}
.autoplay-eptitle{font-size:14px;color:rgba(255,255,255,0.55);margin-bottom:24px}
.autoplay-actions{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
.autoplay-play{padding:11px 28px;border-radius:8px;background:var(--accent);color:#000;font-weight:700;font-size:14px;border:none;cursor:pointer;font-family:inherit;transition:opacity 0.2s}
.autoplay-play:hover{opacity:0.85}
.autoplay-cancel{padding:11px 20px;border-radius:8px;background:rgba(255,255,255,0.08);color:#fff;font-size:14px;border:1px solid rgba(255,255,255,0.18);cursor:pointer;font-family:inherit;transition:background 0.2s}
.autoplay-cancel:hover{background:rgba(255,255,255,0.16)}
.autoplay-timer{font-size:12px;color:rgba(255,255,255,0.35);margin-bottom:10px}
.autoplay-bar{height:3px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;max-width:260px;margin:0 auto}
.autoplay-fill{height:100%;background:var(--accent);width:100%;transform-origin:left}
/* SHARE MODAL */
.share-modal-box{max-width:520px;padding:36px}
.share-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.share-btn-alt{padding:12px;border-radius:9px;font-size:14px;font-weight:600;background:var(--surface2);border:1px solid var(--border2);color:var(--text);cursor:pointer;font-family:inherit;transition:border-color 0.2s}
.share-btn-alt:hover{border-color:var(--border2)}
/* EPISODE GATE */
.ep-locked{opacity:0.55}
.ep-locked:hover{opacity:0.8!important;background:var(--surface2)}
/* WATCH PARTY */
.party-bubble{background:var(--surface);border:1px solid var(--border2);border-radius:24px;padding:10px 18px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 32px rgba(0,0,0,0.5);transition:transform 0.2s;white-space:nowrap}
.party-bubble:hover{transform:translateY(-2px)}
.party-badge{background:var(--red);color:#fff;border-radius:10px;padding:1px 6px;font-size:11px;font-weight:700;min-width:18px;text-align:center}
.party-panel{background:var(--surface);border:1px solid var(--border2);border-radius:16px;width:300px;box-shadow:0 12px 48px rgba(0,0,0,0.55);overflow:hidden;display:flex;flex-direction:column;animation:modalIn 0.2s ease}
.party-panel-head{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;flex-shrink:0;gap:8px}
.party-icon-btn{background:none;border:none;cursor:pointer;font-size:13px;color:var(--muted);padding:3px 6px;border-radius:4px;transition:color 0.15s;font-family:inherit;line-height:1}
.party-icon-btn:hover{color:var(--text)}
.party-msgs{overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:5px;max-height:240px;min-height:80px}
.party-sys{font-size:11px;color:var(--muted);text-align:center;padding:3px 0;font-style:italic}
.party-msg{display:flex;flex-direction:column;gap:2px;align-items:flex-start;max-width:82%}
.party-me{align-self:flex-end;align-items:flex-end}
.party-uname{font-size:10px;font-weight:700;color:var(--purple);padding:0 4px}
.party-text{background:var(--surface2);border-radius:10px;padding:6px 10px;font-size:13px;line-height:1.4;word-break:break-word;color:var(--text)}
.party-me .party-text{background:rgba(123,94,167,0.18);border:1px solid rgba(123,94,167,0.25)}
.party-input-row{display:flex;gap:6px;padding:9px 10px;border-top:1px solid var(--border);flex-shrink:0}
.party-input{flex:1;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:7px 11px;color:var(--text);font-size:13px;outline:none;font-family:inherit;min-width:0}
.party-input:focus{border-color:var(--purple)}
.party-send{background:var(--purple);border:none;color:#fff;width:32px;height:32px;border-radius:8px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:opacity 0.2s}
.party-send:hover{opacity:0.82}
@media(max-width:768px){
  .party-widget{bottom:72px!important;right:12px!important}
  .party-panel{width:calc(100vw - 24px)!important;max-width:360px}
  .party-msgs{max-height:200px}
}
@media(max-width:480px){
  .party-panel{width:calc(100vw - 16px)!important;max-width:100%}
  .party-panel-head{padding:9px 12px}
  .party-msgs{max-height:160px}
  .party-input-row{padding:7px 8px}
}
/* COMPLETION BADGE */
.comp-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:600;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}
.comp-box{background:var(--surface);border:1px solid rgba(200,255,0,0.25);border-radius:20px;padding:40px 32px;text-align:center;max-width:380px;width:calc(100% - 48px);animation:modalIn 0.35s cubic-bezier(.2,1,.3,1)}
.comp-confetti{font-size:52px;margin-bottom:12px;animation:pop 0.5s cubic-bezier(.2,1.5,.3,1)}
.comp-headline{font-family:'Inter',sans-serif;font-size:26px;font-weight:800;color:var(--accent);margin-bottom:6px}
.comp-sub{font-size:14px;color:var(--muted);margin-bottom:22px;line-height:1.5}
.comp-badge-preview{display:inline-flex;align-items:center;gap:8px;background:rgba(200,255,0,0.08);border:1.5px solid rgba(200,255,0,0.3);padding:8px 18px;border-radius:30px;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:28px}
.comp-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.comp-section{margin-top:32px;padding-top:28px;border-top:1px solid var(--border)}
.comp-section-title{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.comp-badges-wrap{display:flex;flex-wrap:wrap;gap:10px}
.comp-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(200,255,0,0.07);border:1.5px solid rgba(200,255,0,0.2);padding:7px 14px;border-radius:30px;font-size:12px;font-weight:700;color:var(--accent)}
.comp-badge-x{background:none;border:none;cursor:pointer;color:var(--muted);font-size:11px;padding:0 0 0 4px;margin-left:2px;line-height:1;font-family:inherit}
.comp-badge-x:hover{color:var(--accent3)}
.comp-tag{background:rgba(200,255,0,0.1);border:1px solid rgba(200,255,0,0.3);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;color:var(--accent)}
@keyframes pop{0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}
/* CLIP SHARE */
.clip-btn{position:absolute;top:10px;right:10px;z-index:20;background:rgba(0,0,0,0.75);border:1px solid rgba(255,255,255,0.25);color:#fff;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:0.5px;font-family:inherit;transition:all 0.15s}
.clip-btn:hover{background:rgba(200,255,0,0.15);border-color:rgba(200,255,0,0.5);color:var(--accent)}
.clip-panel{position:absolute;bottom:0;left:0;right:0;z-index:25;background:rgba(10,10,15,0.96);backdrop-filter:blur(12px);padding:18px 20px;border-top:1px solid rgba(255,255,255,0.1);animation:slideUp 0.22s ease}
.clip-ts{font-family:'Inter',sans-serif;font-size:30px;font-weight:800;color:var(--accent);line-height:1}
.clip-ts-label{font-size:10px;color:rgba(255,255,255,0.35);letter-spacing:2px;text-transform:uppercase;margin:4px 0 14px}
.clip-url-row{display:flex;gap:8px;margin-bottom:12px}
.clip-url-input{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:8px 12px;color:rgba(255,255,255,0.65);font-size:12px;outline:none;font-family:inherit;min-width:0;cursor:text}
.clip-copy-btn{padding:9px 18px;border-radius:8px;background:var(--accent);color:#000;font-weight:700;font-size:13px;border:none;cursor:pointer;font-family:inherit;transition:opacity 0.2s}
.clip-copy-btn:hover{opacity:0.85}
.clip-share-btn{padding:9px 16px;border-radius:8px;background:rgba(255,255,255,0.08);color:#fff;font-size:13px;border:1px solid rgba(255,255,255,0.15);cursor:pointer;font-family:inherit;transition:background 0.2s}
.clip-share-btn:hover{background:rgba(255,255,255,0.15)}
.clip-close-btn{padding:9px 14px;border-radius:8px;background:transparent;color:rgba(255,255,255,0.35);font-size:13px;border:1px solid rgba(255,255,255,0.08);cursor:pointer;font-family:inherit;margin-left:auto;transition:color 0.15s}
.clip-close-btn:hover{color:rgba(255,255,255,0.7)}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
/* RATINGS & REVIEWS */
.rating-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.rating-section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.rating-section-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:700}
.rating-avg-big{color:#ffd700;font-weight:800;font-size:22px;font-family:'Inter',sans-serif;line-height:1}
.rating-form{margin-bottom:20px}
.rating-prompt{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.stars-row{display:flex;gap:2px;margin-bottom:14px}
.star-btn{font-size:30px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.18);transition:color 0.1s,transform 0.12s;line-height:1;padding:0 3px;font-family:inherit}
.star-btn.filled,.star-btn.hovered{color:#ffd700}
.star-btn:hover{transform:scale(1.18)}
.rating-textarea{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:11px 14px;color:var(--text);font-size:13px;outline:none;font-family:inherit;resize:vertical;min-height:64px;max-height:140px;margin-bottom:12px;line-height:1.6;display:block}
.rating-textarea:focus{border-color:var(--accent2)}
.reviews-list{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.review-item{padding:14px;background:var(--surface2);border-radius:10px;border:1px solid var(--border);display:flex;flex-direction:column;gap:7px}
.review-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.review-avi{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#1a2200,#0f1a00);border:1.5px solid var(--accent2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--accent2);flex-shrink:0;font-family:'Inter',sans-serif}
.review-name{font-size:13px;font-weight:600}
.review-stars{color:#ffd700;font-size:12px;letter-spacing:1px}
.review-date{font-size:11px;color:var(--muted);margin-left:auto}
.review-del{background:none;border:none;cursor:pointer;color:var(--muted);font-size:11px;padding:2px 6px;border-radius:4px;font-family:inherit;transition:color 0.15s}
.review-del:hover{color:var(--accent3)}
.review-body{font-size:13px;color:var(--muted);line-height:1.65}

/* TOAST */
.toast{position:fixed;bottom:28px;right:28px;background:var(--surface);border:1px solid rgba(200,255,0,0.3);color:var(--text);padding:12px 18px;border-radius:10px;font-size:14px;z-index:999;transform:translateY(14px);opacity:0;transition:all 0.3s;pointer-events:none;max-width:300px}
.toast.show{transform:translateY(0);opacity:1}

/* MOBILE NAV — now defined in ── NAV ── block above */

/* STATUS BADGE */
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:16px}
.status-badge.connected{background:rgba(0,217,126,0.1);border:1px solid rgba(0,217,126,0.3);color:#00d97e}
.status-badge.demo{background:rgba(200,255,0,0.1);border:1px solid rgba(200,255,0,0.3);color:var(--accent)}

@media(max-width:768px){
  .page{margin-bottom:64px}
  .plans-grid{grid-template-columns:1fr;padding:0 16px 40px}
  .disc-sidebar{display:none}
}

/* NETFLIX ROWS */
.content-row{margin-bottom:52px}
.row-header{display:flex;align-items:center;justify-content:space-between;padding:0 32px;margin-bottom:16px;gap:8px}
.row-title{font-family:'Inter',sans-serif;font-weight:800;font-size:15px;letter-spacing:-0.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.row-title em{font-style:normal}
.row-title svg{flex-shrink:0;vertical-align:middle}
.row-rule{flex:0 0 0;display:none}
.row-more{font-size:12px;font-weight:600;color:var(--accent2);background:none;border:none;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
.row-rule{flex:1;height:1px;background:rgba(255,255,255,0.06);display:none}
.row-more{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;background:none;border:none;cursor:pointer}
.row-scroll{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:0 var(--sp4) var(--sp3)}
.row-scroll::-webkit-scrollbar{display:none}
.row-scroll>*{scroll-snap-align:start;flex-shrink:0}
.row-scroll::after{content:'';display:block;min-width:var(--sp4);flex-shrink:0}

/* NF CARD */
.nf-card {
  flex-shrink: 0; width: 140px; scroll-snap-align: start;
  border-radius: var(--r-card); overflow: hidden;
  background: #141414; cursor: pointer; position: relative;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
}
.nf-card:hover { transform: scale(1.05); box-shadow: 0 0 0 2px rgba(200,255,0,0.45), 0 16px 40px rgba(0,0,0,0.9); z-index: 2; }
.nf-card-thumb {
  width: 100%; aspect-ratio: 2 / 3; overflow: hidden; display: block;
  background: #1a1a1a; position: relative; flex-shrink: 0;
}
.nf-card-thumb img { transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); filter: brightness(1.05) saturate(1.1); }
.nf-card:hover .nf-card-thumb img { transform: scale(1.06); }
.nf-card-grad { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.05) 70%, transparent 100%); }
.nf-card-pin { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 8px 8px 8px; transition: padding-bottom 0.2s; }
.nf-card:hover .nf-card-pin { padding-bottom: 34px; }
.nf-card-body { display: none; }
.nf-card-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.nf-card-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r-pill);
  background: rgba(200,255,0,0.15); color: var(--lime);
  border: 1px solid rgba(200,255,0,0.3);
}
.nf-card-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.45) 40%,rgba(0,0,0,0.05) 70%,transparent 100%);z-index:1;pointer-events:none}
.nf-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:10px;opacity:0;transition:opacity 0.25s}
.nf-card-sub{font-size:10px;color:rgba(255,255,255,0.7);margin-top:4px;display:flex;gap:8px}
.nf-card-title-text{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nf-card-meta-row{display:flex;align-items:center;gap:6px;overflow:hidden;font-size:11px;color:var(--muted);flex-wrap:nowrap}
.nf-card-rating{font-size:9px;color:#ffd700;font-weight:700;flex-shrink:0}
.nf-card-cat-text{font-size:8px;color:var(--muted);flex-shrink:0;text-transform:capitalize}
.nf-card-eps-text{font-size:8px;color:rgba(255,255,255,0.32);flex-shrink:0}
.nf-card-play-hover{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.22s;pointer-events:none}
.nf-card:hover .nf-card-play-hover{opacity:1}
.nf-play-circle{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center}
.nf-card-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 6px rgba(200,255,0,0.7)}
.nf-card-new-badge{position:absolute;top:8px;right:8px;z-index:2;min-width:7px;min-height:7px;padding:2px 6px;border-radius:4px;background:#e63946;color:#fff;font-size:8px;font-weight:800;line-height:1;text-transform:uppercase;box-shadow:0 0 8px rgba(230,57,70,0.55)}
.nf-card:hover .nf-play-hover{opacity:1!important}
.nf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp3)}
.nf-grid .nf-card{width:100%}
@media(min-width:1025px){.nf-card{width:180px}.nf-card-skel{width:180px}}

/* DISC ROW — content row strips */
.disc-row { margin: 0 0 32px; }
.disc-row-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; margin-bottom: 14px;
}
.disc-row-title {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px;
  color: var(--text); letter-spacing: -0.01em;
}
.disc-row-see-all {
  font-size: 12px; font-weight: 600; color: var(--lime);
  font-family: 'Inter', sans-serif;
  background: none; border: none; cursor: pointer; transition: opacity 0.15s;
}
.disc-row-see-all:hover { opacity: 0.8; }
.disc-row-strip {
  display: flex; gap: 24px; overflow-x: auto; padding: 4px 32px 12px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.disc-row-strip::-webkit-scrollbar { display: none; }

/* FEATURED HERO */
.featured-hero {
  position: relative; width: 100%; height: clamp(480px, 60vh, 720px);
  overflow: hidden; margin-top: -52px;
}
.fh-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.45);
}
.fh-glow-lime {
  position: absolute; top: -120px; left: -80px;
  width: 500px; height: 500px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(200,255,0,0.08) 0%, transparent 65%);
}
.fh-glow-purple {
  position: absolute; bottom: -120px; right: -80px;
  width: 480px; height: 480px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(123,94,167,0.12) 0%, transparent 65%);
}
.fh-content {
  position: absolute; bottom: 0; left: 0; z-index: 2;
  padding: 48px 48px 40px; max-width: 640px;
  background: linear-gradient(to top, rgba(18,18,28,0.95) 0%, rgba(18,18,28,0.6) 60%, transparent 100%);
}
.fh-content.fh-hidden{opacity:0;pointer-events:none}
.fh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(200,255,0,0.12); border: 1px solid rgba(200,255,0,0.25);
  border-radius: var(--r-pill); padding: 4px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 12px;
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.fh-title, .feat-title { font-size: clamp(22px,4vw,42px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.fh-title {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(22px, 4vw, 42px); line-height: 1.15;
  color: var(--text); margin-bottom: 10px; letter-spacing: -0.02em;
}
.fh-sub, .feat-sub { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:14px; }
.fh-badge, .feat-badge { display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:rgba(123,94,167,0.25);border:1px solid rgba(123,94,167,0.35);color:var(--purple);font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase; }
.fh-stats, .feat-stats { display:flex;align-items:center;gap:var(--sp4);font-size:13px;color:var(--muted); }
.fh-desc {
  font-size: 14px; color: rgba(232,232,240,0.75); line-height: 1.6;
  margin-bottom: 20px; max-width: 480px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fh-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.fh-btn-play {
  height: 42px; padding: 0 24px; border-radius: 10px;
  background: var(--lime); color: #0a0a0f;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all 0.18s cubic-bezier(0.2,0,0,1); flex-shrink: 0;
}
.fh-btn-play:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(200,255,0,0.3); }
.fh-btn-info {
  height: 42px; padding: 0 20px; border-radius: 10px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: var(--text); font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all 0.18s; flex-shrink: 0; backdrop-filter: blur(4px);
}
.fh-btn-info:hover { background: rgba(255,255,255,0.18); }
.fh-controls {
  position: absolute; bottom: 20px; left: 32px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
}
.fh-counter {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1;
}
.fh-counter em { font-style: normal; color: var(--lime); font-weight: 700; }
.fh-nav { display: flex; gap: 4px; }
.fh-nav-btn {
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7); cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fh-nav-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.18); color: #fff; }
@media(max-width:768px){
  .fh-controls { left: 16px; bottom: 16px; gap: 8px; }
  .fh-counter { font-size: 11px; }
  .fh-nav-btn { width: 22px; height: 22px; font-size: 13px; }
}
@media(max-width:480px){
  .fh-controls { left: 14px; bottom: 14px; }
  .fh-nav-btn { width: 20px; height: 20px; font-size: 12px; }
}
/* Retained for slide-based hero JS */
.fh-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.9s ease}
.fh-slide.active{opacity:1}
.fh-img{position:absolute;inset:-6%;background-size:cover;background-position:center top}
.fh-slide.active .fh-img{animation:kbHero 14s ease-in-out infinite alternate}
@keyframes kbHero{from{transform:scale(1)}to{transform:scale(1.08)}}
.fh-vignette{position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(to top, rgba(18,18,28,0.97) 0%, rgba(18,18,28,0.75) 25%, rgba(18,18,28,0.45) 50%, rgba(18,18,28,0.12) 75%, transparent 100%),
    linear-gradient(to right, rgba(18,18,28,0.55) 0%, transparent 55%);}
/* Home hero responsive */
@media(max-width:768px){
  .featured-hero{height:clamp(380px,58svh,500px)!important;max-height:65svh!important}
  .fh-content{bottom:0;left:0;right:0;max-width:100%;padding:20px 16px 80px}
  .fh-title{font-size:clamp(20px,6vw,30px);letter-spacing:-0.025em;margin-bottom:6px}
  .fh-desc{display:none}
  .fh-meta{gap:6px;margin-bottom:8px;font-size:10px}
  .fh-badge{font-size:9px;padding:3px 9px;margin-bottom:6px}
  .fh-btns{gap:8px}
  .fh-btn-play{height:40px;padding:0 16px;font-size:13px;border-radius:10px;gap:6px;min-width:44px}
  .fh-btn-info{height:40px;padding:0 14px;font-size:13px;border-radius:10px;min-width:44px}
  .fh-controls{bottom:16px;right:16px;left:auto}
  .fh-nav{display:flex!important}
  .fh-nav-btn{width:30px;height:30px;font-size:13px}
  .disc-row-hdr{padding:0 16px}
  .disc-row-strip{padding:4px 16px 12px}
}
@media(max-width:480px){
  .featured-hero{height:clamp(360px,55svh,440px)!important;max-height:64svh!important}
  .fh-content{padding:16px 14px 72px}
  .fh-title{font-size:22px}
  .fh-desc{display:none}
  .fh-btn-play{height:40px;padding:0 14px;font-size:13px;border-radius:10px}
  .fh-btn-info{height:40px;padding:0 12px;font-size:13px;border-radius:10px}
}
/* VIDEO PLAYER MODAL */
.vpm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.96);z-index:2000;align-items:center;justify-content:center;padding:16px}
.vpm-overlay.open{display:flex}
.vpm-wrap{width:100%;max-width:980px}
.vpm-box{width:100%;aspect-ratio:16/9;min-height:200px;background:#000;border-radius:12px 12px 0 0;overflow:hidden;position:relative}
.vpm-box video,.vpm-box iframe{width:100%;height:100%;border:none;display:block}
.vpm-bar{background:#111;border-radius:0 0 12px 12px;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.vpm-info .vpm-title{color:#fff;font-weight:700;font-size:15px;font-family:'Inter',sans-serif}
.vpm-info .vpm-sub{color:#888;font-size:12px;margin-top:2px}
.vpm-close{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:#fff;font-size:13px;font-weight:600;cursor:pointer;padding:8px 18px;border-radius:8px;transition:background 0.2s}
.vpm-close:hover{background:rgba(255,255,255,0.18)}
@media(max-width:600px){.vpm-bar{flex-direction:column;align-items:flex-start;gap:8px}.vpm-close{width:100%}}

/* DETAIL MODAL */
.detail-modal{max-width:780px;padding:0;overflow:hidden;max-height:90vh;overflow-y:auto;border-radius:20px!important}
.detail-close-pill{
  position:absolute;top:14px;left:14px;z-index:20;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:100px;
  background:rgba(0,0,0,0.65);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.85);font-size:12px;font-weight:600;
  cursor:pointer;transition:all 0.18s;font-family:'Inter',sans-serif;
}
.detail-close-pill:hover{background:rgba(0,0,0,0.9);color:#fff}
.detail-banner {
  position: relative; width: 100%; height: clamp(300px, 45vh, 500px);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: flex-end;
}
.detail-banner-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 140px;
  background-size: cover; background-position: center top;
  filter: brightness(0.4);
}
.detail-banner-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 36px 36px;
}
.detail-banner-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 25% 70%, rgba(0,212,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 20%, rgba(123,94,167,0.10) 0%, transparent 65%);
}
.detail-banner-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, var(--bg) 100%);
}
.detail-banner-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 32px;
}
.detail-cat{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.detail-title {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(24px, 4vw, 36px); color: var(--text);
  margin-bottom: 10px; letter-spacing: -0.02em;
}
.detail-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); margin-bottom: 14px;
}
.detail-rating{color:#ffd700;font-weight:700}
/* Banner action buttons */
.detail-banner-btns{display:flex;gap:10px;flex-wrap:wrap}
.detail-play-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--lime); color: #12121c; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px;
  transition: opacity 0.15s;
}
.detail-play-btn:hover { opacity: 0.9; }
.detail-list-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 22px;border-radius:100px;
  background:rgba(255,255,255,0.1);color:#fff;
  font-size:13px;font-weight:600;
  border:1px solid rgba(255,255,255,0.22);cursor:pointer;transition:all 0.2s;
  backdrop-filter:blur(8px);
}
.detail-list-btn:hover{background:rgba(255,255,255,0.18)}
/* Detail body */
.detail-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.detail-tag {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 14px; border-radius: 999px;
  background: rgba(123,94,167,0.15); border: 1px solid rgba(123,94,167,0.25);
  color: #b89ed4; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.detail-body { padding: 0 32px 48px; max-width: 900px; margin: 0 auto; width: 100%; }
.detail-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.detail-desc { font-size: 14px; color: rgba(232,232,240,0.8); line-height: 1.7; margin-bottom: 20px; }
.detail-creator{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface2);border-radius:14px;margin-bottom:16px;border:1px solid var(--border)}
.detail-creator-avi{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#1a2200,#0f1a00);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:13px;font-weight:800;color:var(--accent);flex-shrink:0}
/* Secondary actions */
.detail-secondary-btns{
  display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;
}
.detail-sec-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:100px;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--muted);font-size:12px;font-weight:600;
  cursor:pointer;transition:all 0.15s;font-family:'Inter',sans-serif;
}
.detail-sec-btn:hover{color:var(--text);border-color:rgba(200,255,0,0.25)}
.detail-eps-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;margin-bottom:12px}
.detail-ep-list, .detail-eps-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.detail-ep {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  transition: background 0.15s;
}
.detail-ep:hover { background: rgba(200,255,0,0.05); }
.ep-thumb {
  width: 96px; height: 54px; border-radius: 8px; flex-shrink: 0;
  object-fit: cover; background: var(--card);
}
.detail-ep .ep-num, .detail-ep-num { font-size: 12px; color: var(--muted); font-weight: 600; flex-shrink: 0; min-width: 24px; }
.detail-ep-info { flex: 1; }
.ep-title, .detail-ep-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ep-dur, .detail-ep-dur { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ep-play-btn, .detail-ep-play {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(200,255,0,0.1); border: 1px solid rgba(200,255,0,0.2);
  color: var(--lime); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s; font-size: 18px;
}
.ep-play-btn:hover, .detail-ep-play:hover { background: rgba(200,255,0,0.2); }
@media(max-width:600px){
  .detail-banner{height:260px}
  .detail-banner-content{padding:18px 16px 16px}
  .detail-play-btn{padding:10px 22px;font-size:13px}
  .detail-list-btn{padding:10px 16px;font-size:12px}
  .detail-body{padding:14px 16px 24px}
  .detail-title{font-size:20px}
}
@media (max-width: 768px) {
  .detail-back-btn { top: 60px; left: 12px; }
  .detail-body { padding: 0 16px 40px; }
  .detail-banner { height: clamp(240px, 40vh, 320px); }
  .ep-thumb { width: 72px; height: 40px; }
}
@media (max-width: 480px) {
  .detail-title { font-size: 22px; }
  .detail-btns { gap: 8px; }
  .detail-play-btn, .btn-primary { padding: 10px 16px; font-size: 13px; }
}

/* REACTIONS */
.reactions-row{display:flex;gap:8px;margin:20px 0 4px;flex-wrap:wrap}
.reaction-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;background:var(--surface2);border:1.5px solid var(--border2);cursor:pointer;font-size:14px;transition:all 0.18s;color:var(--text);font-family:inherit}
.reaction-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.reaction-btn.reacted{border-color:var(--accent);background:rgba(123,94,167,0.14);color:var(--accent)}
.reaction-count{font-size:11px;font-weight:700;color:var(--muted);min-width:10px}
.reaction-btn.reacted .reaction-count{color:var(--accent)}

/* COMMENTS */
.comments-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.comments-header{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;margin-bottom:14px}
.comment-input-row{display:flex;gap:10px;margin-bottom:18px;align-items:flex-start}
.comment-avi-sm{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1a2200,#0f1a00);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--accent);flex-shrink:0;border:1.5px solid var(--accent)}
.comment-textarea{flex:1;background:var(--surface2);border:1.5px solid var(--border2);border-radius:10px;padding:10px 14px;color:var(--text);font-size:13px;resize:none;font-family:inherit;min-height:40px;line-height:1.5;transition:border-color 0.2s;overflow:hidden}
.comment-textarea::placeholder{color:var(--muted)}
.comment-textarea:focus{outline:none;border-color:var(--accent)}
.comment-submit{background:var(--accent);border:none;color:#000;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;align-self:flex-end;transition:opacity 0.2s;font-family:inherit}
.comment-submit:disabled{opacity:0.35;cursor:default}
.comment-item{display:flex;gap:10px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.comment-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.comment-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.comment-name{font-size:12px;font-weight:700}
.comment-time{font-size:10px;color:var(--muted)}
.comment-text{font-size:13px;line-height:1.6;color:var(--text);word-break:break-word}
.comment-del{font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer;padding:1px 5px;border-radius:4px;opacity:0;transition:opacity 0.2s;margin-left:auto}
.comment-item:hover .comment-del{opacity:0.6}
.comment-del:hover{opacity:1!important;color:#ff4444}
.comment-guest{text-align:center;padding:16px;color:var(--muted);font-size:13px;line-height:1.7}
.comment-guest span{color:var(--accent);cursor:pointer;text-decoration:underline}

@media(max-width:1023px) and (min-width:769px){
  .nf-card{width:148px}
  .nf-card-skel{width:148px}
  .home-sidebar{display:none!important}
}
@media(max-width:768px){
  .row-header{padding:0 20px}
  .row-scroll{padding:4px 20px 20px;gap:var(--sp3)}
  .nf-card{width:138px}
  .nf-card-skel{width:138px}
  .content-row{margin-bottom:44px}
  .nf-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .detail-title{font-size:22px}
  .detail-banner{height:260px}
  .detail-body{padding:16px}
  .detail-banner-content{padding:20px}
}
@media(max-width:480px){
  .row-header{padding:0 14px}
  .row-scroll{padding:4px 14px 16px;gap:var(--sp3)}
  .nf-card{width:118px;border-radius:11px}
  .nf-card-skel{width:118px;border-radius:11px}
  .content-row{margin-bottom:28px}
  .nf-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}
@media(max-width:360px){
  .row-header{padding:0 12px}
  .row-scroll{padding:4px 12px 14px;gap:var(--sp3)}
  .nf-card{width:104px;border-radius:10px}
  .nf-card-skel{width:104px;border-radius:10px}
  .content-row{margin-bottom:32px}
}

/* ── MICROINTERACTIONS & STREAMING IMMERSION ── */

/* Page transitions */
.page{opacity:1;transition:opacity 0.18s ease}
._page-entering{animation:pageEnter 0.38s cubic-bezier(0.2,0,0,1) both}
@keyframes pageEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Button ripple */
.btn-primary,.btn-outline,.btn-secondary,.submit-btn,.plan-btn,.fh-btn-play,.fh-btn-info{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.22);transform:scale(0);animation:rippleAnim 0.52s linear;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(3);opacity:0}}

/* Toast upgrade — progress bar + types */
.toast{position:relative;display:flex;align-items:center;gap:10px;padding-bottom:14px}
.toast-bar{position:absolute;bottom:0;left:0;height:2px;background:var(--accent);border-radius:0 0 10px 0;animation:toastBar 2.8s linear forwards}
.toast-success .toast-bar{background:#00d97e}
.toast-error .toast-bar{background:var(--accent3)}
.toast-info .toast-bar{background:var(--accent2)}
@keyframes toastBar{from{width:100%}to{width:0%}}
.toast-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0}
.toast-success .toast-icon{background:rgba(0,217,126,0.18);color:#00d97e}
.toast-error .toast-icon{background:rgba(255,107,107,0.18);color:var(--accent3)}
.toast-info .toast-icon{background:rgba(123,94,167,0.18);color:var(--accent2)}
.toast-default .toast-icon{background:rgba(200,255,0,0.12);color:var(--accent)}

/* NF card quick-action tray */
.nf-card-actions{position:absolute;bottom:8px;right:6px;z-index:8;display:flex;gap:5px;opacity:0;transform:translateY(4px);transition:opacity 0.18s,transform 0.18s;pointer-events:none}
.nf-card:hover .nf-card-actions{opacity:1;transform:translateY(0);pointer-events:auto}
.nf-act-btn,.card-act-btn,.disc-act-btn{width:30px;height:30px;border-radius:50%;border:none;color:rgba(255,255,255,0.9);font-size:13px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform 0.15s,background 0.15s,color 0.15s;cursor:pointer;padding:0;font-family:inherit;flex-shrink:0;background:rgba(255,255,255,0.14)}
.nf-act-btn:hover,.card-act-btn:hover,.disc-act-btn:hover{transform:scale(1.12)}
.nf-act-btn.nf-act-play,.card-act-btn.card-act-play,.disc-act-btn.disc-act-play{background:#c8ff00;color:#000}
.nf-act-btn:not(.nf-act-play),.card-act-btn:not(.card-act-play),.disc-act-btn:not(.disc-act-play){border:1px solid rgba(255,255,255,0.2)!important}

/* Hero stagger entrance */
.hero-badge,.hero h1,.hero p,.hero-btns,.hero-stats{opacity:0;animation:heroUp 0.6s cubic-bezier(0.2,0,0,1) forwards}
.hero-badge{animation-delay:0.05s}
.hero h1{animation-delay:0.13s}
.hero p{animation-delay:0.21s}
.hero-btns{animation-delay:0.29s}
.hero-stats{animation-delay:0.38s}
@keyframes heroUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* Skeleton card */
.nf-card-skel{flex-shrink:0;width:160px;border-radius:14px;overflow:hidden;background:var(--surface2)}
.nf-card-skel-thumb{aspect-ratio:2/3;background:linear-gradient(90deg,var(--surface2) 25%,rgba(255,255,255,0.04) 50%,var(--surface2) 75%);background-size:400% 100%;animation:shimmer 1.6s ease infinite}
.nf-card-skel-body{display:none}
.nf-card-skel-line{display:none}

/* Empty state — animated icon */
.empty-state{text-align:center;padding:64px 24px;border:1px dashed rgba(255,255,255,0.08);border-radius:20px;background:rgba(255,255,255,0.015)}
.empty-icon{font-size:52px;margin-bottom:18px;display:block;animation:emptyFloat 3s ease-in-out infinite}
@keyframes emptyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.empty-title{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;margin-bottom:8px}
.empty-sub{color:var(--muted);font-size:14px;margin-bottom:24px;line-height:1.7;max-width:300px;margin-left:auto;margin-right:auto}

/* Now Playing pill */
.now-playing-pill{position:fixed;top:calc(68px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:150;background:rgba(10,10,15,0.92);border:1px solid rgba(200,255,0,0.35);backdrop-filter:blur(16px);border-radius:30px;padding:7px 16px 7px 12px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--text);box-shadow:0 4px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(200,255,0,0.08);animation:pillIn 0.35s cubic-bezier(0.2,1,0.3,1) both;cursor:pointer;white-space:nowrap;max-width:calc(100vw - 32px)}
.now-playing-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.4s ease infinite;flex-shrink:0}
.now-playing-label{color:var(--accent);font-size:10px;letter-spacing:1px;text-transform:uppercase;flex-shrink:0}
@keyframes pillIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Detail modal banner reveal */
.detail-modal.open .detail-banner{animation:bannerReveal 0.45s cubic-bezier(0.2,0,0,1) both}
@keyframes bannerReveal{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

/* Onboarding success animation */
.success-icon{animation:successPop 0.5s cubic-bezier(0.2,1.5,0.3,1) both}
@keyframes successPop{from{transform:scale(0.4);opacity:0}to{transform:scale(1);opacity:1}}

/* Loading comments / ratings placeholder */
.loading-placeholder{display:flex;flex-direction:column;gap:10px;padding:12px 0}
.lp-row{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface2) 25%,rgba(255,255,255,0.04) 50%,var(--surface2) 75%);background-size:400% 100%;animation:shimmer 1.6s ease infinite}
.lp-row:nth-child(2){width:75%;opacity:0.7}
.lp-row:nth-child(3){width:55%;opacity:0.5}

/* Prefs selection pop */
.pref-btn.selected{animation:prefPop 0.22s cubic-bezier(0.2,1.5,0.3,1)}
@keyframes prefPop{from{transform:scale(0.94)}to{transform:scale(1)}}

/* Episode list stagger */
.detail-ep{opacity:0;animation:epFadeIn 0.3s ease both}
@keyframes epFadeIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* Mobile nav active pill transition — .m-btn removed, replaced by .mn-tab */
@keyframes mIconPop{from{transform:scale(0.7)}to{transform:scale(1)}}

/* ── CINEMA POLISH ── */
html{scroll-behavior:smooth}
::selection{background:rgba(200,255,0,0.18);color:var(--text)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.22)}

/* Missing btn-secondary (used by completion badge & elsewhere) */
.btn-secondary{padding:14px 32px;border-radius:9px;font-size:15px;font-weight:600;background:rgba(255,255,255,0.07);color:var(--text);border:1px solid rgba(255,255,255,0.14);transition:all 0.2s;font-family:'Inter',sans-serif;cursor:pointer}
.btn-secondary:hover{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.24);transform:translateY(-1px)}
.btn-secondary:active{transform:translateY(0)}

/* fadeIn keyframe (comp-overlay) */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Nav scroll state — nav#main-nav uses stable glass; no JS scroll toggle needed */

/* Button micro-lift */
.btn-primary{transition:all 0.22s cubic-bezier(0.2,0,0,1)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(200,255,0,0.2)}
.btn-primary:active{transform:translateY(0)!important;box-shadow:none!important}
.btn-outline{transition:all 0.2s}
.btn-outline:hover{background:rgba(255,255,255,0.04);transform:translateY(-1px)}
.btn-outline:active{transform:translateY(0)}
.fh-btn-play{transition:all 0.18s cubic-bezier(0.2,0,0,1)!important}
.fh-btn-play:hover{opacity:0.88!important;transform:translateY(-1px)!important;box-shadow:0 8px 24px rgba(200,255,0,0.3)!important}
.fh-btn-info:hover{background:rgba(255,255,255,0.18)!important}

/* NF card — subtle image zoom on hover */
.nf-card-thumb img{transition:transform 0.38s cubic-bezier(0.2,0,0,1)}
.nf-card:hover .nf-card-thumb img{transform:scale(1.06)}

/* Regular card grid hover */
.card{transition:all 0.28s cubic-bezier(0.2,0,0,1)}
.card:hover{border-color:rgba(200,255,0,0.16);transform:translateY(-5px);box-shadow:0 0 0 1px rgba(200,255,0,0.06),0 24px 52px rgba(0,0,0,0.55)}

/* Row staggered entrance animation */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.content-row{animation:fadeUp 0.5s cubic-bezier(0.2,0,0,1) both}
.content-row:nth-child(1){animation-delay:0.04s}
.content-row:nth-child(2){animation-delay:0.11s}
.content-row:nth-child(3){animation-delay:0.18s}
.content-row:nth-child(4){animation-delay:0.25s}
.content-row:nth-child(5){animation-delay:0.32s}

/* Row — right fade edge */
.row-fade-r{position:absolute;right:0;top:0;bottom:20px;width:72px;background:linear-gradient(to left,var(--bg) 30%,transparent);pointer-events:none;z-index:2}

/* Detail modal cinema upgrade */
.detail-modal{border-radius:22px!important;box-shadow:0 40px 120px rgba(0,0,0,0.9)!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent}
.detail-modal::-webkit-scrollbar{width:3px}
.detail-modal::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1)}
/* ✕ close button — glass circle */
.detail-modal .modal-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(10,10,15,0.68);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.75);font-size:13px;box-shadow:0 2px 16px rgba(0,0,0,0.4);transition:background 0.18s,border-color 0.18s,color 0.18s;z-index:20}
.detail-modal .modal-x:hover{background:rgba(10,10,15,0.92);border-color:rgba(200,255,0,0.22);color:#fff}
.detail-body{padding:28px 36px 44px}
.detail-ep{border-radius:8px;transition:background 0.15s,transform 0.12s}
.detail-ep:hover{transform:translateX(3px)}
.detail-ep:active{transform:none}
.detail-ep-play{transition:color 0.15s}
.detail-ep:hover .detail-ep-play{color:var(--accent)!important}

/* Form focus glow */
.form-input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(200,255,0,0.08)}
.nav-search input:focus{box-shadow:0 0 0 3px rgba(123,94,167,0.14)}
.rating-textarea:focus{box-shadow:0 0 0 3px rgba(123,94,167,0.1)}

/* Reaction buttons */
.reaction-btn:hover{border-color:var(--accent)!important;background:rgba(200,255,0,0.07)!important;transform:translateY(-2px)}
.reaction-btn.reacted{background:rgba(200,255,0,0.09)!important;border-color:rgba(200,255,0,0.38)!important;color:var(--accent)!important}

/* Skeleton shimmer */
@keyframes shimmer{from{background-position:-400% 0}to{background-position:400% 0}}
.skeleton{background:linear-gradient(90deg,var(--surface2) 25%,rgba(255,255,255,0.05) 50%,var(--surface2) 75%);background-size:400% 100%;animation:shimmer 1.8s ease infinite;border-radius:8px}

/* Toast upgrade */
.toast{backdrop-filter:blur(20px);box-shadow:0 8px 32px rgba(0,0,0,0.5)}

/* Pricing plan hover */
.plan{transition:all 0.3s cubic-bezier(0.2,0,0,1)}
.plan:hover{transform:translateY(-6px)!important;box-shadow:0 28px 64px rgba(0,0,0,0.55)!important}
.plan.featured{box-shadow:0 0 0 1px rgba(200,255,0,0.14),0 20px 56px rgba(0,0,0,0.5)}

/* Profile */
.prof-cover{background:linear-gradient(145deg,#050a00 0%,#0a0518 50%,#00070f 100%)}
.prof-avi{transition:box-shadow 0.2s,transform 0.2s}
.prof-avi:hover{box-shadow:0 0 0 3px rgba(200,255,0,0.28);transform:scale(1.03)}

/* Modal open spring */
.modal{animation:modalIn 0.3s cubic-bezier(0.2,1,0.3,1)}

/* Misc hover polish */
.share-btn-alt:hover{border-color:var(--accent2)!important;background:rgba(123,94,167,0.07)}
.ds-btn.active{background:rgba(200,255,0,0.07)!important}
.pref-btn:hover{transform:translateY(-2px)}
.pref-btn.selected{transform:none}

/* ── RESPONSIVE: 768px ── */
@media(max-width:768px){
  /* Hero */
  .hero{padding:52px 20px 36px;min-height:72vh}
  .hero p{font-size:16px;margin-bottom:32px}
  .hero-btns{flex-direction:column;align-items:center;gap:10px}
  .hero-btns .btn-primary,.hero-btns .btn-outline{width:100%;max-width:300px;text-align:center}
  .hero-stats{gap:20px;margin-top:48px;padding-top:28px;justify-content:center;flex-wrap:wrap}
  .stat-val{font-size:24px}

  /* Nav search narrower */
  .nav-search input{width:150px}

  /* Home section padding */
  .home-section{padding:48px 16px}

  /* Profile */
  .prof-header{padding:0 16px}
  .prof-top{gap:14px}
  .prof-avi{width:88px;height:88px;font-size:26px}
  .prof-name{font-size:22px}
  .prof-stats{gap:18px;flex-wrap:wrap}
  .prof-body{padding:0 16px 80px}
  .series-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

  /* Detail modal — bottom sheet on mobile */
  .modal-overlay{padding:0;align-items:flex-end}
  .detail-modal{border-radius:20px 20px 0 0!important;max-height:96vh;max-width:100%;width:100%}
  .detail-banner{height:240px!important}
  .detail-body{padding:18px 20px 32px!important}
  .detail-btns{flex-wrap:wrap;gap:8px}
  .detail-btns .btn-primary,.detail-btns .btn-outline{flex:1;min-width:0;font-size:13px;padding:10px 12px;text-align:center;white-space:nowrap}

  /* Auth/general modals — tighter padding on mobile */
  .modal{padding:28px 20px}

  /* Detail modal only — bottom sheet slide-up */
  #detail-modal{padding:0;align-items:flex-end}

  /* Discover */
  .disc-banner{padding:20px}

  /* Pricing */
  .pricing-hero{padding:48px 16px 32px}
  .billing-toggle{margin-bottom:40px}

  /* Cards grid */
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp3)}

  /* Share modal */
  .share-modal-box{max-width:100%;padding:24px 20px;border-radius:20px 20px 0 0}
  .share-btns{grid-template-columns:1fr}

}

/* ── RESPONSIVE: 480px ── */
@media(max-width:480px){
  /* Nav — hide search, save space */
  .nav-search{display:none}
  .nav-actions{gap:6px}

  /* Hero */
  .hero{min-height:65vh}
  .hero h1{letter-spacing:-0.03em}
  .hero p{font-size:15px}
  .hero-stats{gap:14px}
  .stat-val{font-size:20px}

  /* Featured hero */
  .fh-btns{flex-direction:row;gap:8px;flex-wrap:nowrap}
  .fh-btn-play,.fh-btn-info{width:auto;justify-content:center}

  /* Profile */
  .prof-cover{height:180px}
  .prof-avi{width:76px;height:76px;font-size:22px;margin-top:-38px}
  .prof-name{font-size:18px}
  .prof-stats{gap:12px}
  .p-stat-val{font-size:18px}

  /* Pricing */
  .plans-grid{gap:12px}
  .plan{padding:24px 18px}
  .plan-price{font-size:28px}

  /* Detail */
  .detail-banner{height:200px!important}
  .detail-body{padding:14px 16px 28px!important}
  .detail-title{font-size:20px}
  .detail-btns{gap:6px}
  .detail-btns .btn-primary,.detail-btns .btn-outline{font-size:12px;padding:9px 10px}

  /* Rows */
  .row-title{font-size:16px}
  .row-more{font-size:12px}

  /* Prefs grid */
  .prefs-grid{grid-template-columns:repeat(2,1fr)}

  /* Buttons */
  .btn-primary,.btn-outline,.btn-secondary{padding:12px 20px;font-size:14px}

  /* Ratings stars */
  .star-btn{font-size:26px}

  /* Plans grid */
  .plans-grid{padding:0 12px 40px}
}

/* ── RESPONSIVE: 360px (small Android) ── */
@media(max-width:360px){
  .hero h1{font-size:36px;letter-spacing:-0.03em}
  .detail-btns{flex-direction:column}
  .detail-btns .btn-primary,.detail-btns .btn-outline{width:100%}
  .prof-stats{gap:8px}
  .row-scroll{gap:var(--sp3)}
}

/* ── STITCH CINEMATIC UPGRADE ── */

/* Ambient glows on hero sections */
.hero-bg{background:radial-gradient(ellipse 70% 55% at 50% 28%,rgba(123,94,167,0.15) 0%,transparent 65%),radial-gradient(ellipse 40% 25% at 85% 55%,rgba(200,255,0,0.04) 0%,transparent 50%)!important}
.featured-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 15% 50%,rgba(123,94,167,0.07) 0%,transparent 55%),radial-gradient(ellipse 35% 25% at 85% 15%,rgba(200,255,0,0.04) 0%,transparent 45%);pointer-events:none;z-index:1}

/* Nav active / mobile search — replaced by new nav CSS block */
@media(min-width:769px){#mobile-search-overlay{display:none!important}}

/* ── PROFILE DROPDOWN ── */
#profile-dropdown{position:fixed;top:calc(56px + env(safe-area-inset-top,0px) + 4px);right:max(12px,env(safe-area-inset-right,0px));width:210px;background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:6px;z-index:10000;box-shadow:0 16px 48px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.03);animation:pdIn 180ms cubic-bezier(0.32,0.72,0,1)}
@media(min-width:769px){#profile-dropdown{top:calc(64px + env(safe-area-inset-top,0px) + 4px)}}
@keyframes pdIn{from{opacity:0;transform:scale(0.95) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.pd-user{padding:10px 10px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.pd-name{font-size:13px;font-weight:700;color:var(--text)}
.pd-email{font-size:10px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;font-size:13px;color:var(--text2);background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;transition:background 0.12s}
.pd-item:hover{background:var(--surface2)}
.pd-item svg{flex-shrink:0;opacity:0.65}
.pd-divider{height:1px;background:var(--border);margin:4px 0}
.pd-danger{color:#ff6b6b!important}
.pd-danger svg{opacity:1!important;stroke:#ff6b6b}

/* ── PROFILE PICKER ── */
#profile-picker{position:fixed;inset:0;z-index:9000;background:linear-gradient(135deg,#0d0d1a 0%,#0a1628 50%,#0d0d1a 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;overflow-x:hidden;padding:32px 18px}
#profile-picker.pp-hidden{display:none}
.pp-glow{position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(80,40,180,0.22) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-60%);pointer-events:none}
.pp-label{font-size:clamp(22px,5vw,34px);font-weight:900;color:rgba(255,255,255,0.92);letter-spacing:0;text-align:center;margin-bottom:8px;position:relative;z-index:1;font-family:'Inter',sans-serif}
.pp-sub{font-size:12px;color:rgba(255,255,255,0.45);line-height:1.5;text-align:center;max-width:420px;margin:0 auto 28px;position:relative;z-index:1}
.pp-cards{display:flex;gap:14px;align-items:flex-end;justify-content:center;position:relative;z-index:1;flex-wrap:wrap;max-width:min(560px,100%)}
.pp-card{width:80px;background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.10);border-radius:16px;padding:14px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform 0.2s cubic-bezier(0.32,0.72,0,1),border-color 0.2s,box-shadow 0.2s;flex-shrink:0}
.pp-card:hover{transform:translateY(-4px)}
.pp-card:focus-visible,.pp-add-card:focus-visible,.pp-manage-link:focus-visible{outline:2px solid rgba(168,255,62,0.75);outline-offset:4px}
.pp-card.pp-active{background:rgba(168,255,62,0.07);border-color:rgba(168,255,62,0.3);transform:translateY(-8px);box-shadow:0 8px 32px rgba(168,255,62,0.12)}
.pp-card.pp-manage-mode{cursor:default}
.pp-card.pp-manage-mode:hover{transform:none}
@media(min-width:481px){.pp-card{width:96px;padding:16px 10px 12px}}
.pp-av{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;position:relative;flex-shrink:0}
@media(min-width:481px){.pp-av{width:64px;height:64px;font-size:22px}}
.pp-av-lime{background:linear-gradient(135deg,#a8ff3e,#00c9a7);color:#000}
.pp-av-purple{background:linear-gradient(135deg,#6c63ff,#3f87e0);color:#fff}
.pp-av-coral{background:linear-gradient(135deg,#ff6b6b,#ff9f43);color:#fff}
.pp-av-pink{background:linear-gradient(135deg,#da70d6,#7b5ea7);color:#fff}
.pp-av-kids{background:linear-gradient(135deg,#5b8dee,#9b59b6);color:#fff}
.pp-av-emoji{font-size:26px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12)}
.pp-av-wrap{position:relative}
.pp-edit-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,0.62);border-radius:50%;align-items:center;justify-content:center;font-size:10px;font-weight:900;letter-spacing:0.04em;text-transform:uppercase;color:#fff;cursor:pointer}
.pp-manage-mode .pp-edit-overlay{display:flex}
.pp-del-btn{display:none;position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:#ff4444;border-radius:50%;border:2px solid #0a0a0f;color:#fff;font-size:13px;font-weight:900;align-items:center;justify-content:center;cursor:pointer;line-height:1;z-index:3;padding:0;font-family:inherit}
.pp-manage-mode .pp-del-btn{display:flex}
.pp-selected-mark{position:absolute;right:-4px;bottom:0;width:20px;height:20px;border-radius:50%;background:#a8ff3e;color:#071005;border:2px solid #0d0d1a;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 6px 18px rgba(168,255,62,0.24)}
.pp-selected-mark::before{content:'✓';font-size:12px;font-weight:900;line-height:1}
.pp-name{font-size:10px;font-weight:700;color:rgba(255,255,255,0.55);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pp-card.pp-active .pp-name{color:#a8ff3e}
.pp-kids-badge{font-size:8px;font-weight:700;color:rgba(91,141,238,0.8);letter-spacing:0.5px;text-transform:uppercase;margin-top:-4px}
.pp-add-card{width:80px;background:rgba(255,255,255,0.03);border:1.5px dashed rgba(255,255,255,0.15);border-radius:16px;padding:14px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:border-color 0.2s,background 0.2s;flex-shrink:0}
.pp-add-card:hover{border-color:rgba(168,255,62,0.3);background:rgba(168,255,62,0.04)}
@media(min-width:481px){.pp-add-card{width:96px;padding:16px 10px 12px}}
.pp-add-icon{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;font-size:24px;color:rgba(255,255,255,0.25)}
@media(min-width:481px){.pp-add-icon{width:64px;height:64px}}
.pp-add-label{font-size:10px;font-weight:700;color:rgba(255,255,255,0.25)}
.pp-manage-link{font-size:11px;color:rgba(255,255,255,0.25);margin-top:32px;cursor:pointer;letter-spacing:0.3px;position:relative;z-index:1;background:none;border:none;font-family:inherit;transition:color 0.15s}
.pp-manage-link:hover{color:rgba(255,255,255,0.5)}
/* Profile picker empty state */
.pp-empty-msg{font-size:13px;color:rgba(255,255,255,0.4);text-align:center;max-width:280px;line-height:1.6;margin:0 auto 16px;position:relative;z-index:1}
.pp-cta-btn{background:none;border:1px solid rgba(255,255,255,0.15);border-radius:8px;padding:10px 20px;font-size:13px;font-weight:600;color:rgba(168,255,62,0.9);cursor:pointer;font-family:'Inter',sans-serif;transition:background 0.15s;position:relative;z-index:1;margin-top:4px}
.pp-cta-btn:hover{background:rgba(168,255,62,0.07)}
#profile-picker.pp-switching::after{content:'Switching to ' var(--switch-name);position:fixed;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(10,10,15,0.86);border:1px solid rgba(168,255,62,0.28);border-radius:999px;padding:10px 16px;color:rgba(255,255,255,0.9);font-size:12px;font-weight:800;z-index:4;box-shadow:0 16px 42px rgba(0,0,0,0.38)}
#vp-ripple{position:fixed;inset:0;z-index:9001;pointer-events:none;overflow:hidden;display:none}
.vp-ripple-ring{position:absolute;border-radius:50%;background:transparent;border:2px solid rgba(168,255,62,0.4);transform:translate(-50%,-50%) scale(0);animation:vpRippleOut 400ms cubic-bezier(0.32,0.72,0,1) forwards}
@keyframes vpRippleOut{0%{transform:translate(-50%,-50%) scale(0);opacity:0.8}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
#vp-ripple-fill{position:absolute;inset:0;background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(168,255,62,0.12) 0%,transparent 70%);opacity:0;transition:opacity 180ms ease}
#vp-ripple-black{position:absolute;inset:0;background:#000;opacity:0;transition:opacity 120ms ease}
#vp-sheet{position:fixed;bottom:0;left:0;right:0;z-index:9002;background:var(--bg);border-radius:20px 20px 0 0;border-top:1px solid var(--border2);padding:0 0 env(safe-area-inset-bottom);transform:translateY(100%);visibility:hidden;pointer-events:none;transition:transform 300ms cubic-bezier(0.32,0.72,0,1),visibility 0s linear 300ms;max-height:90vh;overflow-y:auto}
#vp-sheet.vps-open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform 300ms cubic-bezier(0.32,0.72,0,1)}
#vp-sheet-backdrop{position:fixed;inset:0;z-index:9001;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none}
#vp-sheet-backdrop.vps-open{display:block}
.vps-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:10px auto 0}
.vps-title{font-size:16px;font-weight:800;color:var(--text);padding:16px 20px 0;font-family:'Inter',sans-serif}
.vps-body{padding:16px 20px 24px;display:flex;flex-direction:column;gap:14px}
.vps-av-pick{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;cursor:pointer;margin:0 auto 4px;border:2px solid rgba(168,255,62,0.3);transition:border-color 0.2s}
.vps-av-pick:hover{border-color:rgba(168,255,62,0.6)}
.vps-av-pick-hint{font-size:9px;color:rgba(255,255,255,0.25);text-align:center;margin-top:-8px;margin-bottom:4px}
.vps-field-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:-8px}
.vps-field-label{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.vps-name-count{font-size:11px;color:var(--muted);font-weight:700}
.vps-input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--text);font-family:inherit;outline:none}
.vps-input:focus{border-color:rgba(168,255,62,0.4)}
.vps-input-empty{border-color:rgba(255,68,68,0.45)}
.vps-kids-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border2);border-radius:12px;padding:12px 14px}
.vps-kids-label{font-size:13px;color:var(--text);font-weight:600}
.vps-kids-sub{font-size:11px;color:var(--muted);margin-top:2px}
.vps-toggle{width:44px;height:26px;background:var(--border2);border-radius:13px;position:relative;cursor:pointer;transition:background 0.2s;flex-shrink:0;border:none}
.vps-toggle.on{background:var(--accent)}
.vps-toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform 0.2s}
.vps-toggle.on::after{transform:translateX(18px)}
.vps-save-btn{width:100%;padding:14px;background:var(--accent);color:#0a0a0f;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;transition:opacity 0.15s}
.vps-save-btn:hover{opacity:0.88}
.vps-save-btn:disabled{opacity:0.42;cursor:not-allowed}
.vps-delete-btn{width:100%;padding:12px;background:transparent;color:#ff4444;border:1px solid rgba(255,68,68,0.3);border-radius:14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color 0.15s}
.vps-delete-btn:hover{border-color:rgba(255,68,68,0.6)}
#vp-av-picker{position:fixed;bottom:0;left:0;right:0;z-index:9003;background:var(--bg);border-radius:20px 20px 0 0;border-top:1px solid var(--border2);padding:16px 20px 32px;transform:translateY(100%);visibility:hidden;pointer-events:none;transition:transform 280ms cubic-bezier(0.32,0.72,0,1),visibility 0s linear 280ms;max-height:78vh;overflow-y:auto}
#vp-av-picker.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform 280ms cubic-bezier(0.32,0.72,0,1)}
.vp-av-grid{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.vp-av-section{display:flex;flex-direction:column;gap:9px}
.vp-av-section-title{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.vp-av-section-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.vp-av-opt{width:100%;aspect-ratio:1;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;background:var(--surface2);border:1.5px solid transparent;transition:border-color 0.15s,transform 0.15s;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;padding:0}
.vp-av-opt:hover,.vp-av-opt:active{border-color:rgba(168,255,62,0.5);transform:scale(1.08)}
@media(max-width:380px){.vp-av-section-grid{grid-template-columns:repeat(5,1fr)}}

/* ── MOBILE SEARCH OVERLAY ── */
#mobile-search-overlay{position:fixed;inset:0;z-index:9999;display:none;pointer-events:none}
#mobile-search-overlay.mso-open{display:block;pointer-events:all}
.mso-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.72);backdrop-filter:blur(20px) saturate(0.7);-webkit-backdrop-filter:blur(20px) saturate(0.7);opacity:0;transition:opacity 220ms ease}
#mobile-search-overlay.mso-open .mso-backdrop{opacity:1}
.mso-sheet{position:absolute;bottom:0;left:0;right:0;height:92vh;max-height:92vh;background:var(--bg);border-radius:20px 20px 0 0;border-top:1px solid var(--border2);display:flex;flex-direction:column;transform:translateY(100%);transition:transform 300ms cubic-bezier(0.32,0.72,0,1);overflow:hidden}
#mobile-search-overlay.mso-open .mso-sheet{transform:translateY(0)}
.mso-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:10px auto 0;flex-shrink:0}
.mso-header{display:flex;align-items:center;gap:10px;padding:12px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.mso-input-wrap{flex:1;display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid rgba(200,255,0,0.3);border-radius:14px;padding:10px 14px;box-shadow:0 0 0 3px rgba(200,255,0,0.05),0 0 18px rgba(200,255,0,0.06)}
.mso-input-wrap svg{flex-shrink:0}
#mso-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;font-family:inherit}
#mso-input::placeholder{color:var(--muted)}
.mso-close{width:34px;height:34px;background:var(--surface2);border:1px solid var(--border2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.15s}
.mso-close:hover{background:var(--surface)}
.mso-body{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
.mso-section{margin-bottom:20px}
.mso-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mso-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.mso-clear-btn{font-size:11px;color:var(--purple);background:none;border:none;cursor:pointer;font-weight:600;padding:0}
.mso-ai-strip{background:linear-gradient(135deg,rgba(123,94,167,0.2),rgba(200,255,0,0.06));border:1px solid rgba(123,94,167,0.35);border-radius:14px;padding:13px 14px;margin-bottom:18px;cursor:pointer;transition:border-color 0.2s}
.mso-ai-strip:hover{border-color:rgba(123,94,167,0.6)}
.mso-ai-strip-row{display:flex;align-items:center;gap:10px}
.mso-ai-icon{width:32px;height:32px;background:linear-gradient(135deg,#7b5ea7,#c8ff00);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.mso-ai-text{flex:1}
.mso-ai-text strong{font-size:12px;color:var(--lime);display:block;margin-bottom:1px}
.mso-ai-text span{font-size:11px;color:var(--muted)}
.mso-ai-arrow{color:var(--muted);font-size:18px}
.mso-ai-sub{display:none;margin-top:10px;flex-direction:row;gap:8px;align-items:center}
.mso-ai-sub.open{display:flex}
#mso-ai-input{flex:1;background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:9px 12px;font-size:13px;color:var(--text);outline:none;font-family:inherit}
#mso-ai-input:focus{border-color:var(--purple)}
.mso-ai-submit{width:34px;height:34px;background:var(--lime);border:none;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.mso-ai-submit svg{stroke:#000}
.mso-chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:20px;scrollbar-width:none}
.mso-chips::-webkit-scrollbar{display:none}
.mso-chip{padding:6px 14px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid var(--border2);background:var(--surface2);color:var(--muted);cursor:pointer;transition:all 0.15s;flex-shrink:0}
.mso-chip--active,.mso-chip:hover{background:rgba(200,255,0,0.12);border-color:rgba(200,255,0,0.35);color:var(--lime)}
.mso-row-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity 0.15s}
.mso-row-item:last-child{border-bottom:none}
.mso-row-item:hover{opacity:0.75}
.mso-row-icon{width:28px;height:28px;background:var(--surface2);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mso-row-text{flex:1;font-size:13px;color:var(--text)}
.mso-row-arrow{color:var(--muted);font-size:14px}
.mso-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:0.4px;text-transform:uppercase}
.mso-badge--hot{background:rgba(200,255,0,0.12);color:var(--lime)}
.mso-badge--new{background:rgba(123,94,167,0.2);color:#a78bfa}
.mso-badge--top{background:rgba(255,185,0,0.12);color:#ffd700}
.mso-creator-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.mso-creator-row::-webkit-scrollbar{display:none}
.mso-creator-chip{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;flex-shrink:0;transition:opacity 0.15s}
.mso-creator-chip:hover{opacity:0.75}
.mso-creator-avi{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#7b5ea7,#c8ff00);border:1.5px solid rgba(200,255,0,0.2);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;font-family:'Inter',sans-serif}
.mso-creator-name{font-size:10px;color:var(--muted);text-align:center;max-width:52px;line-height:1.3;word-break:break-word}
.mso-result-card{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity 0.15s}
.mso-result-card:last-child{border-bottom:none}
.mso-result-card:hover{opacity:0.75}
.mso-result-thumb{width:64px;height:40px;border-radius:7px;object-fit:cover;background:var(--surface2);flex-shrink:0}
.mso-result-body{flex:1;min-width:0}
.mso-result-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mso-result-meta{font-size:11px;color:var(--muted);margin-top:2px}
.mso-result-reason{font-size:11px;color:var(--purple);margin-top:2px;font-style:italic}
.mso-result-badge{font-size:10px;padding:3px 8px;border-radius:5px;background:var(--surface2);color:var(--muted);flex-shrink:0}
.mso-empty{text-align:center;padding:36px 16px;color:var(--muted);font-size:13px;line-height:1.6}
.mso-shimmer{background:linear-gradient(90deg,var(--surface2) 25%,var(--surface) 50%,var(--surface2) 75%);background-size:200% 100%;animation:msoShimmer 1.2s infinite;border-radius:8px}
@keyframes msoShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.mso-skel{height:40px;margin-bottom:8px}

/* Genre/category tags — purple pill */
.detail-tag{background:rgba(123,94,167,0.12)!important;border-color:rgba(123,94,167,0.28)!important;color:rgba(214,186,255,0.88)!important}
.card-badge,.nf-card-badge{background:rgba(87,58,129,0.82)!important;backdrop-filter:blur(10px)!important;color:rgba(214,186,255,0.92)!important}

/* Progress bars — purple → lime gradient */
.cw-fill{background:linear-gradient(90deg,var(--purple),var(--lime))!important}
.autoplay-fill{background:linear-gradient(90deg,var(--purple),var(--lime))!important}

/* Modal overlay — heavier blur */
.modal-overlay{backdrop-filter:blur(22px)!important}

/* Detail episode numbers — lime accent */
.detail-ep-num{background:rgba(200,255,0,0.07)!important;color:var(--lime)!important;border:1px solid rgba(200,255,0,0.14)!important;font-weight:800!important}

/* Discover sidebar — left lime border on active */
.disc-sidebar .ds-btn.active{border-left:2px solid var(--lime)!important;padding-left:8px!important;color:var(--lime)!important;background:rgba(200,255,0,0.06)!important;font-weight:600!important}

/* Discover banner — cinematic depth */
.disc-banner{background:linear-gradient(145deg,rgba(8,18,0,0.96),rgba(18,8,40,0.96))!important;border-color:rgba(123,94,167,0.22)!important;box-shadow:inset 0 0 80px rgba(123,94,167,0.06),0 0 40px rgba(0,0,0,0.4)!important}

/* Profile cover — richer gradient */
.prof-cover{background:linear-gradient(145deg,#050a00 0%,#0a0520 45%,#00050f 100%)!important}
.prof-cover-pattern{background-image:repeating-linear-gradient(45deg,rgba(200,255,0,0.03) 0,rgba(200,255,0,0.03) 1px,transparent 1px,transparent 36px)!important}

/* Profile avatar glow ring on hover */
.prof-avi:hover{box-shadow:0 0 0 3px rgba(200,255,0,0.32),0 0 28px rgba(200,255,0,0.1)!important}

/* Empty state — cinematic upgrade */
.empty-state{border:1px solid rgba(123,94,167,0.18)!important;background:linear-gradient(160deg,rgba(10,10,15,0.82),rgba(18,8,36,0.45))!important;box-shadow:inset 0 0 60px rgba(123,94,167,0.04)!important}
.empty-title{background:linear-gradient(135deg,#f0eff5 30%,rgba(200,255,0,0.88));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Toast — stronger lime glow */
.toast{border-color:rgba(200,255,0,0.22)!important;box-shadow:0 8px 40px rgba(0,0,0,0.65),0 0 0 1px rgba(200,255,0,0.05)!important}

/* Featured plan — stronger lime aura */
.plan.featured{box-shadow:0 0 0 1px rgba(200,255,0,0.22),0 24px 64px rgba(0,0,0,0.6),0 0 48px rgba(200,255,0,0.04)!important}
.plan.featured:hover{box-shadow:0 0 0 1px rgba(200,255,0,0.35),0 32px 80px rgba(0,0,0,0.7),0 0 64px rgba(200,255,0,0.06)!important}

/* NF card — Netflix Pure lime ring on hover */
.nf-card:hover{box-shadow:0 0 0 2px rgba(200,255,0,0.45),0 16px 40px rgba(0,0,0,0.9)!important}

/* Detail modal banner — richer fade */
.detail-banner-grad{background:linear-gradient(to top,var(--surface) 0%,rgba(0,0,0,0.55) 48%,rgba(0,0,0,0.1) 80%,transparent 100%)!important}

/* Now-playing pill — accent glow */
.now-playing-pill{box-shadow:0 4px 32px rgba(0,0,0,0.65),0 0 24px rgba(200,255,0,0.06),0 0 0 1px rgba(200,255,0,0.1)!important}

/* Completion box — lime aura */
.comp-box{box-shadow:0 40px 100px rgba(0,0,0,0.9),0 0 64px rgba(200,255,0,0.04)!important}

/* Watch party bubble — glass */
.party-bubble{backdrop-filter:blur(20px)!important;border-color:rgba(255,255,255,0.1)!important}
.party-bubble:hover{box-shadow:0 12px 40px rgba(0,0,0,0.6),0 0 24px rgba(123,94,167,0.1)!important}

/* Detail creator card — subtle glass */
.detail-creator{background:rgba(255,255,255,0.03)!important;border:1px solid rgba(255,255,255,0.06)!important;backdrop-filter:blur(8px)!important}

/* Comment textarea — lime focus */
.comment-textarea:focus{border-color:rgba(200,255,0,0.38)!important;box-shadow:0 0 0 3px rgba(200,255,0,0.06)!important}

/* Star hover — gold shimmer */
.star-btn:hover{text-shadow:0 0 14px rgba(255,215,0,0.5)!important}

/* Verified badge — lime shimmer */
.verified{box-shadow:0 0 12px rgba(200,255,0,0.08)!important}

/* Card regular grid — Netflix Pure hover */
.card:hover{transform:scale(1.04)!important;box-shadow:0 0 0 2px rgba(200,255,0,0.45),0 16px 40px rgba(0,0,0,0.9)!important}

/* Section label spacing */
.sec-label{letter-spacing:4px}

/* Rating avg — gold glow */
.rating-avg-big{text-shadow:0 0 16px rgba(255,215,0,0.3)}

/* Featured hero dot indicator — lime fill */
.fh-dot-fill{background:var(--lime)!important}


/* Btn-secondary — subtle glass upgrade */
.btn-secondary{backdrop-filter:blur(10px)}
.btn-secondary:hover{background:rgba(255,255,255,0.1)!important;border-color:rgba(255,255,255,0.2)!important;box-shadow:0 8px 24px rgba(0,0,0,0.3)}

/* ══════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE ENHANCEMENTS
   ══════════════════════════════════════════ */

/* ── 1024px — Tablet ── */
@media(max-width:1024px){
  /* Layout */
  .home-section{padding:56px 24px}
  .prof-header{padding:0 24px}
  .prof-body{padding:0 24px 80px}
  .modal-overlay{padding:16px}
  /* Grids */
  .plans-grid{grid-template-columns:repeat(2,1fr)}
  .plan.featured{order:-1}
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  .disc-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .series-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}

/* ── 768px — Mobile baseline ── */
@media(max-width:768px){
  /* ▸ Modals */
  .modal{padding:32px 20px}
  #profile-edit-modal .modal{padding:28px 20px!important}
  #prefs-modal .modal{padding:28px 20px!important}

  /* ▸ Profile page */
  .prof-top{flex-wrap:wrap}
  #prof-bio{max-width:100%!important}
  #prof-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%;padding-bottom:0}
  #prof-actions .btn-primary,#prof-actions .btn-outline{font-size:12px!important;padding:9px 10px!important;width:100%;justify-content:center;text-align:center;display:inline-flex!important}

  /* ▸ Discover */
  .disc-banner{padding:20px}
  .disc-banner-title{font-size:18px!important}
  .detail-creator{flex-wrap:wrap}
  #detail-follow-btn{width:100%;margin-top:8px}

  /* ▸ Grids */
  .series-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

  /* ▸ Toast — above mobile nav */
  .toast{bottom:80px!important;right:16px}

  /* ▸ Pricing */
  .pricing-hero{padding:40px 20px 28px}
  .pricing-hero p{font-size:14px!important;margin-bottom:28px!important}
  .billing-toggle{margin-bottom:32px}

  /* ▸ Home */
  #home-cta{padding:52px 20px 80px!important}
  #home-footer{flex-direction:column!important;align-items:center!important;text-align:center!important;padding:28px 16px!important;gap:12px!important}
}

/* ── 480px — Small mobile ── */
@media(max-width:480px){
  /* ▸ Modals — !important beats inline padding:36px */
  .modal{padding:24px 20px!important;border-radius:16px!important}
  #profile-edit-modal .modal{padding:18px 14px!important}
  #prefs-modal .modal{padding:18px 14px!important}
  .add-series-modal{max-height:94vh}

  /* ▸ Forms */
  .form-row{grid-template-columns:1fr}

  /* ▸ Discover */
  .disc-chip{font-size:11px;padding:6px 11px}
  .disc-banner-emoji{display:none}
  .disc-banner{padding:16px}
  .disc-banner-title{font-size:16px!important}
  #disc-info{font-size:11px}
  /* ▸ Toast */
  .toast{right:10px;left:10px;max-width:none;font-size:13px;bottom:80px!important}

  /* ▸ Profile */
  #prof-actions{grid-template-columns:1fr 1fr}
  .series-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp3)}

  /* ▸ Detail modal */
  #detail-follow-btn{width:100%}

  /* ▸ Pricing */
  .billing-toggle{margin-bottom:20px}
  .plan-price{font-size:28px}
  .plan-features li{font-size:13px;padding:4px 0}
  .prefs-grid{grid-template-columns:repeat(2,1fr)}

  /* ▸ Completion overlay */
  .comp-box{padding:22px 16px;width:calc(100% - 32px)}
  .comp-headline{font-size:20px}
  .comp-confetti{font-size:40px}

  /* ▸ Misc */
  .share-modal-box{border-radius:20px 20px 0 0;padding:20px 16px}
  .now-playing-pill{font-size:11px;padding:6px 12px 6px 10px;gap:7px}

  /* ▸ Home CTA */
  #home-cta{padding:40px 16px 60px!important}
  #home-cta > div > div > div[style*="gap:12px"]{flex-direction:column!important;align-items:stretch!important}
  #home-cta > div > div > div[style*="gap:28px"]{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}

  #home-footer{padding:20px 16px!important}
}

/* ── 360px — Tiny / small Android ── */
@media(max-width:360px){
  /* ▸ Nav */
  nav#main-nav{padding:0 10px;gap:6px}

  /* ▸ Modals */
  .modal{padding:14px 10px!important}
  #profile-edit-modal .modal{padding:12px 10px!important}
  #prefs-modal .modal{padding:12px 10px!important}

  /* ▸ Profile */
  .prof-top{gap:10px;margin-top:-40px}
  .prof-avi{width:70px;height:70px;font-size:20px}
  #prof-actions{grid-template-columns:1fr!important}
  .series-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--sp3)}
  .p-stat-val{font-size:16px}
  .prof-name{font-size:18px!important}

  /* ▸ Discover */
  .disc-banner{padding:14px}
  .disc-banner-title{font-size:14px!important}

  /* ▸ Cards */
  .cards-grid{grid-template-columns:1fr}
  .nf-card{width:120px}

  /* ▸ Mobile nav */
  .mn-tab{font-size:9px;padding:5px 8px}

  /* ▸ Pricing */
  .plans-grid{padding:0 8px 40px}
  .plan{padding:20px 14px}
  .plan-price{font-size:26px}
  .plan-features li{font-size:12px;padding:4px 0}

  /* ▸ Completion overlay */
  .comp-box{padding:18px 12px;width:calc(100% - 20px)}
  .comp-headline{font-size:18px}
  .comp-actions{flex-direction:column}
  .comp-actions .btn-primary,.comp-actions .btn-outline{width:100%}

  /* ▸ Prefs grid */
  .prefs-grid{grid-template-columns:repeat(2,1fr)}

  /* ▸ Misc */
  #home-footer{padding:16px 12px!important}
}

/* ══════════════════════════════════════════
   PRODUCTION RESPONSIVE POLISH
   ══════════════════════════════════════════ */

/* ── Global overflow guards ── */
.page,.disc-layout{overflow-x:hidden}
.cards-grid>*,.disc-grid>*,.series-grid>*{min-width:0}
img,video{max-width:100%;height:auto}

/* ── Smooth touch scrolling on iOS ── */
.row-scroll{-webkit-overflow-scrolling:touch}
.detail-modal{-webkit-overflow-scrolling:touch}

/* ── iPhone X+ safe-area insets ── */
@supports(padding:env(safe-area-inset-bottom)){
  .mobile-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
  @media(max-width:768px){
    .toast{bottom:calc(80px + env(safe-area-inset-bottom))!important}
    .page{margin-bottom:calc(64px + env(safe-area-inset-bottom))}
  }
}

/* ── 768px: touch targets + mobile polish ── */
@media(max-width:768px){
  .mn-tab{min-height:48px}
  .btn-signin,.btn-signup{min-height:44px}
  .prof-cover{height:200px}
  .disc-main{width:100%;min-width:0}
}

/* ── Pricing: horizontal swipe carousel on mobile ── */
@media(max-width:768px){
  .plans-grid{display:flex!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;padding:4px 16px 48px!important;scroll-snap-type:x mandatory;max-width:100%;margin:0}
  .plans-grid::-webkit-scrollbar{display:none}
  .plan{flex:0 0 82vw;max-width:300px;scroll-snap-align:start;order:0!important}
  .plan-popular{white-space:nowrap}
}
@media(max-width:480px){
  .plans-grid{gap:12px;padding:4px 14px 40px!important}
  .plan{flex:0 0 88vw}
}
@media(max-width:360px){
  .plans-grid{padding:4px 12px 36px!important}
  .plan{flex:0 0 90vw}
  .row-header{padding:0 12px}
  .row-scroll{padding:4px 12px 16px}
  .home-section{padding:40px 12px}
}

/* ── Video player: edge-to-edge on phones ── */
@media(max-width:480px){
  .vpm-overlay{padding:0}
  .vpm-box{border-radius:0}
  .vpm-bar{border-radius:0;padding:10px 14px}
}

/* ══════════════════════════════════════════
   ACTION BUTTON REFINEMENT
   ══════════════════════════════════════════ */

/* Detail modal — icon alignment & spacing */
.detail-btns .btn-primary{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:11px 26px}
.detail-btns .btn-outline{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:11px 18px}
.detail-btns .btn-primary svg{width:14px;height:14px;flex-shrink:0}
.detail-btns .btn-outline svg{width:13px;height:13px;flex-shrink:0;opacity:0.85}

/* Party button — cinematic social tint */
#detail-party-btn{background:rgba(123,94,167,0.1)!important;border-color:rgba(123,94,167,0.28)!important;color:rgba(214,186,255,0.9)!important}
#detail-party-btn svg{opacity:1;color:rgba(200,168,255,0.9)}
#detail-party-btn:hover{background:rgba(123,94,167,0.2)!important;border-color:rgba(123,94,167,0.46)!important;transform:translateY(-1px)}

/* Share button — subtle directional cue */
#detail-share-btn svg{transform:translateY(-0.5px)}

/* Profile actions — icon support */
#prof-actions .btn-outline{display:inline-flex!important;align-items:center;gap:6px}
#prof-actions .btn-outline svg,#prof-actions .btn-primary svg{width:13px;height:13px;flex-shrink:0;opacity:0.82}

/* Detail btns: 480px — 2-column grid, Watch spans full width */
@media(max-width:480px){
  .detail-btns{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  #detail-watch-btn{grid-column:1/-1;justify-content:center;padding:12px 20px}
  .detail-btns .btn-outline{justify-content:center;padding:10px 10px!important;font-size:12px!important}
}
/* 360px — revert to stacked column */
@media(max-width:360px){
  .detail-btns{display:flex!important;flex-direction:column;gap:8px}
  #detail-watch-btn{justify-content:center}
  .detail-btns .btn-primary,.detail-btns .btn-outline{justify-content:center}
}

/* ══════════════════════════════════════════
   PLATFORM POLISH — SECTIONS 1-8
   ══════════════════════════════════════════ */

/* ── S2: Creator profile banner ── */
.prof-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:opacity 0.4s}
.prof-cover-edit{position:absolute;bottom:10px;right:10px;z-index:3;background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.18);color:#fff;font-size:11px;font-weight:600;padding:5px 12px;border-radius:20px;cursor:pointer;backdrop-filter:blur(10px);display:none;align-items:center;gap:5px;transition:all 0.2s}
.prof-cover:hover .prof-cover-edit{display:inline-flex}
.prof-cover-edit:hover{background:rgba(0,0,0,0.85);border-color:var(--accent)}
.prof-cover-edit svg{width:11px;height:11px;}

/* ── S4: Follow button pop animation ── */
@keyframes followPop{0%{transform:scale(1)}35%{transform:scale(1.2)}65%{transform:scale(0.94)}100%{transform:scale(1)}}
.follow-pop{animation:followPop 0.38s cubic-bezier(0.34,1.56,0.64,1) forwards}
#detail-follow-btn.following{color:var(--accent)!important;border-color:var(--accent)!important;box-shadow:0 0 0 1px rgba(200,255,0,0.28),0 0 14px rgba(200,255,0,0.1)!important;transition:color 0.2s,border-color 0.2s,box-shadow 0.2s}

/* ── Back navigation button — only visible when .visible class is present ── */
.detail-back-btn {
  position: fixed; top: 68px; left: 24px; z-index: 210;
  display: none; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(18,18,28,0.85); backdrop-filter: blur(8px);
  border: 1px solid var(--border); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.detail-back-btn.visible { display: flex; }
.detail-back-btn:hover { background: rgba(255,255,255,0.1); }
.detail-back-btn svg{flex-shrink:0;opacity:0.85}

/* ── S6: Lighter sign-out button ── */
.btn-signout{padding:5px 10px!important;border-radius:7px;font-size:11px!important;background:transparent!important;border:1px solid rgba(255,255,255,0.07)!important;color:var(--muted)!important;transition:all 0.15s;letter-spacing:0.01em}
.btn-signout:hover{border-color:rgba(255,107,107,0.35)!important;color:var(--accent3)!important}

/* ── S7: Cinematic splash screen ── */
#splash-screen{position:fixed;inset:0;z-index:9999;background:#050508;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
#splash-screen.splash-out{animation:splashFadeOut 0.45s cubic-bezier(0.4,0,1,1) forwards;pointer-events:none}
@keyframes splashFadeOut{to{opacity:0;transform:scale(1.025)}}
.splash-logo{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(54px,10vw,90px);letter-spacing:-0.05em;opacity:0;transform:scale(0.84);animation:splashReveal 0.72s cubic-bezier(0.34,1.56,0.64,1) 0.25s forwards;position:relative;z-index:2}
.splash-logo span{color:var(--accent)}
@keyframes splashReveal{to{opacity:1;transform:scale(1)}}
.splash-tagline{font-size:11px;color:rgba(200,255,0,0.35);letter-spacing:0.22em;text-transform:uppercase;opacity:0;margin-top:16px;animation:splashTagIn 0.45s ease 0.7s forwards;position:relative;z-index:2}
@keyframes splashTagIn{to{opacity:1}}
.splash-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(200,255,0,0.14) 0%,rgba(123,94,167,0.07) 50%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:splashGlowPulse 1.9s ease-in-out 0.2s infinite alternate;pointer-events:none}
@keyframes splashGlowPulse{from{opacity:0.4;transform:translate(-50%,-50%) scale(0.86)}to{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
.splash-ring{position:absolute;border-radius:50%;border:1px solid rgba(200,255,0,0.08);top:50%;left:50%;pointer-events:none;animation:splashRing 1.4s cubic-bezier(0,0.2,0.4,1) 0.05s forwards}
@keyframes splashRing{0%{width:60px;height:60px;opacity:0.7;transform:translate(-50%,-50%)}100%{width:800px;height:800px;opacity:0;transform:translate(-50%,-50%)}}
/* splash stars, planet, shooting stars */
.splash-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.splash-star{position:absolute;border-radius:50%;background:#fff;opacity:0;animation:splashStarTwinkle linear infinite}
@keyframes splashStarTwinkle{0%,100%{opacity:0.08;transform:scale(0.5)}50%{opacity:1;transform:scale(1)}}
.splash-shoot{position:absolute;width:90px;height:1px;background:linear-gradient(90deg,transparent,rgba(200,255,0,0.9),transparent);transform-origin:left center;opacity:0;animation:splashShoot 0.55s ease-out forwards}
@keyframes splashShoot{0%{opacity:0;transform:translateX(0) rotate(-22deg)}20%{opacity:1}100%{opacity:0;transform:translateX(220px) rotate(-22deg)}}
.splash-planet{position:absolute;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(130,70,255,0.75),rgba(18,4,55,0.96));box-shadow:0 0 26px rgba(110,50,255,0.4),inset -7px -5px 16px rgba(0,0,0,0.65);right:18%;top:18%;z-index:1;opacity:0;animation:splashPlanetIn 0.55s ease-out 0.4s forwards,splashPlanetFloat 3.8s ease-in-out 0.95s infinite alternate}
.splash-planet::after{content:'';position:absolute;width:148%;height:30%;border-radius:50%;border:1px solid rgba(200,255,0,0.16);top:37%;left:-24%;transform:rotate(-17deg)}
@keyframes splashPlanetIn{to{opacity:1}}
@keyframes splashPlanetFloat{0%{transform:translateY(0)}100%{transform:translateY(-11px)}}

/* ── S8: Watch Crew ── */
.watch-crew-section{margin-top:36px;padding-top:28px;border-top:1px solid var(--border)}
.watch-crew-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:5px}
.watch-crew-title svg{width:16px;height:16px;color:var(--accent2)}
.watch-crew-sub{font-size:12px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.crew-cards{display:flex;gap:12px;flex-wrap:wrap}
.crew-card{width:108px;border-radius:16px;background:var(--surface2);border:1.5px solid var(--border2);padding:16px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;transition:all 0.2s;position:relative}
.crew-card.owner{border-color:rgba(200,255,0,0.28);box-shadow:0 0 20px rgba(200,255,0,0.05)}
.crew-card.member{border-color:rgba(123,94,167,0.32);box-shadow:0 0 20px rgba(123,94,167,0.06)}
.crew-card.invite{border-style:dashed;cursor:pointer;opacity:0.6;border-color:var(--border2)}
.crew-card.invite:hover{opacity:1;border-color:var(--accent2);transform:translateY(-2px)}
.crew-avi{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:15px;font-weight:800;overflow:hidden}
.crew-card.owner .crew-avi{background:linear-gradient(135deg,#1a2200,#0f1a00);color:var(--accent);border:2px solid rgba(200,255,0,0.35);box-shadow:0 0 0 3px rgba(200,255,0,0.06)}
.crew-card.member .crew-avi{background:linear-gradient(135deg,#1a1230,#0d0a1e);color:rgba(200,168,255,0.9);border:2px solid rgba(123,94,167,0.35);box-shadow:0 0 0 3px rgba(123,94,167,0.06)}
.crew-card.invite .crew-avi{background:var(--surface);border:1.5px dashed var(--border2);color:var(--muted);width:50px;height:50px}
.crew-card.invite .crew-avi svg{width:17px;height:17px;}
.crew-name{font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.crew-role{font-size:10px;color:var(--muted)}
.crew-crown{position:absolute;top:7px;right:8px;font-size:10px;opacity:0.6;line-height:1}
.crew-lock-note{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-top:6px;padding:6px 12px;border-radius:8px;background:var(--surface2);border:1px solid var(--border)}
.crew-lock-note svg{width:10px;height:10px;flex-shrink:0}
.crew-invite-btn{margin-top:10px;padding:7px 16px;border-radius:8px;font-size:12px;font-weight:700;background:rgba(123,94,167,0.12);border:1px solid rgba(123,94,167,0.3);color:rgba(200,168,255,0.9);cursor:pointer;transition:all 0.2s;font-family:'Inter',sans-serif}
.crew-invite-btn:hover{background:rgba(123,94,167,0.22);border-color:rgba(123,94,167,0.5)}

/* ══════════════════════════════════════════
   PREMIUM MOTION + CINEMATIC EXPERIENCE
   ══════════════════════════════════════════ */

/* ── S2: nf-card Netflix Pure override ── */
.nf-card{
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),
             box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
  transform-origin:center bottom;
}
.nf-card:hover{
  transform:scale(1.05)!important;
  box-shadow:0 0 0 2px rgba(200,255,0,0.45),0 16px 40px rgba(0,0,0,0.9)!important;
  z-index:2!important;
}
.nf-card-thumb img{transition:transform 0.45s cubic-bezier(0.22,1,0.36,1)}
.nf-card:hover .nf-card-thumb img{transform:scale(1.06)}
.nf-card-actions{opacity:0;transition:opacity 0.18s,transform 0.18s;transform:translateY(4px)}
.nf-card:hover .nf-card-actions{opacity:1;transform:translateY(0)}

/* ── S2: Row reveal on scroll ── */
@keyframes rowReveal{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
.row-reveal{
  opacity:0;
  animation:rowReveal 0.6s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── S2: Page transition smoothing ── */
._page-entering{animation:pageSlideIn 0.42s cubic-bezier(0.22,1,0.36,1) both!important}
@keyframes pageSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── S2: Button microinteractions ── */
.btn-primary{transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.18s ease,background 0.15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(200,255,0,0.2)}
.btn-primary:active{transform:translateY(0) scale(0.98)}
.btn-outline{transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1),border-color 0.15s,color 0.15s}
.btn-outline:hover{transform:translateY(-1px)}
.btn-outline:active{transform:translateY(0) scale(0.98)}

/* ── S3: Scenvox Original badge — minimal dot style ── */
.scenvox-orig-badge{
  position:absolute;bottom:10px;left:10px;z-index:4;
  display:flex;align-items:center;gap:4px;
  font-size:7px;font-weight:700;letter-spacing:0.5px;
  color:var(--accent);text-shadow:0 1px 8px rgba(0,0,0,1);
}
.scenvox-orig-badge::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--accent);flex-shrink:0;
  box-shadow:0 0 8px rgba(200,255,0,0.85);
}

/* ── S3: Editor's Pick badge — minimal star style ── */
.editor-pick-badge{
  position:absolute;bottom:10px;right:10px;z-index:4;
  display:flex;align-items:center;gap:3px;
  font-size:7px;font-weight:700;
  color:#ffd700;text-shadow:0 1px 8px rgba(0,0,0,1);
}
.editor-pick-badge::before{content:'★';font-size:8px}

/* ── S1: Discover featured spotlight ── */
.disc-spotlight{
  position:relative;border-radius:16px;overflow:hidden;
  height:clamp(200px,32vw,280px);
  margin-bottom:36px;cursor:pointer;
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),box-shadow 0.35s ease;
}
.disc-spotlight:hover{transform:scale(1.015);box-shadow:0 32px 80px rgba(0,0,0,0.65),0 0 0 1px rgba(200,255,0,0.12)}
.disc-spotlight img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.22,1,0.36,1)}
.disc-spotlight:hover img{transform:scale(1.05)}
.disc-spotlight-grad{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(5,5,8,0.94) 0%,rgba(5,5,8,0.65) 45%,rgba(5,5,8,0.18) 80%,transparent 100%),
             linear-gradient(to top,rgba(5,5,8,0.7) 0%,transparent 40%);
}
.disc-spotlight-content{
  position:absolute;inset:0;padding:clamp(20px,4vw,36px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.disc-spotlight-eyebrow{
  font-size:9.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(200,255,0,0.08);border:1px solid rgba(200,255,0,0.18);
  padding:4px 10px;border-radius:20px;width:fit-content;
}
.disc-spotlight-title{
  font-family:'Inter',sans-serif;font-size:clamp(22px,4vw,38px);font-weight:900;
  letter-spacing:-0.025em;line-height:1.05;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,0.6);margin-bottom:8px;
}
.disc-spotlight-desc{
  font-size:13px;color:rgba(255,255,255,0.72);font-weight:300;
  max-width:400px;line-height:1.55;margin-bottom:18px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.disc-spotlight-btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.disc-spotlight-meta{
  display:flex;align-items:center;gap:10px;font-size:11px;
  color:rgba(255,255,255,0.55);margin-bottom:14px;flex-wrap:wrap;
}
.disc-spotlight-meta span{display:flex;align-items:center;gap:4px}

/* ── S1: Section divider labels ── */
.disc-section-divider{
  display:flex;align-items:center;gap:12px;
  margin:40px 0 4px;
  font-family:'Inter',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:3px;text-transform:uppercase;color:var(--muted);
}
.disc-section-divider::before{
  content:'';flex-shrink:0;width:3px;height:16px;
  background:var(--accent);border-radius:3px;
}
.disc-section-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* ── S1: Creator spotlight cards ── */
.creator-reel{display:flex;gap:14px;overflow-x:auto;padding:4px 0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.creator-reel::-webkit-scrollbar{display:none}
.csc{
  flex-shrink:0;width:170px;border-radius:14px;overflow:hidden;
  background:var(--surface);border:1.5px solid var(--border2);
  cursor:pointer;transition:all 0.32s cubic-bezier(0.22,1,0.36,1);position:relative;
}
.csc:hover{transform:translateY(-5px) scale(1.02);border-color:rgba(200,255,0,0.22);box-shadow:0 20px 52px rgba(0,0,0,0.55),0 0 28px rgba(123,94,167,0.1)}
.csc-banner{width:100%;height:90px;overflow:hidden;position:relative;background:var(--surface2)}
.csc-banner img{width:100%;height:100%;object-fit:cover;transition:transform 0.45s cubic-bezier(0.22,1,0.36,1)}
.csc:hover .csc-banner img{transform:scale(1.08)}
.csc-avi{
  position:absolute;bottom:-18px;left:12px;
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#1a2200,#0f1a00);
  border:2.5px solid var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:800;color:var(--accent);
  z-index:2;
}
.csc-body{padding:26px 12px 14px}
.csc-name{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csc-stats{font-size:10px;color:var(--muted);display:flex;gap:8px}

/* ── S1: AI Universe cards ── */
.universe-reel{display:flex;gap:12px;overflow-x:auto;padding:4px 0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.universe-reel::-webkit-scrollbar{display:none}
.uv-card{
  flex-shrink:0;width:160px;border-radius:12px;overflow:hidden;
  background:var(--surface2);border:1.5px solid var(--border2);
  cursor:pointer;transition:all 0.3s cubic-bezier(0.22,1,0.36,1);position:relative;
}
.uv-card:hover{transform:translateY(-4px);border-color:rgba(123,94,167,0.38);box-shadow:0 18px 44px rgba(0,0,0,0.5),0 0 24px rgba(123,94,167,0.1)}
.uv-thumb{width:100%;height:88px;overflow:hidden;position:relative}
.uv-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.45s ease}
.uv-card:hover .uv-thumb img{transform:scale(1.08)}
.uv-glow{position:absolute;inset:0;background:radial-gradient(ellipse 100% 80% at 50% 0%,rgba(123,94,167,0.2),transparent 70%);opacity:0;transition:opacity 0.3s;pointer-events:none}
.uv-card:hover .uv-glow{opacity:1}
.uv-body{padding:10px 11px 12px}
.uv-name{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uv-meta{font-size:10px;color:var(--muted)}

/* ── S7: More Like This rail in detail modal ── */
.detail-more-section{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--border);
}
.detail-more-title{
  font-family:'Inter',sans-serif;font-size:14px;font-weight:700;
  margin-bottom:14px;display:flex;align-items:center;gap:7px;
}
.detail-more-title svg{width:14px;height:14px;color:var(--accent2);flex-shrink:0}
.detail-more-reel{display:flex;gap:10px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.detail-more-reel::-webkit-scrollbar{display:none}
.dm-card{
  flex-shrink:0;width:130px;border-radius:8px;overflow:hidden;
  background:var(--surface2);cursor:pointer;
  transition:all 0.25s cubic-bezier(0.22,1,0.36,1);
}
.dm-card:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 32px rgba(0,0,0,0.5)}
.dm-thumb{width:100%;height:74px;position:relative;overflow:hidden;background:var(--surface2)}
.dm-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.35s ease}
.dm-card:hover .dm-thumb img{transform:scale(1.08)}
.dm-body{padding:7px 8px 8px}
.dm-title{font-size:11px;font-weight:700;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dm-meta{font-size:9.5px;color:var(--muted);margin-top:3px}

/* ── S8: nf-card title always visible for premium UX ── */
.nf-card-title{text-shadow:0 1px 8px rgba(0,0,0,0.8)}
.nf-card-overlay{padding:8px 10px 10px!important}

/* ── S1: Disc info bar ── */
#disc-info{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}

/* ── S6: Row header spacing ── */
.content-row .row-header{padding:0 32px;margin-bottom:16px}
@media(max-width:768px){.content-row .row-header{padding:0 16px}}

/* ══════════════════════════════════════════
   MOBILE IMMERSION + PWA VIEWPORT — S1–S6
   ══════════════════════════════════════════ */

/* ── S6: Navbar — logo anchored left, center space, actions anchored right ── */
nav{gap:0!important;padding:0 28px!important}
.nav-search{flex-shrink:0;margin:0 16px 0 20px}
.nav-links{flex:1!important;justify-content:center!important;margin-left:0!important;gap:var(--sp2)!important}
.nav-actions{flex-shrink:0;gap:var(--sp3)!important;margin-left:auto}
/* Reduce sign-in/up button clutter at action side */
.btn-signin{font-size:13px;padding:7px 16px}
.btn-signup{font-size:13px;padding:7px 16px}

/* Tighten nav-link padding for more center breathing room */
.nav-link{padding:7px 12px;font-size:13px}

/* Navbar mobile: logo left | [search grows] | actions right */
@media(max-width:768px){
  nav{padding:0 16px!important;gap:0!important}
  .nav-search{flex:1!important;margin:0 10px!important}
  .nav-actions{gap:8px!important}
}
@media(max-width:480px){
  nav{padding:0 12px!important}
  .nav-actions{gap:6px!important}
}

/* ── S1+S2: Dynamic viewport height — browser bar aware ── */
.page{min-height:calc(100dvh - 52px)}
@media(max-width:768px){
  .page{min-height:calc(100dvh - 56px - 60px)} /* subtract nav + mobile-nav */
  .featured-hero{max-height:52svh;overflow:hidden}
}

/* Video player modal — fills full dynamic screen including when bar retracts */
.vpm-overlay{height:100dvh!important;min-height:100dvh!important}

/* html background fills any letterbox on notch devices */
html{background:#050508;overscroll-behavior:none}
body{overscroll-behavior-y:contain}

/* ── S1: Safe-area — iOS notch, home indicator, Android nav bar ── */
@supports(padding:env(safe-area-inset-bottom)){
  /* Mobile bottom nav sits above home indicator */
  .mobile-nav{
    padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
    height:auto!important;
    min-height:60px!important;
  }
  @media(max-width:768px){
    /* Page content never hides under nav + home indicator */
    .page{
      margin-bottom:calc(64px + env(safe-area-inset-bottom))!important;
    }
    /* Toast floats above nav + indicator */
    .toast{
      bottom:calc(82px + env(safe-area-inset-bottom))!important;
    }
    /* Home CTA — breathing room above chrome */
    #home-cta{
      padding-bottom:calc(80px + env(safe-area-inset-bottom))!important;
    }
    /* Featured hero controls clear the browser bar */
    .fh-controls{
      bottom:calc(18px + env(safe-area-inset-bottom))!important;
    }
    /* Footer breathes above home indicator */
    #home-footer{
      padding-bottom:calc(36px + env(safe-area-inset-bottom))!important;
    }
    /* Back button — tighter on mobile, clear of browser chrome */
    .detail-back-btn{
      top:calc(16px + env(safe-area-inset-top))!important;
      left:calc(14px + env(safe-area-inset-left))!important;
    }
  }
  /* Left/right safe areas (landscape on iPhone) */
  .row-scroll{
    padding-left:max(32px, calc(16px + env(safe-area-inset-left)));
    padding-right:max(16px, calc(8px + env(safe-area-inset-right)));
  }
  @media(max-width:768px){
    .row-scroll{
      padding-left:max(16px, calc(12px + env(safe-area-inset-left)));
      padding-right:max(8px, calc(4px + env(safe-area-inset-right)));
    }
  }
}

/* ── S1: Standalone/PWA — status bar notch extends into nav ── */
@supports(padding:env(safe-area-inset-top)){
  @media(display-mode:standalone){
    nav#main-nav{
      height:calc(52px + env(safe-area-inset-top))!important;
      padding-top:env(safe-area-inset-top)!important;
      align-items:flex-end!important;
      padding-bottom:8px!important;
    }
    .page{
      margin-top:calc(52px + env(safe-area-inset-top))!important;
      min-height:calc(100dvh - 52px - env(safe-area-inset-top))!important;
    }
  }
}

/* ── S3: PWA standalone visual polish — no browser chrome ── */
@media(display-mode:standalone){
  nav#main-nav{
    background:rgba(5,5,8,0.99)!important;
    border-bottom-color:rgba(255,255,255,0.05)!important;
    backdrop-filter:blur(24px) saturate(1.4)!important;
  }
  .mobile-nav{
    background:rgba(5,5,8,0.99)!important;
    border-top-color:rgba(255,255,255,0.05)!important;
    backdrop-filter:blur(24px) saturate(1.4)!important;
  }
  body{background:#050508}
  /* Richer hero immersion in standalone */
  .featured-hero{max-height:52svh}
}

/* ── S4: CTA + button breathing room ── */
@media(max-width:768px){
  .fh-btns{gap:10px}
  /* Profile action buttons — more space at bottom */
  .prof-body{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}
  /* Detail modal bottom padding — clears home indicator */
  .detail-body{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))!important}
}

/* ── S5: Landscape — compact bar, edge-to-edge content ── */
@media(max-width:900px) and (orientation:landscape){
  nav#main-nav{height:52px!important;padding-top:0!important;align-items:center!important}
  .page{margin-top:52px!important;min-height:calc(100dvh - 52px)!important;margin-bottom:0!important}
  html body #page-home{margin-top:0!important;padding-top:0!important;min-height:100dvh!important}
  .mobile-nav{display:none!important}
  .featured-hero{max-height:52svh}
  .detail-modal{max-height:100dvh;border-radius:0!important}
  .detail-banner{height:140px!important}
  .vpm-overlay{padding:0!important}
  .vpm-box{border-radius:0!important;max-width:100%!important}
  .detail-back-btn{top:calc(10px + env(safe-area-inset-top))!important;padding:7px 14px 7px 9px!important;font-size:12px!important}
  /* Landscape row scrolls use side safe areas */
  .row-scroll{
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
  }
}

/* ── S2: App-shell immersion polish ── */
@media(max-width:768px){
  .mobile-nav{
    background:rgba(8,8,12,0.97)!important;
    border-top:1px solid rgba(255,255,255,0.06)!important;
    backdrop-filter:blur(28px) saturate(1.3)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.3)!important;
  }
  nav#main-nav{
    background:rgba(8,8,12,0.95)!important;
    backdrop-filter:blur(28px) saturate(1.3)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.3)!important;
  }
  .mn-tab svg{width:24px!important;height:24px!important}
}

/* ══════════════════════════════════════════════════════════════
   FULLY RESPONSIVE PRODUCTION SYSTEM — ALL SECTIONS
   ══════════════════════════════════════════════════════════════ */

/* ── S1: Global overflow & viewport guards ── */
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
*{-webkit-tap-highlight-color:transparent}
.page,.disc-layout,.row-scroll,.plans-grid{max-width:100vw}
img,video{max-width:100%}
/* prevent iOS font inflation on inputs — mobile only */
@media(max-width:768px){
  input,select,textarea{font-size:16px!important}
}

/* ── S1: dvh / svh safe viewport height ── */
@supports(height:100dvh){
  .page{min-height:calc(100dvh - 52px)}
  #page-home{min-height:100dvh;margin-top:0!important}
  .featured-hero{min-height:max(520px,56dvh)}
}

/* ── S2: Mobile nav — new nav#main-nav handles this via its own @media blocks ── */

/* ── S3: Bottom nav safe-area — .mn-tab replaces old .m-btn ── */
.mobile-nav{
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}
/* page bottom clearance for mobile nav */
@media(max-width:768px){
  .page{margin-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
}

/* ── S4: Card system — all card types, all breakpoints ── */
/* CW cards — keep 16:9, responsive width */
@media(max-width:768px){
  .nf-card[style*="aspect-ratio:16/9"]{width:184px!important}
  .nf-card[style*="16/9"]{width:184px!important}
}
@media(max-width:480px){
  .nf-card[style*="aspect-ratio:16/9"]{width:160px!important}
  .nf-card[style*="16/9"]{width:160px!important}
}
@media(max-width:360px){
  .nf-card[style*="aspect-ratio:16/9"]{width:140px!important}
  .nf-card[style*="16/9"]{width:140px!important}
}
/* profile series grid — denser on mobile */
@media(max-width:480px){
  .series-grid{grid-template-columns:repeat(2,1fr)!important;gap:var(--sp3)!important}
}
/* title ellipsis safety */
.nf-card-title-text{max-width:100%}
/* no hover scale on touch devices — prevents sticky hover states */
@media(hover:none){
  .nf-card:hover{transform:none;box-shadow:none}
  .nf-card:active{transform:scale(0.97)}
  .card:hover{transform:none;box-shadow:0 4px 16px rgba(0,0,0,0.4)}
}
/* row scroll — mobile momentum only */
@media(max-width:768px){
  .row-scroll{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
}

/* ── S5: Detail page — full responsive pass ── */
/* Episode list: always readable */
@media(max-width:480px){
  .detail-ep{padding:10px 8px;gap:10px}
  .detail-ep-num{width:24px;height:24px;font-size:10px}
  .detail-ep-name{font-size:12px}
  .detail-ep-dur{font-size:10px}
}
/* creator card wraps cleanly */
@media(max-width:480px){
  .detail-creator{flex-direction:row;gap:10px}
}
/* rating section — star row wraps */
@media(max-width:360px){
  .stars-row{gap:1px}
  .star-btn{font-size:22px;padding:0 2px}
}
@media(max-width:360px){
  .detail-back-btn{font-size:11px;padding:7px 12px 7px 8px}
}

/* ── S6: Profile selection / Watch Crew ── */
/* Crew cards — responsive 2-col on mobile, centered on tablet */
@media(max-width:480px){
  .crew-cards{
    display:grid!important;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .crew-card{width:auto!important}
}
@media(min-width:481px) and (max-width:768px){
  .crew-cards{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
  }
}
/* Profile switcher screens at startup — CSS variables */
#profile-select-screen{
  position:fixed;inset:0;z-index:9000;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px calc(32px + env(safe-area-inset-bottom,0px));
  padding-top:calc(32px + env(safe-area-inset-top,0px));
}
.pss-title{
  font-family:'Inter',sans-serif;font-size:clamp(24px,5vw,36px);
  font-weight:800;letter-spacing:-0.025em;margin-bottom:8px;text-align:center;
}
.pss-sub{
  font-size:14px;color:var(--muted);margin-bottom:40px;text-align:center;
}
.pss-grid{
  display:grid;gap:var(--sp3);width:100%;max-width:480px;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
}
@media(max-width:360px){
  .pss-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp3)}
}
.pss-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--surface);border:1.5px solid var(--border2);
  border-radius:18px;padding:20px 12px 16px;
  cursor:pointer;transition:all 0.2s;
  position:relative;
}
.pss-card:hover,.pss-card:active{
  border-color:rgba(200,255,0,0.4);
  background:rgba(200,255,0,0.04);
  transform:translateY(-3px);
}
.pss-avi{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,#1a2200,#0f1a00);
  border:2.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:20px;font-weight:800;color:var(--accent);
}
.pss-name{
  font-size:13px;font-weight:700;color:var(--text);
  text-align:center;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.pss-role{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.pss-skip{
  margin-top:28px;font-size:13px;color:var(--muted);
  background:none;border:none;cursor:pointer;font-family:inherit;
  text-decoration:underline;text-underline-offset:3px;
}

/* ── S7: Onboarding overlay ── */
#onboarding-overlay{
  position:fixed;inset:0;z-index:9100;
  background:var(--bg);
  display:none;flex-direction:column;
  overflow:hidden;
}
#onboarding-overlay.obd-open{display:flex}
.obd-screens{
  display:flex;flex:1;
  transition:transform 0.4s cubic-bezier(0.32,0.72,0,1);
  will-change:transform;
}
.obd-screen{
  min-width:100vw;width:100vw;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:clamp(24px,6vw,64px) clamp(20px,5vw,48px);
  padding-top:calc(clamp(24px,6vw,64px) + env(safe-area-inset-top,0px));
  padding-bottom:calc(clamp(24px,6vw,64px) + env(safe-area-inset-bottom,0px));
  text-align:center;position:relative;
}
.obd-art{
  font-size:clamp(64px,15vw,110px);
  margin-bottom:clamp(20px,4vh,40px);
  animation:obdArtFloat 3s ease-in-out infinite alternate;
  display:block;
}
@keyframes obdArtFloat{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.obd-label{
  font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.obd-title{
  font-family:'Inter',sans-serif;
  font-size:clamp(26px,6vw,44px);
  font-weight:800;letter-spacing:-0.025em;line-height:1.05;
  margin-bottom:14px;color:var(--text);
}
.obd-title em{font-style:normal;color:var(--accent)}
.obd-desc{
  font-size:clamp(14px,3.5vw,16px);
  color:var(--muted);line-height:1.7;
  max-width:min(380px,90vw);
  font-weight:300;margin-bottom:0;
}
.obd-footer{
  flex-shrink:0;
  padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:14px;
  border-top:1px solid var(--border);
}
.obd-dots{display:flex;gap:7px;align-items:center;justify-content:center}
.obd-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,0.15);
  transition:all 0.28s ease;cursor:pointer;
}
.obd-dot.active{width:22px;border-radius:4px;background:var(--accent)}
.obd-actions{display:flex;gap:10px;width:100%;max-width:360px}
.obd-next{
  flex:1;padding:13px 24px;border-radius:10px;
  background:var(--accent);color:#0a0a0f;border:none;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:800;
  cursor:pointer;transition:all 0.2s;
}
.obd-next:hover{opacity:0.9;transform:translateY(-1px)}
.obd-skip{
  padding:13px 18px;border-radius:10px;
  background:transparent;border:1px solid var(--border2);
  color:var(--muted);font-size:14px;font-weight:500;
  cursor:pointer;transition:all 0.15s;font-family:inherit;
  white-space:nowrap;
}
.obd-skip:hover{border-color:var(--border2);color:var(--text)}
/* Screen background accents */
.obd-screen:nth-child(1){background:radial-gradient(ellipse 70% 50% at 50% 20%,rgba(123,94,167,0.12) 0%,transparent 70%)}
.obd-screen:nth-child(2){background:radial-gradient(ellipse 70% 50% at 50% 20%,rgba(200,255,0,0.07) 0%,transparent 70%)}
.obd-screen:nth-child(3){background:radial-gradient(ellipse 70% 50% at 50% 20%,rgba(255,107,107,0.06) 0%,transparent 70%)}
/* Onboarding touch swipe hint */
.obd-swipe-hint{
  position:absolute;bottom:8px;font-size:10px;
  color:rgba(255,255,255,0.2);letter-spacing:1px;text-transform:uppercase;
}

/* ── S8: Search overlay — works at ≤768px ── */
#mobile-search-overlay{position:fixed;inset:0;z-index:9999;display:none;pointer-events:none}
#mobile-search-overlay.mso-open{display:block;pointer-events:all}
/* extend breakpoint from 481px to 768px */
@media(min-width:769px){#mobile-search-overlay{display:none!important}}
@media(max-width:768px){
  #mobile-search-overlay.mso-open{display:block!important}
}
/* keyboard-push guard — mso-sheet uses fixed height so no push */
.mso-sheet{
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* safe height avoids virtual keyboard on iOS */
  max-height:min(92dvh,92vh);
}
.mso-input-wrap input{font-size:16px} /* prevent iOS zoom on focus */
#mso-input{font-size:16px!important}
/* fullscreen on very small screens */
@media(max-width:360px){
  .mso-sheet{height:100dvh;max-height:100dvh;border-radius:0}
}

/* ── S9: Safe area — iOS Safari, Android Chrome, PWA ── */
/* Use logical safe-area insets everywhere */
@supports(padding:env(safe-area-inset-bottom)){
  /* Mobile nav */
  .mobile-nav{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
  /* Page bottom clearance */
  @media(max-width:768px){
    .page{margin-bottom:calc(64px + env(safe-area-inset-bottom))!important}
    .prof-body{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
    .toast{bottom:calc(76px + env(safe-area-inset-bottom))!important}
    /* now-playing pill stays above mobile nav */
    .now-playing-pill{top:calc(68px + env(safe-area-inset-top))!important}
  }
  /* Nav top safe area — mobile only; desktop nav stays at 64px */
  @media(max-width:768px){
    nav{
      padding-top:env(safe-area-inset-top,0px);
      height:calc(56px + env(safe-area-inset-top,0px))!important;
    }
    .page{margin-top:calc(56px + env(safe-area-inset-top,0px))!important}
  }
}

/* ── Global: no horizontal overflow anywhere ── */
.home-section,.prof-header,.prof-body,.disc-main,.pricing-hero{
  max-width:100%;overflow-x:hidden;
}
.detail-modal{max-width:min(780px,100vw)}
.comp-box{max-width:min(380px,calc(100vw - 32px))}
/* prevent word breaks on badges/labels */
.plan-popular,.nf-card-badge,.scenvox-orig-badge,.editor-pick-badge{white-space:nowrap}

/* ── Tablet (768–1024): navigation visible, no bottom nav ── */
@media(min-width:769px) and (max-width:1024px){
  .nav-search input{width:240px}
  .nav-actions{gap:8px}
}

/* ── Landscape mobile — horizontal safe areas, compact header ── */
@media(max-width:900px) and (orientation:landscape){
  .row-scroll{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
  .row-header{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
  .fh-content{
    left:max(24px,env(safe-area-inset-left));
    bottom:64px;
  }
  .detail-body{padding-bottom:24px!important}
}

/* ── Hero page: nav floats over featured hero (streaming platform convention) ── */
/* Only remove top offset on mobile where nav is shorter */
@media(max-width:768px){
  #page-home{margin-top:0!important;padding-top:0!important;min-height:100dvh}
}

/* ── Misc production guards ── */
/* prevent detail modal from overflowing horizontally */
.detail-body,.detail-btns,.detail-tags,.detail-meta{max-width:100%;overflow-wrap:break-word}
/* reaction buttons wrap cleanly */
.reactions-row{flex-wrap:wrap;gap:6px}
@media(max-width:360px){
  .reaction-btn{font-size:12px;padding:6px 10px}
}
/* Comments — avatar doesn't shrink on tiny screens */
.comment-avi-sm{flex-shrink:0}
/* form inputs — no horizontal overflow */
.form-input,.form-select,.rating-textarea{width:100%;max-width:100%;box-sizing:border-box}
/* profile stats — wraps on small screens */
@media(max-width:360px){
  .prof-stats{flex-wrap:wrap;gap:10px}
  .p-stat-val{font-size:15px}
}
/* ══ CREATOR PROFILE OVERLAY ══ */
.cp-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:800;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;transition:background 0.35s ease}
.cp-overlay.open{background:rgba(0,0,0,0.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:all}
.cp-panel{width:100%;max-width:900px;max-height:95vh;background:var(--bg);border-radius:24px 24px 0 0;border:1px solid rgba(255,255,255,0.08);border-bottom:none;transform:translateY(110%);transition:transform 0.38s cubic-bezier(0.32,0.72,0,1);position:relative;display:flex;flex-direction:column;overflow:hidden;visibility:hidden}
.cp-overlay.open .cp-panel{transform:translateY(0);visibility:visible}
@media(min-width:900px){
  .cp-overlay{align-items:center}
  .cp-panel{border-radius:20px;border-bottom:1px solid rgba(255,255,255,0.08);max-height:92vh}
}
.cp-drag-handle{width:36px;height:4px;background:rgba(255,255,255,0.18);border-radius:2px;margin:12px auto 4px;flex-shrink:0}
.cp-close-btn{position:absolute;top:12px;right:16px;width:28px;height:28px;background:rgba(255,255,255,0.08);border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);cursor:pointer;z-index:10;transition:background 0.15s}
.cp-close-btn:hover{background:rgba(255,255,255,0.14)}
.cp-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding-bottom:max(env(safe-area-inset-bottom,0px),20px)}
.cp-scroll::-webkit-scrollbar{width:3px}
.cp-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}
#cp-tab-content{transition:opacity 0.12s ease}
/* ── CP COVER ── */
.cp-cover{height:220px;position:relative;overflow:hidden;background:linear-gradient(160deg,#0a1628 0%,#1a0a28 40%,#0f1a10 100%);flex-shrink:0}
@media(min-width:768px){.cp-cover{height:280px}}
.cp-cover-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);background-size:36px 36px}
.cp-cover-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 25% 70%,var(--cp-a12,rgba(0,212,255,0.12)) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 80% 20%,rgba(123,94,167,0.1) 0%,transparent 65%)}
.cp-cover-fade{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(transparent,var(--bg))}
.cp-genre-tag{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--cp-accent,#C8FF00);background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--cp-a25,rgba(200,255,0,0.25));padding:5px 11px;border-radius:20px}
.cp-genre-dot{width:5px;height:5px;border-radius:50%;background:var(--cp-accent,#C8FF00);animation:cpDot 2s infinite}
@keyframes cpDot{0%,100%{opacity:1}50%{opacity:0.3}}
/* ── CP AVATAR ROW ── */
.cp-avi-row{display:flex;align-items:flex-end;gap:12px;padding:0 20px;margin-top:-38px;position:relative;z-index:2;margin-bottom:12px}
@media(min-width:768px){.cp-avi-row{padding:0 32px;margin-top:-52px}}
.cp-avi{width:76px;height:76px;flex-shrink:0;border-radius:50%;border:3px solid var(--bg);background:linear-gradient(135deg,var(--cp-a15,rgba(0,212,255,0.15)),rgba(123,94,167,0.25));display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:22px;font-weight:800;color:var(--cp-accent,#C8FF00);box-shadow:0 0 0 1px var(--cp-a30,rgba(0,212,255,0.3)),0 0 24px var(--cp-a25,rgba(0,212,255,0.25));overflow:hidden}
@media(min-width:768px){.cp-avi{width:104px;height:104px;font-size:32px}}
.cp-avi img{width:100%;height:100%;object-fit:cover}
.cp-act-row{display:flex;gap:8px;align-items:center;margin-left:auto;padding-bottom:6px}
.cp-icon-btn{width:36px;height:36px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.11);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:background 0.15s}
.cp-icon-btn:hover{background:rgba(255,255,255,0.1)}
/* ── CP IDENTITY ── */
.cp-identity{padding:0 20px 16px}
@media(min-width:768px){.cp-identity{padding:0 32px 20px}}
.cp-name-row{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.cp-creator-name{font-family:'Inter',sans-serif;font-size:clamp(18px,4vw,26px);font-weight:800;letter-spacing:-0.02em}
.cp-verified-badge{display:inline-flex;align-items:center;gap:3px;background:var(--cp-a08,rgba(0,212,255,0.08));border:1px solid var(--cp-a25,rgba(0,212,255,0.25));color:var(--cp-accent,#C8FF00);padding:2px 9px;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:0.5px;white-space:nowrap}
.cp-handle{font-size:13px;color:var(--muted);margin-bottom:8px}
.cp-universe-tag{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--cp-accent,#C8FF00);background:var(--cp-a07,rgba(0,212,255,0.07));border:1px solid var(--cp-a18,rgba(0,212,255,0.18));padding:4px 10px;border-radius:20px;margin-bottom:10px}
.cp-bio{font-size:13px;color:#b0afc0;line-height:1.65;max-width:560px}
/* ── CP STATS ROW ── */
.cp-stats-bar{display:flex;padding:14px 20px;border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
@media(min-width:768px){.cp-stats-bar{padding:16px 32px}}
.cp-stat{flex:1;text-align:center}
.cp-stat+.cp-stat{border-left:1px solid rgba(255,255,255,0.06)}
.cp-stat-val{font-family:'Inter',sans-serif;font-size:clamp(14px,3vw,20px);font-weight:800}
.cp-stat-key{font-size:10px;color:var(--muted);margin-top:2px}
@media(max-width:360px){.cp-avi{width:60px;height:60px;font-size:18px}.cp-follow-btn{font-size:11px;padding:8px 14px}.cp-creator-name{font-size:16px}.cp-stats-bar{padding:10px 14px}.cp-stat-val{font-size:13px}}
/* ── CP TABS ── */
.cp-tabs-wrap{position:sticky;top:0;z-index:50;background:rgba(10,10,15,0.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06)}
.cp-tabs{display:flex;overflow-x:auto;padding:0 12px;scrollbar-width:none}
.cp-tabs::-webkit-scrollbar{display:none}
.cp-tab{flex-shrink:0;padding:13px 12px;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;cursor:pointer;position:relative;transition:color 0.15s;background:none;border:none;font-family:'Inter',sans-serif}
.cp-tab.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--cp-accent,#C8FF00);border-radius:2px 2px 0 0}
/* ── CP CONTENT GRID ── */
.cp-section{padding:20px}
@media(min-width:768px){.cp-section{padding:24px 32px}}
@media(max-width:480px){.cp-section{padding:14px}}
.cp-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.22s}
.cp-card:hover{border-color:var(--cp-a40,rgba(0,212,255,0.4));transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,0.5)}
.cp-card-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(135deg,#0a1628,#1a0a28);display:flex;align-items:center;justify-content:center;font-size:32px}
.cp-card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cp-card-emoji{position:relative;z-index:1}
.cp-card-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;transition:background 0.2s;z-index:2}
.cp-card:hover .cp-card-overlay{background:rgba(0,0,0,0.3)}
.cp-card-play{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.9);color:#0a0a0f;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.8);transition:all 0.2s}
.cp-card:hover .cp-card-play{opacity:1;transform:scale(1)}
.cp-card-ai-badge{position:absolute;top:7px;left:7px;font-size:7px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent);background:rgba(200,255,0,0.15);border:1px solid rgba(200,255,0,0.3);padding:2px 6px;border-radius:4px;z-index:3}
.cp-card-pick-badge{position:absolute;top:7px;right:7px;font-size:7px;font-weight:700;color:#ffb800;background:rgba(255,184,0,0.15);border:1px solid rgba(255,184,0,0.3);padding:2px 6px;border-radius:4px;z-index:3}
.cp-card-body{padding:9px 10px 11px}
.cp-card-title{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;margin-bottom:4px;line-height:1.3}
.cp-card-genre{font-size:10px;color:var(--muted);margin-bottom:4px}
.cp-card-stats{display:flex;gap:8px;font-size:10px;color:var(--muted)}
.cp-empty{text-align:center;padding:48px 20px;border:1px dashed rgba(255,255,255,0.1);border-radius:14px;color:var(--muted);font-size:14px}
.cp-empty-icon{font-size:40px;margin-bottom:12px}
/* ── CP PLAYLISTS ── */
.cp-playlist-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.2s}
.cp-playlist-card:hover{border-color:var(--cp-a40,rgba(200,255,0,0.4));transform:translateY(-2px)}
.cp-playlist-collage{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:16/9;overflow:hidden}
.cp-playlist-tile{background:linear-gradient(135deg,var(--surface2,#1a1a2e),var(--surface));display:flex;align-items:center;justify-content:center;font-size:20px}
.cp-playlist-body{padding:9px 10px 11px}
.cp-playlist-name{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;margin-bottom:3px}
.cp-playlist-count{font-size:10px;color:var(--muted)}
/* ── CP ABOUT ── */
.cp-about-layout{padding:20px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.cp-about-layout{padding:24px 32px;grid-template-columns:1fr 280px}}
.cp-about-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px}
.cp-about-heading{font-family:'Inter',sans-serif;font-size:14px;font-weight:800;margin-bottom:12px;color:var(--text)}
.cp-about-text{font-size:13px;color:#b0afc0;line-height:1.8;margin-bottom:18px}
.cp-style-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.cp-style-tag{padding:5px 13px;border-radius:20px;font-size:11px;font-weight:600;background:var(--cp-a07,rgba(0,212,255,0.07));border:1px solid var(--cp-a18,rgba(0,212,255,0.18));color:var(--cp-accent,#C8FF00)}
.cp-meta-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.cp-meta-row:last-child{border-bottom:none}
.cp-meta-label{font-size:11px;color:var(--muted)}
.cp-meta-val{font-size:12px;font-weight:600;color:var(--text)}
.cp-social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cp-social-btn{padding:7px 15px;border-radius:8px;font-size:11px;font-weight:600;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--muted);cursor:pointer;transition:all 0.15s;font-family:'Inter',sans-serif}
.cp-social-btn:hover{color:var(--text);border-color:rgba(255,255,255,0.2)}
/* ── CP ANALYTICS ── */
.cp-analytics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
@media(min-width:600px){.cp-analytics-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.cp-analytics-grid{grid-template-columns:repeat(5,1fr)}}
.cp-an-card{background:var(--surface);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:16px 14px;position:relative;overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity 0.4s ease,transform 0.4s ease,border-color 0.2s}
.cp-an-card.visible{opacity:1;transform:translateY(0)}
.cp-an-card:hover{border-color:var(--cp-a25,rgba(0,212,255,0.25))}
.cp-an-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cp-accent,#C8FF00),rgba(123,94,167,0.8));opacity:0.6}
.cp-an-icon{font-size:20px;margin-bottom:10px}
.cp-an-val{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;margin-bottom:3px}
.cp-an-key{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:0.5px;text-transform:uppercase}
.cp-an-trend{font-size:10px;color:var(--accent);margin-top:5px;font-weight:600}
/* ── CP DISCOVERY ── */
.cp-discovery{padding:20px;border-top:1px solid rgba(255,255,255,0.06)}
@media(min-width:768px){.cp-discovery{padding:24px 32px}}
.cp-disc-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;margin-bottom:14px}
.cp-disc-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.cp-disc-scroll::-webkit-scrollbar{display:none}
.cp-disc-card{flex-shrink:0;width:130px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center;cursor:pointer;transition:all 0.2s}
.cp-disc-card:hover{border-color:rgba(200,255,0,0.3);transform:translateY(-2px)}
.cp-disc-avi{width:48px;height:48px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:800;font-size:14px}
.cp-disc-name{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-disc-handle{font-size:9px;color:var(--muted);margin-bottom:6px}
.cp-disc-count{font-size:10px;color:var(--muted)}
/* ── CP BANNER (full-width banner variant) ── */
.creator-profile-page{min-height:calc(100vh - 52px);padding-top:52px}
.cp-banner{width:100%;height:220px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--card),#2d1f4a)}
.cp-banner img{width:100%;height:100%;object-fit:cover}
.cp-banner-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,var(--bg) 100%)}
/* ── CP INFO (profile info below banner) ── */
.cp-info{padding:0 32px 0;margin-top:-50px;position:relative;z-index:1}
.cp-avatar{width:88px;height:88px;border-radius:50%;border:3px solid var(--bg);overflow:hidden;background:var(--surface);flex-shrink:0}
.cp-avatar img{width:100%;height:100%;object-fit:cover}
.cp-name{font-family:'Inter',sans-serif;font-weight:800;font-size:22px;color:var(--text);margin-bottom:2px}
.cp-username{font-size:13px;color:var(--muted);margin-bottom:12px}
.cp-stats{display:flex;gap:24px;margin-bottom:14px}
.cp-stat-val{font-family:'Inter',sans-serif;font-weight:800;font-size:18px;color:var(--text)}
.cp-stat-lbl{font-size:11px;color:var(--muted)}
/* ── CP FOLLOW BTN (updated) ── */
.cp-follow-btn{padding:9px 24px;border-radius:var(--r-pill);background:var(--lime);color:#12121c;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:800;font-size:13px;transition:opacity 0.15s;white-space:nowrap}
.cp-follow-btn:hover{opacity:0.9}
.cp-follow-btn.following{background:rgba(255,255,255,0.08);border:1px solid var(--border2);color:var(--text);font-family:'Inter',sans-serif;font-weight:600}
/* ── CP TABS (updated) ── */
.cp-tabs{display:flex;border-bottom:1px solid var(--border);margin:20px 0 0;padding:0 32px;overflow-x:auto;scrollbar-width:none}
.cp-tabs::-webkit-scrollbar{display:none}
.cp-tab{flex-shrink:0;padding:10px 16px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;transition:all 0.15s;background:none;border-left:none;border-right:none;border-top:none;font-family:'Inter',sans-serif;white-space:nowrap;position:relative}
.cp-tab.active{color:var(--lime);border-bottom-color:var(--lime)}
.cp-tab.active::after{display:none}
/* ── CP GRID (updated) ── */
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp3);padding:20px 32px 48px}
/* ── CP RESPONSIVE ── */
@media(max-width:768px){
  .cp-info{padding:0 16px 0}
  .cp-tabs{padding:0 16px}
  .cp-grid{padding:16px 16px 40px;gap:var(--sp3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media(max-width:480px){
  .cp-banner{height:160px}
  .cp-name{font-size:18px}
  .cp-stats{gap:16px}
  .cp-grid{grid-template-columns:repeat(2,1fr)}
}
/* ══════════════════════════════════════
   UPLOAD WIZARD
══════════════════════════════════════ */
#upload-wizard{position:fixed;inset:0;z-index:1000;background:rgba(8,8,15,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow-y:auto;overflow-x:hidden;display:none;padding:40px 20px 80px}
#upload-wizard.open{display:block}
#upload-wizard::before{content:'';position:fixed;top:-100px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(200,255,0,0.06),transparent 65%);pointer-events:none;z-index:0}
#upload-wizard::after{content:'';position:fixed;bottom:-100px;right:-100px;width:480px;height:480px;background:radial-gradient(circle,rgba(123,94,167,0.09),transparent 65%);pointer-events:none;z-index:0}
.wiz-inner{position:relative;z-index:1;max-width:700px;margin:0 auto}
.wiz-close{position:fixed;top:20px;right:24px;z-index:1001;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid var(--border2);color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.wiz-close:hover{background:rgba(255,255,255,0.14);color:var(--text)}
.wiz-hdr{text-align:center;margin-bottom:36px}
.wiz-hdr h2{font-family:'Inter',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.03em;color:var(--text);margin-bottom:8px}
.wiz-hdr p{font-size:15px;color:var(--muted)}
.wiz-steps{display:flex;align-items:center;justify-content:center;margin-bottom:24px;gap:0;flex-wrap:nowrap;overflow:hidden}
.wiz-step-item{display:flex;align-items:center;gap:4px;flex-shrink:0}
.wiz-bubble{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;transition:all .3s;flex-shrink:0}
.wiz-step-item.ws-done .wiz-bubble{background:var(--lime);color:#000;box-shadow:0 0 14px rgba(200,255,0,.3)}
.wiz-step-item.ws-active .wiz-bubble{background:rgba(200,255,0,.12);border:2px solid var(--lime);color:var(--lime)}
.wiz-step-item.ws-idle .wiz-bubble{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted)}
.wiz-slabel{font-size:10px;font-weight:700;white-space:nowrap}
.wiz-step-item.ws-done .wiz-slabel{color:var(--lime)}
.wiz-step-item.ws-active .wiz-slabel{color:var(--text)}
.wiz-step-item.ws-idle .wiz-slabel{color:var(--muted)}
.wiz-sline{width:16px;height:1px;background:var(--border);flex-shrink:0;margin:0 2px}
.wiz-sline.done{background:rgba(200,255,0,.35)}
.wiz-panel{background:rgba(30,30,46,0.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:20px;padding:36px;margin-bottom:20px;position:relative;overflow:hidden}
.wiz-panel::before{content:'';position:absolute;top:0;right:0;width:200px;height:200px;background:radial-gradient(circle at top right,rgba(200,255,0,.04),transparent 65%);pointer-events:none}
.wiz-ptitle{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--text);margin-bottom:6px}
.wiz-psub{font-size:14px;color:var(--muted);margin-bottom:28px;line-height:1.55}
.wiz-field{margin-bottom:22px}
.wiz-field:last-child{margin-bottom:0}
.wiz-field label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.wiz-field input,.wiz-field textarea,.wiz-field select{width:100%;background:rgba(18,18,28,0.7);border:1px solid var(--border);border-radius:var(--r-card);padding:12px 15px;font-size:14px;color:var(--text);font-family:'Inter',sans-serif;outline:none;transition:border-color .2s,box-shadow .2s;appearance:none}
.wiz-field input:focus,.wiz-field textarea:focus,.wiz-field select:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,255,0,.08)}
.wiz-field input::placeholder,.wiz-field textarea::placeholder{color:rgba(255,255,255,0.28)}
.wiz-field textarea{resize:vertical;min-height:84px;line-height:1.6}
.wiz-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wiz-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wiz-type-card{border:1.5px solid var(--border);border-radius:14px;padding:20px 16px;cursor:pointer;transition:all .2s;background:rgba(18,18,28,0.5);display:flex;flex-direction:column;gap:6px}
.wiz-type-card:hover{border-color:rgba(200,255,0,.25)}
.wiz-type-card.wt-sel{border-color:rgba(200,255,0,.5);background:rgba(200,255,0,.07);box-shadow:0 0 20px rgba(200,255,0,.07)}
.wiz-type-icon{font-size:26px;margin-bottom:2px}
.wiz-type-name{font-family:'Inter',sans-serif;font-weight:800;font-size:14px;color:var(--text)}
.wiz-type-desc{font-size:12px;color:var(--muted);line-height:1.5}
.wiz-type-card.wt-sel .wiz-type-name{color:var(--lime)}
.wiz-pills{display:flex;flex-wrap:wrap;gap:8px}
.wiz-pill{padding:6px 15px;border-radius:var(--r-pill);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--muted);transition:all .15s;user-select:none}
.wiz-pill.on{background:rgba(200,255,0,.12);border-color:rgba(200,255,0,.4);color:var(--lime)}
.wiz-pill:hover{border-color:rgba(200,255,0,.25);color:var(--text)}
.wiz-mtabs{display:flex;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border);width:fit-content;margin-bottom:10px}
.wiz-mtab{padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;background:rgba(18,18,28,0.6);color:var(--muted);border:none;font-family:'Inter',sans-serif;transition:all .15s}
.wiz-mtab.on{background:rgba(200,255,0,.12);color:var(--lime)}
.wiz-drop{border:1.5px dashed rgba(255,255,255,.13);border-radius:var(--r-card);padding:28px 20px;text-align:center;cursor:pointer;background:rgba(18,18,28,0.4);transition:all .2s}
.wiz-drop:hover{border-color:rgba(200,255,0,.35);background:rgba(200,255,0,.03)}
.wiz-drop-icon{font-size:28px;margin-bottom:10px}
.wiz-drop-label{font-size:14px;color:var(--text);font-weight:500;margin-bottom:4px}
.wiz-drop-sub{font-size:12px;color:var(--muted)}
.wiz-drop-or{font-size:12px;color:var(--muted);margin:10px 0}
.wiz-browse{display:inline-block;background:rgba(200,255,0,.1);color:var(--lime);border:1px solid rgba(200,255,0,.25);border-radius:var(--r-card);padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif}
.wiz-item-card{background:rgba(18,18,28,0.6);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:12px}
.wiz-item-hdr{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.wiz-item-badge{width:32px;height:32px;border-radius:8px;flex-shrink:0;background:rgba(200,255,0,.1);border:1px solid rgba(200,255,0,.2);display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:800;font-size:13px;color:var(--lime)}
.wiz-item-lbl{font-family:'Inter',sans-serif;font-weight:800;font-size:13px;color:var(--muted)}
.wiz-add-item{width:100%;background:rgba(200,255,0,.05);border:1.5px dashed rgba(200,255,0,.2);border-radius:var(--r-card);padding:13px;text-align:center;cursor:pointer;font-size:13px;color:rgba(200,255,0,.6);font-weight:600;font-family:'Inter',sans-serif;transition:all .2s}
.wiz-add-item:hover{background:rgba(200,255,0,.1);border-color:rgba(200,255,0,.4);color:var(--lime)}
.wiz-review-block{background:rgba(18,18,28,0.6);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:16px}
.wiz-rev-thumb{width:100%;aspect-ratio:16/9;border-radius:var(--r-card);object-fit:cover;background:linear-gradient(135deg,#1a1230,#0d1a1a);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:16px;overflow:hidden}
.wiz-rev-thumb img{width:100%;height:100%;object-fit:cover}
.wiz-rtag{background:rgba(200,255,0,.1);color:var(--lime);border-radius:5px;padding:3px 9px;font-size:11px;font-weight:700;display:inline-block;margin:0 4px 4px 0}
.wiz-rev-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;color:var(--muted)}
.wiz-rev-row:last-child{border-bottom:none}
.wiz-rev-num{width:22px;height:22px;border-radius:6px;background:rgba(200,255,0,.1);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.wiz-info-box{background:rgba(200,255,0,.05);border:1px solid rgba(200,255,0,.15);border-radius:var(--r-card);padding:15px 18px;display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.55}
.wiz-info-box strong{color:var(--lime)}
.wiz-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
.wiz-btn-back{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:var(--r-card);padding:12px 22px;font-size:14px;color:var(--muted);cursor:pointer;font-family:'Inter',sans-serif;font-weight:500;transition:all .2s}
.wiz-btn-back:hover{background:rgba(255,255,255,.1);color:var(--text)}
.wiz-btn-next{background:var(--lime);color:#000;border:none;border-radius:var(--r-card);padding:12px 28px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;box-shadow:0 0 20px rgba(200,255,0,.2);transition:all .2s}
.wiz-btn-next:hover{box-shadow:0 0 32px rgba(200,255,0,.4);transform:translateY(-1px)}
.wiz-btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none}
.wiz-btn-publish{background:linear-gradient(135deg,var(--lime),#a8d700);color:#000;border:none;border-radius:var(--r-card);padding:12px 32px;font-size:15px;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;box-shadow:0 0 24px rgba(200,255,0,.25);letter-spacing:.02em;transition:all .2s}
.wiz-btn-publish:hover{box-shadow:0 0 40px rgba(200,255,0,.45);transform:translateY(-1px)}
.wiz-btn-publish:disabled{opacity:.5;cursor:not-allowed;transform:none}
.wiz-divider{height:1px;background:var(--border);margin:20px 0}
.wiz-view{display:none}
.wiz-view.wv-on{display:block}
.wiz-tab-content{display:none}
.wiz-tab-content.wt-on{display:block}
.wiz-type-panel{display:none}
.wiz-type-panel.wt-on{display:block}
@media(max-width:768px){
  #upload-wizard{padding:24px 16px 80px}
  .wiz-hdr h2{font-size:24px}
  .wiz-panel{padding:28px 20px}
  .wiz-step-item .wiz-slabel{display:none}
  .wiz-inner{max-width:100%}
}
@media(max-width:480px){
  .wiz-panel{padding:20px 14px}
  .wiz-field-row{grid-template-columns:1fr}
  .wiz-type-grid{grid-template-columns:1fr}
  .wiz-actions{flex-direction:column-reverse;gap:8px}
  .wiz-btn-next,.wiz-btn-back,.wiz-btn-publish{width:100%;justify-content:center}
}
@media(max-width:375px){
  #upload-wizard{padding:14px 10px 80px}
  .wiz-inner{width:100%;min-width:0}
  .wiz-panel{padding:16px 10px;min-width:0}
  .wiz-field input,.wiz-field textarea,.wiz-field select{min-width:0;width:100%}
  .wiz-type-grid{grid-template-columns:1fr}
  .wiz-hdr h2{font-size:20px}
  .wiz-item-card{padding:14px 10px}
}

/* ══════════════════════════════════════════
   PREMIUM CINEMATIC UPGRADE — STITCH v2
   ══════════════════════════════════════════ */

/* ── GLOBAL: Button press micro-interaction ── */
.btn-primary:active,.fh-btn-play:active,.submit-btn:active,.plan-btn:active{transform:scale(0.97)!important;transition:transform 0.08s ease!important}
.btn-outline:active,.btn-secondary:active{transform:scale(0.97)!important;transition:transform 0.08s ease!important}

/* ── GLOBAL: Modal spring animation upgrade ── */
@keyframes modalSpringIn{from{opacity:0;transform:scale(0.88) translateY(24px)}50%{transform:scale(1.02) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal{animation:modalSpringIn 0.42s cubic-bezier(0.34,1.56,0.64,1)!important}
.detail-modal.modal{animation:modalSpringIn 0.44s cubic-bezier(0.34,1.56,0.64,1)!important}

/* ── HOME: Hero film grain overlay ── */
.fh-grain{position:absolute;inset:0;opacity:0.032;pointer-events:none;z-index:2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}

/* ── HOME: Hero title gradient text ── */
.fh-title{background:linear-gradient(135deg,#ffffff 30%,rgba(200,255,0,0.92) 100%)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;text-shadow:none!important}


/* ── HOME: Content row section headers upgrade ── */
.row-header{padding:0 32px;margin-bottom:18px!important}
.row-title{font-size:22px!important;font-weight:800!important;letter-spacing:-0.02em!important;padding-left:14px!important;border-left:3px solid var(--accent)!important;line-height:1.15!important}
@media(max-width:768px){.row-title{font-size:18px!important;padding-left:10px!important}}
@media(max-width:480px){.row-title{font-size:16px!important}}

/* ── HOME: NEW badge pulse animation upgrade ── */
@keyframes newBadgePulse{0%,100%{opacity:1}50%{opacity:0.72}}
.nf-card-new-badge{animation:newBadgePulse 2s ease-in-out infinite!important}

/* ── HOME: Genre filter bar ── */
.genre-filter-bar{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:10px 32px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.05);background:rgba(10,10,15,0.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:52px;z-index:50}
.genre-filter-bar::-webkit-scrollbar{display:none}
.genre-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:30px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:var(--muted);transition:all 0.2s cubic-bezier(0.2,0,0,1);flex-shrink:0;font-family:'Inter',sans-serif}
.genre-pill:hover{background:rgba(200,255,0,0.08);border-color:rgba(200,255,0,0.3);color:var(--accent)}
.genre-pill.active{background:var(--accent);border-color:var(--accent);color:#0a0a0f}
.genre-pill svg{flex-shrink:0;stroke:currentColor}
@media(max-width:768px){.genre-filter-bar{padding:9px 16px;top:52px;gap:6px}}
@media(max-width:480px){.genre-filter-bar{padding:8px 12px;gap:5px}.genre-pill{padding:6px 12px;font-size:12px;height:30px}}

/* ── DISCOVER: Page header cinematic upgrade ── */
.disc-page-header{padding:36px 28px 20px;display:none}
.disc-page-title{font-family:'Inter',sans-serif;font-size:clamp(36px,5vw,56px);font-weight:900;letter-spacing:-0.03em;line-height:1;background:linear-gradient(135deg,#fff 20%,rgba(200,255,0,0.85) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.disc-page-subtitle{font-size:15px;color:var(--muted);margin-top:8px;font-weight:300;animation:discSubtitleIn 1.2s ease 0.3s both}
@keyframes discSubtitleIn{from{opacity:0;letter-spacing:4px}to{opacity:1;letter-spacing:0}}

/* ── DISCOVER: Sticky filter/sort bar ── */
.disc-sticky-bar{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:14px 28px;scrollbar-width:none;background:rgba(10,10,15,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,0.06);position:sticky;top:52px;z-index:60;margin-bottom:24px}
.disc-sticky-bar::-webkit-scrollbar{display:none}
.disc-sticky-pill{display:inline-flex;align-items:center;padding:7px 16px;border-radius:30px;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid rgba(255,255,255,0.1);background:transparent;color:var(--muted);transition:all 0.18s;flex-shrink:0;font-family:'Inter',sans-serif;letter-spacing:0.02em}
.disc-sticky-pill:hover{background:rgba(200,255,0,0.08);border-color:rgba(200,255,0,0.28);color:var(--accent)}
.disc-sticky-pill.active{background:var(--accent)!important;border-color:var(--accent)!important;color:#0a0a0f!important;font-weight:800}
@media(max-width:768px){.disc-sticky-bar{padding:10px 16px;top:56px}}

/* ── DISCOVER: Featured creator spotlight upgrade ── */
.disc-spotlight-header{font-size:9px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:12px;padding-left:28px;display:flex;align-items:center;gap:8px}
.disc-spotlight-header::before{content:'';width:3px;height:14px;background:var(--accent);border-radius:2px;flex-shrink:0}

/* ── DISCOVER: Card cinematic hover overlay ── */
.disc-card-wrap{position:relative;overflow:hidden;border-radius:14px;cursor:pointer}
.disc-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,10,0.97) 0%,rgba(5,5,10,0.7) 45%,rgba(5,5,10,0.15) 100%);transform:translateY(100%);transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),opacity 0.3s ease;opacity:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;z-index:4}
.disc-card-wrap:hover .disc-card-overlay{transform:translateY(0);opacity:1}
.disc-card-overlay-title{font-family:'Inter',sans-serif;font-size:14px;font-weight:800;color:#fff;margin-bottom:4px;line-height:1.2}
.disc-card-overlay-desc{font-size:11px;color:rgba(255,255,255,0.68);line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.disc-card-overlay-meta{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.disc-card-overlay-rating{font-size:11px;font-weight:700;color:#ffd700}
.disc-card-overlay-play{background:var(--accent);color:#0a0a0f;border:none;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;transition:box-shadow 0.2s}
.disc-card-overlay-play:hover{box-shadow:0 0 24px rgba(200,255,0,0.5)}

/* ── DISCOVER: Masonry/staggered grid ── */
.disc-masonry{columns:3;gap:14px;padding:0 28px}
.disc-masonry .disc-card-wrap{break-inside:avoid;margin-bottom:14px}
.disc-masonry .card-thumb,.disc-masonry .nf-card-thumb{aspect-ratio:2/3}
@media(max-width:900px){.disc-masonry{columns:2;padding:0 16px}}
@media(max-width:480px){.disc-masonry{columns:2;padding:0 12px;gap:10px}.disc-masonry .disc-card-wrap{margin-bottom:10px}}

/* ── PROFILE: Taller cover with shimmer ── */
.prof-cover{height:320px!important}
@keyframes coverShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.prof-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,255,0,0.06) 0%,rgba(123,94,167,0.1) 35%,rgba(0,20,50,0.08) 65%,rgba(200,255,0,0.04) 100%);background-size:400% 400%;animation:coverShimmer 6s ease infinite;pointer-events:none;z-index:1}
@media(max-width:768px){.prof-cover{height:240px!important}}
@media(max-width:480px){.prof-cover{height:200px!important}}

/* ── PROFILE: Stats glassmorphism row ── */
.prof-stats-glass{display:flex;gap:14px;padding:20px 0 24px;flex-wrap:wrap}
.prof-stat-card{flex:1;min-width:100px;background:rgba(255,255,255,0.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:16px 20px;text-align:center;transition:all 0.2s}
.prof-stat-card:nth-child(1){box-shadow:0 0 24px rgba(200,255,0,0.06),inset 0 1px 0 rgba(255,255,255,0.08)}
.prof-stat-card:nth-child(2){box-shadow:0 0 24px rgba(123,94,167,0.08),inset 0 1px 0 rgba(255,255,255,0.06)}
.prof-stat-card:nth-child(3){box-shadow:0 0 24px rgba(200,255,0,0.05),inset 0 1px 0 rgba(255,255,255,0.06)}
.prof-stat-card:hover{transform:translateY(-2px);border-color:rgba(200,255,0,0.2)}
.prof-stat-card .p-stat-val{font-size:24px!important;font-weight:800!important;margin-bottom:4px}
.prof-stat-card .p-stat-key{font-size:11px!important;letter-spacing:0.05em}

/* ── PROFILE: Series/content tabs ── */
.prof-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.prof-tabs::-webkit-scrollbar{display:none}
.prof-tab{padding:12px 20px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;white-space:nowrap;position:relative;transition:color 0.2s;flex-shrink:0}
.prof-tab::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1)}
.prof-tab.active{color:var(--text)}
.prof-tab.active::after{transform:scaleX(1)}
.prof-tab-panel{display:none}
.prof-tab-panel.active{display:block;animation:tabPanelIn 0.3s cubic-bezier(0.22,1,0.36,1) both}
@keyframes tabPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.prof-tabs-empty{text-align:center;padding:48px 20px;color:var(--muted);font-size:14px;font-weight:400}
.prof-tabs-empty svg{opacity:0.3;display:block;margin:0 auto 14px}

/* ── VIDEO PLAYER: Premium custom controls ── */
.vpm-overlay{background:rgba(0,0,0,0.97)!important}
.vpm-wrap{width:100%;max-width:980px}
.vpm-box{border-radius:14px 14px 0 0!important;overflow:hidden}
.vpm-controls-bar{background:linear-gradient(180deg,#0e0e14 0%,#0a0a0f 100%);border-radius:0 0 14px 14px;padding:0 20px;border-top:1px solid rgba(255,255,255,0.06)}
.vpm-progress-row{padding:10px 0 6px;display:flex;align-items:center;gap:10px}
.vpm-time{font-family:'Inter',sans-serif;font-size:12px;color:rgba(255,255,255,0.45);font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:0.5px;min-width:38px}
.vpm-progress-track{flex:1;height:4px;background:rgba(123,94,167,0.35);border-radius:4px;cursor:pointer;position:relative;overflow:visible}
.vpm-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:4px;position:relative;width:0%;transition:width 0.1s linear;box-shadow:0 0 8px rgba(200,255,0,0.4)}
.vpm-progress-fill::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(200,255,0,0.5);transition:transform 0.15s ease}
.vpm-progress-track:hover .vpm-progress-fill::after{transform:translateY(-50%) scale(1.3)}
.vpm-controls-main{display:flex;align-items:center;gap:10px;padding:8px 0 14px}
.vpm-play-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.18s;flex-shrink:0;padding:0}
.vpm-play-btn:hover{background:rgba(255,255,255,0.2);border-color:rgba(200,255,0,0.4)}
.vpm-play-btn svg{stroke:#fff;width:16px;height:16px;flex-shrink:0}
.vpm-episode-info{flex:1;min-width:0}
.vpm-episode-series{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:2px}
.vpm-episode-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em}
.vpm-ctrl-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.vpm-ctrl-btn{width:34px;height:34px;border-radius:8px;background:transparent;border:none;color:rgba(255,255,255,0.55);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;padding:0}
.vpm-ctrl-btn:hover{background:rgba(255,255,255,0.1);color:#fff}
.vpm-ctrl-btn svg{width:16px;height:16px;stroke:currentColor;flex-shrink:0}
.vpm-close-pill{background:rgba(200,255,0,0.12);border:1px solid rgba(200,255,0,0.3);color:var(--accent);padding:7px 16px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.18s;white-space:nowrap}
.vpm-close-pill:hover{background:rgba(200,255,0,0.22);border-color:rgba(200,255,0,0.55);box-shadow:0 0 16px rgba(200,255,0,0.25)}
@media(max-width:600px){.vpm-controls-bar{padding:0 14px}.vpm-episode-series{display:none}.vpm-episode-title{font-size:13px}.vpm-ctrl-btn{width:30px;height:30px}}
@media(max-width:480px){.vpm-box{border-radius:0!important}.vpm-controls-bar{border-radius:0!important}.vpm-wrap{max-width:100%}}

/* ── DISCOVER: Cinematic page header ── */
.disc-page-header{padding:32px 0 20px}
.disc-page-title{font-family:'Inter',sans-serif;font-size:clamp(48px,8vw,96px);font-weight:900;letter-spacing:-0.05em;line-height:0.9;background:linear-gradient(135deg,#ffffff 30%,rgba(200,255,0,0.85) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.disc-page-subtitle{font-size:14px;color:var(--muted);font-weight:300;letter-spacing:0.5px;margin-bottom:4px}
@media(max-width:768px){.disc-page-title{font-size:clamp(36px,10vw,64px);letter-spacing:-0.03em}.disc-page-header{padding:20px 0 16px}}
@media(max-width:480px){.disc-page-header{display:none}}

/* ── DISCOVER: Sticky glassmorphism filter bar ── */
.disc-sticky-bar{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:12px 0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:sticky;top:52px;z-index:60;background:rgba(10,10,15,0.7);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,0.05);margin:0 -28px;padding-left:28px;padding-right:28px}
.disc-sticky-bar::-webkit-scrollbar{display:none}
.disc-sticky-pill{padding:7px 18px;border-radius:30px;font-size:13px;font-weight:600;font-family:'Inter',sans-serif;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--muted);cursor:pointer;transition:all 0.2s;white-space:nowrap;flex-shrink:0}
.disc-sticky-pill:hover{background:rgba(255,255,255,0.12);color:var(--text)}
.disc-sticky-pill.active{background:var(--accent)!important;color:#0a0a0f!important;border-color:var(--accent)!important;font-weight:700}
@media(max-width:768px){.disc-sticky-bar{top:56px;margin:0 -16px;padding-left:16px;padding-right:16px}}
@media(max-width:480px){.disc-sticky-bar{display:none}}

/* ── MOBILE NAV: Active tab — dot only, no dash ── */
.m-btn.active .m-icon{position:relative}
.m-btn.active .m-icon::before{
  content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 6px rgba(200,255,0,0.8);
  animation:mDotIn 0.25s ease forwards;
  pointer-events:none;
}
@keyframes mGlowIn{from{opacity:0}to{opacity:1}}

/* ── HERO: Better content layout ── */
.fh-meta{ font-size:13px; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fh-meta-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;background:rgba(200,255,0,0.15);border:1px solid rgba(200,255,0,0.3);color:var(--accent)}
.fh-rating{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#ffd700}
/* ── CARDS: Enhanced hover glow ── */
.nf-card:hover{
  transform:scale(1.05) translateY(-4px)!important;
  box-shadow:0 0 0 1.5px rgba(200,255,0,0.3),0 24px 56px rgba(0,0,0,0.85),0 0 32px rgba(200,255,0,0.12)!important;
}
.nf-card{transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s ease!important}

/* ── PROFILE: Avatar ring upgrade ── */
.prof-avi{
  background:linear-gradient(135deg,#c8ff00,#7b5ea7)!important;
  padding:3px!important;
  border:none!important;
}
.prof-avi-inner{
  width:100%;height:100%;border-radius:50%;
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:36px;font-weight:800;color:var(--accent);
}
@media(max-width:768px){.prof-avi-inner{font-size:26px}}

/* ── DISCOVER: Banner upgrade ── */
.disc-banner{
  background:linear-gradient(135deg,#0a1400 0%,#0f0520 40%,#001428 100%)!important;
  border-color:rgba(200,255,0,0.12)!important;
  box-shadow:0 0 80px rgba(200,255,0,0.04),inset 0 1px 0 rgba(255,255,255,0.06)!important;
}
.disc-banner::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:
    linear-gradient(to top, rgba(18,18,28,0.95) 0%, rgba(18,18,28,0.6) 40%, transparent 100%),
    linear-gradient(to right, rgba(18,18,28,0.4) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 50%,rgba(200,255,0,0.06),transparent)}

/* ── GLOBAL: Smoother page transitions ── */
.page{transition:opacity 0.25s ease,transform 0.25s ease}
.page:not(.active){opacity:0;pointer-events:none}
.page.active{opacity:1}

/* ── GLOBAL: Better scrollbar ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(200,255,0,0.3)}

/* ── Discover: Mobile responsive ── */
@media(max-width:768px){
  .disc-sidebar{display:none}
  .disc-hero{padding:28px 20px 24px}
  .disc-hero-title{font-size:clamp(22px,6vw,32px)}
  .disc-content-area{padding:16px 14px 28px}
  .disc-sticky-bar{padding:8px 16px}
}

/* ══════════════════════════════════════════
   GUEST LANDING FLOW
   ══════════════════════════════════════════ */

/* ── Guest Hero Overlay — shown over featured hero for guests ── */
#guest-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to top,
    rgba(5,5,10,0.97) 0%,
    rgba(5,5,10,0.82) 28%,
    rgba(5,5,10,0.45) 56%,
    rgba(5,5,10,0.12) 78%,
    transparent 100%
  );
  padding:0 clamp(20px,5vw,60px) clamp(48px,8vh,80px);
  z-index:40;pointer-events:auto;
  display:flex;align-items:flex-end;
}
@media(max-width:768px){
  #guest-hero-overlay{
    padding:0 20px clamp(36px,6vh,56px);
    align-items:flex-end;
  }
}
.gho-inner {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left; padding: 24px clamp(32px,5vw,80px);
  background: linear-gradient(to bottom, rgba(18,18,28,0.7) 0%, rgba(18,18,28,0.9) 100%);
}
.gho-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 12px;
}
.gho-title {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(28px, 5vw, 52px); line-height: 1.0;
  color: var(--text); margin-bottom: 16px; letter-spacing: -0.04em;
}
.gho-title em { color: var(--lime); font-style: normal; }
.gho-sub {
  font-size: 15px; color: var(--muted); line-height: 1.6;
  max-width: 520px; margin-bottom: 28px;
}
.gho-dual-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.gho-btn-watch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: var(--r-pill);
  background: var(--lime); color: #12121c; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px;
  min-height: 48px;
  transition: opacity 0.15s, transform 0.15s;
}
.gho-btn-watch:hover { opacity: 0.9; transform: translateY(-1px); }
.gho-or { color: var(--muted); font-size: 13px; }
.gho-btn-create {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 24px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08); border: 1px solid var(--border2);
  color: var(--text); cursor: pointer; font-size: 14px; font-weight: 600;
  min-height: 48px;
  transition: background 0.15s;
}
.gho-btn-create:hover { background: rgba(255,255,255,0.14); }
@media(max-width:480px){
  .gho-dual-cta{gap:8px;flex-direction:column;align-items:stretch}
  .gho-btn-watch{padding:12px 18px;font-size:13px;min-height:44px;justify-content:center}
  .gho-btn-create{padding:12px 14px;font-size:13px;min-height:44px;justify-content:center}
  .gho-or{display:none}
  .gho-eyebrow{font-size:8px;padding:3px 10px;letter-spacing:1.5px}
  .gho-title{font-size:clamp(22px,7vw,32px);letter-spacing:-0.025em;margin-bottom:8px}
  .gho-sub{font-size:13px;margin-bottom:20px}
}

/* ── Social Proof Strip ── */
#social-proof-strip{
  background:rgba(8,8,13,0.99);
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:10px 48px;
  display:none; /* shown for guests via JS */
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
@media(max-width:768px){#social-proof-strip{padding:12px 20px;justify-content:center;gap:12px}}
.sps-stat{display:flex;align-items:center;gap:8px}
.sps-val{font-family:'Inter',sans-serif;font-size:18px;font-weight:800;color:var(--text)}
.sps-key{font-size:12px;color:var(--muted)}
.sps-divider{width:1px;height:28px;background:var(--border);flex-shrink:0}
@media(max-width:480px){
  #social-proof-strip{display:grid!important;grid-template-columns:1fr 1fr;gap:10px 8px;padding:14px 16px;justify-items:center}
  .sps-divider{display:none}
  .sps-stat{flex-direction:column;align-items:center;gap:2px}
  .sps-val{font-size:15px}
  .sps-cta{grid-column:1/-1;width:100%;justify-content:center}
}
.sps-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 20px;border-radius:8px;
  background:var(--accent);color:#0a0a0f;
  font-family:'Inter',sans-serif;font-weight:800;font-size:13px;
  border:none;cursor:pointer;transition:all 0.2s;white-space:nowrap;flex-shrink:0;
}
.sps-cta:hover{opacity:0.9;transform:translateY(-1px)}
@media(max-width:600px){.sps-cta{width:100%;justify-content:center}}

/* ── Sticky Guest Bar (bottom) ── */
#guest-sticky-bar{
  position:fixed;bottom:0;left:0;right:0;
  z-index:200;
  background:linear-gradient(135deg,rgba(8,18,0,0.98),rgba(12,5,28,0.98));
  border-top:1px solid rgba(200,255,0,0.18);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:12px 24px calc(12px + env(safe-area-inset-bottom,0px));
  display:none; /* shown for guests via JS */
  align-items:center;gap:14px;
  box-shadow:0 -8px 32px rgba(0,0,0,0.5),0 0 0 1px rgba(200,255,0,0.04);
  transform:translateY(100%);
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
body.guest-bar-active{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
#guest-sticky-bar.gsb-visible{transform:translateY(0)}
@media(max-width:768px){
  #guest-sticky-bar{bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  body.guest-bar-active{padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))}
}
.gsb-icon{font-size:22px;flex-shrink:0}
.gsb-text{flex:1;min-width:0}
.gsb-title{font-family:'Inter',sans-serif;font-size:14px;font-weight:800;color:#fff;margin-bottom:1px}
.gsb-sub{font-size:11px;color:rgba(200,195,220,0.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:400px){.gsb-sub{display:none}}
.gsb-btns{display:flex;gap:8px;flex-shrink:0}
.gsb-btn-primary{
  padding:9px 20px;border-radius:8px;
  background:var(--accent);color:#0a0a0f;
  font-family:'Inter',sans-serif;font-weight:800;font-size:13px;
  border:none;cursor:pointer;transition:all 0.18s;white-space:nowrap;
}
.gsb-btn-primary:hover{opacity:0.9}
.gsb-btn-close{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.5);font-size:13px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:all 0.15s;padding:0;
}
.gsb-btn-close:hover{background:rgba(255,255,255,0.14);color:#fff}

/* ── Soft Watch Gate (slides up over video area) ── */
#soft-watch-gate{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,5,10,1) 0%,rgba(5,5,10,0.96) 60%,transparent 100%);
  padding:40px 32px 32px;
  z-index:50;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  animation:softGateIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes softGateIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.swg-icon{font-size:36px;margin-bottom:12px}
.swg-title{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;margin-bottom:8px;color:#fff}
.swg-sub{font-size:13px;color:rgba(200,195,220,0.7);line-height:1.6;margin-bottom:20px;max-width:340px;margin-left:auto;margin-right:auto}
.swg-btns{display:flex;flex-direction:column;gap:9px;max-width:300px;margin:0 auto}
.swg-btn-primary{
  padding:13px;border-radius:10px;
  background:var(--accent);color:#0a0a0f;
  font-family:'Inter',sans-serif;font-weight:800;font-size:15px;
  border:none;cursor:pointer;transition:all 0.18s;
}
.swg-btn-primary:hover{opacity:0.9;transform:translateY(-1px)}
.swg-btn-secondary{
  padding:11px;border-radius:10px;
  background:transparent;color:rgba(255,255,255,0.6);
  font-size:13px;border:1px solid rgba(255,255,255,0.14);
  cursor:pointer;transition:all 0.15s;
}
.swg-btn-secondary:hover{color:#fff;border-color:rgba(255,255,255,0.3)}
.swg-note{font-size:10px;color:rgba(255,255,255,0.25);margin-top:10px}

/* ── Exit Intent Modal ── */
#exit-intent-modal{
  position:fixed;inset:0;z-index:9900;
  background:rgba(0,0,0,0.88);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.eim-box{
  background:linear-gradient(145deg,rgba(10,10,18,0.98),rgba(16,6,32,0.98));
  border:1px solid rgba(200,255,0,0.18);border-radius:24px;
  padding:48px 40px;max-width:440px;width:100%;
  text-align:center;position:relative;
  box-shadow:0 40px 100px rgba(0,0,0,0.8),0 0 60px rgba(200,255,0,0.04);
  animation:modalIn 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
@media(max-width:480px){.eim-box{padding:36px 24px;border-radius:18px}}
.eim-close{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.4);font-size:13px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:all 0.15s;
}
.eim-close:hover{background:rgba(255,255,255,0.12);color:#fff}
.eim-emoji{font-size:52px;margin-bottom:16px;display:block;animation:emptyFloat 3s ease-in-out infinite}
.eim-title{
  font-family:'Inter',sans-serif;font-size:clamp(22px,4vw,28px);
  font-weight:800;letter-spacing:-0.025em;margin-bottom:12px;color:#fff;line-height:1.1;
}
.eim-title em{font-style:normal;color:var(--accent)}
.eim-sub{font-size:14px;color:rgba(200,195,220,0.65);line-height:1.7;margin-bottom:28px}
.eim-perks{
  display:flex;flex-direction:column;gap:9px;
  margin-bottom:28px;text-align:left;
}
.eim-perk{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:rgba(220,215,240,0.85);
}
.eim-perk-icon{
  width:28px;height:28px;border-radius:8px;
  background:rgba(200,255,0,0.1);border:1px solid rgba(200,255,0,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}
.eim-btns{display:flex;flex-direction:column;gap:10px}
.eim-btn-primary{
  padding:14px;border-radius:11px;
  background:var(--accent);color:#0a0a0f;
  font-family:'Inter',sans-serif;font-weight:800;font-size:15px;
  border:none;cursor:pointer;transition:all 0.2s;
}
.eim-btn-primary:hover{opacity:0.92;transform:translateY(-1px)}
.eim-btn-ghost{
  padding:12px;border-radius:11px;
  background:transparent;color:rgba(255,255,255,0.35);
  font-size:13px;border:1px solid rgba(255,255,255,0.1);
  cursor:pointer;transition:all 0.15s;
}
.eim-btn-ghost:hover{color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.2)}
.eim-fine-print{font-size:10px;color:rgba(255,255,255,0.18);margin-top:12px}

/* ══════════════════════════════════════════
   FLOW 2 — SIGN UP → FIRST USE
   ══════════════════════════════════════════ */
#first-use-overlay{position:fixed;inset:0;z-index:9200;background:var(--bg);display:none;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(14px,3vw,28px);overflow:hidden}
#first-use-overlay.fu-open{display:flex}
body.overlay-open .page,
body.overlay-open #main-nav,
body.overlay-open #mobile-nav{pointer-events:none}
body.overlay-open #guest-sticky-bar{display:none!important}
body.overlay-open.guest-bar-active{padding-bottom:0!important}
#interest-picker-overlay{
  position:fixed;inset:0;z-index:9400;
  display:none;flex-direction:column;
  background:var(--bg);
  overflow:hidden;
}
#interest-picker-overlay.ip-open{display:flex}
#interest-picker-overlay .ip-body{flex:1;min-height:0;overflow:auto}
.ip-header,.ip-footer{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,4vw,42px);
  border-color:rgba(255,255,255,0.08);
}
.ip-header{border-bottom:1px solid rgba(255,255,255,0.08)}
.ip-footer{border-top:1px solid rgba(255,255,255,0.08);gap:16px}
.ip-logo{font-family:'Inter',sans-serif;font-size:18px;font-weight:900;letter-spacing:0;color:var(--text)}
.ip-logo span{color:var(--accent)}
.ip-skip{
  border:1px solid var(--border);background:rgba(255,255,255,0.04);color:var(--muted);
  border-radius:999px;padding:9px 14px;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;cursor:pointer;
}
.ip-skip:hover{border-color:var(--border2);color:var(--text)}
.ip-body{display:flex;align-items:center;justify-content:center;padding:28px 18px}
.ip-inner{width:100%;max-width:760px;margin:auto;text-align:center}
.ip-step-pill{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent);background:rgba(200,255,0,0.08);border:1px solid rgba(200,255,0,0.22);
  border-radius:999px;padding:6px 12px;font-size:10px;font-weight:800;text-transform:uppercase;margin-bottom:14px;
}
.ip-title{font-family:'Inter',sans-serif;font-size:clamp(28px,5vw,46px);font-weight:900;line-height:1.05;letter-spacing:0;margin:0 0 10px;color:var(--text)}
.ip-title em{font-style:normal;color:var(--accent)}
.ip-sub{max-width:520px;margin:0 auto 28px;color:var(--muted);font-size:14px;line-height:1.6}
.ip-section{text-align:left;margin:0 auto 24px;max-width:680px}
.ip-section-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px}
.ip-chips{display:flex;flex-wrap:wrap;gap:10px}
.ip-chip{
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid var(--border);background:rgba(255,255,255,0.04);color:var(--text);
  border-radius:999px;padding:9px 14px;cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;
}
.ip-chip:hover,.ip-chip.selected{border-color:rgba(200,255,0,0.48);background:rgba(200,255,0,0.1);color:var(--accent)}
.ip-progress{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.ip-prog-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.18)}
.ip-prog-dot.active{background:var(--accent);width:20px;border-radius:999px}
.ip-sel-count{align-items:center;gap:4px;color:var(--accent);font-weight:800}
.ip-cta{
  min-height:44px;border:none;border-radius:999px;background:var(--accent);color:#0a0a0f;
  padding:0 20px;font-family:'Inter',sans-serif;font-size:13px;font-weight:900;cursor:pointer;
}
.ip-cta:disabled{opacity:0.45;cursor:not-allowed}
@media(max-width:640px){
  .ip-header,.ip-footer{padding:14px 16px}
  .ip-footer{flex-direction:column;align-items:stretch}
  .ip-progress{justify-content:center}
  .ip-cta{width:100%}
  .ip-section{text-align:left}
}
.fu-screens{display:flex;width:min(720px,100%);flex:1 1 auto;min-height:0;border:1px solid rgba(255,255,255,0.1);border-radius:18px;background:linear-gradient(145deg,rgba(14,14,22,0.98),rgba(8,8,14,0.98));box-shadow:0 28px 90px rgba(0,0,0,0.55);overflow:hidden;transition:none;touch-action:pan-y}
.fu-screen{min-width:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(24px,5vw,52px) clamp(18px,5vw,44px);text-align:center;position:relative;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transition:margin-left 0.42s cubic-bezier(0.32,0.72,0,1)}
.fu-screen:nth-child(1){background:radial-gradient(ellipse 70% 55% at 50% 8%,rgba(200,255,0,0.08) 0%,transparent 65%)}
.fu-screen:nth-child(2){background:radial-gradient(ellipse 70% 55% at 50% 8%,rgba(123,94,167,0.1) 0%,transparent 65%)}
.fu-screen:nth-child(3){background:radial-gradient(ellipse 70% 55% at 50% 8%,rgba(200,255,0,0.06) 0%,transparent 65%)}
.fu-screen:nth-child(4){background:radial-gradient(ellipse 70% 55% at 50% 8%,rgba(0,180,255,0.06) 0%,transparent 65%)}
.fu-step-label{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
.fu-title{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(24px,5vw,36px);color:var(--text);line-height:1.15;margin-bottom:8px;letter-spacing:0}
.fu-title em{color:var(--lime);font-style:normal}
.fu-sub{font-size:14px;color:var(--muted);line-height:1.6;margin:0 auto 24px;max-width:520px}
/* Role picker */
.fu-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;width:100%;max-width:520px}
.fu-role-card{position:relative;padding:20px 16px;border-radius:var(--r-card);border:1.5px solid var(--border);background:var(--surface);cursor:pointer;text-align:center;transition:border-color 0.15s,background 0.15s}
.fu-role-card.selected{border-color:var(--lime);background:rgba(200,255,0,0.05)}
.fu-role-card svg{margin-bottom:8px}
.fu-role-name{font-family:'Inter',sans-serif;font-weight:800;font-size:14px;color:var(--text)}
.fu-role-desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
.fu-role-emoji{font-size:clamp(32px,7vw,44px);margin-bottom:10px;display:block;line-height:1}
.fu-role-check{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--lime);display:none;align-items:center;justify-content:center;font-size:10px;color:#12121c;font-weight:900}
.fu-role-card.selected .fu-role-check,.fu-role-card.selected-creator .fu-role-check{display:flex}
.fu-role-card.selected-creator{border-color:var(--purple);background:rgba(123,94,167,0.08)}
.fu-role-card.selected-creator .fu-role-check{background:var(--purple)}
/* Interest picker */
.fu-interest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:24px;width:100%;max-width:520px}
.fu-interest-btn{min-height:86px;padding:12px 10px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s}
.fu-interest-btn.selected{border-color:var(--lime);background:rgba(200,255,0,0.1);color:var(--lime)}
.fu-interest-emoji{font-size:24px;margin-bottom:6px;display:block}
.fu-interest-name{font-size:11px;font-weight:700;color:var(--text)}
/* First action cards */
.fu-action-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:440px;margin:24px 0 0}
.fu-action-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:var(--surface);border:1.5px solid var(--border2);cursor:pointer;transition:all 0.2s;text-align:left;font-family:'Inter',sans-serif}
.fu-action-card:hover{border-color:rgba(200,255,0,0.3);transform:translateX(4px)}
.fu-action-card.featured{border-color:rgba(200,255,0,0.25);background:rgba(200,255,0,0.04)}
.fu-action-icon{width:44px;height:44px;border-radius:12px;background:rgba(200,255,0,0.1);border:1px solid rgba(200,255,0,0.2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.fu-action-icon.purple{background:rgba(123,94,167,0.12);border-color:rgba(123,94,167,0.25)}
.fu-action-icon.blue{background:rgba(0,180,255,0.1);border-color:rgba(0,180,255,0.2)}
.fu-action-body{flex:1;min-width:0}
.fu-action-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px}
.fu-action-sub{font-size:11px;color:var(--muted);line-height:1.4}
.fu-action-arrow{color:var(--muted);font-size:18px;flex-shrink:0;transition:transform 0.15s}
.fu-action-card:hover .fu-action-arrow{transform:translateX(3px);color:var(--accent)}
/* Complete screen */
.fu-complete-art{font-size:clamp(60px,14vw,90px);display:block;margin-bottom:8px;animation:successPop 0.5s cubic-bezier(0.2,1.5,0.3,1) both}
.fu-complete-stats{display:flex;gap:16px;justify-content:center;margin:24px 0 0;flex-wrap:wrap}
.fu-complete-stat{padding:14px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--border2);text-align:center}
.fu-complete-stat-val{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;color:var(--accent)}
.fu-complete-stat-key{font-size:10px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:1px}
/* Footer */
.fu-footer{width:min(720px,100%);flex-shrink:0;padding:14px 0 0;display:flex;flex-direction:column;align-items:center;gap:12px;background:transparent}
.fu-progress{display:flex;gap:6px;justify-content:center;margin-top:0}
.fu-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.2);transition:all 0.2s}
.fu-dot.active{background:var(--lime);width:18px;border-radius:3px}
.fu-actions-row{display:flex;gap:10px;width:100%;max-width:380px}
.fu-btn-next{display:inline-flex;align-items:center;justify-content:center;flex:1;gap:8px;padding:13px 32px;border-radius:var(--r-pill);background:var(--lime);color:#12121c;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:800;font-size:15px;transition:opacity 0.15s}
.fu-btn-next:hover{opacity:0.9}
.fu-btn-next:disabled{opacity:0.35;cursor:not-allowed}
.fu-btn-skip{padding:13px 18px;border-radius:10px;background:transparent;border:1px solid var(--border2);color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.fu-btn-skip:hover{color:var(--text)}
@media(max-width:480px){
  #first-use-overlay{justify-content:flex-start;padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .fu-screens{border-radius:14px}
  .fu-screen{justify-content:flex-start;padding:18px 16px 20px}
  .fu-role-grid{grid-template-columns:1fr}
  .fu-role-card[style]{grid-column:auto!important}
  .fu-interest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fu-title{font-size:22px}
  .fu-sub{font-size:13px;margin-bottom:16px}
  .fu-role-grid,.fu-interest-grid{margin-bottom:14px}
  .fu-role-card{padding:14px 12px}
  .fu-interest-btn{min-height:74px;padding:10px 8px}
  .fu-action-cards{margin-top:14px;gap:10px}
  .fu-action-card{padding:13px 14px}
  .fu-footer{padding-top:10px;gap:10px}
}
/* Setup checklist */
.setup-checklist{background:linear-gradient(135deg,rgba(10,18,0,0.6),rgba(16,8,32,0.6));border:1px solid rgba(200,255,0,0.14);border-radius:16px;padding:20px 20px 16px;margin-bottom:24px}
.setup-checklist-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.setup-checklist-title{font-family:'Inter',sans-serif;font-size:14px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.setup-checklist-pct{font-family:'Inter',sans-serif;font-size:13px;font-weight:800;color:var(--accent)}
.setup-progress-bar{height:3px;background:var(--border);border-radius:2px;margin-bottom:14px;overflow:hidden}
.setup-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:2px;transition:width 0.5s cubic-bezier(0.22,1,0.36,1)}
.setup-items{display:flex;flex-direction:column;gap:6px}
.setup-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:background 0.15s;font-size:13px}
.setup-item:hover{background:rgba(255,255,255,0.04)}
.setup-item.done{opacity:0.5}
.setup-item-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;transition:all 0.2s}
.setup-item.done .setup-item-check{background:var(--accent);border-color:var(--accent);color:#0a0a0f;font-weight:900}
.setup-item-text{flex:1;color:var(--text)}
.setup-item.done .setup-item-text{text-decoration:line-through;color:var(--muted)}
.setup-item-cta{font-size:11px;color:var(--accent);font-weight:600}
.setup-item.done .setup-item-cta{display:none}
.setup-dismiss{margin-top:12px;font-size:11px;color:var(--muted);background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:2px}

/* ══════════════════════════════════════════
   FLOW 3 — CREATOR ONBOARDING
   ══════════════════════════════════════════ */

/* ── Creator Studio Onboarding Overlay ── */
#creator-onboarding{
  position:fixed;inset:0;z-index:9300;
  display:none;flex-direction:column;
  background:var(--bg);overflow:hidden;
}
#creator-onboarding.co-open{display:flex}

/* Screens */
.co-screens{display:flex;flex:1;transition:transform 0.42s cubic-bezier(0.32,0.72,0,1);will-change:transform}
.co-screen{
  min-width:100vw;width:100vw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(24px,5vw,60px) clamp(20px,5vw,48px);
  padding-top:calc(clamp(24px,5vw,60px) + env(safe-area-inset-top,0px));
  padding-bottom:calc(clamp(24px,5vw,60px) + env(safe-area-inset-bottom,0px));
  text-align:center;position:relative;overflow:hidden;
}
/* Unique backgrounds per screen */
.co-screen-1{background:radial-gradient(ellipse 70% 55% at 30% 25%,rgba(200,255,0,0.07) 0%,transparent 60%),radial-gradient(ellipse 50% 45% at 80% 75%,rgba(123,94,167,0.08) 0%,transparent 60%)}
.co-screen-2{background:radial-gradient(ellipse 70% 55% at 70% 20%,rgba(123,94,167,0.09) 0%,transparent 60%)}
.co-screen-3{background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(200,255,0,0.06) 0%,transparent 60%)}
.co-screen-4{background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(0,212,255,0.06) 0%,transparent 60%)}
.co-screen-5{background:radial-gradient(ellipse 60% 50% at 50% 20%,rgba(200,255,0,0.08) 0%,transparent 60%)}
.co-screen::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.016) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;
}

/* Shared labels / titles */
.co-step-label{
  font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
  background:rgba(200,255,0,0.08);border:1px solid rgba(200,255,0,0.2);
  padding:4px 12px;border-radius:20px;display:inline-block;
}
.co-step-label.purple{color:var(--accent2);background:rgba(123,94,167,0.1);border-color:rgba(123,94,167,0.25)}
.co-title{
  font-family:'Inter',sans-serif;font-size:clamp(24px,5vw,44px);
  font-weight:800;letter-spacing:-0.025em;line-height:1.05;
  color:var(--text);margin-bottom:12px;
}
.co-title em{font-style:normal;color:var(--accent)}
.co-sub{font-size:clamp(13px,2.8vw,15px);color:var(--muted);line-height:1.7;max-width:min(440px,90vw);font-weight:300}

/* ── Welcome screen (screen 1) — cinematic studio intro ── */
.co-welcome-art{
  width:clamp(80px,18vw,120px);height:clamp(80px,18vw,120px);
  border-radius:28px;background:linear-gradient(135deg,#0f1a00,#1a0e2e);
  border:2px solid rgba(200,255,0,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(36px,8vw,52px);margin-bottom:24px;
  box-shadow:0 0 48px rgba(200,255,0,0.08),0 20px 60px rgba(0,0,0,0.6);
  animation:successPop 0.5s cubic-bezier(0.2,1.5,0.3,1) both 0.2s;
}
.co-tier-pills{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.co-tier-pill{
  display:flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;
  background:var(--surface);border:1px solid var(--border2);color:var(--muted);
}
.co-tier-pill.active{background:rgba(200,255,0,0.08);border-color:rgba(200,255,0,0.25);color:var(--accent)}
.co-tier-pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ── Profile setup (screen 2) ── */
.co-profile-form{
  width:100%;max-width:440px;margin-top:24px;text-align:left;
  display:flex;flex-direction:column;gap:14px;
}
.co-form-group{display:flex;flex-direction:column;gap:6px}
.co-form-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.co-form-input{
  background:var(--surface2);border:1.5px solid var(--border2);
  border-radius:10px;padding:11px 14px;color:var(--text);
  font-size:14px;font-family:'Inter',sans-serif;
  outline:none;transition:border-color 0.2s;width:100%;
}
.co-form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,255,0,0.07)}
.co-form-input::placeholder{color:var(--muted)}
.co-form-textarea{resize:none;min-height:72px;line-height:1.5}
.co-avatar-row{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.co-avatar-preview{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#1a2200,#0f1a00);
  border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:18px;font-weight:800;color:var(--accent);
  cursor:pointer;overflow:hidden;transition:box-shadow 0.2s;
}
.co-avatar-preview:hover{box-shadow:0 0 0 3px rgba(200,255,0,0.25)}
.co-avatar-preview img{width:100%;height:100%;object-fit:cover}
.co-avatar-hint{font-size:12px;color:var(--muted);line-height:1.5}
.co-avatar-btn{
  margin-top:4px;font-size:11px;color:var(--accent2);font-weight:600;cursor:pointer;
  background:rgba(123,94,167,0.1);border:1px solid rgba(123,94,167,0.3);
  padding:4px 12px;border-radius:20px;transition:background 0.2s;display:inline-block;
}
.co-avatar-btn:hover{background:rgba(123,94,167,0.2)}

/* ── Content type picker (screen 3) ── */
.co-type-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  width:100%;max-width:480px;margin-top:24px;
}
@media(min-width:500px){.co-type-grid{grid-template-columns:repeat(4,1fr)}}
.co-type-card{
  padding:18px 10px 14px;border-radius:14px;
  background:var(--surface);border:1.5px solid var(--border2);
  cursor:pointer;transition:all 0.2s;text-align:center;
  font-family:'Inter',sans-serif;
}
.co-type-card:hover{border-color:rgba(200,255,0,0.3);transform:translateY(-2px)}
.co-type-card.selected{border-color:var(--accent);background:rgba(200,255,0,0.06)}
.co-type-emoji{font-size:28px;margin-bottom:8px;display:block}
.co-type-name{font-size:11px;font-weight:700;color:var(--text)}

/* ── Upload first content (screen 4) ── */
.co-upload-zone{
  width:100%;max-width:460px;margin-top:20px;
  border:2px dashed rgba(200,255,0,0.2);border-radius:20px;
  padding:36px 24px;text-align:center;cursor:pointer;
  transition:all 0.2s;background:rgba(200,255,0,0.02);
  position:relative;
}
.co-upload-zone:hover{border-color:rgba(200,255,0,0.4);background:rgba(200,255,0,0.04)}
.co-upload-icon{font-size:40px;margin-bottom:12px;display:block}
.co-upload-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:800;margin-bottom:6px;color:var(--text)}
.co-upload-sub{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.co-upload-btn{
  padding:10px 28px;border-radius:9px;
  background:var(--accent);color:#0a0a0f;
  font-family:'Inter',sans-serif;font-weight:800;font-size:13px;
  border:none;cursor:pointer;transition:all 0.2s;
}
.co-upload-btn:hover{opacity:0.9}
.co-upload-alt{
  margin-top:14px;font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:8px;justify-content:center;
}
.co-upload-alt-btn{
  font-size:12px;color:var(--accent2);font-weight:600;
  background:none;border:none;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;font-family:inherit;
}

/* ── Studio ready (screen 5) ── */
.co-studio-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  width:100%;max-width:440px;margin-top:24px;
}
@media(min-width:400px){.co-studio-grid{grid-template-columns:repeat(2,1fr)}}
.co-studio-tile{
  padding:20px 14px 16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border2);
  text-align:center;transition:all 0.22s;cursor:pointer;
}
.co-studio-tile:hover{border-color:rgba(200,255,0,0.25);transform:translateY(-2px)}
.co-studio-tile-icon{font-size:26px;margin-bottom:8px;display:block}
.co-studio-tile-title{font-family:'Inter',sans-serif;font-size:12px;font-weight:800;color:var(--text);margin-bottom:3px}
.co-studio-tile-sub{font-size:10px;color:var(--muted);line-height:1.4}

/* Co footer */
.co-footer{
  flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:12px;
  border-top:1px solid var(--border);background:rgba(10,10,15,0.98);
}
.co-progress{display:flex;gap:6px;align-items:center}
.co-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.15);transition:all 0.28s;cursor:pointer}
.co-dot.active{width:22px;border-radius:4px;background:var(--accent)}
.co-row{display:flex;gap:10px;width:100%;max-width:380px}
.co-btn-next{flex:1;padding:13px 24px;border-radius:10px;background:var(--accent);color:#0a0a0f;border:none;font-family:'Inter',sans-serif;font-size:15px;font-weight:800;cursor:pointer;transition:all 0.2s}
.co-btn-next:hover{opacity:0.9;transform:translateY(-1px)}
.co-btn-next:disabled{opacity:0.35;cursor:not-allowed;transform:none}
.co-btn-skip{padding:13px 16px;border-radius:10px;background:transparent;border:1px solid var(--border2);color:var(--muted);font-size:13px;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.co-btn-skip:hover{color:var(--text)}

/* ── Creator profile page — Studio Dashboard section ── */
.creator-studio-banner{
  background:linear-gradient(135deg,rgba(8,18,0,0.7) 0%,rgba(14,6,32,0.7) 100%);
  border:1px solid rgba(200,255,0,0.14);border-radius:18px;
  padding:24px;margin-bottom:28px;position:relative;overflow:hidden;
}
.creator-studio-banner::before{
  content:'';position:absolute;top:0;right:0;width:240px;height:240px;
  background:radial-gradient(circle at top right,rgba(200,255,0,0.05),transparent 60%);pointer-events:none;
}
.csb-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.csb-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:800;color:var(--text);margin-bottom:3px}
.csb-sub{font-size:12px;color:var(--muted)}
.csb-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  background:rgba(200,255,0,0.08);border:1px solid rgba(200,255,0,0.2);
  color:var(--accent);padding:4px 10px;border-radius:20px;white-space:nowrap;
}
.csb-stats{display:flex;gap:16px;flex-wrap:wrap}
.csb-stat{text-align:center;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);flex:1;min-width:60px}
.csb-stat-val{font-family:'Inter',sans-serif;font-size:clamp(16px,3vw,22px);font-weight:800;color:var(--accent)}
.csb-stat-key{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.csb-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.csb-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:9px;font-size:12px;font-weight:700;
  cursor:pointer;transition:all 0.18s;font-family:'Inter',sans-serif;white-space:nowrap;
}
.csb-btn-primary{background:var(--accent);color:#0a0a0f;border:none}
.csb-btn-primary:hover{opacity:0.9;transform:translateY(-1px)}
.csb-btn-outline{background:transparent;color:var(--text);border:1px solid var(--border2)}
.csb-btn-outline:hover{border-color:rgba(200,255,0,0.3);color:var(--accent)}

.creator-analytics-panel{
  margin:-8px 0 28px;padding:20px;border-radius:8px;
  background:rgba(255,255,255,0.035);border:1px solid var(--border);
}
.cap-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:16px}
.cap-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:800;color:var(--text);margin-bottom:3px}
.cap-sub{font-size:12px;color:var(--muted);line-height:1.5}
.cap-status{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.cap-metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.cap-metric{padding:14px;border-radius:8px;background:rgba(10,10,15,0.55);border:1px solid rgba(255,255,255,0.06)}
.cap-metric-val{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;color:var(--text);line-height:1}
.cap-metric-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:7px}
.cap-split{display:grid;grid-template-columns:1.1fr 0.9fr;gap:14px}
.cap-block{min-width:0}
.cap-block-title{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.cap-list{display:flex;flex-direction:column;gap:8px}
.cap-series-row,.cap-activity-row{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;
  background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.055);
}
.cap-series-row{cursor:pointer;transition:all .18s}
.cap-series-row:hover{border-color:rgba(200,255,0,0.22);background:rgba(200,255,0,0.035)}
.cap-rank{width:24px;height:24px;border-radius:7px;background:rgba(200,255,0,0.08);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.cap-row-body{min-width:0;flex:1}
.cap-row-title{font-size:12px;font-weight:750;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-row-meta{font-size:11px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-row-value{font-size:12px;font-weight:800;color:var(--accent);white-space:nowrap}
.cap-activity-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(200,255,0,0.08);flex-shrink:0}
.cap-empty{padding:18px;border-radius:8px;background:rgba(255,255,255,0.025);border:1px dashed rgba(255,255,255,0.12);text-align:center}
.cap-empty-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:4px}
.cap-empty-sub{font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:12px}
.cap-empty .csb-btn{justify-content:center;margin:0 auto}

@media(max-width:780px){
  .creator-analytics-panel{padding:16px;margin-bottom:22px}
  .cap-head{display:block}
  .cap-status{display:block;margin-top:8px}
  .cap-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cap-split{grid-template-columns:1fr;gap:16px}
  .cap-metric{padding:12px}
  .cap-metric-val{font-size:18px}
}

/* ── Creator tip card — shown when no series yet ── */
.creator-tip-card{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 20px;border-radius:14px;
  background:rgba(123,94,167,0.08);border:1px solid rgba(123,94,167,0.2);
  margin-bottom:16px;
}
.ctc-icon{font-size:22px;flex-shrink:0;margin-top:2px}
.ctc-body{flex:1}
.ctc-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
.ctc-text{font-size:12px;color:var(--muted);line-height:1.6}

/* ══════════════════════════════════════════
   FLOW 4 — POST-WATCH LOOP
   ══════════════════════════════════════════ */

/* ── Post-Watch Panel — slides up over detail modal body ── */
#post-watch-panel{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--surface) 0%,rgba(10,10,15,0.98) 60%,transparent 100%);
  z-index:30;
  display:flex;flex-direction:column;
  animation:postWatchIn 0.45s cubic-bezier(0.22,1,0.36,1) both;
  overflow-y:auto;
}
@keyframes postWatchIn{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
.pwp-inner{
  display:flex;flex-direction:column;
  align-items:center;
  padding:clamp(32px,5vh,60px) clamp(20px,4vw,48px) 32px;
  text-align:center;max-width:600px;margin:0 auto;width:100%;
}
/* Badge */
.pwp-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent);background:rgba(200,255,0,0.08);border:1px solid rgba(200,255,0,0.2);
  padding:4px 12px;border-radius:20px;margin-bottom:16px;
}
/* Celebration art */
.pwp-art{font-size:clamp(52px,10vw,72px);margin-bottom:12px;display:block;animation:successPop 0.5s cubic-bezier(0.2,1.5,0.3,1) both 0.1s}
/* Title */
.pwp-title{
  font-family:'Inter',sans-serif;font-size:clamp(22px,4vw,34px);
  font-weight:800;letter-spacing:-0.025em;color:var(--text);margin-bottom:8px;line-height:1.05;
}
.pwp-title em{font-style:normal;color:var(--accent)}
.pwp-sub{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:24px;max-width:380px}
/* Reaction row */
.pwp-reactions{
  display:flex;gap:10px;justify-content:center;margin-bottom:28px;flex-wrap:wrap;
}
.pwp-react-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 18px;border-radius:14px;
  background:var(--surface2);border:1.5px solid var(--border2);
  cursor:pointer;transition:all 0.2s;font-size:22px;min-width:64px;
}
.pwp-react-btn:hover{border-color:rgba(200,255,0,0.3);transform:translateY(-2px);background:rgba(200,255,0,0.05)}
.pwp-react-btn.reacted{border-color:var(--accent);background:rgba(200,255,0,0.08)}
.pwp-react-label{font-size:10px;font-weight:600;color:var(--muted)}
/* Share strip */
.pwp-share{
  display:flex;gap:8px;justify-content:center;margin-bottom:32px;flex-wrap:wrap;
}
.pwp-share-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;
  border:1px solid var(--border2);background:var(--surface2);color:var(--muted);
  cursor:pointer;transition:all 0.18s;
}
.pwp-share-btn:hover{border-color:var(--border2);color:var(--text);background:var(--surface)}
.pwp-share-btn.primary{background:var(--accent);color:#0a0a0f;border-color:var(--accent);font-family:'Inter',sans-serif;font-weight:800}
/* Section: what next */
.pwp-section-title{
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;align-self:flex-start;
}
/* Next-up card */
.pwp-next-up{
  width:100%;background:rgba(200,255,0,0.04);border:1px solid rgba(200,255,0,0.18);
  border-radius:16px;padding:16px;display:flex;gap:14px;align-items:center;
  cursor:pointer;transition:all 0.22s;margin-bottom:20px;text-align:left;
}
.pwp-next-up:hover{background:rgba(200,255,0,0.07);border-color:rgba(200,255,0,0.3);transform:translateY(-2px)}
.pwp-next-thumb{
  width:80px;height:52px;border-radius:8px;overflow:hidden;flex-shrink:0;
  background:var(--surface2);position:relative;
}
.pwp-next-thumb img{width:100%;height:100%;object-fit:cover}
.pwp-next-body{flex:1;min-width:0}
.pwp-next-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.pwp-next-title{font-family:'Inter',sans-serif;font-size:14px;font-weight:800;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwp-next-meta{font-size:11px;color:var(--muted)}
.pwp-next-play{
  width:36px;height:36px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
/* More like this grid */
.pwp-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  width:100%;margin-bottom:24px;
}
@media(max-width:480px){.pwp-grid{grid-template-columns:repeat(2,1fr)}}
.pwp-mini-card{
  border-radius:10px;overflow:hidden;cursor:pointer;
  transition:all 0.2s;background:var(--surface);border:1px solid var(--border);
}
.pwp-mini-card:hover{border-color:rgba(200,255,0,0.22);transform:translateY(-2px)}
.pwp-mini-thumb{aspect-ratio:16/9;position:relative;overflow:hidden;font-size:24px;display:flex;align-items:center;justify-content:center}
.pwp-mini-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pwp-mini-body{padding:7px 8px 9px}
.pwp-mini-title{font-size:11px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwp-mini-meta{font-size:10px;color:var(--muted)}
/* Follow prompt */
.pwp-follow-prompt{
  width:100%;display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:14px;
  background:var(--surface2);border:1px solid var(--border2);
  margin-bottom:20px;text-align:left;
}
.pwp-follow-avi{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#1a2200,#0f1a00);border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:800;color:var(--accent);
}
.pwp-follow-body{flex:1;min-width:0}
.pwp-follow-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:1px}
.pwp-follow-sub{font-size:11px;color:var(--muted)}
.pwp-follow-btn{
  padding:8px 16px;border-radius:8px;font-size:12px;font-weight:700;
  background:var(--accent);color:#0a0a0f;border:none;cursor:pointer;
  transition:all 0.18s;white-space:nowrap;flex-shrink:0;font-family:'Inter',sans-serif;
}
.pwp-follow-btn:hover{opacity:0.9}
.pwp-follow-btn.following{background:transparent;color:var(--accent);border:1px solid var(--accent)}
/* Close / back button */
.pwp-close-btn{
  margin-top:8px;padding:10px 28px;border-radius:9px;
  background:transparent;color:var(--muted);font-size:13px;
  border:1px solid var(--border2);cursor:pointer;transition:all 0.15s;
}
.pwp-close-btn:hover{color:var(--text);border-color:rgba(255,255,255,0.2)}
/* Sign-up nudge inside post-watch (for guests) */
.pwp-signup-nudge{
  width:100%;padding:20px;border-radius:16px;
  background:linear-gradient(135deg,rgba(8,18,0,0.7),rgba(14,6,32,0.7));
  border:1px solid rgba(200,255,0,0.2);text-align:center;margin-bottom:20px;
}
.pwp-signup-nudge-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:800;margin-bottom:6px;color:#fff}
.pwp-signup-nudge-sub{font-size:12px;color:rgba(200,195,220,0.65);margin-bottom:14px;line-height:1.6}
.pwp-signup-nudge-btn{
  padding:10px 28px;border-radius:9px;background:var(--accent);color:#0a0a0f;
  font-family:'Inter',sans-serif;font-weight:800;font-size:13px;border:none;cursor:pointer;
}

/* ══ FEED PERSONALISATION HEADER ══ */
.feed-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px clamp(16px,4vw,32px) 4px;flex-wrap:wrap;gap:10px}
.feed-greeting{font-family:'Inter',sans-serif;font-size:clamp(17px,3vw,22px);font-weight:800;letter-spacing:-0.02em;color:var(--text);margin-bottom:3px}
.feed-greeting em{font-style:normal;color:var(--accent)}
.feed-sub{font-size:12px;color:var(--muted);margin-bottom:10px}
.feed-signals{display:flex;gap:6px;flex-wrap:wrap}
.feed-signal-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;background:var(--surface2);border:1px solid var(--border2);color:var(--muted)}
.feed-signal-pill.active{background:rgba(200,255,0,0.07);border-color:rgba(200,255,0,0.2);color:var(--accent)}
.feed-signal-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.feed-refresh-btn{font-size:11px;color:var(--muted);font-weight:600;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:8px;transition:all 0.15s;font-family:inherit;white-space:nowrap}
.feed-refresh-btn:hover{background:var(--surface2);color:var(--text)}
.taste-bar{display:flex;gap:3px;height:3px;border-radius:2px;overflow:hidden;margin:8px clamp(16px,4vw,32px) 0;max-width:260px}
.taste-bar-seg{height:100%;border-radius:2px;transition:flex 0.6s cubic-bezier(0.22,1,0.36,1)}
@media(max-width:480px){.feed-header{padding:14px 16px 4px}.feed-signals{gap:4px}.feed-signal-pill{font-size:10px;padding:3px 8px}}

/* ══════════════════════════════════════════
   SEARCH RESULTS PAGE
   ══════════════════════════════════════════ */

/* ── Search hero bar ── */
.srp-hero{
  background:rgba(10,10,15,0.99);
  padding:12px clamp(16px,4vw,48px) 0;
  border-bottom:1px solid var(--border);
  position:sticky;top:52px;z-index:40;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
#page-home{padding-top:52px;}
.srp-top{
  position:sticky;top:52px;z-index:50;
  background:rgba(18,18,28,0.9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);padding:12px 32px;
}
.srp-input-wrap{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.06);border:1.5px solid var(--border);
  border-radius:12px;padding:10px 14px;max-width:600px;margin:0 auto;
  transition:border-color 0.15s;
}
.srp-input-wrap:focus-within{border-color:var(--lime);}
.srp-input-wrap svg{color:var(--muted);flex-shrink:0;}
.srp-input-icon{flex-shrink:0;opacity:0.5;color:var(--text)}
.srp-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-size:15px;font-family:'Inter',sans-serif;
}
.srp-input::placeholder{color:var(--muted)}
.srp-input-clear{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;padding:0;transition:color 0.15s;
  display:none;align-items:center;justify-content:center;
  flex-shrink:0;
}
.srp-input-clear.visible{display:flex}
.srp-input-clear:hover{color:var(--text);}
/* Filter bar */
.srp-filters{
  display:flex;gap:6px;padding:10px 32px;
  overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--border);
}
.srp-filters::-webkit-scrollbar{display:none}
.srp-filter-label{
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;flex-shrink:0;
}
.srp-filter{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:var(--r-pill);
  border:1.5px solid var(--border);background:transparent;
  color:var(--muted);font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all 0.15s;
}
.srp-filter.active{background:var(--lime);color:#12121c;border-color:var(--lime);}
.srp-filter:not(.active):hover{border-color:var(--border2);color:var(--text);}
.srp-chip{
  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;
  background:var(--surface2);border:1px solid var(--border2);color:var(--muted);
  cursor:pointer;transition:all 0.18s;white-space:nowrap;flex-shrink:0;
  font-family:'Inter',sans-serif;
}
.srp-chip:hover{color:var(--text);background:var(--surface)}
.srp-chip.active{background:var(--accent);color:#0a0a0f;border-color:var(--accent);font-weight:700}
.srp-chip.type-chip.active{background:rgba(123,94,167,0.15);color:rgba(200,170,255,0.95);border-color:rgba(123,94,167,0.4)}

/* ── Search body ── */
.srp-body{
  max-width:1200px;margin:0 auto;
  padding:24px clamp(16px,4vw,48px) 80px;
}

/* ── Meta bar (count + sort + view toggle) ── */
.srp-meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:20px;flex-wrap:wrap;
}
.srp-count{font-size:13px;color:var(--muted)}
.srp-count strong{color:var(--text);font-weight:700}
.srp-count em{font-style:normal;color:var(--accent);font-weight:700}
.srp-controls{display:flex;align-items:center;gap:10px}
.srp-sort{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:8px;padding:6px 12px;color:var(--text);
  font-size:12px;cursor:pointer;font-family:'Inter',sans-serif;outline:none;
}
.srp-view-btns{display:flex;gap:4px}
.srp-view-btn{
  width:30px;height:30px;border-radius:7px;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--muted);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.15s;padding:0;
}
.srp-view-btn.active{background:rgba(200,255,0,0.08);border-color:rgba(200,255,0,0.25);color:var(--accent)}
.srp-view-btn svg{pointer-events:none}

/* ── Results grid — card view ── */
#srp-results{padding:20px 32px 48px;}
.srp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--sp3);
}
@media(max-width:600px){.srp-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp3)}}
@media(max-width:360px){.srp-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp3)}}

/* ── Results list — list view ── */
.srp-list{display:flex;flex-direction:column;gap:8px}
.srp-list-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;transition:all 0.2s;
}
.srp-list-item:hover{border-color:rgba(200,255,0,0.2);background:rgba(200,255,0,0.02);transform:translateX(3px)}
.srp-list-thumb{
  width:88px;height:50px;border-radius:8px;overflow:hidden;
  flex-shrink:0;background:var(--surface2);position:relative;
}
.srp-list-thumb img{width:100%;height:100%;object-fit:cover}
.srp-list-body{flex:1;min-width:0}
.srp-list-title{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srp-list-meta{font-size:11px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.srp-list-badge{
  font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
  padding:2px 8px;border-radius:4px;
  background:rgba(123,94,167,0.14);color:rgba(200,170,255,0.9);
  border:1px solid rgba(123,94,167,0.25);white-space:nowrap;align-self:center;flex-shrink:0;
}
.srp-list-rating{color:var(--accent);font-weight:700;font-size:11px;align-self:center;flex-shrink:0}
@media(max-width:480px){
  .srp-list-thumb{width:68px;height:40px}
  .srp-list-title{font-size:13px}
}

/* ── Search card — reuses disc-card but with search-specific badge ── */
.srp-card{
  border-radius:var(--r-card);overflow:hidden;
  background:var(--surface);cursor:pointer;
  transition:transform 0.2s,box-shadow 0.2s;
}
.srp-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.4);}
.srp-card-thumb{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  background:var(--card);position:relative;overflow:hidden;
}
.srp-card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1)}
.srp-card:hover .srp-card-thumb img{transform:scale(1.07)}
.srp-card-thumb-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.65) 0%,transparent 55%);z-index:1}
.srp-card-cat{position:absolute;top:8px;left:8px;z-index:3;font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;background:rgba(0,0,0,0.68);backdrop-filter:blur(8px);padding:3px 8px;border-radius:4px;color:rgba(200,170,255,0.9);border:1px solid rgba(123,94,167,0.25)}
.srp-card-new{position:absolute;top:8px;right:8px;z-index:3;font-size:9px;font-weight:700;background:var(--accent);color:#0a0a0f;padding:3px 7px;border-radius:4px}
.srp-card-play{position:absolute;bottom:8px;right:8px;z-index:4;width:30px;height:30px;border-radius:50%;background:rgba(200,255,0,0.92);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.8);transition:all 0.22s}
.srp-card:hover .srp-card-play{opacity:1;transform:scale(1)}
/* Match highlight */
.srp-match{background:rgba(200,255,0,0.15);color:var(--accent);border-radius:3px;padding:0 2px}
.srp-card-body{padding:10px 12px;}
.srp-card-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.srp-card-meta{font-size:11px;color:var(--muted);}
.srp-card-rating{color:var(--accent);font-weight:700}
.srp-card-stats{font-size:10px;color:var(--muted);margin-top:4px;display:flex;gap:8px}

/* ── Empty state ── */
.srp-empty{
  text-align:center;padding:80px 24px;color:var(--muted);
}
.srp-empty svg{opacity:0.3;margin-bottom:12px;}
.srp-empty-icon{font-size:48px;margin-bottom:14px;display:block;animation:emptyFloat 3s ease-in-out infinite}
.srp-empty-title{font-family:'Inter',sans-serif;font-weight:800;font-size:18px;color:var(--text);margin-bottom:6px;}
.srp-empty-sub{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:20px}
.srp-suggestions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.srp-suggest-btn{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;background:var(--surface2);border:1px solid var(--border2);color:var(--muted);cursor:pointer;transition:all 0.15s}
.srp-suggest-btn:hover{color:var(--text);border-color:rgba(200,255,0,0.25)}

/* ── Default state (no query) ── */
.srp-default{padding:8px 0}
.srp-trending-section{margin-bottom:28px}
.srp-section-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.srp-trending-chips{display:flex;gap:8px;flex-wrap:wrap}
.srp-trending-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;
  background:var(--surface2);border:1px solid var(--border2);color:var(--text);
  cursor:pointer;transition:all 0.18s;
}
.srp-trending-chip:hover{border-color:rgba(200,255,0,0.3);background:rgba(200,255,0,0.05)}
.srp-trending-chip-badge{font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;margin-left:2px}
.srp-trending-chip-badge.hot{background:rgba(255,107,107,0.15);color:var(--accent3)}
.srp-trending-chip-badge.new{background:rgba(200,255,0,0.12);color:var(--accent)}
.srp-trending-chip-badge.top{background:rgba(255,215,0,0.12);color:#ffd700}
/* Recent searches */
.srp-recent-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:10px;cursor:pointer;
  transition:background 0.15s;color:var(--text);font-size:13px;
}
.srp-recent-item:hover{background:var(--surface2)}
.srp-recent-icon{opacity:0.4;flex-shrink:0}
.srp-recent-del{margin-left:auto;opacity:0;font-size:11px;color:var(--muted);padding:2px 6px;border-radius:4px;transition:opacity 0.15s;background:none;border:none;cursor:pointer;font-family:inherit}
.srp-recent-item:hover .srp-recent-del{opacity:0.6}
.srp-recent-del:hover{opacity:1!important;color:var(--accent3)}
/* Creators row in default state */
.srp-creators-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.srp-creators-scroll::-webkit-scrollbar{display:none}
.srp-creator-chip{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 12px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;transition:all 0.2s;min-width:84px;text-align:center;
}
.srp-creator-chip:hover{border-color:rgba(200,255,0,0.25);transform:translateY(-2px)}
.srp-creator-avi{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#1a2200,#0f1a00);border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:800;color:var(--accent);
}
.srp-creator-name{font-size:10px;font-weight:700;color:var(--text);max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:768px){
  .srp-hero{top:56px!important;padding:10px 14px 0!important}
  #page-home{margin-top:0!important}
  .srp-body{padding:16px 14px 80px}
  .srp-meta{gap:8px}
  .srp-view-btns{display:none}
  .srp-top{padding:10px 16px;}
  .srp-filters{padding:8px 16px;}
  #srp-results{padding:16px 16px 40px;}
  .srp-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp3);}
}
@media(max-width:480px){
  .srp-grid{grid-template-columns:repeat(2,1fr);}
  .srp-top{padding:8px 12px;}
  .srp-filters{padding:6px 12px;}
  #srp-results{padding:12px 12px 32px;}
}

/* ══════════════════════════════════════════
   DASHBOARD / PROFILE REDESIGN
   ══════════════════════════════════════════ */

/* ── Cover ── */
.dash-cover{
  height:clamp(120px,18vh,220px);
  background:linear-gradient(145deg,#050a00 0%,#0a0520 45%,#00050f 100%);
  position:relative;overflow:hidden;
}
.dash-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(200,255,0,0.05) 0%,rgba(123,94,167,0.09) 40%,rgba(0,20,50,0.06) 70%,rgba(200,255,0,0.03) 100%);
  background-size:400% 400%;animation:coverShimmer 8s ease infinite;pointer-events:none;z-index:1;
}
@keyframes coverShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.dash-cover-pattern{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(200,255,0,0.025) 0,rgba(200,255,0,0.025) 1px,transparent 1px,transparent 40px),
    repeating-linear-gradient(-45deg,rgba(123,94,167,0.02) 0,rgba(123,94,167,0.02) 1px,transparent 1px,transparent 60px);
  z-index:0;
}
.dash-cover-glow{
  position:absolute;top:50%;left:30%;transform:translate(-50%,-50%);
  width:500px;height:300px;
  background:radial-gradient(ellipse,rgba(200,255,0,0.07) 0%,rgba(123,94,167,0.06) 40%,transparent 70%);
  pointer-events:none;z-index:0;
}
.dash-cover-edit-btn{
  position:absolute;bottom:12px;right:12px;z-index:3;
  background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.8);font-size:11px;font-weight:600;
  padding:5px 12px;border-radius:20px;cursor:pointer;
  backdrop-filter:blur(10px);transition:all 0.2s;
  display:none;align-items:center;gap:5px;font-family:'Inter',sans-serif;
}
.dash-cover:hover .dash-cover-edit-btn{display:inline-flex}
.dash-cover-edit-btn:hover{background:rgba(0,0,0,0.82);border-color:var(--lime)}

/* ── Identity ── */
.dash-identity-wrap{
  background:var(--bg);border-bottom:1px solid var(--border);
  padding:0 clamp(16px,4vw,48px);
}
.dash-identity{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:flex-end;gap:16px;
  padding-bottom:16px;
  flex-wrap:wrap;
}
/* Avatar */
.dash-avi-wrap{position:relative;margin-top:-44px;flex-shrink:0;z-index:2}
.dash-avi{
  width:clamp(80px,12vw,108px);height:clamp(80px,12vw,108px);
  border-radius:50%;
  background:linear-gradient(135deg,#1a2200,#0f1a00);
  border:4px solid var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:clamp(24px,5vw,36px);
  font-weight:800;color:var(--lime);
  overflow:hidden;transition:box-shadow 0.2s;
}
.dash-avi:hover{box-shadow:0 0 0 3px rgba(200,255,0,0.3)}
.dash-avi-edit{
  position:absolute;bottom:2px;right:2px;
  width:26px;height:26px;border-radius:50%;
  background:var(--surface);border:2px solid var(--bg);
  color:var(--muted);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.15s;padding:0;
}
.dash-avi-edit:hover{background:var(--lime);color:#0a0a0f;border-color:var(--lime)}
/* Identity body */
.dash-identity-body{flex:1;min-width:0;padding-bottom:4px}
.dash-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.dash-name{
  font-family:'Inter',sans-serif;font-size:clamp(20px,4vw,28px);
  font-weight:800;letter-spacing:-0.02em;color:var(--text);
}
.dash-verified{
  width:20px;height:20px;border-radius:50%;
  background:var(--lime);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#0a0a0f;
}
.dash-plan-badge{
  font-size:10px;font-weight:700;padding:2px 9px;border-radius:10px;
  background:rgba(200,255,0,0.1);border:1px solid rgba(200,255,0,0.25);color:var(--lime);
}
/* ── PROFILE MODE TOGGLE ── */
.profile-mode-toggle {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.pmt-btn {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: none;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  transition: all 0.18s;
  white-space: nowrap;
  min-height: unset; /* overrides global 44px touch-target rule */
}
.pmt-btn.active[data-mode="creator"] {
  background: var(--lime);
  color: #0a0a0f;
}
.pmt-btn.active[data-mode="viewer"] {
  background: var(--purple);
  color: #fff;
}
@media (max-width: 768px) {
  .dash-name-row .profile-mode-toggle { display: none !important; }
  .profile-mode-toggle-mobile { display: inline-flex !important; }
}
.profile-mode-toggle-mobile { display: none; }
.dash-handle{font-size:13px;color:var(--muted);margin-bottom:4px}
.dash-bio{font-size:13px;color:var(--muted);font-weight:300;line-height:1.55;max-width:380px}
/* Actions */
.dash-actions{
  display:flex;gap:8px;align-items:flex-end;padding-bottom:4px;flex-wrap:wrap;
}
.dash-btn-primary{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:9px;
  background:var(--lime);color:#0a0a0f;
  font-family:'Inter',sans-serif;font-weight:800;font-size:13px;
  border:none;cursor:pointer;transition:all 0.18s;white-space:nowrap;
}
.dash-btn-primary:hover{opacity:0.9;transform:translateY(-1px)}
.dash-btn-ghost{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 16px;border-radius:9px;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--text);font-size:13px;font-weight:600;
  cursor:pointer;transition:all 0.15s;white-space:nowrap;font-family:'Inter',sans-serif;
}
.dash-btn-ghost:hover{border-color:rgba(200,255,0,0.3);color:var(--lime)}
.dash-btn-icon{padding:8px 10px}

/* ── Stats bar ── */
.dash-stats-bar{
  display:flex;align-items:center;
  padding:var(--sp3) var(--sp6) var(--sp5);
  max-width:1080px;
  margin:0 auto;
  width:100%;
}
.dash-stat{
  display:flex;flex-direction:column;align-items:flex-start;
  padding-right:var(--sp5);
  cursor:default;
}
.dash-stat + .dash-stat{
  padding-left:var(--sp5);
  border-left:1px solid var(--border);
}
.dash-stat-val{
  font-size:20px;font-weight:800;
  color:var(--text);line-height:1;
}
.dash-stat-key{
  font-size:10px;font-weight:500;
  color:var(--muted);text-transform:uppercase;
  letter-spacing:0.05em;margin-top:3px;
}
.dash-stat-div{display:none}
@media(max-width:480px){
  .dash-stat{padding-right:16px}
  .dash-stat + .dash-stat{padding-left:16px}
  .dash-stat-val{font-size:17px}
  .dash-stat-key{font-size:9px;letter-spacing:0.04em}
}

/* ── Tabs ── */
.dash-tabs-wrap{
  position:sticky;top:52px;z-index:40;
  background:rgba(10,10,15,0.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:none;
}
.dash-tabs{
  display:flex;max-width:1080px;margin:0 auto;
  padding:0 clamp(16px,4vw,48px);
  overflow-x:auto;scrollbar-width:none;
}
.dash-tabs::-webkit-scrollbar{display:none}
.dash-tab{
  flex-shrink:0;padding:13px 16px;font-size:13px;font-weight:600;
  color:var(--muted);cursor:pointer;position:relative;
  background:none;border:none;font-family:'Inter',sans-serif;
  transition:color 0.15s;white-space:nowrap;
}
.dash-tab:hover{color:var(--text)}
.dash-tab.active{color:var(--text)}
.dash-tab.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--lime);border-radius:2px 2px 0 0;
}
@media(max-width:480px){.dash-tab{padding:11px 12px;font-size:12px}}

/* ── Dashboard body ── */
.dash-body{
  max-width:1080px;margin:0 auto;padding:24px clamp(16px,4vw,48px) 100px;
  display:grid;grid-template-columns:minmax(210px,240px) minmax(0,1fr);gap:28px;align-items:start;
}
.dash-desktop-sidebar{position:sticky;top:76px;display:flex;flex-direction:column;gap:8px;min-width:0;width:220px;flex-shrink:0;padding-top:var(--sp5)}
.dash-desktop-main{min-width:0}
.ds-nav-label{font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.ds-nav-divider{height:1px;background:var(--border);margin:8px 0}
.ds-nav-btn {
  display: flex; align-items: center; gap: var(--sp2);
  height: 40px; padding: 0 var(--sp3);
  border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--muted); cursor: pointer; background: none;
  border: none; width: 100%; text-align: left; transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.ds-nav-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.ds-nav-btn.active {
  background: rgba(200,255,0,0.06); color: var(--lime);
  border-left: 3px solid var(--lime);
  padding-left: calc(var(--sp3) - 3px);
}
.dash-tab-panel{display:none}
.dash-tab-panel.active{display:block}

/* ── Section heads ── */
.dash-section-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;
}
.dash-section-title{
  font-family:'Inter',sans-serif;font-size:15px;font-weight:800;
  color:var(--text);display:flex;align-items:center;gap:8px;
}
.dash-section-more{
  font-size:12px;color:var(--lime);font-weight:600;
  background:none;border:none;cursor:pointer;font-family:inherit;
}

/* ── Quick actions grid ── */
.dash-quick-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp3);
  margin-bottom:var(--sp6);
}
@media(max-width:480px){.dash-quick-grid{grid-template-columns:repeat(2,1fr)}}
.dash-quick-card{
  padding:20px 14px 16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;transition:all 0.22s;text-align:center;
  position:relative;overflow:hidden;
}
.dash-quick-card::before{
  content:'';position:absolute;inset:0;opacity:0;
  transition:opacity 0.2s;
}
.dash-quick-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,0.4)}
.dash-quick-card:hover::before{opacity:1}
.dqc-watchlist{border-color:rgba(123,94,167,0.18)}
.dqc-watchlist .dqc-icon{color:var(--purple);background:rgba(123,94,167,0.12)}
.dqc-watchlist::before{background:radial-gradient(ellipse at top,rgba(123,94,167,0.08),transparent 70%)}
.dqc-watchlist:hover{border-color:rgba(123,94,167,0.3)}
.dqc-prefs::before{background:radial-gradient(ellipse at top,rgba(0,180,255,0.07),transparent 70%)}
.dqc-prefs:hover{border-color:rgba(0,180,255,0.25)}
.dqc-pro::before{background:radial-gradient(ellipse at top,rgba(255,215,0,0.07),transparent 70%)}
.dqc-pro:hover{border-color:rgba(255,215,0,0.25)}
.dqc-icon{font-size:28px;margin-bottom:8px;position:relative;z-index:1}
.dqc-title{font-family:'Inter',sans-serif;font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px;position:relative;z-index:1}
.dqc-sub{font-size:11px;color:var(--muted);position:relative;z-index:1;line-height:1.4}

/* ── Insights grid ── */
.dash-insights-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;margin-bottom:28px;
}
.dash-insight-card{
  padding:16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);
  position:relative;overflow:hidden;
}
.dash-insight-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--lime));opacity:0.6;
}
.dic-val{
  font-family:'Inter',sans-serif;font-size:22px;font-weight:800;
  color:var(--lime);margin-bottom:4px;
}
.dic-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.dic-icon{font-size:18px;margin-bottom:8px;display:block}

/* ── Activity list ── */
.dash-activity-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.dash-activity-item:last-child{border-bottom:none}
.dai-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border);
}
.dai-body{flex:1;min-width:0}
.dai-text{font-size:13px;color:var(--text);margin-bottom:2px;line-height:1.4}
.dai-time{font-size:11px;color:var(--muted)}

/* ── Series header ── */
.dash-series-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:20px;flex-wrap:wrap;gap:10px;
}

/* ── Settings list ── */
.dash-settings-list{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;margin-bottom:24px;
}
.dash-setting-row{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;cursor:pointer;transition:background 0.15s;
  border-bottom:1px solid var(--border);
}
.dash-setting-row:last-child{border-bottom:none}
.dash-setting-row:hover{background:rgba(255,255,255,0.03)}
.dash-setting-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center}
.dash-setting-body{flex:1;min-width:0}
.dash-setting-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.dash-setting-sub{font-size:12px;color:var(--muted)}
.dash-setting-danger .dash-setting-title{color:var(--accent3)}
.dash-setting-danger:hover{background:rgba(255,107,107,0.04)}

/* ── PROFILE MOBILE RESPONSIVE ── */
@media(max-width:768px){

  /* Cover — minimal height */
  .dash-cover{height:96px}
  .dash-cover-edit-btn{display:none}
  .dash-cover:hover .dash-cover-edit-btn{display:none}

  /* Identity wrap */
  .dash-identity-wrap{padding:0 16px;background:var(--bg);border-bottom:1px solid rgba(255,255,255,0.06)}

  /* Identity row: avatar | name+handle | actions */
  .dash-identity{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    align-items:flex-end;gap:12px;padding:0 0 14px;
  }
  .dash-avi-wrap{margin-top:-32px;flex-shrink:0}
  .dash-avi{width:66px!important;height:66px!important;font-size:18px!important;border-width:3px!important}
  .dash-avi-edit{width:20px;height:20px}

  /* Name block */
  .dash-identity-body{flex:1;min-width:0;overflow:hidden;padding-top:8px}
  .dash-name-row{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;margin-bottom:2px}
  .dash-name{font-size:16px!important;font-weight:800;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash-verified{width:14px;height:14px;flex-shrink:0}
  .dash-plan-badge{display:none!important}
  .dash-handle{font-size:11px;color:rgba(255,255,255,0.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash-bio{display:none}

  /* Actions — compact pills */
  .dash-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;align-items:flex-end;flex-shrink:0}
  .dash-btn-primary{padding:8px 14px;font-size:11px;font-weight:700;gap:4px;border-radius:100px!important}
  .dash-btn-ghost{padding:8px 10px;font-size:11px;gap:0;border-radius:100px!important}
  .dash-btn-ghost svg{display:block}
  /* Hide text inside ghost buttons — icon only on mobile */
  .dash-btn-ghost > span.btn-label{display:none}
  .dash-btn-icon{padding:8px 9px}

  /* ── Stats bar: flat row on mobile ── */
  .dash-stats-bar{padding:12px 16px 16px}
  .dash-stat{padding-right:14px}
  .dash-stat + .dash-stat{padding-left:14px;border-left:1px solid var(--border)}
  .dash-stat-val{font-size:18px}
  .dash-stat-key{font-size:9px;letter-spacing:0.04em}

  /* ── Tabs: sticky, no overflow ── */
  .dash-tabs-wrap{display:block;top:56px;background:rgba(10,10,15,0.99)}
  .dash-tabs{padding:0 16px;gap:0;overflow-x:auto}
  .dash-tab{padding:12px 13px;font-size:12px;font-weight:500;flex-shrink:0;white-space:nowrap}
  .dash-tab.active{font-weight:700}
  .dash-tab.active::after{height:2px}

  /* ── Body padding ── */
  .dash-body{display:block;padding:16px 16px 100px}
  .dash-desktop-sidebar{display:none}
  .dash-section-head{margin-bottom:12px}
  .dash-section-title{font-size:13px;font-weight:700}

  /* ── Quick actions: 3-column ── */
  .dash-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
  .dash-quick-card{
    padding:16px 6px 12px;border-radius:16px;
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .dqc-icon{font-size:20px;margin-bottom:6px}
  .dqc-title{font-size:10px;font-weight:600;line-height:1.3;color:var(--text)}
  .dqc-sub{display:none}

  /* ── Insights: 3-column ── */
  .dash-insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
  .dash-insight-card{padding:12px 8px;border-radius:14px;text-align:center}
  .dic-icon{font-size:16px;margin-bottom:4px;display:block}
  .dic-val{font-size:19px;font-weight:800;margin-bottom:2px}
  .dic-label{font-size:9px;letter-spacing:0.3px;text-transform:uppercase}

  /* ── Continue watching row ── */
  #dash-cw-section{margin-bottom:20px}
  #dash-cw-row{padding:0}
  #dash-cw-row .cw-card{min-width:140px}

  /* ── Series grid: 2-column ── */
  .series-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:var(--sp3)!important}
  .dash-series-header{margin-bottom:16px;flex-wrap:nowrap}

  /* ── Activity list ── */
  .dash-activity-item{padding:10px 0;gap:10px}
  .dai-icon{width:32px;height:32px;font-size:14px;border-radius:8px}
  .dai-text{font-size:12px}
  .dai-time{font-size:10px}

  /* ── Settings list ── */
  .dash-settings-list{border-radius:16px;overflow:hidden;margin-bottom:20px}
  .dash-setting-row{padding:13px 14px;gap:12px}
  .dash-setting-icon{font-size:16px;width:24px;flex-shrink:0}
  .dash-setting-title{font-size:13px;font-weight:600}
  .dash-setting-sub{font-size:11px;line-height:1.4}

  /* ── Crew grid ── */
  .crew-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px}
  .crew-profile-card{padding:14px 8px 12px;border-radius:14px}
  .cpc-avi{width:44px;height:44px;font-size:14px;margin-bottom:8px}
  .cpc-name{font-size:11px}
  .cpc-role{font-size:9px}

  /* ── Pricing on mobile ── */
  .plans-grid{grid-template-columns:1fr!important;max-width:380px;margin:0 auto;padding:0 16px 60px!important;gap:14px!important}
  .plan{padding:24px 20px}
}

@media(max-width:380px){
  .dash-name{font-size:14px!important}
  .dash-avi{width:58px!important;height:58px!important;font-size:16px!important}
  .dash-avi-wrap{margin-top:-28px}
  .dash-stat-val{font-size:16px!important}
  .dash-btn-primary{padding:7px 11px;font-size:10px}
  .dash-btn-ghost{padding:7px 9px}
  .dash-tab{padding:11px 10px;font-size:11px}
  .dqc-title{font-size:9px}
  .dic-val{font-size:17px}
  .crew-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* ═══════════════════════════════════════════════════════════
   WEB DESKTOP UI OVERHAUL
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .sidebar-toggle, #sidebar-toggle-btn, .hamburger-btn, [data-sidebar-toggle] {
    display: none !important;
  }
}
@media(min-width:769px){
  nav#main-nav{padding:0 clamp(28px,4vw,64px)}
  .page{margin-top:52px}
  html body #page-home{margin-top:0!important;padding-top:0!important}
  .content-row{margin-bottom:28px}
  .row-header{padding:0 clamp(28px,4vw,64px);margin-bottom:12px}
  .row-title{font-size:14px;font-weight:700;letter-spacing:-0.01em}
  .row-more{font-size:11px;font-weight:600;color:var(--accent);opacity:0.7;transition:opacity 0.15s;letter-spacing:0.02em}
  .row-more:hover{opacity:1}
  .row-scroll{padding:4px clamp(28px,4vw,64px) 20px;gap:var(--sp3)}
  .nf-card{width:clamp(145px,11vw,185px)}
  .feed-header{padding:20px clamp(28px,4vw,64px) 4px}
  .disc-content-area{padding:20px 28px 60px}
  .disc-hero{padding:36px 32px 32px}
  .srp-hero{top:52px!important;padding:12px clamp(28px,4vw,64px) 0}
  .srp-body{padding:20px clamp(28px,4vw,64px) 80px}
  .dash-cover{height:210px}
  .dash-identity-wrap{padding:0 clamp(28px,4vw,48px)}
  .dash-stats-bar{padding:var(--sp3) clamp(28px,4vw,48px) var(--sp5)}
}
@media(min-width:1280px){
  .row-header{padding:0 clamp(40px,5vw,80px)}
  .row-scroll{padding:4px clamp(40px,5vw,80px) 20px}
  .nf-card{width:clamp(165px,10vw,200px)}
  .feed-header{padding:20px clamp(40px,5vw,80px) 4px}
  .srp-body{max-width:1200px}
}

/* Home sidebar — appears only on very wide screens */
.home-sidebar{display:none}
@media(min-width:1024px){
  #home-rows{max-width:none}
  .home-sidebar{display:block!important;width:260px;flex-shrink:0;padding:20px 0 20px 0;position:sticky;top:calc(52px + 44px);height:calc(100vh - 96px);overflow-y:auto;border-left:1px solid rgba(255,255,255,0.05)}
  .sidebar-widget{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:16px;margin-bottom:12px}
  .sidebar-widget-title{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.28);margin-bottom:12px}
  .sidebar-trend-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:all 0.15s}
  .sidebar-trend-item:last-child{border-bottom:none}
  .sidebar-trend-item:hover .sidebar-trend-title{color:var(--accent)}
  .sidebar-trend-num{font-size:10px;font-weight:700;color:rgba(255,255,255,0.18);width:16px;text-align:right;flex-shrink:0}
  .sidebar-trend-title{font-size:12px;font-weight:500;color:rgba(255,255,255,0.65);transition:color 0.15s;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar-trend-cat{font-size:9px;color:rgba(255,255,255,0.25);flex-shrink:0;text-transform:capitalize}
  .sidebar-creator-item{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;transition:all 0.15s}
  .sidebar-creator-item:hover .sidebar-creator-name{color:var(--accent)}
  .sidebar-creator-avi{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#1a2200,#0f1a00);border:1.5px solid rgba(200,255,0,0.25);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--accent)}
  .sidebar-creator-name{font-size:12px;font-weight:500;color:rgba(255,255,255,0.65);flex:1;transition:color 0.15s}
  .sidebar-creator-count{font-size:10px;color:rgba(255,255,255,0.25)}
}

/* ── Discover sort — segmented control ── */
.disc-sort-seg{
  display:flex;align-items:center;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:100px;
  padding:3px;
  gap:2px;
}
.disc-sort-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:100px;
  font-size:12px;font-weight:600;
  background:transparent;border:none;
  color:rgba(255,255,255,0.45);
  cursor:pointer;transition:all 0.18s;
  white-space:nowrap;font-family:'Inter',sans-serif;
  letter-spacing:0.01em;
}
.disc-sort-pill:hover{color:rgba(255,255,255,0.75)}
.disc-sort-pill.active{
  background:#fff;color:#0a0a0f;
  box-shadow:0 1px 6px rgba(0,0,0,0.35);
  font-weight:700;
}
.disc-sort-pill svg{flex-shrink:0;transition:stroke 0.15s}
.disc-sort-pill.active svg{stroke:#0a0a0f}
@media(max-width:480px){
  .disc-sort-pill{padding:5px 11px;font-size:11px}
  .disc-sort-seg{padding:2px}
}

/* ── Search page — flush to nav on all viewports ── */
#page-home{margin-top:0!important;padding-top:0!important}
.srp-hero{box-shadow:0 1px 0 0 rgba(255,255,255,0.06)}

/* ── Typography — global Inter refinements ── */
/* Card titles */
.nf-card-title-text,.disc-card-title,.srp-card-title,.detail-title{
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  font-feature-settings:'cv02','cv04';
}
/* Sub labels, meta, handles */
.nf-card-meta,.disc-card-meta,.srp-card-meta,.srp-card-stats,
.dash-handle,.cpc-name,.cpc-role,.sidebar-trend-title,
.srp-list-meta,.asr-sub,.asr-streak,.dai-text,.dai-time,
.srp-section-label,.srp-filter-label{
  font-family:'Inter',sans-serif;
  font-feature-settings:'cv02';
}
/* Row titles — sharper */
.row-title{
  font-family:'Inter',sans-serif!important;
  font-weight:700!important;
  font-size:13px!important;
  letter-spacing:-0.02em!important;
  line-height:1.3!important;
}
/* Section labels */
.dash-section-title,.disc-section-label{
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}
/* Buttons — consistent Inter */
.disc-sticky-pill,.srp-chip,.genre-pill,.ip-chip{
  font-family:'Inter',sans-serif!important;
  font-weight:600;
  letter-spacing:0;
}
/* Small caps / labels */
.plan-tier,.feed-signal-pill,.srp-filter-label,.ds-label,
.disc-hero-badge,.ip-step-pill,.fu-step-label,.co-step-label{
  font-family:'Inter',sans-serif;
  letter-spacing:0.04em;
}

/* PHASE 5 RESPONSIVE AUDIT FINAL OVERRIDES */
#page-home .content-row,
#page-home .home-section,
#page-home #home-content-row,
#page-home #home-cta,
#page-home #home-footer,
#page-discover .disc-layout,
#page-pricing .pricing-hero,
#page-pricing .plans-grid,
#page-notifications .ntf-header,
#page-notifications .ntf-tabs,
#page-notifications .ntf-body{
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

#page-discover .disc-layout{
  grid-template-columns:220px minmax(0,1fr);
}
.disc-main{min-width:0}
.disc-sort-bar,
.disc-bar,
.disc-sort,
.disc-sort-seg{
  min-width:0;
}
.disc-sort-bar,
.disc-bar{
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--sp2);
}
.disc-sort-bar::-webkit-scrollbar,
.disc-bar::-webkit-scrollbar{display:none}
.disc-info-count{flex-shrink:0}
.disc-sort{flex-shrink:0}

.plans-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:var(--sp5)!important;
  max-width:900px!important;
  padding:0 var(--sp5) var(--sp8)!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}
.plan{scroll-snap-align:unset}

.ntf-item{
  padding:var(--sp4) 0;
  gap:var(--sp3);
}

.modal{
  max-height:90dvh!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.modal-x,
.wiz-close{
  min-width:44px;
  min-height:44px;
}

.now-playing-pill{
  top:calc(52px + env(safe-area-inset-top,0px))!important;
}

@media(min-width:1024px){
  .now-playing-pill{
    top:calc(60px + env(safe-area-inset-top,0px))!important;
  }
}

@media(max-width:1023px){
  #page-discover .disc-layout{
    display:block;
    max-width:var(--container);
  }
  .disc-sidebar{display:none!important}
  .disc-main{
    width:100%!important;
    padding-left:0!important;
  }
  .disc-grid{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;
  }
}

@media(max-width:768px){
  .mobile-nav{
    padding-bottom:calc(var(--sp2) + env(safe-area-inset-bottom,0px))!important;
    min-height:calc(60px + env(safe-area-inset-bottom,0px))!important;
  }
  .page{
    padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;
  }
  #page-home{padding-bottom:0!important}
  .fh-title,.feat-title{
    font-size:clamp(18px,5vw,28px)!important;
    max-width:min(560px,calc(100vw - 32px));
  }
  .row-header,
  .nf-section-head,
  .row-label{
    padding-left:var(--sp4)!important;
    padding-right:var(--sp4)!important;
  }
  .plans-grid{
    grid-template-columns:1fr!important;
    max-width:440px!important;
    gap:var(--sp4)!important;
    padding:0 var(--sp4) var(--sp7)!important;
  }
  .plan.featured{order:0}
}

@media(max-width:480px){
  .fh-btns{
    flex-direction:column!important;
    align-items:flex-start!important;
    flex-wrap:nowrap!important;
    gap:var(--sp2)!important;
  }
  .disc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .disc-bar{
    margin-left:calc(var(--sp4) * -1);
    margin-right:calc(var(--sp4) * -1);
    padding-left:var(--sp4);
    padding-right:var(--sp4);
  }
  .plan{padding:var(--sp5) var(--sp4)!important}
  .ntf-item{padding:var(--sp3) 0}
  .modal{
    width:calc(100vw - var(--sp6))!important;
    padding:var(--sp4)!important;
    border-radius:16px!important;
  }
  .wiz-steps{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:var(--sp2)!important;
    overflow:visible!important;
  }
  .wiz-step-item .wiz-slabel{
    display:inline!important;
    font-size:11px!important;
  }
  .wiz-sline{display:none!important}
}

@media(max-width:768px){
  #auth-modal.modal-overlay{
    align-items:center!important;
    justify-content:center!important;
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px))!important;
  }
  #auth-modal .modal{
    width:min(440px,calc(100vw - 28px))!important;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    border-radius:18px!important;
    padding:22px 18px!important;
  }
}

@media(max-width:380px){
  #auth-modal .modal{padding:18px 14px!important}
  #auth-modal .auth-type-card{padding:11px 8px}
  #auth-modal .modal-logo{margin-bottom:14px}
  #auth-modal .auth-tabs{margin-bottom:14px!important}
  #auth-modal .form-group{margin-bottom:10px}
}

body.theme-light .mobile-nav,
body.theme-light nav#main-nav,
body.theme-light .disc-sticky-bar,
body.theme-light .genre-filter-bar{
  background:rgba(255,255,255,0.94)!important;
  border-color:var(--border)!important;
}
/* Discover hero — hardcoded dark gradient is unreadable on light bg */
body.theme-light .disc-hero{
  background:linear-gradient(135deg,var(--surface) 0%,var(--card) 55%,var(--surface) 100%)!important;
  border-bottom-color:var(--border)!important;
}
body.theme-light .disc-hero-btn-ghost{
  background:rgba(0,0,0,0.06)!important;
  border-color:rgba(0,0,0,0.15)!important;
  color:var(--text)!important;
}
/* Pricing page — hardcoded white-transparent colors invisible on light bg */
body.theme-light .billing-toggle{
  background:rgba(0,0,0,0.05)!important;
  border-color:var(--border)!important;
}
body.theme-light .bill-btn{
  color:var(--muted)!important;
}
body.theme-light .bill-btn.active{
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:0 2px 8px rgba(0,0,0,0.12)!important;
}
body.theme-light .plan-btn.outline{
  border-color:var(--border2)!important;
  color:var(--text)!important;
}
/* Netflix Pure cards stay dark in light mode — text must stay white on dark gradient */
body.theme-light .nf-card,
body.theme-light .card,
body.theme-light .disc-card{background:#f0f0f0!important;border:none!important}
body.theme-light .nf-card-grad,
body.theme-light .card-grad,
body.theme-light .disc-card-grad,
body.theme-light .disc-card-thumb-overlay{background:linear-gradient(to top,rgba(240,240,240,0.95) 0%,rgba(240,240,240,0.55) 42%,rgba(240,240,240,0.12) 72%,transparent 100%)!important}
body.theme-light .nf-card-title-text,
body.theme-light .card-title,
body.theme-light .disc-card-title{color:#111!important}
body.theme-light .nf-card-meta-row,
body.theme-light .card-meta,
body.theme-light .disc-card-meta,
body.theme-light .nf-card-cat-text,
body.theme-light .nf-card-eps-text{color:rgba(0,0,0,0.55)!important}
body.theme-light .nf-card-rating,
body.theme-light .card-rating,
body.theme-light .disc-card-rating{color:#b8860b!important}
body.theme-light .pp-name{color:var(--muted)!important}
body.theme-light .plan{
  background:var(--surface)!important;
  border-color:var(--border)!important;
  box-shadow:0 18px 44px rgba(0,0,0,0.08);
}
body.theme-light .plan.featured{
  background:linear-gradient(160deg,rgba(245,255,220,0.95),var(--surface) 58%)!important;
}
body.theme-light .plan-tier,
body.theme-light .plan-features li,
body.theme-light .plan-price .mo,
body.theme-light .billing-toggle,
body.theme-light .pricing-hero p,
body.theme-light #page-pricing [style*="rgba(255,255,255"],
body.theme-light .disc-hero-sub,
body.theme-light .wiz-field input::placeholder,
body.theme-light .wiz-field textarea::placeholder{
  color:var(--muted)!important;
}
body.theme-light .plan-divider,
body.theme-light .feat-check{
  border-color:var(--border)!important;
  background:var(--card)!important;
}
body.theme-light .wiz-panel,
body.theme-light .wiz-item-card,
body.theme-light .wiz-review-block,
body.theme-light .wiz-field input,
body.theme-light .wiz-field textarea,
body.theme-light .wiz-field select,
body.theme-light .wiz-type-card{
  background:var(--surface)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
body.theme-light .modal{
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:0 24px 64px rgba(0,0,0,0.16)!important;
}

/* RESPONSIVE APP DRAWER NAV */
.nav-menu-btn{
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  border-radius:9px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.05);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.18s,border-color 0.18s,color 0.18s;
  flex-shrink:0;
  z-index:102;
}
.nav-menu-btn:hover,
.nav-menu-btn[aria-expanded="true"]{
  background:rgba(200,255,0,0.1);
  border-color:rgba(200,255,0,0.28);
  color:var(--lime);
}
.nav-menu-btn svg{width:18px;height:18px;stroke:currentColor}
.nav-links{display:none!important}
.nav-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:238;
  background:rgba(0,0,0,0.52);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease;
}
.nav-drawer-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.desktop-app-sidebar{
  position:fixed;
  top:calc(60px + env(safe-area-inset-top,0px));
  left:var(--sp4);
  bottom:var(--sp4);
  width:min(320px,calc(100vw - 32px));
  z-index:240;
  display:flex;
  flex-direction:column;
  gap:var(--sp3);
  padding:var(--sp4);
  border-radius:18px;
  background:rgba(18,18,28,0.96);
  border:1px solid var(--border2);
  box-shadow:0 28px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(200,255,0,0.04);
  backdrop-filter:blur(24px) saturate(1.15);
  -webkit-backdrop-filter:blur(24px) saturate(1.15);
  overflow-y:auto;
  overflow-x:hidden;
  transform:translateX(calc(-100% - 32px));
  opacity:0;
  pointer-events:none;
  transition:transform 0.24s cubic-bezier(0.22,1,0.36,1),opacity 0.18s ease;
  scrollbar-width:none;
}
.desktop-app-sidebar::-webkit-scrollbar{display:none}
.desktop-app-sidebar.open{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
.das-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp3);
  padding:var(--sp1) var(--sp1) var(--sp3);
  border-bottom:1px solid var(--border);
  margin-bottom:var(--sp1);
}
.das-brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.das-brand-title{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  letter-spacing:0;
}
.das-brand-sub{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.das-close{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  border-radius:9px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.05);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.18s,color 0.18s,border-color 0.18s;
}
.das-close:hover{
  background:rgba(255,255,255,0.1);
  border-color:var(--border2);
  color:var(--text);
}
.das-section{
  display:flex;
  flex-direction:column;
  gap:var(--sp2);
}
.das-divider{
  height:1px;
  background:var(--border);
  margin:var(--sp1) 0;
  flex-shrink:0;
}
.das-link{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:var(--sp3);
  padding:0 var(--sp3);
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:650;
  text-align:left;
  cursor:pointer;
  transition:background 0.18s,color 0.18s,border-color 0.18s,transform 0.18s;
}
.das-link svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:currentColor;
}
.das-link span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.das-link:hover{
  background:rgba(255,255,255,0.06);
  color:var(--text);
  border-color:var(--border);
}
.das-link.active{
  background:rgba(200,255,0,0.1);
  color:var(--lime);
  border-color:rgba(200,255,0,0.24);
}
.das-link:active{transform:scale(0.99)}
body.nav-drawer-open .featured-hero,
body.nav-drawer-open .page{
  transform:none!important;
}
body.theme-light .nav-drawer-backdrop{background:rgba(15,15,20,0.32)}
body.theme-light .desktop-app-sidebar{
  background:rgba(255,255,255,0.96);
  border-color:var(--border);
  box-shadow:0 28px 70px rgba(0,0,0,0.14);
}
body.theme-light .nav-menu-btn,
body.theme-light .das-close{
  background:rgba(0,0,0,0.04);
}
body.theme-light .das-link:hover{
  background:rgba(0,0,0,0.04);
}

/* Desktop layout regression recovery: restores the refined cinematic web structure. */
@media(min-width:769px){
  body{
    background:
      radial-gradient(ellipse 70% 45% at 50% -18%,rgba(123,94,167,0.08),transparent 62%),
      var(--bg)!important;
  }

  nav#main-nav{
    height:60px!important;
    padding:0 clamp(24px,3.4vw,56px)!important;
    gap:16px!important;
    background:rgba(8,8,13,0.86)!important;
    border-bottom:1px solid rgba(255,255,255,0.07)!important;
    backdrop-filter:blur(24px) saturate(1.2)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.2)!important;
  }
  .nav-menu-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:10px!important;
    background:rgba(255,255,255,0.045)!important;
    border:1px solid rgba(255,255,255,0.08)!important;
  }
  .logo{
    font-size:18px!important;
    letter-spacing:-0.03em!important;
    margin-right:clamp(10px,1.6vw,24px)!important;
  }
  .nav-links{
    display:none!important;
  }
  .nav-actions{
    gap:12px!important;
    margin-left:auto!important;
    align-items:center!important;
  }
  .nav-icon-btn,
  #theme-toggle-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:10px!important;
    background:rgba(255,255,255,0.045)!important;
    border:1px solid rgba(255,255,255,0.08)!important;
    color:rgba(242,242,248,0.72)!important;
  }
  .nav-icon-btn:hover,
  #theme-toggle-btn:hover,
  .nav-menu-btn:hover,
  .nav-menu-btn[aria-expanded="true"]{
    background:rgba(200,255,0,0.09)!important;
    border-color:rgba(200,255,0,0.22)!important;
    color:var(--lime)!important;
  }
  .nav-avatar{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    margin-left:2px!important;
    box-shadow:0 0 0 1px rgba(200,255,0,0.12),0 0 20px rgba(200,255,0,0.07);
  }
  .btn-signin,.btn-signup{
    height:38px!important;
    min-height:38px!important;
    border-radius:10px!important;
    padding:0 16px!important;
  }

  .desktop-app-sidebar{
    top:76px!important;
    left:clamp(18px,2.5vw,36px)!important;
    bottom:24px!important;
    width:288px!important;
    padding:18px!important;
    border-radius:18px!important;
    background:rgba(12,12,18,0.965)!important;
    border-color:rgba(255,255,255,0.09)!important;
    box-shadow:0 28px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(200,255,0,0.04)!important;
    transform:translateX(calc(-100% - 64px))!important;
  }
  .desktop-app-sidebar.open{transform:translateX(0)!important}
  .das-header{padding:0 0 14px!important;margin-bottom:4px!important}
  .das-brand-title{font-size:15px!important}
  .das-brand-sub{font-size:11px!important;line-height:1.35!important}
  .das-section{gap:8px!important}
  .das-link{
    min-height:42px!important;
    border-radius:11px!important;
    padding:0 12px!important;
    gap:11px!important;
    font-size:13px!important;
    font-weight:600!important;
  }
  .das-link.active{
    background:rgba(200,255,0,0.1)!important;
    border-color:rgba(200,255,0,0.24)!important;
    color:var(--lime)!important;
    box-shadow:inset 2px 0 0 rgba(200,255,0,0.72);
  }
  .nav-drawer-backdrop{
    background:rgba(0,0,0,0.42)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }

  .featured-hero{
    height:clamp(560px,68vh,760px)!important;
    min-height:560px!important;
    max-height:none!important;
    margin-top:-60px!important;
  }
  .fh-img{
    inset:-4%!important;
    background-position:center top!important;
  }
  .fh-vignette{
    background:
      radial-gradient(ellipse 58% 72% at 68% 36%,rgba(123,94,167,0.18),transparent 58%),
      linear-gradient(to top,rgba(8,8,13,0.98) 0%,rgba(8,8,13,0.72) 28%,rgba(8,8,13,0.26) 62%,rgba(8,8,13,0.08) 100%),
      linear-gradient(to right,rgba(8,8,13,0.82) 0%,rgba(8,8,13,0.55) 34%,rgba(8,8,13,0.16) 68%,transparent 100%)!important;
  }
  .fh-content{
    left:clamp(40px,7vw,104px)!important;
    right:auto!important;
    bottom:clamp(68px,10vh,116px)!important;
    width:min(610px,48vw)!important;
    max-width:610px!important;
    padding:0!important;
    background:none!important;
  }
  .fh-title{
    font-size:clamp(34px,4.3vw,58px)!important;
    line-height:1.02!important;
    letter-spacing:-0.04em!important;
    margin-bottom:14px!important;
  }
  .fh-desc{
    max-width:540px!important;
    font-size:15px!important;
    line-height:1.65!important;
    color:rgba(232,232,240,0.76)!important;
    margin-bottom:24px!important;
  }
  .fh-btns{gap:12px!important;align-items:center!important}
  .fh-btn-play,.fh-btn-info{
    height:44px!important;
    border-radius:11px!important;
  }
  .fh-controls{
    left:clamp(40px,7vw,104px)!important;
    right:auto!important;
    bottom:clamp(28px,4.5vh,44px)!important;
    gap:14px!important;
    padding:8px 10px!important;
    border-radius:999px!important;
    background:rgba(8,8,13,0.42)!important;
    border:1px solid rgba(255,255,255,0.09)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
  .fh-dots{gap:7px!important}
  .fh-dot{width:7px!important;height:7px!important;background:rgba(255,255,255,0.28)!important}
  .fh-dot.active{width:24px!important;background:var(--lime)!important}
  .fh-nav{gap:7px!important}
  .fh-nav-btn{
    width:34px!important;
    height:34px!important;
    border-radius:50%!important;
    background:rgba(255,255,255,0.08)!important;
    border-color:rgba(255,255,255,0.12)!important;
  }

  #home-rows{
    width:100%!important;
    max-width:none!important;
    padding-top:10px!important;
  }
  #page-home .content-row{
    max-width:none!important;
    margin:0 0 34px!important;
  }
  .content-row .row-header,
  .row-header{
    padding-left:clamp(32px,5vw,80px)!important;
    padding-right:clamp(32px,5vw,80px)!important;
    margin-bottom:14px!important;
  }
  .row-title{
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.25!important;
  }
  .row-scroll{
    gap:14px!important;
    padding:4px clamp(32px,5vw,80px) 22px!important;
    scroll-padding-left:clamp(32px,5vw,80px);
  }
  .row-scroll::after{min-width:clamp(14px,2vw,28px)!important}
  .nf-card,.nf-card-skel{
    width:clamp(154px,11.2vw,196px)!important;
    border-radius:14px!important;
    background:#141414!important;
  }
  .nf-card-thumb{border-radius:0!important}
  .nf-card-body{padding:9px 11px 12px!important;gap:5px!important}
  .nf-card-title-text{
    font-size:13.5px!important;
    font-weight:680!important;
    line-height:1.28!important;
  }
  .nf-card-meta-row{gap:7px!important;font-size:11px!important}
  .nf-card-rating,.nf-card-cat-text,.nf-card-eps-text{font-size:10px!important}
  .nf-card:hover{
    transform:translateY(-5px)!important;
    box-shadow:0 0 0 1px rgba(200,255,0,0.22),0 22px 54px rgba(0,0,0,0.58),0 0 34px rgba(123,94,167,0.1)!important;
  }
  /* sidebar hidden on tablet (769–1023px); display:block!important at min-width:1024px wins above */

  #page-discover .disc-layout{
    max-width:min(1440px,calc(100vw - 48px))!important;
    width:100%!important;
    margin:0 auto!important;
    grid-template-columns:minmax(190px,216px) minmax(0,1fr)!important;
    gap:24px!important;
    min-height:calc(100vh - 60px)!important;
  }
  .disc-sidebar{
    top:76px!important;
    height:calc(100vh - 92px)!important;
    padding:20px 10px 28px 0!important;
    border-right:1px solid rgba(255,255,255,0.07)!important;
  }
  .ds-btn{
    min-height:40px!important;
    padding:0 12px!important;
    border-radius:10px!important;
    font-size:13px!important;
    gap:10px!important;
  }
  .disc-main{
    min-width:0!important;
    overflow:visible!important;
  }
  .disc-content-area{
    padding:28px 0 70px!important;
  }
  .disc-hero{
    margin-bottom:24px!important;
    border-radius:18px!important;
    padding:36px clamp(28px,3.2vw,46px)!important;
  }
  .disc-bar,.disc-sort-bar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
    padding-bottom:0!important;
    margin-bottom:20px!important;
  }
  #disc-info{
    flex:1 1 260px!important;
    min-width:0!important;
  }
  .disc-sort{
    flex:0 0 auto!important;
    margin-left:auto!important;
  }
  .disc-sort-seg{
    border-radius:999px!important;
    padding:4px!important;
    background:rgba(255,255,255,0.055)!important;
    border:1px solid rgba(255,255,255,0.09)!important;
  }
  .disc-sort-pill{
    min-height:34px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    font-size:12px!important;
  }
  .disc-grid{
    grid-template-columns:repeat(auto-fill,minmax(168px,1fr))!important;
    gap:16px!important;
    align-items:start!important;
  }
  .disc-card{
    border-radius:14px!important;
    background:rgba(255,255,255,0.034)!important;
    border:1px solid rgba(255,255,255,0.055);
    box-shadow:0 12px 32px rgba(0,0,0,0.24);
  }
  .disc-card.disc-card-wide{
    grid-column:span 2!important;
  }
  .disc-card-wide .disc-card-thumb{
    aspect-ratio:21/9!important;
  }
  .disc-card-body{padding:10px 12px 12px!important}
  .disc-card-title{font-size:13.5px!important;font-weight:680!important;line-height:1.25!important}
  .disc-card-meta{font-size:11px!important}
  .disc-card-stats{font-size:10.5px!important;gap:8px!important}
}

@media(min-width:769px) and (max-width:1180px){
  nav#main-nav{padding:0 24px!important}
  .btn-signup{padding:0 14px!important}
  .featured-hero{
    height:clamp(520px,62vh,680px)!important;
    min-height:520px!important;
  }
  .fh-content{
    left:40px!important;
    width:min(560px,58vw)!important;
    bottom:74px!important;
  }
  .fh-title{font-size:clamp(30px,4.6vw,46px)!important}
  .fh-controls{left:40px!important;bottom:28px!important}
  .row-header,
  .content-row .row-header,
  .row-scroll{
    padding-left:32px!important;
    padding-right:32px!important;
  }
  .nf-card,.nf-card-skel{width:148px!important}
  #page-discover .disc-layout{
    max-width:calc(100vw - 32px)!important;
    grid-template-columns:188px minmax(0,1fr)!important;
    gap:18px!important;
  }
  .disc-grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;
    gap:14px!important;
  }
  .disc-card.disc-card-wide{grid-column:auto!important}
  .disc-card-wide .disc-card-thumb{aspect-ratio:2/3!important}
}

@media(min-width:1440px){
  nav#main-nav{padding-left:64px!important;padding-right:64px!important}
  .featured-hero{height:min(76vh,820px)!important}
  .fh-content{left:max(84px,calc((100vw - 1320px)/2 + 24px))!important}
  .fh-controls{left:max(84px,calc((100vw - 1320px)/2 + 24px))!important}
  .row-header,
  .content-row .row-header,
  .row-scroll{
    padding-left:max(64px,calc((100vw - 1440px)/2 + 64px))!important;
    padding-right:max(64px,calc((100vw - 1440px)/2 + 64px))!important;
  }
  .nf-card,.nf-card-skel{width:190px!important}
  .disc-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))!important}
}

@media(max-width:768px){
  .desktop-app-sidebar{
    top:calc(52px + env(safe-area-inset-top,0px));
    left:0;
    bottom:0;
    width:min(86vw,340px);
    border-radius:0 18px 18px 0;
    padding:var(--sp4) var(--sp4) calc(var(--sp5) + env(safe-area-inset-bottom,0px));
    transform:translateX(-102%);
  }
  .nav-drawer-backdrop{
    background:rgba(0,0,0,0.58);
  }
  .nav-menu-btn{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
  }
}

@media(max-width:420px){
  .desktop-app-sidebar{
    width:min(92vw,340px);
  }
  .das-brand-sub{max-width:190px}
}

/* Mobile UI regression recovery: restore the refined cinematic system without touching app logic. */
@media(max-width:768px){
  :root{
    --r-card:12px;
  }

  nav#main-nav{
    height:56px!important;
    padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px))!important;
    gap:10px!important;
    background:rgba(7,7,11,0.94)!important;
    border-bottom:1px solid rgba(255,255,255,0.07)!important;
    backdrop-filter:blur(24px) saturate(1.25)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.25)!important;
  }
  .nav-menu-btn,
  .nav-icon-btn,
  #theme-toggle-btn,
  .nav-avatar{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:10px!important;
  }
  .nav-menu-btn,
  .nav-icon-btn,
  #theme-toggle-btn{
    background:rgba(255,255,255,0.045)!important;
    border:1px solid rgba(255,255,255,0.08)!important;
    color:rgba(242,242,248,0.72)!important;
  }
  .logo{
    font-size:17px!important;
    letter-spacing:-0.025em!important;
    margin-right:auto!important;
    min-width:0;
  }
  .nav-actions{
    gap:10px!important;
    margin-left:0!important;
    align-items:center!important;
  }
  .nav-bell{margin-left:2px!important}
  .nav-avatar{
    margin-left:4px!important;
    border-radius:50%!important;
    border-color:rgba(200,255,0,0.78)!important;
    background:rgba(200,255,0,0.1)!important;
    box-shadow:0 0 0 1px rgba(200,255,0,0.1);
  }
  .btn-signin,.btn-signup{
    min-height:38px!important;
    border-radius:10px!important;
    padding:0 13px!important;
  }

  .nav-drawer-backdrop{
    background:rgba(0,0,0,0.56)!important;
    backdrop-filter:blur(14px) saturate(1.15)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.15)!important;
  }
  .desktop-app-sidebar{
    top:calc(56px + env(safe-area-inset-top,0px))!important;
    width:min(82vw,304px)!important;
    padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px))!important;
    gap:12px!important;
    border-radius:0 16px 16px 0!important;
    background:rgba(12,12,18,0.965)!important;
    border-color:rgba(255,255,255,0.09)!important;
    box-shadow:24px 0 70px rgba(0,0,0,0.54), inset -1px 0 0 rgba(200,255,0,0.04)!important;
    transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),opacity 0.2s ease!important;
  }
  .das-header{padding:0 0 12px!important;margin-bottom:2px!important}
  .das-brand-title{font-size:15px!important}
  .das-brand-sub{font-size:10.5px!important;line-height:1.35;max-width:210px}
  .das-section{gap:7px!important}
  .das-link{
    min-height:42px!important;
    border-radius:11px!important;
    padding:0 12px!important;
    gap:10px!important;
    font-size:12.5px!important;
    font-weight:600!important;
  }
  .das-link svg{width:17px!important;height:17px!important}

  .content-row{margin-bottom:34px!important}
  .row-header,.content-row .row-header{
    padding:0 16px!important;
    margin-bottom:12px!important;
  }
  .row-title{
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.25!important;
  }
  .row-more{font-size:10px!important;letter-spacing:.04em!important}
  .row-scroll{
    gap:12px!important;
    padding:4px 16px 16px!important;
    scroll-padding-left:16px;
    overscroll-behavior-x:contain;
  }
  .row-scroll::after{min-width:10px!important}
  .nf-card,
  .nf-card-skel{
    width:132px!important;
    border-radius:12px!important;
    background:#141414!important;
  }
  .nf-card-thumb{border-radius:0!important}
  .nf-card-body{padding:8px 9px 10px!important;gap:4px!important}
  .nf-card-title-text,.nf-card-title{
    font-size:12.5px!important;
    font-weight:650!important;
    line-height:1.28!important;
  }
  .nf-card-meta-row{gap:5px!important;font-size:10.5px!important}
  .nf-card-rating,.nf-card-cat-text,.nf-card-eps-text{font-size:9px!important}
  .nf-card-badge{
    top:7px!important;
    left:7px!important;
    padding:3px 7px!important;
    font-size:8px!important;
    background:rgba(12,12,18,0.64)!important;
    border-color:rgba(200,255,0,0.22)!important;
    backdrop-filter:blur(10px);
  }

  #page-discover .disc-layout,
  .disc-content-area,
  .disc-main{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .disc-filter-chips,
  .disc-bar,
  .disc-sort-bar,
  .srp-filters{
    margin-left:-14px!important;
    margin-right:-14px!important;
    padding-left:14px!important;
    padding-right:14px!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .disc-filter-chips::-webkit-scrollbar,
  .disc-bar::-webkit-scrollbar,
  .disc-sort-bar::-webkit-scrollbar,
  .srp-filters::-webkit-scrollbar{display:none}
  .disc-chip,.disc-sticky-pill,.disc-sort-pill,.srp-chip{
    min-height:36px!important;
    border-radius:999px!important;
    padding:0 13px!important;
    font-size:12px!important;
    white-space:nowrap!important;
    flex:0 0 auto!important;
  }
  .disc-grid{
    gap:13px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .disc-card,
  .srp-card{
    border-radius:12px!important;
    background:rgba(255,255,255,0.035)!important;
    border:1px solid rgba(255,255,255,0.055);
    box-shadow:0 10px 28px rgba(0,0,0,0.25);
  }
  .disc-card.disc-card-wide{grid-column:auto!important}
  .disc-card-wide .disc-card-thumb{aspect-ratio:2/3!important}
  .disc-card-body,.srp-card-body{padding:9px 10px 10px!important}
  .disc-card-title,.srp-card-title{
    font-size:12.5px!important;
    line-height:1.25!important;
    font-weight:650!important;
  }
  .disc-card-meta,.srp-card-meta{font-size:10.5px!important}
  .disc-card-stats,.srp-card-stats{font-size:10px!important;gap:7px!important;overflow:hidden}

  #page-home{padding-top:56px!important}
  .srp-hero{
    top:56px!important;
    padding:12px 14px 2px!important;
    background:rgba(7,7,11,0.96)!important;
    backdrop-filter:blur(22px) saturate(1.2)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.2)!important;
  }
  .srp-input-wrap{
    min-height:46px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,0.055)!important;
    border-color:rgba(255,255,255,0.1)!important;
  }
  .srp-body{padding:18px 14px calc(86px + env(safe-area-inset-bottom,0px))!important}
  #srp-results{padding:14px 0 34px!important}
  .srp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important}
  .srp-trending-chips,.srp-creators-scroll{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;scrollbar-width:none}
  .srp-trending-chips::-webkit-scrollbar,.srp-creators-scroll::-webkit-scrollbar{display:none}
  .srp-trending-chip,.srp-creator-chip{flex:0 0 auto}

  .dash-cover{
    height:190px!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
  }
  .prof-cover-img{
    object-fit:cover!important;
    object-position:center!important;
    background-repeat:no-repeat!important;
  }
  .dash-cover-edit-btn{
    right:14px!important;
    bottom:14px!important;
    min-height:34px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    font-size:11px!important;
    background:rgba(7,7,11,0.64)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  .dash-identity-wrap{padding:0 16px!important}
  .dash-identity{
    gap:12px!important;
    align-items:flex-start!important;
  }
  .dash-avi-wrap{margin-top:-34px!important}
  .dash-avi{
    width:70px!important;
    height:70px!important;
    border-width:3px!important;
    font-size:20px!important;
    box-shadow:0 0 0 4px rgba(7,7,11,0.9),0 0 28px rgba(200,255,0,0.12);
  }
  .dash-name-row{gap:7px!important;align-items:center!important;flex-wrap:wrap!important}
  .dash-name{font-size:19px!important;line-height:1.12!important}
  .dash-handle{font-size:12px!important;line-height:1.45!important}
  .dash-bio{font-size:12.5px!important;line-height:1.55!important;margin-top:8px!important}
  .dash-actions{
    width:100%!important;
    margin-top:12px!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }
  .dash-actions .dash-btn-primary{
    flex:1 1 128px!important;
    justify-content:center!important;
  }
  .dash-actions .dash-btn-ghost,
  .dash-actions .dash-btn-icon,
  .dash-actions #prof-studio-btn{
    flex:0 0 auto!important;
  }
  .dash-stats-bar{
    padding:14px 16px 18px!important;
    gap:10px!important;
    overflow-x:auto!important;
    scrollbar-width:none;
  }
  .dash-stats-bar::-webkit-scrollbar{display:none}
  .dash-stat{min-width:68px!important}
  .dash-stat-val{font-size:18px!important}
  .dash-stat-key{font-size:9.5px!important}
  .dash-tabs-wrap{padding:0 0 0 16px!important}
  .dash-tabs{
    gap:6px!important;
    overflow-x:auto!important;
    padding:0 16px 10px 0!important;
    scrollbar-width:none;
  }
  .dash-tabs::-webkit-scrollbar{display:none}
  .dash-tab{
    flex:0 0 auto!important;
    min-height:38px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    font-size:12px!important;
  }
  .dash-body,.dash-desktop-main{padding-left:16px!important;padding-right:16px!important}
  .creator-studio-banner{
    padding:16px!important;
    border-radius:14px!important;
  }
  .csb-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .csb-actions{gap:8px!important;flex-wrap:wrap!important}
  .csb-btn{min-height:38px!important;border-radius:10px!important}
  .creator-studio-banner .csb-btn-primary,
  .creator-studio-banner .csb-btn-outline{
    display:none!important;
  }
  .creator-studio-banner .csb-btn-outline[style*="border-color"]{display:inline-flex!important}

  .mobile-nav{
    min-height:calc(64px + env(safe-area-inset-bottom,0px))!important;
    padding:6px max(8px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px))!important;
    background:rgba(7,7,11,0.965)!important;
    border-top:1px solid rgba(255,255,255,0.07)!important;
    box-shadow:0 -18px 48px rgba(0,0,0,0.42);
  }
  .mn-tab{
    min-height:50px!important;
    gap:4px!important;
    padding:4px 3px!important;
    font-size:10px!important;
    line-height:1!important;
    color:rgba(242,242,248,0.58)!important;
  }
  .mn-tab svg{width:20px!important;height:20px!important}
  .mn-tab.active{color:var(--lime)!important}
  .page{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}
}

@media(max-width:480px){
  nav#main-nav{padding-left:12px!important;padding-right:12px!important;gap:8px!important}
  .nav-actions{gap:8px!important}
  .btn-signin{display:none!important}
  .btn-signup{padding:0 11px!important;font-size:12px!important}
  .nf-card,.nf-card-skel{width:118px!important}
  .content-row{margin-bottom:30px!important}
  .row-scroll{padding-left:14px!important;padding-right:14px!important}
  .disc-grid,.srp-grid{gap:12px!important}
  .dash-cover{height:176px!important}
  .dash-actions .btn-label{display:inline!important}
  .mobile-nav{padding-left:6px!important;padding-right:6px!important}
  .mn-tab{font-size:9.5px!important}
}

@media(max-width:360px){
  .logo{font-size:15px!important}
  .nav-menu-btn,.nav-icon-btn,#theme-toggle-btn,.nav-avatar{
    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  }
  .nav-actions{gap:6px!important}
  .btn-signup{padding:0 9px!important;font-size:11px!important}
  .nf-card,.nf-card-skel{width:108px!important}
  .disc-card-body,.srp-card-body{padding:8px!important}
  .dash-avi{width:64px!important;height:64px!important}
  .dash-name{font-size:18px!important}
}

/* Mobile polish pass: cleaner compact app shell and hero. */
@media(max-width:768px){
  nav#main-nav{
    height:50px!important;
    padding:0 max(12px,env(safe-area-inset-left,0px)) 0 max(12px,env(safe-area-inset-right,0px))!important;
    gap:8px!important;
  }
  .nav-menu-btn,
  .nav-icon-btn,
  #theme-toggle-btn,
  .nav-avatar{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    border-radius:9px!important;
  }
  .nav-menu-btn svg,
  .nav-icon-btn svg{width:16px!important;height:16px!important}
  #theme-toggle-btn{font-size:13px!important}
  .logo{
    font-size:16px!important;
    margin-right:auto!important;
  }
  .nav-actions{
    gap:7px!important;
  }
  .nav-bell{margin-left:0!important}
  .nav-avatar{
    margin-left:2px!important;
    font-size:11px!important;
  }
  .btn-signin,.btn-signup{
    height:34px!important;
    min-height:34px!important;
    padding:0 11px!important;
    border-radius:9px!important;
    font-size:12px!important;
  }

  .featured-hero{
    height:clamp(340px,54svh,430px)!important;
    min-height:340px!important;
    max-height:58svh!important;
    margin-top:-50px!important;
  }
  .fh-img{
    background-position:center top!important;
  }
  .fh-vignette{
    background:
      linear-gradient(to top,rgba(8,8,13,0.97) 0%,rgba(8,8,13,0.72) 36%,rgba(8,8,13,0.24) 68%,transparent 100%),
      linear-gradient(to right,rgba(8,8,13,0.64),rgba(8,8,13,0.18) 62%,transparent)!important;
  }
  .fh-content{
    left:14px!important;
    right:14px!important;
    bottom:58px!important;
    width:auto!important;
    max-width:none!important;
    padding:0!important;
    background:none!important;
  }
  .fh-badge{
    height:22px!important;
    padding:0 9px!important;
    font-size:8.5px!important;
    margin-bottom:7px!important;
  }
  .fh-title{
    font-size:clamp(21px,6vw,28px)!important;
    line-height:1.06!important;
    margin-bottom:6px!important;
    max-width:92vw!important;
  }
  .fh-meta,.fh-stats{
    gap:8px!important;
    font-size:10px!important;
    margin-bottom:7px!important;
    flex-wrap:wrap!important;
  }
  .fh-desc{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    max-width:min(92vw,460px)!important;
    margin:0 0 11px!important;
    font-size:12px!important;
    line-height:1.45!important;
    color:rgba(232,232,240,0.68)!important;
  }
  .fh-btns{
    flex-direction:row!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
  }
  .fh-btn-play,
  .fh-btn-info{
    height:36px!important;
    min-height:36px!important;
    border-radius:9px!important;
    font-size:12px!important;
    padding:0 13px!important;
    gap:6px!important;
  }
  .fh-btn-play svg,
  .fh-btn-info svg{width:13px!important;height:13px!important}
  .fh-controls{
    left:14px!important;
    right:auto!important;
    bottom:16px!important;
    gap:8px!important;
    padding:5px 7px!important;
    border-radius:999px!important;
    background:rgba(8,8,13,0.48)!important;
    border:1px solid rgba(255,255,255,0.08)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  .fh-dots{gap:5px!important}
  .fh-dot{
    width:5px!important;
    height:5px!important;
  }
  .fh-dot.active{
    width:16px!important;
    border-radius:999px!important;
  }
  .fh-nav{gap:5px!important}
  .fh-nav-btn{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    min-height:26px!important;
    font-size:12px!important;
    border-color:rgba(255,255,255,0.1)!important;
  }

  .content-row{margin-bottom:24px!important}
  .row-header,.content-row .row-header{
    padding:0 14px!important;
    margin-bottom:9px!important;
  }
  .row-title{font-size:13px!important}
  .row-scroll{
    gap:10px!important;
    padding:3px 14px 13px!important;
    scroll-padding-left:14px!important;
  }
  .nf-card,.nf-card-skel{
    width:122px!important;
    border-radius:11px!important;
  }
  .nf-card-body{padding:7px 8px 9px!important}
  .nf-card-title-text,.nf-card-title{font-size:12px!important}

  .disc-chip,.disc-sticky-pill,.disc-sort-pill,.srp-chip{
    min-height:32px!important;
    padding:0 11px!important;
    font-size:11px!important;
    border-radius:999px!important;
  }
}

@media(max-width:480px){
  .featured-hero{
    height:clamp(330px,52svh,410px)!important;
    min-height:330px!important;
  }
  .fh-content{bottom:54px!important}
  .fh-title{font-size:22px!important}
  .fh-desc{font-size:11.5px!important;line-height:1.42!important;margin-bottom:10px!important}
  .fh-btn-play,.fh-btn-info{height:34px!important;min-height:34px!important;padding:0 12px!important}
  .nf-card,.nf-card-skel{width:112px!important}
  .content-row{margin-bottom:22px!important}
}

@media(max-width:360px){
  nav#main-nav{gap:6px!important}
  .nav-menu-btn,.nav-icon-btn,#theme-toggle-btn,.nav-avatar{
    width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
  }
  .logo{font-size:15px!important}
  .nav-actions{gap:5px!important}
  .featured-hero{height:328px!important;min-height:328px!important}
  .fh-content{left:12px!important;right:12px!important}
  .fh-title{font-size:20px!important}
  .fh-desc{-webkit-line-clamp:2!important}
  .fh-btns{gap:6px!important}
  .fh-btn-play,.fh-btn-info{padding:0 10px!important;font-size:11px!important}
  .nf-card,.nf-card-skel{width:104px!important}
}

/* Targeted screenshot fixes: desktop hero, desktop drawer, and mobile feed spacing. */
@media(min-width:1024px){
  .featured-hero{
    position:relative!important;
    display:flex!important;
    align-items:flex-end!important;
    width:100vw!important;
    min-height:100vh!important;
    height:100vh!important;
    max-height:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    margin-top:-60px!important;
    padding-bottom:80px!important;
    overflow:hidden!important;
  }
  .fh-bg,
  .fh-slide,
  .fh-img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  .fh-bg,
  .fh-img{
    background-size:cover!important;
    background-position:center!important;
  }
  .fh-content{
    left:clamp(40px,7vw,104px)!important;
    bottom:80px!important;
    z-index:5!important;
  }
  .fh-btns{
    position:relative!important;
    z-index:10!important;
    overflow:visible!important;
  }
  .fh-btn-play,
  .fh-btn-info{
    position:relative!important;
    z-index:10!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }
  .fh-controls{
    left:auto!important;
    right:clamp(40px,5vw,80px)!important;
    bottom:32px!important;
    z-index:8!important;
    display:flex!important;
    align-items:center!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
  }
  .fh-dots,
  .fh-nav{
    display:flex!important;
    align-items:center!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
  }
  .desktop-app-sidebar,
  .desktop-app-sidebar.open,
  .nav-drawer-backdrop,
  .nav-drawer-backdrop.open{
    display:none!important;
    pointer-events:none!important;
  }
  .nav-menu-btn{
    display:none!important;
  }
  nav#main-nav .nav-links{
    display:flex!important;
  }
}

@media(max-width:480px){
  .feed-header{
    margin-bottom:16px!important;
  }
}

/* Final card spacing guard after responsive overrides. */
.row-scroll,
.disc-row-strip{
  gap:24px!important;
}

/* Final polish: flatter cards, cleaner hero controls, and safer card text layout. */
.card,
.nf-card,
.disc-card{
  box-shadow:none!important;
  transition:transform 0.24s cubic-bezier(0.22,1,0.36,1),border-color 0.18s!important;
}
.card:hover,
.nf-card:hover,
.disc-card:hover{
  box-shadow:none!important;
  outline:1px solid rgba(200,255,0,0.42);
  outline-offset:0;
}
.card-badge,
.nf-card-badge{
  max-width:calc(100% - 76px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-shadow:none!important;
}
.nf-card-badge::before,
.nf-card-new-badge{
  box-shadow:none!important;
}
.nf-card-new-badge{
  max-width:58px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.scenvox-orig-badge,
.editor-pick-badge{
  bottom:auto!important;
  max-width:calc(100% - 16px);
  padding:2px 6px;
  border-radius:999px;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-shadow:none!important;
  box-shadow:none!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.scenvox-orig-badge{
  top:8px!important;
  left:8px!important;
}
.scenvox-orig-badge::before{
  box-shadow:none!important;
}
.editor-pick-badge{
  top:24px!important;
  right:8px!important;
}
.nf-card-pin,
.card-pin,
.disc-card-pin{
  padding:10px 10px 12px!important;
  min-width:0;
}
.card-pin{
  padding-left:12px!important;
  padding-right:12px!important;
}
.nf-card:hover .nf-card-pin,
.card:hover .card-pin,
.disc-card:hover .disc-card-pin{
  padding-bottom:48px!important;
}
.nf-card-title-text,
.card-title,
.disc-card-title{
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis;
  line-height:1.22!important;
  text-shadow:none!important;
  overflow-wrap:anywhere;
}
.nf-card-meta-row,
.card-meta,
.disc-card-meta{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nf-card-meta-row > *,
.card-meta > *,
.disc-card-meta > *{
  min-width:0;
}
.fh-btn-play:hover,
.fh-btn-info:hover,
.fh-nav-btn:hover{
  box-shadow:none!important;
}
.fh-controls{
  gap:10px!important;
  padding:0!important;
  border:none!important;
  border-radius:0!important;
  background:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.fh-dots{
  gap:4px!important;
  padding:0 2px!important;
}
.fh-dot{
  position:relative!important;
  width:22px!important;
  height:4px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,0.26)!important;
  overflow:hidden!important;
}
.fh-dot.active{
  width:38px!important;
  background:rgba(255,255,255,0.28)!important;
}
.fh-dot-fill{
  background:var(--lime)!important;
  border-radius:999px!important;
}
.fh-nav{
  gap:4px!important;
}
.fh-nav-btn{
  width:24px!important;
  height:24px!important;
  border-radius:6px!important;
  background:rgba(255,255,255,0.08)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  color:rgba(255,255,255,0.7)!important;
  font-size:14px!important;
  box-shadow:none!important;
}
.fh-nav-btn:hover{
  background:rgba(200,255,0,0.14)!important;
  border-color:rgba(200,255,0,0.3)!important;
  color:var(--lime)!important;
}

/* Remove screen-edge shadow/fade artifacts. */
.row-fade-r{
  display:none!important;
  background:none!important;
}
.desktop-app-sidebar,
.nav-drawer,
.side-drawer,
.mobile-drawer{
  box-shadow:none!important;
}

/* Hero grid auto-layout: consistent alignment across desktop and mobile. */
:root{
  --page-edge:clamp(12px,2.5vw,40px);
}
#page-home .featured-hero{
  display:grid!important;
  grid-template-columns:var(--home-left) minmax(320px,620px) minmax(180px,1fr) var(--home-left)!important;
  grid-template-rows:minmax(96px,1fr) auto 14px auto 20px!important;
  align-items:end!important;
  column-gap:clamp(20px,4vw,64px)!important;
  padding:0!important;
}
.fh-bg,
.fh-slide,
.fh-img,
.fh-grain,
.fh-glow-lime,
.fh-glow-purple,
.featured-hero::before{
  grid-column:1 / -1!important;
  grid-row:1 / -1!important;
}
.fh-bg,
.fh-slide,
.fh-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
.fh-content{
  position:relative!important;
  grid-column:2!important;
  grid-row:2!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  align-self:end!important;
  justify-self:start!important;
  width:min(100%,620px)!important;
  max-width:620px!important;
  padding:0!important;
  margin:0!important;
  z-index:6!important;
}
.fh-title{
  max-width:12ch!important;
}
.fh-meta,
.fh-btns{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}
.fh-desc{
  max-width:56ch!important;
}
.fh-controls{
  position:relative!important;
  grid-column:2!important;
  grid-row:4!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  align-self:center!important;
  justify-self:start!important;
  margin:0!important;
  z-index:7!important;
}
@media(min-width:1400px){
  #page-home .featured-hero{
    grid-template-columns:var(--home-left) minmax(320px,640px) minmax(220px,1fr) var(--home-left)!important;
  }
  .fh-content{
    max-width:640px!important;
  }
}
@media(max-width:900px){
  #page-home .featured-hero{
    grid-template-columns:var(--home-left) minmax(0,1fr) var(--home-left)!important;
    grid-template-rows:minmax(80px,1fr) auto 14px auto 18px!important;
    column-gap:0!important;
  }
  .fh-content{
    grid-column:2!important;
    grid-row:2!important;
    width:100%!important;
    max-width:none!important;
  }
  .fh-title{
    max-width:13ch!important;
  }
  .fh-controls{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
  }
}
@media(max-width:480px){
  #page-home .featured-hero{
    grid-template-columns:var(--home-left) minmax(0,1fr) var(--home-left)!important;
    grid-template-rows:minmax(72px,1fr) auto 12px auto 16px!important;
  }
  .fh-content{
    grid-column:2!important;
    grid-row:2!important;
  }
  .fh-title{
    max-width:12ch!important;
  }
  .fh-controls{
    grid-column:2!important;
    grid-row:4!important;
  }
}

/* Shared page grid inset: align hero, rows, and genre buttons. */
.row-header,
.disc-row-hdr{
  padding-left:var(--page-edge)!important;
  padding-right:var(--page-edge)!important;
}
.row-title{
  padding-left:0!important;
  border-left:0!important;
}
.row-scroll,
.disc-row-strip,
.genre-filter-bar,
.disc-filter-chips,
.disc-sticky-bar,
.srp-filters{
  padding-left:var(--page-edge)!important;
  padding-right:var(--page-edge)!important;
}
.genre-filter-bar,
.disc-filter-chips,
.disc-sticky-bar,
.srp-filters{
  margin-left:0!important;
  margin-right:0!important;
}

/* Homepage single left-alignment container. */
#page-home{
  --home-left:40px;
  --page-edge:var(--home-left);
}
.home-align-container{
  padding-left:var(--home-left);
  padding-right:var(--home-left);
  box-sizing:border-box;
}
#page-home .home-align-container .genre-filter-bar,
#page-home .home-align-container .row-header,
#page-home .home-align-container .content-row .row-header,
#page-home .home-align-container .row-scroll,
#page-home .home-align-container .feed-header,
#page-home .home-align-container #home-content-row,
#page-home .home-align-container #home-footer{
  padding-left:0!important;
  padding-right:0!important;
}
#page-home .home-align-container .genre-filter-bar{
  margin-left:0!important;
  margin-right:0!important;
}
#page-home .home-align-container .row-title{
  padding-left:0!important;
  border-left:0!important;
}
#page-home .home-align-container .row-scroll::after{
  min-width:0!important;
}

/* Keep homepage cards full-width: remove the right trending sidebar from layout. */
#page-home .home-sidebar{
  display:none!important;
}
#page-home #home-content-row{
  display:block!important;
  width:100%!important;
  max-width:none!important;
}
#page-home #home-rows{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* Modern subtle genre chips. */
#page-home .genre-filter-bar{
  gap:8px!important;
  padding-top:12px!important;
  padding-bottom:12px!important;
  background:rgba(10,10,15,0.72)!important;
  border-top:1px solid rgba(255,255,255,0.06)!important;
  border-bottom:1px solid rgba(255,255,255,0.06)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
#page-home .genre-pill{
  height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,0.09)!important;
  background:rgba(255,255,255,0.045)!important;
  color:rgba(232,232,240,0.68)!important;
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  transition:background 0.16s,border-color 0.16s,color 0.16s,transform 0.16s!important;
}
#page-home .genre-pill svg{
  width:13px!important;
  height:13px!important;
  opacity:0.72;
}
#page-home .genre-pill:hover{
  background:rgba(255,255,255,0.075)!important;
  border-color:rgba(255,255,255,0.16)!important;
  color:rgba(255,255,255,0.9)!important;
  transform:translateY(-1px);
}
#page-home .genre-pill.active{
  background:rgba(200,255,0,0.12)!important;
  border-color:rgba(200,255,0,0.32)!important;
  color:var(--lime)!important;
}
#page-home .genre-pill.active svg{
  opacity:1;
}
body.theme-light #page-home .genre-filter-bar{
  background:rgba(255,255,255,0.78)!important;
  border-top-color:rgba(0,0,0,0.06)!important;
  border-bottom-color:rgba(0,0,0,0.06)!important;
}
body.theme-light #page-home .genre-pill{
  background:rgba(0,0,0,0.035)!important;
  border-color:rgba(0,0,0,0.08)!important;
  color:rgba(17,17,24,0.66)!important;
}
body.theme-light #page-home .genre-pill:hover{
  background:rgba(0,0,0,0.06)!important;
  color:rgba(17,17,24,0.9)!important;
}
body.theme-light #page-home .genre-pill.active{
  background:rgba(95,122,0,0.12)!important;
  border-color:rgba(95,122,0,0.28)!important;
  color:#4f6500!important;
}

/* More breathable homepage movie cards. */
#page-home .content-row{
  margin-bottom:56px!important;
}
#page-home .row-header{
  margin-bottom:18px!important;
}
#page-home .row-scroll{
  gap:28px!important;
  padding-top:6px!important;
  padding-bottom:18px!important;
  scroll-padding-left:0!important;
}
#page-home .nf-card{
  width:168px!important;
  border-radius:10px!important;
}
#page-home .nf-card-thumb{
  border-radius:10px!important;
}
#page-home .nf-card-pin{
  padding:12px 11px 13px!important;
}
#page-home .nf-card:hover .nf-card-pin{
  padding-bottom:50px!important;
}
#page-home .nf-card-title-text{
  font-size:13.5px!important;
  line-height:1.28!important;
}
#page-home .nf-card-meta-row{
  margin-top:4px!important;
  gap:7px!important;
}
#page-home .nf-card-actions{
  right:9px!important;
  bottom:10px!important;
  gap:6px!important;
}
#page-home .nf-act-btn{
  width:28px!important;
  height:28px!important;
}

/* Modern card surface and action buttons. */
#page-home .nf-card,
#page-home .card,
#page-home .disc-card{
  background:rgba(255,255,255,0.035)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  outline:none!important;
  overflow:hidden!important;
}
#page-home .nf-card:hover,
#page-home .card:hover,
#page-home .disc-card:hover{
  border-color:rgba(200,255,0,0.28)!important;
  outline:none!important;
  transform:translateY(-3px) scale(1.025)!important;
}
#page-home .nf-card-thumb,
#page-home .card-thumb,
#page-home .disc-card-thumb{
  background:#111116!important;
}
#page-home .nf-card-grad,
#page-home .card-grad,
#page-home .disc-card-grad{
  background:
    linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.58) 34%,rgba(0,0,0,0.12) 66%,transparent 100%)!important;
}
#page-home .nf-card-badge,
#page-home .card-badge{
  height:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:rgba(10,10,15,0.54)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  color:rgba(255,255,255,0.76)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  font-size:8px!important;
  letter-spacing:0.08em!important;
}
#page-home .nf-card-new-badge{
  height:20px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  background:rgba(230,57,70,0.86)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
}
#page-home .nf-card-title-text,
#page-home .card-title,
#page-home .disc-card-title{
  color:rgba(255,255,255,0.96)!important;
  font-weight:750!important;
  letter-spacing:-0.015em!important;
}
#page-home .nf-card-meta-row,
#page-home .card-meta,
#page-home .disc-card-meta{
  color:rgba(255,255,255,0.52)!important;
}
#page-home .nf-act-btn,
#page-home .card-act-btn,
#page-home .disc-act-btn{
  background:rgba(18,18,24,0.72)!important;
  border:1px solid rgba(255,255,255,0.16)!important;
  color:rgba(255,255,255,0.86)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#page-home .nf-act-btn:hover,
#page-home .card-act-btn:hover,
#page-home .disc-act-btn:hover{
  background:rgba(255,255,255,0.18)!important;
  border-color:rgba(255,255,255,0.24)!important;
  color:#fff!important;
  transform:translateY(-1px) scale(1.06)!important;
}
#page-home .nf-act-btn.nf-act-play,
#page-home .card-act-btn.card-act-play,
#page-home .disc-act-btn.disc-act-play{
  background:var(--lime)!important;
  border-color:rgba(200,255,0,0.78)!important;
  color:#050505!important;
}
#page-home .nf-act-btn.nf-act-play:hover,
#page-home .card-act-btn.card-act-play:hover,
#page-home .disc-act-btn.disc-act-play:hover{
  background:#d7ff38!important;
  color:#050505!important;
}
body.theme-light #page-home .nf-card,
body.theme-light #page-home .card,
body.theme-light #page-home .disc-card{
  background:rgba(0,0,0,0.035)!important;
  border-color:rgba(0,0,0,0.08)!important;
}
body.theme-light #page-home .nf-card:hover,
body.theme-light #page-home .card:hover,
body.theme-light #page-home .disc-card:hover{
  border-color:rgba(95,122,0,0.28)!important;
}

/* Stable card buttons: no wobble, no layout shift. */
#page-home .nf-card-actions,
#page-home .card-actions,
#page-home .disc-card-actions{
  align-items:center!important;
  justify-content:flex-end!important;
}
#page-home .nf-act-btn,
#page-home .card-act-btn,
#page-home .disc-act-btn,
#page-home .cw-remove{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  padding:0!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  aspect-ratio:1 / 1!important;
  transform:none!important;
  transition:background-color 0.16s ease,border-color 0.16s ease,color 0.16s ease,opacity 0.16s ease!important;
}
#page-home .nf-act-btn:hover,
#page-home .card-act-btn:hover,
#page-home .disc-act-btn:hover,
#page-home .cw-remove:hover{
  transform:none!important;
}
#page-home .nf-act-btn svg,
#page-home .card-act-btn svg,
#page-home .disc-act-btn svg,
#page-home .cw-remove svg{
  width:14px!important;
  height:14px!important;
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
}
#page-home .cw-remove{
  top:8px!important;
  right:8px!important;
  background:rgba(12,12,18,0.68)!important;
  border:1px solid rgba(255,255,255,0.16)!important;
  color:rgba(255,255,255,0.86)!important;
  font-size:13px!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  box-shadow:none!important;
}
#page-home .cw-remove:hover{
  background:rgba(230,57,70,0.18)!important;
  border-color:rgba(230,57,70,0.42)!important;
  color:#fff!important;
}

/* Premium homepage shelves: denser rows, richer posters, quieter chrome. */
#page-home #home-rows{
  padding-top:8px!important;
}
#page-home .content-row{
  margin-bottom:42px!important;
}
#page-home .row-header{
  margin-bottom:12px!important;
  min-height:26px!important;
}
#page-home .row-title{
  font-size:18px!important;
  font-weight:760!important;
  letter-spacing:-0.025em!important;
  line-height:1.15!important;
  color:rgba(255,255,255,0.96)!important;
}
#page-home .row-title svg{
  opacity:0.84!important;
}
#page-home .row-more{
  color:rgba(200,255,0,0.72)!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:0.11em!important;
  opacity:0.86!important;
}
#page-home .row-more:hover{
  color:var(--lime)!important;
  opacity:1!important;
}
#page-home .row-scroll{
  gap:18px!important;
  padding-top:8px!important;
  padding-bottom:22px!important;
}
#page-home .nf-card{
  width:clamp(156px,12vw,188px)!important;
  border-radius:6px!important;
  background:#09090d!important;
  border:0!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.06)!important;
  transform-origin:center center!important;
  transition:
    transform 0.24s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.24s cubic-bezier(0.22,1,0.36,1),
    filter 0.18s ease!important;
}
#page-home .nf-card:hover{
  transform:translateY(-7px) scale(1.055)!important;
  border-color:transparent!important;
  box-shadow:
    0 22px 46px rgba(0,0,0,0.68),
    0 0 0 1px rgba(255,255,255,0.14),
    0 0 0 2px rgba(200,255,0,0.16)!important;
  z-index:12!important;
}
#page-home .nf-card-thumb{
  border-radius:6px!important;
  background:
    radial-gradient(circle at 30% 20%,rgba(200,255,0,0.11),transparent 34%),
    linear-gradient(145deg,#171722,#08080d)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.035)!important;
}
#page-home .nf-card-thumb::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(105deg,rgba(255,255,255,0.11) 0%,transparent 22%,transparent 78%,rgba(255,255,255,0.035) 100%),
    radial-gradient(circle at 50% 0%,rgba(255,255,255,0.08),transparent 38%)!important;
  opacity:0.42!important;
  mix-blend-mode:screen!important;
}
#page-home .nf-card:hover .nf-card-thumb img{
  transform:scale(1.075)!important;
  filter:saturate(1.08) contrast(1.04)!important;
}
#page-home .nf-card-grad{
  background:
    linear-gradient(to top,rgba(0,0,0,0.96) 0%,rgba(0,0,0,0.78) 28%,rgba(0,0,0,0.2) 62%,rgba(0,0,0,0.08) 100%),
    linear-gradient(to right,rgba(0,0,0,0.22),transparent 38%,rgba(0,0,0,0.18))!important;
}
#page-home .nf-card-pin{
  padding:50px 10px 11px!important;
}
#page-home .nf-card:hover .nf-card-pin{
  padding-bottom:48px!important;
}
#page-home .nf-card-title-text{
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.18!important;
  letter-spacing:-0.02em!important;
  text-shadow:0 2px 10px rgba(0,0,0,0.75)!important;
}
#page-home .nf-card-meta-row{
  margin-top:6px!important;
  gap:6px!important;
  font-size:10px!important;
  color:rgba(255,255,255,0.62)!important;
}
#page-home .nf-card-rating{
  color:var(--lime)!important;
  font-size:10px!important;
  letter-spacing:-0.01em!important;
}
#page-home .nf-card-cat-text,
#page-home .nf-card-eps-text{
  font-size:9px!important;
  color:rgba(255,255,255,0.5)!important;
}
#page-home .nf-card-badge{
  top:8px!important;
  left:8px!important;
  height:19px!important;
  max-width:calc(100% - 56px)!important;
  padding:0 7px!important;
  border-radius:3px!important;
  background:rgba(8,8,12,0.58)!important;
  border-color:rgba(255,255,255,0.16)!important;
  color:rgba(255,255,255,0.82)!important;
  font-size:7.5px!important;
  letter-spacing:0.1em!important;
}
#page-home .scenvox-orig-badge,
#page-home .editor-pick-badge{
  border-radius:3px!important;
  background:rgba(8,8,12,0.62)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  color:rgba(255,255,255,0.84)!important;
}
#page-home .scenvox-orig-badge{
  color:var(--lime)!important;
}
#page-home .nf-card-actions{
  left:10px!important;
  right:auto!important;
  bottom:10px!important;
  justify-content:flex-start!important;
  gap:7px!important;
}
#page-home .nf-act-btn,
#page-home .card-act-btn,
#page-home .disc-act-btn{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  background:rgba(16,16,22,0.78)!important;
}
#page-home .nf-act-btn.nf-act-play{
  background:rgba(255,255,255,0.94)!important;
  border-color:rgba(255,255,255,0.92)!important;
  color:#050505!important;
}
#page-home .nf-act-btn.nf-act-play:hover{
  background:var(--lime)!important;
  border-color:var(--lime)!important;
}

/* Flagship hero: title-first streaming treatment. */
#page-home .featured-hero{
  min-height:min(760px,78vh)!important;
  background:#050508!important;
}
#page-home .featured-hero::before{
  background:
    linear-gradient(to right,rgba(5,5,8,0.96) 0%,rgba(5,5,8,0.78) 28%,rgba(5,5,8,0.28) 58%,rgba(5,5,8,0.5) 100%),
    linear-gradient(to top,rgba(5,5,8,1) 0%,rgba(5,5,8,0.18) 34%,transparent 70%)!important;
  z-index:2!important;
}
#page-home .fh-img{
  filter:saturate(1.08) contrast(1.08) brightness(0.82)!important;
  transform:scale(1.015)!important;
}
#page-home .fh-content{
  max-width:680px!important;
}
#page-home .fh-badge{
  width:max-content!important;
  height:25px!important;
  padding:0 10px!important;
  border-radius:3px!important;
  background:rgba(8,8,12,0.58)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  color:var(--lime)!important;
  letter-spacing:0.12em!important;
  font-size:10px!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#page-home .fh-title{
  max-width:11ch!important;
  margin:10px 0 14px!important;
  font-size:clamp(52px,7.2vw,92px)!important;
  line-height:0.9!important;
  letter-spacing:-0.065em!important;
  color:#fff!important;
  background:none!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 18px 48px rgba(0,0,0,0.72)!important;
}
#page-home .fh-meta{
  gap:8px!important;
  margin-bottom:16px!important;
  color:rgba(255,255,255,0.74)!important;
  font-size:13px!important;
  font-weight:700!important;
}
#page-home .fh-meta span{
  display:inline-flex!important;
  align-items:center!important;
  height:24px!important;
  padding:0 8px!important;
  border-radius:4px!important;
  background:rgba(255,255,255,0.075)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
}
#page-home .fh-meta .fh-match{
  background:rgba(200,255,0,0.13)!important;
  border-color:rgba(200,255,0,0.26)!important;
  color:var(--lime)!important;
}
#page-home .fh-desc{
  max-width:58ch!important;
  margin-bottom:24px!important;
  color:rgba(255,255,255,0.78)!important;
  font-size:clamp(15px,1.4vw,18px)!important;
  line-height:1.48!important;
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
#page-home .fh-btns{
  gap:10px!important;
}
#page-home .fh-btn-play,
#page-home .fh-btn-info{
  height:44px!important;
  min-height:44px!important;
  border-radius:4px!important;
  padding:0 22px!important;
  font-size:14px!important;
  font-weight:800!important;
}
#page-home .fh-btn-play{
  background:#fff!important;
  color:#050505!important;
  box-shadow:none!important;
}
#page-home .fh-btn-play:hover{
  background:var(--lime)!important;
  opacity:1!important;
  transform:translateY(-1px)!important;
}
#page-home .fh-btn-info{
  background:rgba(109,109,118,0.46)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  color:#fff!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#page-home .fh-btn-info:hover{
  background:rgba(140,140,150,0.58)!important;
}
#page-home .fh-btn-list{
  background:rgba(255,255,255,0.1)!important;
}

/* Hero slide counter + square nav buttons. */
#page-home .featured-hero .fh-controls{
  gap:10px!important;
  background:none!important;
  border:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:0!important;
  border-radius:0!important;
}
#page-home .featured-hero .fh-counter{
  font-size:12px!important;
  font-weight:600!important;
  color:rgba(255,255,255,0.5)!important;
  font-variant-numeric:tabular-nums!important;
}
#page-home .featured-hero .fh-counter em{
  font-style:normal!important;
  color:var(--lime)!important;
  font-weight:700!important;
}
#page-home .featured-hero .fh-nav-btn{
  width:24px!important;
  height:24px!important;
  border-radius:6px!important;
  background:rgba(255,255,255,0.08)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  color:rgba(255,255,255,0.7)!important;
  font-size:14px!important;
  transition:background 0.15s,border-color 0.15s,color 0.15s!important;
}
#page-home .featured-hero .fh-nav-btn:hover{
  background:rgba(200,255,0,0.14)!important;
  border-color:rgba(200,255,0,0.3)!important;
  color:var(--lime)!important;
  transform:none!important;
}
#page-home .featured-hero .fh-nav-btn:active{
  transform:scale(0.94)!important;
}
@media(min-width:1280px){
  #page-home .nf-card{width:184px!important}
  #page-home .row-scroll{gap:20px!important}
}
@media(max-width:768px){
  #page-home .content-row{margin-bottom:42px!important}
  #page-home .row-scroll{gap:18px!important;padding-bottom:16px!important}
  #page-home .nf-card{width:138px!important}
}
@media(max-width:480px){
  #page-home .content-row{margin-bottom:34px!important}
  #page-home .row-scroll{gap:14px!important}
  #page-home .nf-card{width:118px!important}
  #page-home .nf-card-title-text{font-size:12px!important}
}

/* Mobile homepage cleanup: remove guest stats CTA and give cards room to breathe. */
@media(max-width:600px){
  #page-home #social-proof-strip,
  #page-home #home-cta{
    display:none!important;
  }
  #page-home .home-align-container{
    padding-top:8px!important;
  }
  #page-home .content-row{
    margin-bottom:38px!important;
  }
  #page-home .row-header{
    padding-left:var(--home-left)!important;
    padding-right:var(--home-left)!important;
    margin-bottom:12px!important;
  }
  #page-home .row-scroll{
    gap:20px!important;
    padding:6px var(--home-left) 18px!important;
    scroll-padding-left:var(--home-left)!important;
  }
  #page-home .row-scroll::after{
    min-width:var(--home-left)!important;
  }
  #page-home .nf-card{
    width:136px!important;
    border-radius:12px!important;
  }
  #page-home .nf-card-thumb{
    aspect-ratio:2 / 3!important;
  }
  #page-home .nf-card-pin{
    padding:44px 9px 10px!important;
  }
  #page-home .nf-card-title-text{
    font-size:12.5px!important;
    line-height:1.25!important;
    -webkit-line-clamp:2!important;
  }
  #page-home .nf-card-meta-row{
    gap:5px!important;
    margin-top:5px!important;
    line-height:1.2!important;
    min-width:0!important;
  }
  #page-home .nf-card-cat-text{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    min-width:0!important;
  }
  #page-home .nf-card-eps-text{
    display:none!important;
  }
  #page-home .nf-card-badge{
    max-width:calc(100% - 22px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}
@media(max-width:380px){
  #page-home .row-scroll{
    gap:18px!important;
  }
  #page-home .nf-card{
    width:128px!important;
  }
  #page-home .nf-card-title-text{
    font-size:12px!important;
  }
}

/* Discover page: modern cards with strict 24px grid spacing. */
#page-discover .disc-main{
  min-width:0!important;
}
#page-discover .disc-layout{
  min-height:100vh!important;
}
#page-discover .disc-sidebar{
  top:0!important;
  height:100vh!important;
  padding-top:16px!important;
  align-self:start!important;
}
#page-discover .disc-content{
  padding-left:24px!important;
  padding-right:24px!important;
}
#page-discover{
  padding-top:0!important;
}
#page-discover .disc-hero{
  padding:68px 24px 18px!important;
  min-height:0!important;
}
#page-discover .disc-hero-title{
  font-size:clamp(24px,3.2vw,36px)!important;
  max-width:560px!important;
}
#page-discover .disc-hero-sub{
  max-width:560px!important;
  margin-bottom:18px!important;
}
#page-discover .disc-content-area{
  padding:24px 24px 60px!important;
}
#page-discover .disc-sticky-bar{
  top:52px!important;
  margin:0!important;
  padding:10px 24px!important;
}
#page-discover .disc-bar,
#page-discover .disc-sort-bar{
  margin-bottom:0!important;
}
#page-discover .disc-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(152px,1fr))!important;
  gap:24px!important;
  align-items:start!important;
  justify-content:stretch!important;
  margin-top:32px!important;
}
#page-discover .disc-row-strip,
#page-discover .row-scroll{
  gap:24px!important;
}
#page-discover .disc-card{
  border-radius:10px!important;
  background:rgba(255,255,255,0.035)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  box-shadow:none!important;
  outline:none!important;
  overflow:hidden!important;
  transition:transform 0.22s cubic-bezier(0.22,1,0.36,1),border-color 0.16s ease!important;
}
#page-discover .disc-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(200,255,0,0.28)!important;
  box-shadow:none!important;
  outline:none!important;
  z-index:2!important;
}
#page-discover .disc-card-thumb{
  aspect-ratio:4 / 5!important;
  border-radius:10px!important;
  background:#111116!important;
  overflow:hidden!important;
}
#page-discover .disc-card-thumb img{
  transition:transform 0.32s cubic-bezier(0.22,1,0.36,1)!important;
}
#page-discover .disc-card:hover .disc-card-thumb img{
  transform:scale(1.035)!important;
}
#page-discover .disc-card-grad{
  background:linear-gradient(to top,rgba(0,0,0,0.38) 0%,rgba(0,0,0,0.08) 44%,transparent 100%)!important;
}
#page-discover .disc-card-pin{
  position:static!important;
  display:block!important;
  padding:10px 11px 12px!important;
  background:transparent!important;
}
#page-discover .disc-card:hover .disc-card-pin{
  padding-bottom:0!important;
}
#page-discover .disc-card-title{
  color:var(--text)!important;
  font-size:13.5px!important;
  font-weight:750!important;
  line-height:1.25!important;
  letter-spacing:-0.015em!important;
  white-space:normal!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden!important;
}
#page-discover .disc-card-meta{
  color:var(--muted)!important;
  font-size:10.5px!important;
  margin-top:5px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#page-discover .disc-card-actions{
  right:10px!important;
  bottom:10px!important;
  gap:6px!important;
  align-items:center!important;
}
#page-discover .disc-act-btn,
#page-discover .nf-act-btn{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  padding:0!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(18,18,24,0.72)!important;
  border:1px solid rgba(255,255,255,0.16)!important;
  color:rgba(255,255,255,0.86)!important;
  transform:none!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  transition:background-color 0.16s ease,border-color 0.16s ease,color 0.16s ease,opacity 0.16s ease!important;
}
#page-discover .disc-act-btn:hover,
#page-discover .nf-act-btn:hover{
  transform:none!important;
  background:rgba(255,255,255,0.18)!important;
  border-color:rgba(255,255,255,0.24)!important;
  color:#fff!important;
}
#page-discover .disc-act-btn.disc-act-play,
#page-discover .nf-act-btn.nf-act-play{
  background:var(--lime)!important;
  border-color:rgba(200,255,0,0.78)!important;
  color:#050505!important;
}
#page-discover .disc-act-btn svg,
#page-discover .nf-act-btn svg{
  width:14px!important;
  height:14px!important;
  display:block!important;
  margin:0!important;
}
#page-discover .nf-card-badge{
  height:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  max-width:calc(100% - 76px)!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:rgba(10,10,15,0.54)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  color:rgba(255,255,255,0.76)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  font-size:8px!important;
  letter-spacing:0.08em!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#page-discover .disc-card .nf-card-badge,
#page-discover .disc-card .nf-card-new-badge{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity 0.16s ease!important;
}
#page-discover .disc-card:hover .nf-card-badge,
#page-discover .disc-card:hover .nf-card-new-badge{
  opacity:0!important;
}
#page-discover .nf-card-new-badge{
  height:20px!important;
  max-width:70px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#page-discover .disc-card.disc-card-wide{
  grid-column:auto!important;
}
#page-discover .disc-card-wide .disc-card-thumb{
  aspect-ratio:4/5!important;
}
@media(max-width:900px){
  #page-discover .disc-content,
  #page-discover .disc-content-area{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #page-discover .disc-hero{
    padding:62px 18px 16px!important;
  }
  #page-discover .disc-sticky-bar{
    top:56px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #page-discover .disc-grid{
    grid-template-columns:repeat(auto-fill,minmax(146px,1fr))!important;
    gap:24px!important;
  }
}
@media(max-width:600px){
  #page-discover .disc-content-area{
    padding-top:24px!important;
  }
  #page-discover .disc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:24px!important;
  }
  #page-discover .disc-card.disc-card-wide{
    grid-column:auto!important;
  }
  #page-discover .disc-card-wide .disc-card-thumb{
    aspect-ratio:4/5!important;
  }
}
@media(max-width:380px){
  #page-discover .disc-content,
  #page-discover .disc-content-area{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  #page-discover .disc-grid{
    gap:18px!important;
  }
}

/* Pin hero copy to the same physical left edge as homepage content. */
#page-home .featured-hero .fh-content{
  grid-column:1 / -1!important;
  padding-left:var(--home-left)!important;
  padding-right:var(--home-left)!important;
  width:100%!important;
  max-width:none!important;
}
#page-home .featured-hero .fh-badge,
#page-home .featured-hero .fh-title,
#page-home .featured-hero .fh-meta,
#page-home .featured-hero .fh-desc,
#page-home .featured-hero .fh-btns{
  max-width:620px!important;
}
@media(min-width:1400px){
  #page-home .featured-hero .fh-badge,
  #page-home .featured-hero .fh-title,
  #page-home .featured-hero .fh-meta,
  #page-home .featured-hero .fh-desc,
  #page-home .featured-hero .fh-btns{
    max-width:640px!important;
  }
}
@media(max-width:768px){
  #page-home{--home-left:24px}
}
@media(max-width:480px){
  #page-home{--home-left:16px}
}

/* Final mobile/home + Discover alignment pass. */
.nf-card-badge,
.card-badge,
.editor-pick-badge,
.scenvox-orig-badge,
#page-discover .nf-card-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  line-height:1!important;
}
.nf-card-badge::before,
.card-badge::before,
.editor-pick-badge::before,
.scenvox-orig-badge::before{
  flex:0 0 auto!important;
  margin:0!important;
}
.editor-pick-badge{
  min-height:22px!important;
  padding:0 8px!important;
  top:34px!important;
}

#page-discover .disc-layout{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  grid-template-columns:220px minmax(0,1fr)!important;
  gap:0!important;
}
#page-discover .disc-main{
  width:100%!important;
  min-width:0!important;
}
#page-discover .disc-content,
#page-discover .disc-content-area{
  padding-left:40px!important;
  padding-right:40px!important;
}
#page-discover .disc-grid{
  width:100%!important;
  max-width:none!important;
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr))!important;
  gap:24px!important;
  justify-content:stretch!important;
}
#page-discover .disc-card{
  border-radius:12px!important;
}
#page-discover .disc-card-thumb,
#page-discover .disc-card-wide .disc-card-thumb{
  aspect-ratio:2 / 3!important;
  border-radius:12px 12px 0 0!important;
}
#page-discover .disc-card-pin{
  padding:10px 11px 13px!important;
}
#page-discover .disc-card-title{
  font-size:13.5px!important;
  line-height:1.25!important;
}
#page-discover .disc-card-meta{
  font-size:11px!important;
  margin-top:6px!important;
}
@media(max-width:900px){
  #page-discover .disc-layout{
    grid-template-columns:1fr!important;
  }
  #page-discover .disc-content,
  #page-discover .disc-content-area{
    padding-left:24px!important;
    padding-right:24px!important;
  }
  #page-discover .disc-grid{
    grid-template-columns:repeat(auto-fill,minmax(156px,1fr))!important;
  }
}
@media(max-width:600px){
  #page-home .fh-controls{
    left:auto!important;
    right:14px!important;
    bottom:18px!important;
    gap:7px!important;
    padding:5px!important;
    transform:none!important;
  }
  #page-home .fh-dots{
    gap:3px!important;
  }
  #page-home .fh-dot{
    width:14px!important;
    height:3px!important;
  }
  #page-home .fh-dot.active{
    width:24px!important;
  }
  #page-home .fh-nav{
    gap:3px!important;
  }
  #page-home .fh-nav-btn{
    width:28px!important;
    height:26px!important;
    font-size:16px!important;
  }
  #page-discover .disc-content,
  #page-discover .disc-content-area{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  #page-discover .disc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
  }
}
@media(max-width:768px){
  #page-home .fh-controls{
    left:auto!important;
    right:14px!important;
    bottom:18px!important;
    gap:7px!important;
    padding:5px!important;
    transform:none!important;
  }
  #page-home .fh-dots{
    gap:3px!important;
  }
  #page-home .fh-dot{
    width:14px!important;
    height:3px!important;
  }
  #page-home .fh-dot.active{
    width:24px!important;
  }
  #page-home .fh-nav{
    gap:3px!important;
  }
  #page-home .fh-nav-btn{
    width:28px!important;
    height:26px!important;
    font-size:16px!important;
  }
  #main-nav #nav-search-btn,
  #main-nav #theme-toggle-btn{
    display:none!important;
  }
}
@media(max-width:1180px){
  html body #page-home .featured-hero .fh-controls{
    left:auto!important;
    inset-inline-start:auto!important;
    right:max(14px,env(safe-area-inset-right,0px))!important;
    inset-inline-end:max(14px,env(safe-area-inset-right,0px))!important;
    bottom:18px!important;
    transform:none!important;
    margin-left:auto!important;
  }
/* On mobile the controls align right, same row as buttons */
@media(max-width:768px){
  html body #page-home .featured-hero .fh-controls{
    right:16px!important;
    left:auto!important;
    inset-inline-end:16px!important;
    bottom:80px!important;
    margin-left:0!important;
  }
}
  html body #page-home .featured-hero .fh-nav-btn{
    width:28px!important;
    height:26px!important;
    min-width:28px!important;
    min-height:26px!important;
    font-size:16px!important;
  }
}

/* Final mobile polish: hero, carousel controls, and shelves. */
@media(max-width:768px){
  html body #page-home{
    --home-left:18px!important;
  }
  html body #page-home .featured-hero{
    min-height:min(62svh,520px)!important;
    height:min(62svh,520px)!important;
    max-height:none!important;
    grid-template-rows:minmax(92px,1fr) auto 18px auto 22px!important;
  }
  html body #page-home .featured-hero::before{
    background:
      linear-gradient(to top,rgba(5,5,8,1) 0%,rgba(5,5,8,0.96) 22%,rgba(5,5,8,0.7) 48%,rgba(5,5,8,0.12) 78%,rgba(5,5,8,0.0) 100%),
      linear-gradient(to right,rgba(5,5,8,0.94) 0%,rgba(5,5,8,0.24) 70%)!important;
  }
  html body #page-home .fh-content{
    align-self:end!important;
    padding-bottom:80px!important;
  }
  html body #page-home .fh-badge{
    height:22px!important;
    padding:0 8px!important;
    font-size:8.5px!important;
    letter-spacing:0.12em!important;
  }
  html body #page-home .fh-title{
    max-width:10.5ch!important;
    margin:8px 0 10px!important;
    font-size:clamp(38px,13vw,54px)!important;
    line-height:0.93!important;
    letter-spacing:-0.055em!important;
  }
  html body #page-home .fh-meta{
    gap:5px!important;
    margin-bottom:11px!important;
    font-size:10.5px!important;
    line-height:1!important;
    max-width:100%!important;
  }
  html body #page-home .fh-meta span{
    height:21px!important;
    padding:0 7px!important;
    border-radius:4px!important;
  }
  html body #page-home .fh-meta span:nth-child(n+5){
    display:none!important;
  }
  html body #page-home .fh-desc{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    max-width:100%!important;
    margin-bottom:14px!important;
    font-size:13px!important;
    line-height:1.42!important;
    color:rgba(255,255,255,0.74)!important;
  }
  html body #page-home .fh-btns{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    max-width:360px!important;
  }
  html body #page-home .fh-btn-play,
  html body #page-home .fh-btn-info{
    height:40px!important;
    min-height:40px!important;
    border-radius:6px!important;
    padding:0 12px!important;
    font-size:12.5px!important;
    justify-content:center!important;
  }
  html body #page-home .fh-btn-list{
    grid-column:1 / -1!important;
    height:36px!important;
  }
  html body #page-home .featured-hero .fh-controls{
    right:16px!important;
    left:auto!important;
    bottom:80px!important;
    gap:8px!important;
    padding:0!important;
    border-radius:0!important;
    background:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    border:none!important;
    box-shadow:none!important;
  }
  html body #page-home .featured-hero .fh-dots{
    gap:5px!important;
    padding:0 2px!important;
  }
  html body #page-home .featured-hero .fh-dot{
    width:6px!important;
    height:6px!important;
    border-radius:999px!important;
  }
  html body #page-home .featured-hero .fh-dot.active{
    width:34px!important;
    height:6px!important;
  }
  html body #page-home .featured-hero .fh-nav-btn{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    font-size:20px!important;
  }
  html body #page-home .home-align-container{
    padding-left:var(--home-left)!important;
    padding-right:var(--home-left)!important;
  }
  html body #page-home .content-row{
    margin-bottom:32px!important;
  }
  html body #page-home .row-header{
    margin-bottom:10px!important;
  }
  html body #page-home .row-title{
    font-size:15.5px!important;
    line-height:1.18!important;
  }
  html body #page-home .row-more{
    font-size:9.5px!important;
    letter-spacing:0.08em!important;
  }
  html body #page-home .row-scroll{
    gap:12px!important;
    padding-top:4px!important;
    padding-bottom:16px!important;
  }
  html body #page-home .nf-card,
  html body #page-home .nf-card-skel{
    width:132px!important;
    border-radius:7px!important;
  }
  html body #page-home .nf-card-thumb{
    border-radius:7px!important;
  }
  html body #page-home .nf-card-pin{
    padding:42px 8px 9px!important;
  }
  html body #page-home .nf-card-title-text{
    font-size:12px!important;
    line-height:1.2!important;
  }
  html body #page-home .nf-card-meta-row{
    margin-top:4px!important;
    gap:4px!important;
  }
  html body #page-home .nf-card-rating,
  html body #page-home .nf-card-cat-text{
    font-size:8.5px!important;
  }
}
@media(max-width:420px){
  html body #page-home{
    --home-left:14px!important;
  }
  html body #page-home .featured-hero{
    min-height:540px!important;
    height:540px!important;
  }
  html body #page-home .fh-title{
    font-size:clamp(32px,13vw,46px)!important;
  }
  html body #page-home .fh-desc{
    font-size:12.5px!important;
  }
  html body #page-home .fh-btns{
    max-width:none!important;
  }
  html body #page-home .featured-hero .fh-controls{
    right:14px!important;
    bottom:14px!important;
    transform:scale(0.94)!important;
    transform-origin:right bottom!important;
  }
  html body #page-home .nf-card,
  html body #page-home .nf-card-skel{
    width:118px!important;
  }
  html body #page-home .row-scroll{
    gap:10px!important;
  }
}

/* Premium Creator Studio pass. */
#page-profile{
  background:#050508!important;
}
#page-profile .dash-cover{
  height:280px!important;
  background:
    linear-gradient(115deg,rgba(5,5,8,0.94) 0%,rgba(5,5,8,0.62) 42%,rgba(5,5,8,0.9) 100%),
    radial-gradient(circle at 18% 48%,rgba(200,255,0,0.14),transparent 32%),
    radial-gradient(circle at 78% 22%,rgba(123,94,167,0.18),transparent 30%),
    linear-gradient(145deg,#101018 0%,#050508 58%,#11131d 100%)!important;
  border-bottom:1px solid rgba(255,255,255,0.08)!important;
}
#page-profile .dash-cover::after{
  background:
    linear-gradient(to top,rgba(5,5,8,1) 0%,rgba(5,5,8,0.34) 44%,transparent 100%),
    linear-gradient(135deg,rgba(255,255,255,0.05),transparent 38%,rgba(200,255,0,0.04) 100%)!important;
  animation:none!important;
}
#page-profile .dash-cover-pattern{
  opacity:0.45!important;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px)!important;
  background-size:48px 48px!important;
}
#page-profile .dash-cover-glow{
  width:620px!important;
  height:340px!important;
  left:22%!important;
  background:radial-gradient(ellipse,rgba(200,255,0,0.1) 0%,rgba(123,94,167,0.08) 42%,transparent 70%)!important;
}
#page-profile .dash-cover-edit-btn{
  height:34px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  background:rgba(8,8,12,0.56)!important;
  border-color:rgba(255,255,255,0.14)!important;
  color:rgba(255,255,255,0.82)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
#page-profile .dash-identity-wrap{
  background:linear-gradient(to bottom,rgba(5,5,8,0.98),#050508)!important;
  border-bottom:0!important;
  padding:0 clamp(24px,5vw,72px)!important;
}
#page-profile .dash-identity{
  max-width:1240px!important;
  gap:18px!important;
  align-items:flex-end!important;
  padding-bottom:18px!important;
}
#page-profile .dash-avi-wrap{
  margin-top:-54px!important;
}
#page-profile .dash-avi{
  width:112px!important;
  height:112px!important;
  border-radius:10px!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  background:
    radial-gradient(circle at 30% 24%,rgba(200,255,0,0.28),transparent 34%),
    linear-gradient(145deg,#15151f,#07070b)!important;
  box-shadow:0 22px 46px rgba(0,0,0,0.55),0 0 0 5px #050508!important;
  color:var(--lime)!important;
  letter-spacing:-0.08em!important;
}
#page-profile .dash-avi-edit{
  right:-8px!important;
  bottom:-8px!important;
  width:30px!important;
  height:30px!important;
  border:1px solid rgba(255,255,255,0.16)!important;
  background:rgba(16,16,22,0.88)!important;
  color:rgba(255,255,255,0.74)!important;
}
#page-profile .dash-name{
  font-size:clamp(30px,4.6vw,52px)!important;
  line-height:0.94!important;
  letter-spacing:-0.06em!important;
  color:#fff!important;
}
#page-profile .dash-handle{
  color:rgba(255,255,255,0.48)!important;
  font-size:13px!important;
}
#page-profile .dash-bio{
  max-width:560px!important;
  color:rgba(255,255,255,0.62)!important;
}
#page-profile .dash-plan-badge,
#page-profile .profile-mode-toggle{
  border-radius:999px!important;
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
}
#page-profile .dash-actions{
  gap:9px!important;
}
#page-profile .dash-btn-primary,
#page-profile .dash-btn-ghost,
#page-profile #prof-studio-btn{
  height:38px!important;
  min-height:38px!important;
  border-radius:6px!important;
  padding:0 16px!important;
  box-shadow:none!important;
}
#page-profile .dash-btn-primary{
  background:#fff!important;
  color:#050505!important;
}
#page-profile .dash-btn-primary:hover{
  background:var(--lime)!important;
  opacity:1!important;
}
#page-profile .dash-btn-ghost,
#page-profile #prof-studio-btn{
  background:rgba(255,255,255,0.075)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  color:rgba(255,255,255,0.86)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#page-profile .dash-stats-bar{
  max-width:1240px!important;
  padding:18px clamp(24px,5vw,72px) 24px!important;
}
#page-profile .dash-stat{
  padding-right:34px!important;
}
#page-profile .dash-stat + .dash-stat{
  padding-left:34px!important;
  border-left:1px solid rgba(255,255,255,0.09)!important;
}
#page-profile .dash-stat-val{
  font-size:24px!important;
  font-weight:850!important;
  letter-spacing:-0.04em!important;
  color:#fff!important;
}
#page-profile .dash-stat-key{
  margin-top:4px!important;
  color:rgba(255,255,255,0.42)!important;
  font-size:10px!important;
  letter-spacing:0.12em!important;
  text-transform:uppercase!important;
}
#page-profile .dash-tabs-wrap{
  top:52px!important;
  background:rgba(5,5,8,0.88)!important;
  border-top:1px solid rgba(255,255,255,0.06)!important;
  border-bottom:1px solid rgba(255,255,255,0.08)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
#page-profile .dash-tabs{
  max-width:1240px!important;
  margin:0 auto!important;
  padding:0 clamp(24px,5vw,72px)!important;
}
#page-profile .dash-tab{
  min-height:46px!important;
  color:rgba(255,255,255,0.48)!important;
  font-weight:750!important;
}
#page-profile .dash-tab.active{
  color:#fff!important;
}
#page-profile .dash-tab.active::after{
  background:var(--lime)!important;
}
#page-profile .dash-body{
  max-width:1240px!important;
  grid-template-columns:200px minmax(0,1fr)!important;
  gap:32px!important;
  padding:28px clamp(24px,5vw,72px) 100px!important;
}
#page-profile .dash-desktop-sidebar{
  top:86px!important;
  width:200px!important;
  padding-top:0!important;
}
#page-profile .ds-nav-label{
  color:rgba(255,255,255,0.36)!important;
}
#page-profile .ds-nav-btn{
  min-height:38px!important;
  border-radius:6px!important;
  color:rgba(255,255,255,0.58)!important;
}
#page-profile .ds-nav-btn.active{
  background:rgba(255,255,255,0.09)!important;
  color:#fff!important;
}
#page-profile .dash-quick-grid,
#page-profile .dash-insights-grid{
  gap:16px!important;
}
#page-profile .dash-quick-card,
#page-profile .dash-insight-card,
#page-profile .dash-activity-item,
#page-profile .dash-settings-list,
#page-profile .creator-studio-banner,
#page-profile .empty-state{
  border-radius:8px!important;
  background:rgba(255,255,255,0.045)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  box-shadow:none!important;
}
#page-profile .dash-quick-card:hover,
#page-profile .dash-insight-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(200,255,0,0.2)!important;
}
#page-profile .dash-section-title,
#page-profile .dqc-title,
#page-profile .dash-setting-title{
  color:#fff!important;
}
#page-profile .dqc-sub,
#page-profile .dash-setting-sub,
#page-profile .prof-tabs-empty,
#page-profile .empty-sub{
  color:rgba(255,255,255,0.5)!important;
}
#page-profile .empty-state{
  max-width:520px!important;
  margin:0 auto!important;
  padding:46px 28px!important;
}
#page-profile .empty-title{
  color:#fff!important;
  font-size:22px!important;
  letter-spacing:-0.03em!important;
}
#page-profile .creator-studio-banner{
  position:relative!important;
  overflow:hidden!important;
  padding:22px!important;
  margin-bottom:24px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,0.065),rgba(255,255,255,0.025)),
    radial-gradient(circle at 12% 18%,rgba(200,255,0,0.12),transparent 30%)!important;
}
#page-profile .creator-studio-banner::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(115deg,rgba(255,255,255,0.08),transparent 28%,rgba(200,255,0,0.035) 100%)!important;
  opacity:0.55!important;
  pointer-events:none!important;
}
#page-profile .csb-top,
#page-profile .csb-stats,
#page-profile .csb-actions{
  position:relative!important;
  z-index:1!important;
}
#page-profile .csb-top{
  margin-bottom:18px!important;
}
#page-profile .csb-eyebrow{
  margin-bottom:5px!important;
  color:var(--lime)!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:0.14em!important;
  text-transform:uppercase!important;
}
#page-profile .csb-title{
  font-size:24px!important;
  line-height:1!important;
  letter-spacing:-0.04em!important;
  color:#fff!important;
}
#page-profile .csb-sub{
  margin-top:7px!important;
  color:rgba(255,255,255,0.5)!important;
}
#page-profile .csb-badge{
  height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  background:rgba(200,255,0,0.12)!important;
  border:1px solid rgba(200,255,0,0.28)!important;
  color:var(--lime)!important;
  box-shadow:none!important;
}
#page-profile .csb-stat{
  border-radius:6px!important;
  background:rgba(5,5,8,0.38)!important;
  border:1px solid rgba(255,255,255,0.075)!important;
  text-align:left!important;
}
#page-profile .csb-stat-val{
  color:#fff!important;
  letter-spacing:-0.04em!important;
}
#page-profile .csb-stat-key{
  color:rgba(255,255,255,0.42)!important;
}
#page-profile .csb-btn,
#page-profile .empty-actions .btn-primary,
#page-profile .empty-actions .btn-outline{
  height:38px!important;
  min-height:38px!important;
  border-radius:6px!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#page-profile .csb-btn-primary,
#page-profile .empty-actions .btn-primary{
  background:#fff!important;
  color:#050505!important;
}
#page-profile .csb-btn-outline,
#page-profile .empty-actions .btn-outline{
  background:rgba(255,255,255,0.07)!important;
  border:1px solid rgba(255,255,255,0.13)!important;
  color:rgba(255,255,255,0.86)!important;
}
#page-profile .profile-empty-panel,
#page-profile .prof-tabs-empty{
  position:relative!important;
  overflow:hidden!important;
  padding:44px 28px!important;
  border-radius:8px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,0.055),rgba(255,255,255,0.025)),
    radial-gradient(circle at 50% 0%,rgba(200,255,0,0.1),transparent 32%)!important;
  border:1px solid rgba(255,255,255,0.085)!important;
  color:rgba(255,255,255,0.56)!important;
}
#page-profile .profile-empty-panel::before,
#page-profile .prof-tabs-empty::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(to bottom,rgba(255,255,255,0.045),transparent 42%)!important;
  pointer-events:none!important;
}
#page-profile .empty-kicker{
  margin-bottom:7px!important;
  color:var(--lime)!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:0.14em!important;
  text-transform:uppercase!important;
}
#page-profile .empty-actions{
  display:flex!important;
  justify-content:center!important;
  gap:9px!important;
  flex-wrap:wrap!important;
  margin-top:18px!important;
}
#page-profile .prof-tabs-empty svg,
#page-profile .empty-icon svg{
  color:var(--lime)!important;
  opacity:0.85!important;
}
#page-profile .dqc-icon,
#page-profile .dic-icon,
#page-profile .dai-icon,
#page-profile .ctc-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-shrink:0!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,rgba(200,255,0,0.14),rgba(255,255,255,0.045))!important;
  border:1px solid rgba(200,255,0,0.2)!important;
  color:var(--lime)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)!important;
}
#page-profile .dqc-icon{
  width:42px!important;
  height:42px!important;
  margin:0 auto 12px!important;
}
#page-profile .dic-icon,
#page-profile .dai-icon,
#page-profile .ctc-icon{
  width:36px!important;
  height:36px!important;
  font-size:0!important;
}
#page-profile .dqc-icon svg,
#page-profile .dic-icon svg,
#page-profile .dai-icon svg,
#page-profile .ctc-icon svg{
  width:18px!important;
  height:18px!important;
}
#page-profile .btn-primary svg,
#page-profile .btn-outline svg,
#page-profile .csb-btn svg{
  width:14px!important;
  height:14px!important;
  margin-right:7px!important;
  vertical-align:-2px!important;
}
#page-profile .pmt-btn svg,
#page-profile #prof-studio-btn svg,
#page-profile .csb-badge svg{
  width:12px!important;
  height:12px!important;
  margin-right:6px!important;
  vertical-align:-2px!important;
}
#page-profile .dash-quick-grid{
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr))!important;
}
#page-profile .dash-insights-grid{
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr))!important;
}
#page-profile .dash-activity-item{
  align-items:flex-start!important;
}
@media(max-width:768px){
  #page-profile .dash-cover{
    height:178px!important;
  }
  #page-profile .dash-identity-wrap{
    padding:0 16px!important;
  }
  #page-profile .dash-identity{
    align-items:flex-start!important;
    gap:12px!important;
    padding-bottom:14px!important;
  }
  #page-profile .dash-avi-wrap{
    margin-top:-34px!important;
  }
  #page-profile .dash-avi{
    width:70px!important;
    height:70px!important;
    border-radius:8px!important;
    font-size:20px!important;
  }
  #page-profile .dash-name{
    font-size:24px!important;
    line-height:1!important;
  }
  #page-profile .dash-actions{
    width:100%!important;
    margin-top:10px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr auto!important;
  }
  #page-profile .dash-btn-primary,
  #page-profile .dash-btn-ghost{
    justify-content:center!important;
  }
  #page-profile .dash-stats-bar{
    padding:14px 16px 18px!important;
    overflow-x:auto!important;
  }
  #page-profile .dash-stat{
    min-width:76px!important;
    padding-right:18px!important;
  }
  #page-profile .dash-stat + .dash-stat{
    padding-left:18px!important;
  }
  #page-profile .dash-tabs{
    padding:0 16px!important;
  }
  #page-profile .dash-body{
    display:block!important;
    padding:18px 16px 96px!important;
  }
  #page-profile .dash-desktop-sidebar{
    display:none!important;
  }
  #page-profile .dash-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  #page-profile .dash-insights-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  #page-profile .dash-quick-card,
  #page-profile .dash-insight-card{
    padding:14px 10px!important;
    border-radius:8px!important;
  }
  #page-profile .dqc-icon{
    width:36px!important;
    height:36px!important;
    margin-bottom:8px!important;
  }
  #page-profile .dic-icon,
  #page-profile .dai-icon,
  #page-profile .ctc-icon{
    width:32px!important;
    height:32px!important;
  }
  #page-profile .dic-val{
    font-size:20px!important;
  }
  #page-profile .profile-empty-panel,
  #page-profile .prof-tabs-empty{
    padding:32px 18px!important;
  }
}
@media(max-width:420px){
  #page-profile .dash-actions{
    grid-template-columns:1fr 1fr!important;
  }
  #page-profile .dash-btn-icon{
    grid-column:auto!important;
  }
  #page-profile .dash-btn-primary,
  #page-profile .dash-btn-ghost{
    padding:0 10px!important;
    font-size:11px!important;
  }
  #page-profile .dash-quick-grid,
  #page-profile .dash-insights-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #page-profile .dash-quick-card{
    min-height:104px!important;
  }
  #page-profile .dash-activity-item{
    padding:12px!important;
  }
}
@media(max-width:600px){
  html body #page-discover .disc-hero{
    padding:52px 10px 10px!important;
    border-radius:0!important;
    margin-bottom:8px!important;
  }
  html body #page-discover .disc-hero-badge{
    min-height:20px!important;
    padding:0 8px!important;
    margin-bottom:7px!important;
    font-size:8px!important;
    letter-spacing:1.6px!important;
  }
  html body #page-discover .disc-hero-title{
    font-size:22px!important;
    line-height:1.02!important;
    margin-bottom:6px!important;
    max-width:320px!important;
  }
  html body #page-discover .disc-hero-sub{
    max-width:330px!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    margin-bottom:0!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  html body #page-discover .disc-hero-btns{
    display:none!important;
  }
  html body #page-discover .disc-sticky-bar{
    padding:6px 8px!important;
    margin:0!important;
    gap:6px!important;
    min-height:0!important;
  }
  html body #page-discover .disc-filter-chips{
    display:flex!important;
    padding:6px 8px 5px!important;
    margin:0 0 8px!important;
    gap:6px!important;
  }
  html body #page-discover .disc-chip,
  html body #page-discover .disc-sticky-pill{
    min-height:28px!important;
    padding:0 9px!important;
    border-radius:999px!important;
    font-size:10.5px!important;
    gap:4px!important;
  }
  html body #page-discover .disc-chip svg{
    width:11px!important;
    height:11px!important;
  }
  html body #page-discover .disc-content,
  html body #page-discover .disc-content-area{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  html body #page-discover .disc-content-area{
    padding-top:8px!important;
    padding-bottom:36px!important;
  }
  html body #page-discover .disc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:10px!important;
  }
  html body #page-discover .disc-card{
    border-radius:5px!important;
    border-color:rgba(255,255,255,0.055)!important;
    background:#101015!important;
  }
  html body #page-discover .disc-card-thumb,
  html body #page-discover .disc-card-wide .disc-card-thumb{
    aspect-ratio:3 / 5!important;
    border-radius:5px 5px 0 0!important;
  }
  html body #page-discover .disc-card-pin{
    padding:8px 8px 10px!important;
  }
  html body #page-discover .disc-card-title{
    font-size:12.5px!important;
    line-height:1.2!important;
  }
  html body #page-discover .disc-card-meta{
    font-size:10px!important;
    margin-top:4px!important;
  }
}
@media(max-width:420px){
  html body #page-discover .disc-content,
  html body #page-discover .disc-content-area{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  html body #page-discover .disc-grid{
    gap:6px!important;
  }
  html body #page-discover .disc-card{
    border-radius:4px!important;
  }
  html body #page-discover .disc-card-thumb,
  html body #page-discover .disc-card-wide .disc-card-thumb{
    border-radius:4px 4px 0 0!important;
  }
}

/* Final profile/discover polish. */
.mn-profile-avatar{
  width:24px!important;
  height:24px!important;
  border-radius:50%!important;
  background:rgba(200,255,0,0.15)!important;
  border:1.5px solid var(--lime)!important;
  color:var(--lime)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  font-family:'Inter',sans-serif!important;
  font-size:9px!important;
  font-weight:800!important;
  line-height:1!important;
  flex:0 0 auto!important;
}
.mn-profile-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
#mnt-profile.active .mn-profile-avatar{
  border-color:var(--lime)!important;
  box-shadow:0 0 0 3px rgba(200,255,0,0.12)!important;
}

#page-discover .disc-chip,
#page-discover .disc-sticky-pill{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  height:34px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  font-family:'Inter',sans-serif!important;
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:0!important;
  color:rgba(232,232,240,0.68)!important;
  background:rgba(255,255,255,0.045)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  transition:background 0.16s,border-color 0.16s,color 0.16s,transform 0.16s!important;
}
#page-discover .disc-chip:hover,
#page-discover .disc-sticky-pill:hover{
  background:rgba(255,255,255,0.075)!important;
  border-color:rgba(255,255,255,0.16)!important;
  color:rgba(255,255,255,0.9)!important;
  transform:translateY(-1px)!important;
}
#page-discover .disc-chip.active,
#page-discover .disc-sticky-pill.active{
  background:rgba(200,255,0,0.12)!important;
  border-color:rgba(200,255,0,0.32)!important;
  color:var(--lime)!important;
  font-weight:700!important;
}
#page-discover .disc-chip svg,
#page-discover .disc-sticky-pill svg{
  width:13px!important;
  height:13px!important;
  flex:0 0 auto!important;
  stroke:currentColor!important;
  opacity:0.72!important;
}
#page-discover .disc-chip.active svg,
#page-discover .disc-sticky-pill.active svg{
  opacity:1!important;
}
#page-discover .disc-card-thumb,
#page-discover .disc-card-wide .disc-card-thumb{
  aspect-ratio:4 / 5!important;
}
@media(max-width:600px){
  html body #page-discover .disc-card-thumb,
  html body #page-discover .disc-card-wide .disc-card-thumb{
    aspect-ratio:4 / 5!important;
  }
  html body #page-discover .disc-chip,
  html body #page-discover .disc-sticky-pill{
    height:30px!important;
    padding:0 11px!important;
    font-size:11.5px!important;
  }
}
@media(max-width:380px){
  #page-discover .disc-content,
  #page-discover .disc-content-area{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  #page-discover .disc-grid{
    gap:18px!important;
  }
}

/* Discover premium finishing pass. */
#page-discover{
  background:#050508!important;
}
#page-discover .disc-sidebar{
  background:linear-gradient(180deg,rgba(9,9,13,0.96),rgba(5,5,8,0.98))!important;
  border-right:1px solid rgba(255,255,255,0.07)!important;
}
#page-discover .ds-label{
  color:rgba(255,255,255,0.36)!important;
}
#page-discover .ds-btn{
  min-height:38px!important;
  color:rgba(255,255,255,0.58)!important;
  border-left-width:3px!important;
}
#page-discover .ds-btn:hover{
  color:#fff!important;
  background:rgba(255,255,255,0.055)!important;
}
#page-discover .ds-btn.active,
#page-discover .disc-sidebar .ds-btn.active{
  background:linear-gradient(90deg,rgba(200,255,0,0.11),transparent)!important;
  color:var(--lime)!important;
  border-left-color:var(--lime)!important;
}
#page-discover .disc-hero{
  min-height:310px!important;
  padding:84px 40px 42px!important;
  background:
    linear-gradient(90deg,rgba(5,5,8,0.96) 0%,rgba(5,5,8,0.7) 48%,rgba(5,5,8,0.42) 100%),
    radial-gradient(circle at 75% 25%,rgba(200,255,0,0.12),transparent 32%),
    radial-gradient(circle at 92% 68%,rgba(123,94,167,0.22),transparent 34%),
    linear-gradient(145deg,#15151f,#06070b 58%,#101521)!important;
}
#page-discover .disc-hero::before{
  background:
    linear-gradient(to top,rgba(5,5,8,0.98),transparent 52%),
    linear-gradient(115deg,rgba(255,255,255,0.08),transparent 28%,rgba(200,255,0,0.055) 100%)!important;
}
#page-discover .disc-hero-grid{
  opacity:0.36!important;
  background-size:54px 54px!important;
}
#page-discover .disc-hero-inner{
  max-width:680px!important;
}
#page-discover .disc-hero-badge{
  height:26px!important;
  padding:0 10px!important;
  border-radius:4px!important;
  background:rgba(8,8,12,0.58)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  color:var(--lime)!important;
  letter-spacing:0.12em!important;
  font-size:10px!important;
}
#page-discover .disc-hero-badge::before{
  display:none!important;
}
#page-discover .disc-hero-title{
  max-width:11ch!important;
  margin:12px 0 16px!important;
  font-size:clamp(48px,7vw,82px)!important;
  line-height:0.92!important;
  letter-spacing:-0.065em!important;
  color:#fff!important;
}
#page-discover .disc-hero-title em{
  color:#fff!important;
  text-shadow:0 0 34px rgba(200,255,0,0.18)!important;
}
#page-discover .disc-hero-sub{
  max-width:58ch!important;
  color:rgba(255,255,255,0.68)!important;
  font-size:15px!important;
  line-height:1.5!important;
  margin-bottom:0!important;
}
#page-discover .disc-hero-cards{
  right:44px!important;
  gap:12px!important;
}
#page-discover .disc-hero-mini-card{
  width:92px!important;
  border-radius:6px!important;
  box-shadow:0 18px 44px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.12)!important;
}
#page-discover .disc-sticky-bar{
  top:52px!important;
  z-index:64!important;
  margin:0!important;
  padding:12px 40px!important;
  gap:8px!important;
  background:rgba(5,5,8,0.84)!important;
  border-bottom:1px solid rgba(255,255,255,0.075)!important;
  box-shadow:0 12px 34px rgba(0,0,0,0.22)!important;
}
#page-discover .disc-sticky-pill{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  height:34px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,0.055)!important;
  border:1px solid rgba(255,255,255,0.095)!important;
  color:rgba(255,255,255,0.62)!important;
  font-size:12px!important;
  font-weight:760!important;
}
#page-discover .disc-sticky-pill:hover{
  background:rgba(255,255,255,0.075)!important;
  border-color:rgba(255,255,255,0.16)!important;
  color:rgba(255,255,255,0.9)!important;
  transform:translateY(-1px)!important;
}
#page-discover .disc-sticky-pill.active{
  background:rgba(200,255,0,0.12)!important;
  border-color:rgba(200,255,0,0.32)!important;
  color:var(--lime)!important;
}
#page-discover .disc-content-area{
  padding:28px 40px 72px!important;
}
/* Discover sticky bar — search input + history dropdown */
.disc-bar-search{margin-left:auto;flex-shrink:0;position:relative}
.disc-bar-search-wrap{
  display:flex;align-items:center;gap:6px;
  height:34px;padding:0 12px 0 10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:999px;
  width:160px;
  transition:background 0.15s,border-color 0.15s,width 0.22s;
}
.disc-bar-search-wrap:focus-within{
  background:rgba(255,255,255,0.09);
  border-color:rgba(255,255,255,0.18);
  width:220px;
}
.disc-bar-search-icon{color:rgba(255,255,255,0.4);flex-shrink:0}
.disc-bar-input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--text);font-size:12px;font-family:'Inter',sans-serif;font-weight:500;
}
.disc-bar-input::placeholder{color:rgba(255,255,255,0.32)}
.disc-bar-clear{
  display:none;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,0.14);border:none;
  color:var(--text);cursor:pointer;flex-shrink:0;padding:0;
}
.disc-bar-clear.visible{display:flex}
.disc-bar-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  width:280px;background:rgba(10,10,15,0.97);
  border:1px solid rgba(255,255,255,0.1);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,0.55);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:10px 0;z-index:200;overflow:hidden;
}
.disc-bar-dropdown.open{display:block}
.dsdd-section{padding:4px 0}
.dsdd-section+.dsdd-section{border-top:1px solid rgba(255,255,255,0.06);margin-top:4px;padding-top:8px}
.dsdd-label{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px 6px;font-size:10px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.32);
}
.dsdd-clear-all{
  font-size:10px;color:rgba(255,255,255,0.35);background:none;border:none;
  cursor:pointer;font-family:inherit;letter-spacing:0;
  text-transform:none;text-decoration:underline;
}
.dsdd-clear-all:hover{color:rgba(255,255,255,0.65)}
.dsdd-recent{
  display:flex;align-items:center;gap:8px;padding:7px 14px;
  cursor:pointer;transition:background 0.12s;
  font-size:13px;color:rgba(255,255,255,0.72);
}
.dsdd-recent:hover{background:rgba(255,255,255,0.05)}
.dsdd-recent svg{flex-shrink:0;color:rgba(255,255,255,0.28)}
.dsdd-recent-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsdd-del{
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:none;border:none;color:rgba(255,255,255,0.28);
  cursor:pointer;font-size:9px;flex-shrink:0;padding:0;line-height:1;
}
.dsdd-del:hover{color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.08)}
.dsdd-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
.dsdd-chip{
  padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.09);
  color:rgba(255,255,255,0.68);cursor:pointer;
  transition:background 0.15s,color 0.15s,border-color 0.15s;
  font-family:'Inter',sans-serif;
}
.dsdd-chip:hover{background:rgba(200,255,0,0.1);border-color:rgba(200,255,0,0.25);color:var(--lime)}
.dsdd-hint{padding:12px 14px;font-size:12.5px;color:rgba(255,255,255,0.5)}
.dsdd-hint strong{color:var(--text);font-weight:600}
@media(max-width:768px){.disc-bar-search{display:none}}
#page-discover .disc-bar{
  align-items:center!important;
  margin-bottom:26px!important;
}
#page-discover .disc-info-count{
  display:inline-flex!important;
  align-items:center!important;
  min-height:32px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,0.045)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  color:rgba(255,255,255,0.54)!important;
}
#page-discover .disc-sort-seg{
  border-radius:999px!important;
  background:rgba(255,255,255,0.055)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
}
#page-discover .disc-sort-pill.active{
  background:#fff!important;
  color:#050505!important;
}
#page-discover .disc-grid{
  grid-template-columns:repeat(auto-fill,minmax(172px,1fr))!important;
  gap:24px!important;
  margin-top:0!important;
}
#page-discover .disc-card{
  border-radius:6px!important;
  background:#09090d!important;
  border:0!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.06)!important;
  transition:transform 0.24s cubic-bezier(0.22,1,0.36,1),box-shadow 0.24s cubic-bezier(0.22,1,0.36,1),filter 0.18s ease!important;
}
#page-discover .disc-card:hover{
  transform:translateY(-7px) scale(1.045)!important;
  box-shadow:0 22px 46px rgba(0,0,0,0.68),0 0 0 1px rgba(255,255,255,0.14),0 0 0 2px rgba(200,255,0,0.16)!important;
  z-index:10!important;
}
#page-discover .disc-card-thumb{
  border-radius:6px!important;
  background:linear-gradient(145deg,#171722,#08080d)!important;
}
#page-discover .disc-card-thumb::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(105deg,rgba(255,255,255,0.1),transparent 26%,transparent 74%,rgba(255,255,255,0.035)),radial-gradient(circle at 50% 0%,rgba(255,255,255,0.08),transparent 40%)!important;
  opacity:0.42!important;
  pointer-events:none!important;
}
#page-discover .disc-card:hover .disc-card-thumb img{
  transform:scale(1.075)!important;
  filter:saturate(1.08) contrast(1.04)!important;
}
#page-discover .disc-card-grad{
  background:linear-gradient(to top,rgba(0,0,0,0.96) 0%,rgba(0,0,0,0.76) 31%,rgba(0,0,0,0.18) 68%,rgba(0,0,0,0.04) 100%)!important;
}
#page-discover .disc-card-pin{
  padding:42px 10px 11px!important;
}
#page-discover .disc-card:hover .disc-card-pin{
  padding-bottom:50px!important;
}
#page-discover .disc-card-kicker{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-bottom:6px!important;
  min-width:0!important;
}
#page-discover .disc-card-kicker span,
#page-discover .disc-card-kicker em{
  display:inline-flex!important;
  align-items:center!important;
  height:18px!important;
  max-width:100%!important;
  padding:0 6px!important;
  border-radius:3px!important;
  background:rgba(255,255,255,0.085)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  color:rgba(255,255,255,0.76)!important;
  font-style:normal!important;
  font-size:7.5px!important;
  font-weight:850!important;
  letter-spacing:0.09em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#page-discover .disc-card-kicker em{
  color:var(--lime)!important;
  border-color:rgba(200,255,0,0.18)!important;
  background:rgba(200,255,0,0.09)!important;
}
#page-discover .disc-card-title{
  font-size:13px!important;
  font-weight:830!important;
  line-height:1.16!important;
  letter-spacing:-0.02em!important;
  color:#fff!important;
  text-shadow:0 2px 10px rgba(0,0,0,0.75)!important;
}
#page-discover .disc-card-meta{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin-top:6px!important;
  font-size:10px!important;
  color:rgba(255,255,255,0.55)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
#page-discover .disc-card-rating{
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  color:var(--lime)!important;
  font-weight:850!important;
}
#page-discover .disc-card-tags{
  display:flex!important;
  gap:5px!important;
  margin-top:7px!important;
  opacity:0!important;
  transform:translateY(4px)!important;
  transition:opacity 0.18s ease,transform 0.18s ease!important;
}
#page-discover .disc-card:hover .disc-card-tags{
  opacity:1!important;
  transform:translateY(0)!important;
}
#page-discover .disc-card-tags span{
  height:19px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,0.09)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  color:rgba(255,255,255,0.68)!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:19px!important;
}
#page-discover .disc-act-btn{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  border-radius:999px!important;
  background:rgba(16,16,22,0.82)!important;
  border:1px solid rgba(255,255,255,0.15)!important;
}
#page-discover .disc-act-play{
  background:#fff!important;
  border-color:#fff!important;
  color:#050505!important;
}
#page-discover .disc-empty{
  border-radius:8px!important;
  background:rgba(255,255,255,0.035)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
}
@media(max-width:900px){
  #page-discover .disc-hero{
    padding:76px 24px 34px!important;
  }
  #page-discover .disc-content-area{
    padding-left:24px!important;
    padding-right:24px!important;
  }
  #page-discover .disc-sticky-bar{
    padding-left:24px!important;
    padding-right:24px!important;
  }
}
@media(max-width:600px){
  html body #page-discover .disc-hero{
    min-height:244px!important;
    padding:64px 14px 20px!important;
    margin-bottom:0!important;
  }
  html body #page-discover .disc-hero-title{
    max-width:11ch!important;
    font-size:clamp(30px,11vw,44px)!important;
    line-height:0.94!important;
    margin:8px 0 10px!important;
  }
  html body #page-discover .disc-hero-sub{
    max-width:36ch!important;
    font-size:12.5px!important;
    line-height:1.4!important;
    -webkit-line-clamp:3!important;
  }
  html body #page-discover .disc-sticky-bar{
    display:flex!important;
    top:56px!important;
    padding:8px 14px!important;
  }
  html body #page-discover .disc-filter-chips{
    display:none!important;
  }
  html body #page-discover .disc-content-area{
    padding:16px 14px 96px!important;
  }
  html body #page-discover .disc-bar{
    gap:10px!important;
    margin-bottom:14px!important;
  }
  html body #page-discover .disc-info-count{
    width:100%!important;
    justify-content:center!important;
    font-size:11px!important;
  }
  html body #page-discover .disc-sort,
  html body #page-discover .disc-sort-seg{
    width:100%!important;
  }
  html body #page-discover .disc-sort-pill{
    flex:1!important;
    justify-content:center!important;
  }
  html body #page-discover .disc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  html body #page-discover .disc-card{
    border-radius:6px!important;
  }
  html body #page-discover .disc-card-pin{
    padding:34px 8px 9px!important;
  }
  html body #page-discover .disc-card-kicker em,
  html body #page-discover .disc-card-tags{
    display:none!important;
  }
  html body #page-discover .disc-card-kicker span{
    height:16px!important;
    font-size:7px!important;
  }
  html body #page-discover .disc-card-title{
    font-size:11.5px!important;
  }
  html body #page-discover .disc-card-meta{
    margin-top:4px!important;
    font-size:8.5px!important;
  }
}

/* Mobile hero actions: keep one row, tighten spacing and sizing. */
@media(max-width:768px){
  html body #page-home .fh-btns{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    max-width:360px!important;
  }
  html body #page-home .fh-btn-play,
  html body #page-home .fh-btn-info{
    flex:1 1 0!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 12px!important;
    border-radius:8px!important;
    justify-content:center!important;
    font-size:12.5px!important;
    line-height:1!important;
  }
  html body #page-home .fh-btn-play{
    flex:1.25 1 0!important;
  }
  html body #page-home .fh-btn-list{
    justify-content:center!important;
  }
  html body #page-home .fh-btn-list.is-listed{
    gap:5px!important;
  }
  html body #page-home .fh-btn-more svg{
    width:14px!important;
    height:14px!important;
  }
}
@media(max-width:420px){
  html body #page-home .fh-btns{
    gap:6px!important;
    max-width:none!important;
  }
  html body #page-home .fh-btn-play,
  html body #page-home .fh-btn-info{
    height:36px!important;
    min-height:36px!important;
    padding:0 10px!important;
    font-size:11px!important;
    border-radius:7px!important;
  }
}

/* Final hero control alignment. */
#page-home .featured-hero .fh-controls{
  left:auto!important;
  right:var(--home-left)!important;
  bottom:clamp(8px,1.8vw,18px)!important;
  transform:none!important;
  justify-self:end!important;
}
#page-home .featured-hero .fh-dots{
  align-items:center!important;
}
#page-home .featured-hero .fh-nav{
  align-items:center!important;
}
@media(max-width:768px){
  #page-home .featured-hero .fh-controls{
    left:auto!important;
    right:var(--home-left)!important;
    bottom:14px!important;
    gap:6px!important;
    padding:5px 7px!important;
  }
}

/* Mobile home scroll pass: compact the hero and keep anchored sections clear of the fixed nav. */
@media(max-width:768px){
  html body #page-home .featured-hero{
    min-height:500px!important;
    height:500px!important;
    max-height:62svh!important;
  }
  html body #page-home #guest-hero-overlay{
    padding-bottom:24px!important;
  }
  html body #page-home #guest-hero-overlay .gho-inner{
    justify-content:flex-start!important;
    padding:126px var(--home-left) 28px!important;
  }
  html body #page-home .gho-sub{
    margin-bottom:18px!important;
  }
  html body #page-home .genre-filter-bar,
  html body #page-home #home-content-row{
    scroll-margin-top:72px;
    outline:none!important;
  }
}
@media(max-width:420px){
  html body #page-home .featured-hero{
    min-height:470px!important;
    height:470px!important;
    max-height:60svh!important;
  }
  html body #page-home #guest-hero-overlay .gho-inner{
    padding-top:122px!important;
  }
}

/* Guest landing visual pass: match the cinematic home hero while softening the lime accent. */
#page-home #guest-hero-overlay{
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(5,5,8,0.98) 0%,rgba(5,5,8,0.82) 34%,rgba(5,5,8,0.34) 64%,rgba(5,5,8,0.7) 100%),
    linear-gradient(to top,rgba(5,5,8,1) 0%,rgba(5,5,8,0.16) 42%,transparent 78%)!important;
  pointer-events:none!important;
}
#page-home #guest-hero-overlay::before{
  content:''!important;
  position:absolute!important;
  inset:auto clamp(18px,7vw,92px) clamp(58px,10vh,112px) auto!important;
  width:clamp(210px,24vw,360px)!important;
  aspect-ratio:1!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle,rgba(220,255,104,0.18) 0%,rgba(200,255,0,0.08) 34%,transparent 68%)!important;
  filter:blur(10px)!important;
  opacity:0.72!important;
  pointer-events:none!important;
}
#page-home #guest-hero-overlay::after{
  content:''!important;
  position:absolute!important;
  right:clamp(18px,7vw,92px)!important;
  bottom:clamp(66px,11vh,128px)!important;
  width:clamp(148px,16vw,238px)!important;
  aspect-ratio:0.72!important;
  border-radius:8px!important;
  background:
    linear-gradient(160deg,rgba(255,255,255,0.16),rgba(255,255,255,0.04) 38%,rgba(200,255,0,0.08)),
    radial-gradient(circle at 48% 26%,rgba(255,255,255,0.18),transparent 34%),
    linear-gradient(145deg,#171722,#07070b 62%,#161b1d)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  box-shadow:-32px 24px 70px rgba(0,0,0,0.58),0 0 0 1px rgba(0,0,0,0.35),0 0 44px rgba(200,255,0,0.06)!important;
  opacity:0.74!important;
  transform:rotate(4deg)!important;
  pointer-events:none!important;
}
#page-home #guest-hero-overlay .gho-inner{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-height:100%!important;
  max-width:760px!important;
  justify-content:center!important;
  padding:clamp(86px,12vh,132px) clamp(24px,5vw,72px) clamp(64px,10vh,108px)!important;
  background:transparent!important;
  pointer-events:auto!important;
}
#page-home #guest-hero-overlay .gho-eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  min-height:26px!important;
  padding:0 10px!important;
  border-radius:4px!important;
  background:rgba(8,8,12,0.58)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  color:rgba(222,255,110,0.86)!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:0.12em!important;
  margin-bottom:14px!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#page-home #guest-hero-overlay .gho-title{
  max-width:10.5ch!important;
  margin:0 0 18px!important;
  color:#fff!important;
  font-size:clamp(54px,7.4vw,96px)!important;
  line-height:0.9!important;
  letter-spacing:-0.07em!important;
  text-shadow:0 22px 58px rgba(0,0,0,0.78)!important;
}
#page-home #guest-hero-overlay .gho-title em{
  color:#eaffaa!important;
  background:linear-gradient(90deg,#fff 0%,#eaffaa 44%,#bdf150 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
}
#page-home #guest-hero-overlay .gho-sub{
  max-width:54ch!important;
  margin-bottom:26px!important;
  color:rgba(255,255,255,0.72)!important;
  font-size:clamp(15px,1.35vw,18px)!important;
  line-height:1.52!important;
}
#page-home #guest-hero-overlay .gho-dual-cta{
  gap:10px!important;
  pointer-events:auto!important;
}
#page-home #guest-hero-overlay .gho-btn-watch,
#page-home #guest-hero-overlay .gho-btn-create{
  height:46px!important;
  min-height:46px!important;
  border-radius:5px!important;
  padding:0 22px!important;
  font-size:14px!important;
  font-weight:850!important;
  pointer-events:auto!important;
}
#page-home #guest-hero-overlay .gho-btn-watch{
  background:#f4f4f0!important;
  color:#050505!important;
  box-shadow:0 14px 36px rgba(0,0,0,0.36)!important;
}
#page-home #guest-hero-overlay .gho-btn-watch:hover{
  background:#e7ff86!important;
  opacity:1!important;
  transform:translateY(-1px)!important;
}
#page-home #guest-hero-overlay .gho-btn-create{
  background:rgba(109,109,118,0.46)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  color:#fff!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#page-home #guest-hero-overlay .gho-btn-create:hover{
  background:rgba(140,140,150,0.58)!important;
}
#page-home #guest-hero-overlay .gho-or{
  color:rgba(255,255,255,0.38)!important;
}
@media(max-width:768px){
  html body #page-home #guest-hero-overlay{
    background:
      linear-gradient(to top,rgba(5,5,8,1) 0%,rgba(5,5,8,0.92) 34%,rgba(5,5,8,0.44) 68%,rgba(5,5,8,0.18) 100%),
      linear-gradient(90deg,rgba(5,5,8,0.96),rgba(5,5,8,0.2))!important;
  }
  html body #page-home #guest-hero-overlay::after{
    right:-28px!important;
    bottom:44px!important;
    width:136px!important;
    opacity:0.34!important;
  }
  html body #page-home #guest-hero-overlay .gho-inner{
    max-width:none!important;
    justify-content:flex-end!important;
    padding:112px 18px 34px!important;
  }
  html body #page-home #guest-hero-overlay .gho-eyebrow{
    min-height:24px!important;
    font-size:8.5px!important;
    letter-spacing:0.1em!important;
    margin-bottom:10px!important;
  }
  html body #page-home #guest-hero-overlay .gho-title{
    max-width:11ch!important;
    font-size:clamp(38px,12.5vw,58px)!important;
    line-height:0.94!important;
    letter-spacing:-0.055em!important;
    margin-bottom:12px!important;
  }
  html body #page-home #guest-hero-overlay .gho-sub{
    max-width:34ch!important;
    font-size:14px!important;
    line-height:1.46!important;
    margin-bottom:18px!important;
  }
  html body #page-home #guest-hero-overlay .gho-dual-cta{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:9px!important;
    width:100%!important;
    max-width:360px!important;
  }
  html body #page-home #guest-hero-overlay .gho-btn-watch,
  html body #page-home #guest-hero-overlay .gho-btn-create{
    width:100%!important;
    justify-content:center!important;
    height:46px!important;
  }
  html body #page-home #guest-hero-overlay .gho-or{
    display:none!important;
  }
}
@media(max-width:380px){
  html body #page-home #guest-hero-overlay .gho-inner{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  html body #page-home #guest-hero-overlay .gho-title{
    font-size:clamp(34px,12vw,48px)!important;
  }
}

/* Guest landing spacing pass: let content below the hero appear in the first viewport. */
body.guest-landing-active{
  --home-left:40px;
}
body.guest-landing-active #page-home .featured-hero{
  min-height:clamp(560px,66svh,640px)!important;
  height:clamp(560px,66svh,640px)!important;
  max-height:640px!important;
}
body.guest-landing-active nav#main-nav{
  padding-left:var(--home-left)!important;
  padding-right:var(--home-left)!important;
}
body.guest-landing-active #page-home #guest-hero-overlay{
  padding:0!important;
}
body.guest-landing-active #page-home #guest-hero-overlay .gho-inner{
  justify-content:center!important;
  max-width:720px!important;
  padding-left:var(--home-left)!important;
  padding-right:var(--home-left)!important;
  padding-top:clamp(104px,12vh,132px)!important;
  padding-bottom:clamp(34px,5vh,56px)!important;
}
body.guest-landing-active #page-home #guest-hero-overlay .gho-title{
  margin-bottom:14px!important;
  font-size:clamp(50px,6.5vw,84px)!important;
}
body.guest-landing-active #page-home #guest-hero-overlay .gho-sub{
  margin-bottom:22px!important;
}
body.guest-landing-active #page-home #guest-hero-overlay::after{
  bottom:clamp(38px,7vh,84px)!important;
}
body.guest-landing-active #page-home #hero-bridge{
  height:clamp(10px,2vh,22px)!important;
}
body.guest-landing-active #page-home #social-proof-strip{
  padding-top:8px!important;
  padding-bottom:8px!important;
}
body.guest-landing-active #page-home .genre-filter-bar{
  padding-top:8px!important;
  padding-bottom:8px!important;
}
body.guest-landing-active #main-nav{
  height:60px!important;
  background:rgba(7,7,11,0.72)!important;
  border-bottom:1px solid rgba(255,255,255,0.075)!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
}
body.guest-landing-active #main-nav .logo{
  color:#d6ff38!important;
  font-size:18px!important;
  font-weight:900!important;
  letter-spacing:-0.045em!important;
}
body.guest-landing-active #main-nav .nav-links{
  gap:18px!important;
  margin-left:clamp(34px,5vw,72px)!important;
}
body.guest-landing-active #main-nav .nav-link{
  height:60px!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(255,255,255,0.48)!important;
  border:0!important;
  font-size:13px!important;
  font-weight:750!important;
  letter-spacing:-0.01em!important;
  position:relative!important;
}
body.guest-landing-active #main-nav .nav-link:hover,
body.guest-landing-active #main-nav .nav-link.active{
  color:#fff!important;
  background:transparent!important;
}
body.guest-landing-active #main-nav .nav-link.active::after{
  content:''!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:14px!important;
  height:2px!important;
  border-radius:999px!important;
  background:rgba(214,255,56,0.86)!important;
}
body.guest-landing-active #main-nav .nav-actions{
  gap:10px!important;
}
body.guest-landing-active #main-nav .nav-icon-btn,
body.guest-landing-active #main-nav #theme-toggle-btn,
body.guest-landing-active #main-nav .nav-menu-btn{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  border-radius:999px!important;
  background:transparent!important;
  border:0!important;
  color:rgba(255,255,255,0.62)!important;
  box-shadow:none!important;
}
body.guest-landing-active #main-nav .nav-icon-btn:hover,
body.guest-landing-active #main-nav #theme-toggle-btn:hover,
body.guest-landing-active #main-nav .nav-menu-btn:hover{
  background:rgba(255,255,255,0.08)!important;
  color:#fff!important;
}
body.guest-landing-active #main-nav .btn-signin{
  height:38px!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(255,255,255,0.78)!important;
  font-size:13px!important;
  font-weight:800!important;
}
body.guest-landing-active #main-nav .btn-signin:hover{
  color:#fff!important;
}
body.guest-landing-active #main-nav .btn-signup{
  height:38px!important;
  min-height:38px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  background:#d6ff38!important;
  color:#050505!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:0 10px 26px rgba(200,255,0,0.14)!important;
}
body.guest-landing-active #main-nav .btn-signup:hover{
  background:#e8ff83!important;
  opacity:1!important;
}
@media(max-width:768px){
  body.guest-landing-active{
    --home-left:18px;
  }
  body.guest-landing-active nav#main-nav{
    padding-left:14px!important;
    padding-right:12px!important;
  }
  body.guest-landing-active #page-home .featured-hero{
    min-height:430px!important;
    height:430px!important;
    max-height:54svh!important;
  }
  body.guest-landing-active #page-home #guest-hero-overlay .gho-inner{
    justify-content:flex-end!important;
    padding:80px var(--home-left) 24px!important;
  }
  body.guest-landing-active #page-home #guest-hero-overlay .gho-title{
    font-size:clamp(34px,11vw,48px)!important;
    margin-bottom:10px!important;
  }
  body.guest-landing-active #page-home #guest-hero-overlay .gho-sub{
    font-size:13.5px!important;
    margin-bottom:16px!important;
  }
  body.guest-landing-active #page-home #guest-hero-overlay .gho-btn-watch,
  body.guest-landing-active #page-home #guest-hero-overlay .gho-btn-create{
    height:44px!important;
    min-height:44px!important;
  }
  body.guest-landing-active #page-home #hero-bridge{
    height:8px!important;
  }
  body.guest-landing-active #page-home #social-proof-strip{
    padding:10px 14px!important;
  }
  body.guest-landing-active #main-nav{
    height:50px!important;
  }
  body.guest-landing-active #main-nav .nav-links{
    margin-left:0!important;
  }
  body.guest-landing-active #main-nav .nav-menu-btn,
  body.guest-landing-active #main-nav .nav-icon-btn,
  body.guest-landing-active #main-nav #theme-toggle-btn{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
  }
  body.guest-landing-active #main-nav .btn-signup{
    height:36px!important;
    min-height:36px!important;
    padding:0 15px!important;
  }
}
@media(max-width:380px){
  body.guest-landing-active #page-home .featured-hero{
    min-height:410px!important;
    height:410px!important;
  }
  body.guest-landing-active #page-home #guest-hero-overlay .gho-inner{
    padding:72px var(--home-left) 22px!important;
  }
}

/* Mobile home alignment pass: keep hero controls and the first scroll row on the same grid edge. */
@media(max-width:768px){
  body.guest-landing-active #page-home{
    --home-left:18px!important;
  }
  html body #page-home .featured-hero .fh-controls{
    right:var(--home-left)!important;
    bottom:8px!important;
    transform:none!important;
  }
  body.guest-landing-active #page-home .home-align-container{
    padding-top:18px!important;
  }
}
@media(max-width:420px){
  body.guest-landing-active #page-home{
    --home-left:18px!important;
  }
  html body #page-home .featured-hero .fh-controls{
    right:var(--home-left)!important;
    bottom:8px!important;
    transform:scale(0.94)!important;
    transform-origin:right bottom!important;
  }
}

/* Upper nav polish: consistent premium controls for search, theme, notifications, menu, and profile. */
#main-nav{
  --nav-control-size:40px;
  --nav-control-bg:rgba(255,255,255,0.07);
  --nav-control-border:rgba(255,255,255,0.12);
  --nav-control-hover:rgba(255,255,255,0.12);
  --nav-control-glow:rgba(200,255,0,0.18);
}
#main-nav .nav-actions{
  gap:10px!important;
}
#main-nav .nav-menu-btn,
#main-nav .nav-icon-btn,
#main-nav #theme-toggle-btn{
  width:var(--nav-control-size)!important;
  height:var(--nav-control-size)!important;
  min-width:var(--nav-control-size)!important;
  min-height:var(--nav-control-size)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,0.105),var(--nav-control-bg))!important;
  border:1px solid var(--nav-control-border)!important;
  color:rgba(246,246,250,0.78)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 10px 24px rgba(0,0,0,0.18)!important;
  backdrop-filter:blur(14px) saturate(1.1)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.1)!important;
  transition:background 0.18s ease,border-color 0.18s ease,color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease!important;
}
#main-nav .nav-menu-btn:hover,
#main-nav .nav-menu-btn[aria-expanded="true"],
#main-nav .nav-icon-btn:hover,
#main-nav #theme-toggle-btn:hover{
  background:linear-gradient(180deg,rgba(200,255,0,0.16),var(--nav-control-hover))!important;
  border-color:rgba(200,255,0,0.3)!important;
  color:#f3ffb4!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 0 0 3px rgba(200,255,0,0.08),0 14px 30px rgba(0,0,0,0.24)!important;
  transform:translateY(-1px)!important;
}
#main-nav .nav-menu-btn:active,
#main-nav .nav-icon-btn:active,
#main-nav #theme-toggle-btn:active,
#main-nav .nav-avatar:active{
  transform:translateY(0) scale(0.97)!important;
}
#main-nav .nav-menu-btn svg,
#main-nav .nav-icon-btn svg{
  width:18px!important;
  height:18px!important;
  stroke-width:2.2!important;
}
#main-nav #theme-toggle-btn{
  font-size:14px!important;
  line-height:1!important;
}
#main-nav .nav-bell-dot{
  top:8px!important;
  right:8px!important;
  width:8px!important;
  height:8px!important;
  border:2px solid #08080d!important;
  background:#d6ff38!important;
  box-shadow:0 0 0 3px rgba(214,255,56,0.12),0 0 12px rgba(214,255,56,0.45)!important;
}
#main-nav .nav-avatar{
  width:var(--nav-control-size)!important;
  height:var(--nav-control-size)!important;
  min-width:var(--nav-control-size)!important;
  min-height:var(--nav-control-size)!important;
  border-radius:999px!important;
  border:1px solid rgba(214,255,56,0.38)!important;
  background:linear-gradient(135deg,rgba(214,255,56,0.96),rgba(123,94,167,0.76))!important;
  color:#060609!important;
  box-shadow:0 0 0 3px rgba(214,255,56,0.08),0 14px 30px rgba(0,0,0,0.22)!important;
  transition:box-shadow 0.18s ease,transform 0.18s ease,border-color 0.18s ease!important;
}
#main-nav .nav-avatar:hover{
  border-color:rgba(214,255,56,0.7)!important;
  box-shadow:0 0 0 4px rgba(214,255,56,0.13),0 18px 36px rgba(0,0,0,0.28)!important;
  transform:translateY(-1px)!important;
}
#main-nav .nav-avatar span{
  font-size:12px!important;
  font-weight:900!important;
}
body.guest-landing-active #main-nav .nav-menu-btn,
body.guest-landing-active #main-nav .nav-icon-btn,
body.guest-landing-active #main-nav #theme-toggle-btn{
  background:rgba(255,255,255,0.075)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  color:rgba(255,255,255,0.76)!important;
}
body.guest-landing-active #main-nav .nav-menu-btn:hover,
body.guest-landing-active #main-nav .nav-icon-btn:hover,
body.guest-landing-active #main-nav #theme-toggle-btn:hover{
  background:rgba(255,255,255,0.14)!important;
  border-color:rgba(214,255,56,0.26)!important;
  color:#fff!important;
}
@media(max-width:768px){
  #main-nav{
    --nav-control-size:36px;
  }
  #main-nav .nav-actions{
    gap:8px!important;
  }
  #main-nav .nav-menu-btn svg,
  #main-nav .nav-icon-btn svg{
    width:16px!important;
    height:16px!important;
  }
  #main-nav .nav-bell-dot{
    top:7px!important;
    right:7px!important;
  }
}
@media(max-width:380px){
  #main-nav{
    --nav-control-size:34px;
  }
  #main-nav .nav-actions{
    gap:6px!important;
  }
}

/* Design-system cleanup pass: shared sizing, radius, motion, and focus rules. */
:root{
  --ui-ease:cubic-bezier(0.22,1,0.36,1);
  --ui-radius:10px;
  --ui-radius-soft:8px;
  --ui-radius-card:8px;
  --ui-radius-pill:999px;
  --ui-control-h:42px;
  --ui-control-h-sm:38px;
  --ui-border:rgba(255,255,255,0.12);
  --ui-border-strong:rgba(255,255,255,0.18);
  --ui-glass:rgba(255,255,255,0.075);
  --ui-glass-hover:rgba(255,255,255,0.12);
  --ui-card-bg:rgba(255,255,255,0.035);
  --ui-card-border:rgba(255,255,255,0.08);
  --ui-card-shadow:0 18px 44px rgba(0,0,0,0.42);
}
body.theme-light{
  --ui-border:rgba(0,0,0,0.1);
  --ui-border-strong:rgba(0,0,0,0.16);
  --ui-glass:rgba(0,0,0,0.045);
  --ui-glass-hover:rgba(0,0,0,0.075);
  --ui-card-bg:rgba(255,255,255,0.76);
  --ui-card-border:rgba(0,0,0,0.08);
  --ui-card-shadow:0 16px 38px rgba(15,15,24,0.12);
}
.btn-primary,
.submit-btn,
.plan-btn.plan-btn-pro,
.disc-hero-btn-primary,
.fh-btn-play,
.gho-btn-watch,
.gsb-btn-primary,
.eim-btn-primary,
.swg-btn-primary,
.dash-btn-primary,
.csb-btn-primary,
.empty-actions .btn-primary{
  min-height:var(--ui-control-h)!important;
  border-radius:var(--ui-radius-pill)!important;
  font-weight:850!important;
  letter-spacing:-0.01em!important;
  box-shadow:0 12px 30px rgba(200,255,0,0.16)!important;
  transition:transform 0.18s var(--ui-ease),box-shadow 0.18s ease,background 0.18s ease,border-color 0.18s ease,opacity 0.18s ease!important;
}
.btn-primary:hover,
.submit-btn:hover,
.plan-btn.plan-btn-pro:hover,
.disc-hero-btn-primary:hover,
.fh-btn-play:hover,
.gho-btn-watch:hover,
.gsb-btn-primary:hover,
.eim-btn-primary:hover,
.swg-btn-primary:hover,
.dash-btn-primary:hover,
.csb-btn-primary:hover,
.empty-actions .btn-primary:hover{
  opacity:1!important;
  transform:translateY(-1px)!important;
  box-shadow:0 16px 38px rgba(200,255,0,0.22)!important;
}
.btn-secondary,
.btn-outline,
.fh-btn-info,
.gho-btn-create,
.disc-hero-btn-ghost,
.gsb-btn-secondary,
.eim-btn-ghost,
.swg-btn-secondary,
.dash-btn-ghost,
.csb-btn-outline,
.empty-actions .btn-outline{
  min-height:var(--ui-control-h-sm)!important;
  border-radius:var(--ui-radius-pill)!important;
  background:var(--ui-glass)!important;
  border:1px solid var(--ui-border)!important;
  color:var(--text)!important;
  transition:transform 0.18s var(--ui-ease),background 0.18s ease,border-color 0.18s ease,color 0.18s ease!important;
}
.btn-secondary:hover,
.btn-outline:hover,
.fh-btn-info:hover,
.gho-btn-create:hover,
.disc-hero-btn-ghost:hover,
.gsb-btn-secondary:hover,
.eim-btn-ghost:hover,
.swg-btn-secondary:hover,
.dash-btn-ghost:hover,
.csb-btn-outline:hover,
.empty-actions .btn-outline:hover{
  background:var(--ui-glass-hover)!important;
  border-color:var(--ui-border-strong)!important;
  transform:translateY(-1px)!important;
}
.genre-pill,
.disc-chip,
.disc-sticky-pill,
.disc-genre-tag,
.srp-chip,
.ip-chip,
.pmt-btn,
.bill-btn{
  border-radius:var(--ui-radius-pill)!important;
  min-height:34px!important;
  border-color:var(--ui-border)!important;
  transition:background 0.18s ease,border-color 0.18s ease,color 0.18s ease,transform 0.18s var(--ui-ease)!important;
}
.genre-pill:hover,
.disc-chip:hover,
.disc-sticky-pill:hover,
.disc-genre-tag:hover,
.srp-chip:hover,
.ip-chip:hover,
.pmt-btn:hover,
.bill-btn:hover{
  transform:translateY(-1px)!important;
}
.nf-card,
.disc-card,
.card{
  border-radius:var(--ui-radius-card)!important;
  background:var(--ui-card-bg)!important;
  border:1px solid var(--ui-card-border)!important;
  transition:transform 0.22s var(--ui-ease),box-shadow 0.22s var(--ui-ease),border-color 0.18s ease,filter 0.18s ease!important;
}
.nf-card-thumb,
.disc-card-thumb,
.card-thumb{
  border-radius:var(--ui-radius-card)!important;
}
.nf-card:hover,
.disc-card:hover,
.card:hover{
  border-color:rgba(200,255,0,0.24)!important;
  box-shadow:var(--ui-card-shadow)!important;
}
.nf-act-btn,
.card-act-btn,
.disc-act-btn,
.cw-remove,
.dash-btn-icon{
  border-radius:var(--ui-radius-pill)!important;
  border:1px solid var(--ui-border)!important;
  backdrop-filter:blur(12px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid rgba(200,255,0,0.72)!important;
  outline-offset:3px!important;
}
@media(max-width:768px){
  :root{
    --ui-control-h:44px;
    --ui-control-h-sm:40px;
    --ui-radius-card:7px;
  }
  .genre-pill,
  .disc-chip,
  .disc-sticky-pill,
  .disc-genre-tag,
  .srp-chip,
  .ip-chip{
    min-height:36px!important;
  }
}

/* Card polish pass: cleaner poster anatomy and consistent streaming-card chrome. */
:root{
  --poster-radius:8px;
  --poster-bg:#0b0b10;
  --poster-border:rgba(255,255,255,0.085);
  --poster-border-hover:rgba(200,255,0,0.26);
  --poster-shadow-hover:0 24px 54px rgba(0,0,0,0.58);
  --poster-label-bg:rgba(8,8,12,0.72);
}
.nf-card,
.disc-card,
.srp-card,
.card{
  isolation:isolate!important;
  border-radius:var(--poster-radius)!important;
  background:var(--poster-bg)!important;
  border:1px solid var(--poster-border)!important;
  overflow:hidden!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.045)!important;
  transform-origin:center center!important;
}
.nf-card:hover,
.disc-card:hover,
.srp-card:hover,
.card:hover{
  border-color:var(--poster-border-hover)!important;
  box-shadow:var(--poster-shadow-hover),0 0 0 1px rgba(200,255,0,0.08)!important;
  filter:saturate(1.04) contrast(1.02)!important;
}
.nf-card-thumb,
.disc-card-thumb,
.srp-card-thumb,
.card-thumb{
  position:relative!important;
  overflow:hidden!important;
  border-radius:var(--poster-radius)!important;
  background:
    radial-gradient(circle at 34% 18%,rgba(200,255,0,0.13),transparent 36%),
    linear-gradient(145deg,#2b2b31 0%,#17171d 48%,#08080d 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04)!important;
}
.nf-card-thumb,
.disc-card-thumb,
.srp-card-thumb{
  aspect-ratio:2/3!important;
}
.card-thumb{
  aspect-ratio:16/9!important;
}
.disc-card-wide .disc-card-thumb{
  aspect-ratio:21/9!important;
}
.nf-card-thumb img,
.disc-card-thumb img,
.srp-card-thumb img,
.card-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform 0.38s var(--ui-ease),filter 0.24s ease!important;
}
.nf-card:hover .nf-card-thumb img,
.disc-card:hover .disc-card-thumb img,
.srp-card:hover .srp-card-thumb img,
.card:hover .card-thumb img{
  transform:scale(1.055)!important;
}
.nf-card-grad,
.disc-card-grad,
.card-grad,
.srp-card-thumb-fade{
  background:
    linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.52) 34%,rgba(0,0,0,0.14) 68%,rgba(0,0,0,0.03) 100%),
    linear-gradient(to right,rgba(0,0,0,0.14),transparent 45%,rgba(0,0,0,0.1))!important;
}
.nf-card-pin,
.disc-card-pin{
  padding:48px 10px 11px!important;
}
.nf-card:hover .nf-card-pin,
.disc-card:hover .disc-card-pin{
  padding-bottom:48px!important;
}
.nf-card-title-text,
.nf-card-title,
.disc-card-title,
.card-title,
.srp-card-title,
.srp-list-title{
  font-size:13px!important;
  font-weight:820!important;
  line-height:1.18!important;
  letter-spacing:-0.018em!important;
  color:rgba(255,255,255,0.94)!important;
  text-shadow:0 2px 12px rgba(0,0,0,0.78)!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  white-space:normal!important;
  overflow:hidden!important;
}
.nf-card-meta-row,
.disc-card-meta,
.srp-card-meta,
.srp-card-stats,
.srp-list-meta{
  min-width:0!important;
  color:rgba(255,255,255,0.56)!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  gap:6px!important;
}
.nf-card-meta-row > *,
.disc-card-meta > *,
.srp-card-meta > *,
.srp-card-stats > *,
.srp-list-meta > *{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.nf-card-rating,
.disc-card-rating,
.srp-card-rating{
  color:var(--lime)!important;
  font-weight:850!important;
}
.nf-card-badge,
.card-badge,
.srp-card-cat,
#page-discover .disc-card-kicker span,
#page-discover .disc-card-kicker em{
  min-height:20px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  max-width:calc(100% - 56px)!important;
  padding:0 7px!important;
  border-radius:4px!important;
  background:var(--poster-label-bg)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  color:rgba(255,255,255,0.82)!important;
  font-size:7.5px!important;
  font-weight:850!important;
  letter-spacing:0.09em!important;
  text-transform:uppercase!important;
  backdrop-filter:blur(10px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
}
.nf-card-badge::before{
  width:5px!important;
  height:5px!important;
  background:var(--lime)!important;
  box-shadow:0 0 8px rgba(200,255,0,0.75)!important;
}
.nf-card-new-badge,
.srp-card-new{
  min-width:22px!important;
  min-height:20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:4px!important;
  background:var(--lime)!important;
  color:#050508!important;
  font-size:7.5px!important;
  font-weight:900!important;
  letter-spacing:0.08em!important;
  box-shadow:0 0 18px rgba(200,255,0,0.28)!important;
}
.nf-card-new-badge:empty::after{
  content:'NEW';
}
.nf-card-actions,
.disc-card-actions,
.card-actions{
  gap:7px!important;
}
.nf-act-btn,
.card-act-btn,
.disc-act-btn,
.srp-card-play{
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  min-height:31px!important;
  border-radius:999px!important;
  background:rgba(16,16,22,0.82)!important;
  border:1px solid rgba(255,255,255,0.16)!important;
  color:rgba(255,255,255,0.88)!important;
  box-shadow:0 10px 24px rgba(0,0,0,0.34)!important;
}
.nf-act-btn.nf-act-play,
.card-act-btn.card-act-play,
.disc-act-btn.disc-act-play,
.srp-card-play{
  background:rgba(255,255,255,0.94)!important;
  border-color:rgba(255,255,255,0.92)!important;
  color:#050508!important;
}
.nf-act-btn:hover,
.card-act-btn:hover,
.disc-act-btn:hover,
.srp-card:hover .srp-card-play{
  background:var(--lime)!important;
  border-color:var(--lime)!important;
  color:#050508!important;
}
.nf-card-skel,
.skeleton{
  border-radius:var(--poster-radius)!important;
  background:rgba(255,255,255,0.045)!important;
  border:1px solid var(--poster-border)!important;
  overflow:hidden!important;
}
.nf-card-skel-thumb{
  aspect-ratio:2/3!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.04) 75%),
    linear-gradient(145deg,#15151d,#08080d)!important;
  background-size:400% 100%,100% 100%!important;
}
.srp-card{
  min-width:0!important;
}
.srp-card-body{
  padding:10px 11px 11px!important;
}
.srp-list-item{
  border-radius:var(--poster-radius)!important;
  border-color:var(--poster-border)!important;
  background:rgba(255,255,255,0.035)!important;
}
.srp-list-thumb{
  border-radius:6px!important;
  overflow:hidden!important;
}
@media(hover:none){
  .nf-card:hover,
  .disc-card:hover,
  .srp-card:hover,
  .card:hover{
    transform:none!important;
    box-shadow:0 1px 0 rgba(255,255,255,0.045)!important;
    filter:none!important;
  }
}
@media(max-width:768px){
  :root{
    --poster-radius:7px;
  }
  .nf-card-title-text,
  .nf-card-title,
  .disc-card-title,
  .card-title,
  .srp-card-title{
    font-size:12px!important;
    line-height:1.17!important;
  }
  .nf-card-meta-row,
  .disc-card-meta,
  .srp-card-meta,
  .srp-card-stats{
    font-size:9.5px!important;
  }
  .nf-card-pin,
  .disc-card-pin{
    padding:42px 8px 9px!important;
  }
}

/* Mobile Discover pass: fill the viewport more confidently. */
@media(max-width:600px){
  html body #page-discover,
  html body #page-discover .disc-layout,
  html body #page-discover .disc-main{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html body #page-discover .disc-hero{
    min-height:270px!important;
    padding:68px 14px 24px!important;
    margin-left:0!important;
    margin-right:0!important;
    width:100%!important;
  }
  html body #page-discover .disc-hero-title{
    max-width:12ch!important;
    font-size:clamp(34px,12vw,46px)!important;
  }
  html body #page-discover .disc-hero-sub{
    max-width:34ch!important;
    font-size:13px!important;
  }
  html body #page-discover .disc-sticky-bar{
    margin-left:0!important;
    margin-right:0!important;
    padding:10px 10px!important;
    scroll-padding-left:10px!important;
    width:100%!important;
  }
  html body #page-discover .disc-content-area{
    width:100%!important;
    padding:16px 8px 96px!important;
  }
  html body #page-discover .disc-bar{
    margin-bottom:16px!important;
  }
  html body #page-discover .disc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }
  html body #page-discover .disc-card{
    border-radius:8px!important;
    min-width:0!important;
  }
  html body #page-discover .disc-card-thumb,
  html body #page-discover .disc-card-wide .disc-card-thumb{
    aspect-ratio:4 / 5!important;
    border-radius:8px 8px 0 0!important;
  }
  html body #page-discover .disc-card-pin{
    padding:36px 9px 10px!important;
  }
  html body #page-discover .disc-card-title{
    font-size:12.5px!important;
    line-height:1.2!important;
  }
  html body #page-discover .disc-card-meta{
    font-size:9.5px!important;
  }
}
@media(max-width:360px){
  html body #page-discover .disc-content-area{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  html body #page-discover .disc-grid{
    gap:8px!important;
  }
}

/* Search pass: one premium responsive discovery surface across desktop and mobile. */
html body #page-home{
  padding-top:0!important;
  margin-top:0!important;
  background:
    radial-gradient(circle at 50% -18%,rgba(200,255,0,0.09),transparent 34%),
    linear-gradient(180deg,#07070b 0%,#0d0d17 42%,#07070b 100%)!important;
}
html body #page-home .srp-hero{
  position:sticky!important;
  top:52px!important;
  z-index:80!important;
  padding:10px clamp(16px,4vw,56px) 0!important;
  background:linear-gradient(180deg,rgba(7,7,11,0.98),rgba(7,7,11,0.9))!important;
  border-bottom:1px solid rgba(255,255,255,0.075)!important;
  box-shadow:0 14px 34px rgba(0,0,0,0.35)!important;
}
html body #page-home .srp-hero > div{
  width:100%!important;
  max-width:1040px!important;
  margin:0 auto!important;
}
html body #page-home .srp-input-wrap{
  width:100%!important;
  max-width:680px!important;
  min-height:50px!important;
  margin:0 auto!important;
  padding:0 16px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,0.085)!important;
  border:1px solid rgba(255,255,255,0.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 0 0 1px rgba(0,0,0,0.2)!important;
}
html body #page-home .srp-input-wrap:focus-within{
  border-color:rgba(200,255,0,0.65)!important;
  box-shadow:0 0 0 3px rgba(200,255,0,0.09),0 12px 32px rgba(0,0,0,0.35)!important;
}
html body #page-home .srp-input{
  font-size:16px!important;
  font-weight:650!important;
  letter-spacing:-0.01em!important;
}
html body #page-home .srp-input::placeholder{
  color:rgba(255,255,255,0.46)!important;
}
html body #page-home .srp-filters{
  justify-content:flex-start!important;
  margin:0!important;
  padding:10px 0 8px!important;
  gap:7px!important;
  border-bottom:none!important;
  background:transparent!important;
  scroll-padding-left:10px!important;
  overflow-x:auto!important;
  flex-wrap:nowrap!important;
}
html body #page-home .srp-filter-label{
  display:none!important;
}
html body #page-home .srp-chip{
  min-height:34px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,0.07)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  color:rgba(255,255,255,0.68)!important;
  font-size:11.5px!important;
  font-weight:760!important;
}
html body #page-home .srp-chip.active{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#050508!important;
}
html body #page-home .srp-body{
  width:100%!important;
  max-width:1040px!important;
  padding:18px clamp(16px,4vw,56px) 92px!important;
}
html body #page-home #srp-results{
  padding:0!important;
}
html body #page-home .srp-default{
  display:grid!important;
  gap:18px!important;
  padding-top:2px!important;
}
html body #page-home .srp-search-prompt{
  padding:18px 0 8px!important;
}
html body #page-home .srp-search-prompt-title{
  font-family:'Inter',sans-serif;
  font-size:18px;
  font-weight:820;
  letter-spacing:-0.03em;
  color:#fff;
  margin-bottom:8px;
}
html body #page-home .srp-search-prompt-sub{
  max-width:44ch;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,0.56);
  margin-bottom:12px;
}
html body #page-home .srp-search-prompt-chips{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
html body #page-home .srp-search-quick-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.78);
  font-size:11.5px;
  font-weight:750;
  cursor:pointer;
  transition:all 0.16s ease;
}
html body #page-home .srp-search-quick-chip:hover{
  border-color:rgba(200,255,0,0.26);
  color:#fff;
  background:rgba(200,255,0,0.06);
}
html body #page-home .srp-section-label{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:0!important;
  margin-bottom:12px!important;
  color:rgba(255,255,255,0.48)!important;
  font-size:10px!important;
  letter-spacing:0.18em!important;
}
html body #page-home .srp-trending-chips,
html body #page-home .srp-creators-scroll{
  display:flex!important;
  gap:12px!important;
  overflow-x:auto!important;
  flex-wrap:wrap!important;
  scroll-padding-left:10px!important;
}
html body #page-home .srp-trending-chip{
  min-height:46px!important;
  padding:0 16px!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(255,255,255,0.1),rgba(255,255,255,0.045))!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:0 10px 24px rgba(0,0,0,0.18)!important;
}
html body #page-home .srp-trending-chip-badge{
  margin-left:8px!important;
}
html body #page-home .srp-creator-chip{
  width:104px!important;
  min-height:124px!important;
  padding:14px 10px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,0.085),rgba(255,255,255,0.04))!important;
  border:1px solid rgba(255,255,255,0.1)!important;
}
html body #page-home .srp-creator-avi{
  width:54px!important;
  height:54px!important;
  margin-bottom:8px!important;
  box-shadow:0 0 0 4px rgba(200,255,0,0.06)!important;
}
html body #page-home .srp-meta{
  justify-content:space-between!important;
}
html body #page-home .srp-controls{
  gap:8px!important;
}
html body #page-home .srp-view-btns{
  display:none!important;
}
html body #page-home .srp-grid{
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
  gap:14px!important;
}
html body #page-home .srp-card{
  background:rgba(255,255,255,0.035)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  border-radius:14px!important;
  box-shadow:0 10px 24px rgba(0,0,0,0.22)!important;
}
html body #page-home .srp-card-thumb{
  aspect-ratio:2/3!important;
}
html body #page-home .srp-card-body{
  padding:10px 11px 12px!important;
}
html body #page-home .srp-card-title{
  font-size:12.5px!important;
  line-height:1.2!important;
}
html body #page-home .srp-card-meta,
html body #page-home .srp-card-stats{
  font-size:10px!important;
  gap:7px!important;
}
html body #page-home .srp-card-cat{
  top:7px!important;
  left:7px!important;
  padding:3px 7px!important;
  font-size:8px!important;
}
html body #page-home .srp-card-new{
  top:7px!important;
  right:7px!important;
  padding:3px 6px!important;
  font-size:8px!important;
}
@media(max-width:768px){
  html body #page-home .srp-hero{
    top:52px!important;
    padding:8px 10px 0!important;
  }
  html body #page-home .srp-hero > div,
  html body #page-home .srp-input-wrap{
    max-width:none!important;
  }
  html body #page-home .srp-input-wrap{
    min-height:48px!important;
    padding:0 14px!important;
    border-radius:16px!important;
  }
  html body #page-home .srp-input{
    font-size:16px!important;
  }
  html body #page-home .srp-filters{
    margin:0 -10px!important;
    padding:8px 10px 10px!important;
  }
  html body #page-home .srp-body{
    max-width:none!important;
    padding:14px 10px calc(92px + env(safe-area-inset-bottom,0px))!important;
  }
  html body #page-home .srp-default{
    gap:14px!important;
  }
  html body #page-home .srp-search-prompt{
    padding:14px 0 4px!important;
  }
  html body #page-home .srp-search-prompt-title{
    font-size:16px!important;
  }
  html body #page-home .srp-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  html body #page-home .srp-card{
    border-radius:12px!important;
  }
  html body #page-home .srp-card-body{
    padding:9px 10px 10px!important;
  }
  html body #page-home .srp-card-title{
    font-size:12px!important;
  }
}
@media(max-width:360px){
  html body #page-home .srp-body,
  html body #page-home .srp-hero{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  html body #page-home .srp-grid{
    gap:8px!important;
  }
  html body #page-home .srp-card-title{
    font-size:11.5px!important;
  }
}

/* Search page premium pass: artwork-first browsing, compact rows, and mobile snap. */
html body #page-home .srp-hero{
  backdrop-filter:blur(18px)!important;
}
html body #page-home .srp-input-wrap{
  max-width:760px!important;
}
html body #page-home .srp-default{
  gap:28px!important;
}
html body #page-home .srp-spotlight{
  position:relative;
  min-height:clamp(280px,34vw,430px);
  border-radius:8px;
  overflow:hidden;
  background:#111;
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 24px 70px rgba(0,0,0,0.42);
  cursor:pointer;
}
html body #page-home .srp-spotlight img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.08) brightness(0.68);
}
html body #page-home .srp-spotlight::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,3,7,0.94) 0%,rgba(3,3,7,0.72) 38%,rgba(3,3,7,0.12) 72%),
    linear-gradient(0deg,rgba(3,3,7,0.88) 0%,transparent 45%);
}
html body #page-home .srp-spotlight-copy{
  position:relative;
  z-index:1;
  width:min(560px,70%);
  padding:clamp(22px,5vw,56px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:inherit;
}
html body #page-home .srp-kicker{
  color:var(--accent);
  font-size:10px;
  font-weight:850;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-bottom:10px;
}
html body #page-home .srp-spotlight-title{
  color:#fff;
  font-size:clamp(32px,5vw,66px);
  line-height:0.94;
  letter-spacing:-0.055em;
  font-weight:900;
  margin-bottom:12px;
}
html body #page-home .srp-spotlight-desc{
  max-width:46ch;
  color:rgba(255,255,255,0.72);
  font-size:14px;
  line-height:1.6;
  margin-bottom:18px;
}
html body #page-home .srp-spotlight-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(255,255,255,0.72);
  font-size:11px;
  font-weight:760;
}
html body #page-home .srp-spotlight-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  background:var(--accent);
  color:#050508;
  box-shadow:0 14px 28px rgba(200,255,0,0.2);
}
html body #page-home .srp-row-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
html body #page-home .srp-row-title{
  color:#fff;
  font-size:18px;
  font-weight:850;
  letter-spacing:-0.03em;
}
html body #page-home .srp-row-sub{
  color:rgba(255,255,255,0.45);
  font-size:12px;
  font-weight:650;
}
html body #page-home .srp-poster-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px,170px);
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding:2px 2px 14px;
  margin:0 -2px;
  scrollbar-width:none;
}
html body #page-home .srp-poster-row::-webkit-scrollbar,
html body #page-home .srp-filters::-webkit-scrollbar,
html body #page-home .srp-trending-chips::-webkit-scrollbar,
html body #page-home .srp-creators-scroll::-webkit-scrollbar{
  display:none;
}
html body #page-home .srp-poster-tile{
  scroll-snap-align:start;
  position:relative;
  border-radius:8px;
  overflow:hidden;
  min-height:255px;
  background:#161620;
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  transform:translateZ(0);
  transition:transform 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease;
}
html body #page-home .srp-poster-tile:hover,
html body #page-home .srp-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.22)!important;
  box-shadow:0 20px 46px rgba(0,0,0,0.36)!important;
}
html body #page-home .srp-poster-tile img{
  width:100%;
  height:100%;
  min-height:255px;
  object-fit:cover;
  display:block;
  filter:saturate(1.06);
}
html body #page-home .srp-poster-tile::after{
  content:"";
  position:absolute;
  inset:42% 0 0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,0.86));
}
html body #page-home .srp-poster-copy{
  position:absolute;
  z-index:1;
  left:10px;
  right:10px;
  bottom:10px;
}
html body #page-home .srp-poster-title{
  color:#fff;
  font-size:12.5px;
  line-height:1.15;
  font-weight:850;
  margin-bottom:5px;
}
html body #page-home .srp-poster-meta{
  color:rgba(255,255,255,0.58);
  font-size:10px;
  font-weight:700;
  display:flex;
  gap:6px;
  align-items:center;
}
html body #page-home .srp-card{
  border-radius:8px!important;
  transition:transform 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease!important;
}
html body #page-home .srp-card-thumb{
  border-radius:8px 8px 0 0!important;
  overflow:hidden!important;
}
html body #page-home .srp-card-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
html body #page-home .srp-grid{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;
}
html body #page-home .srp-empty{
  grid-column:1/-1;
  padding:44px 18px;
  text-align:center;
  border-radius:8px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.08);
}
@media(max-width:768px){
  html body #page-home .srp-default{
    gap:24px!important;
  }
  html body #page-home .srp-spotlight{
    min-height:360px;
    margin:0 -10px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  html body #page-home .srp-spotlight::after{
    background:linear-gradient(0deg,rgba(3,3,7,0.96) 0%,rgba(3,3,7,0.66) 48%,rgba(3,3,7,0.08) 100%);
  }
  html body #page-home .srp-spotlight-copy{
    width:100%;
    min-height:360px;
    padding:170px 16px 22px;
  }
  html body #page-home .srp-spotlight-title{
    font-size:34px;
    max-width:10ch;
  }
  html body #page-home .srp-spotlight-desc{
    font-size:12.5px;
    max-width:34ch;
  }
  html body #page-home .srp-row-head{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
  html body #page-home .srp-poster-row{
    grid-auto-columns:42vw;
    gap:10px;
    margin-left:-10px;
    margin-right:-10px;
    padding-left:10px;
    padding-right:10px;
  }
  html body #page-home .srp-poster-tile,
  html body #page-home .srp-poster-tile img{
    min-height:62vw;
  }
  html body #page-home .srp-trending-chips,
  html body #page-home .srp-creators-scroll{
    flex-wrap:nowrap!important;
    margin-left:-10px!important;
    margin-right:-10px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  html body #page-home .srp-trending-chip,
  html body #page-home .srp-creator-chip{
    flex:0 0 auto!important;
  }
}
@media(max-width:420px){
  html body #page-home .srp-poster-row{
    grid-auto-columns:44vw;
  }
}

/* Mobile profile premium pass: signed-out gate and streaming-dashboard polish. */
#page-profile.profile-signed-out .dash-cover,
#page-profile.profile-signed-out .dash-identity-wrap,
#page-profile.profile-signed-out .dash-stats-bar{
  display:none!important;
}
#page-profile.profile-signed-out #prof-not-logged-in{
  min-height:calc(100svh - 52px);
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:72px 16px calc(96px + env(safe-area-inset-bottom,0px))!important;
  background:
    radial-gradient(circle at 50% 10%,rgba(200,255,0,0.12),transparent 34%),
    linear-gradient(180deg,#07070b 0%,#0d0d17 54%,#06060a 100%);
}
#page-profile.profile-signed-out #prof-not-logged-in > div{
  max-width:420px!important;
  margin:0 auto!important;
  padding:0!important;
}
#page-profile.profile-signed-out .empty-state{
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(255,255,255,0.075),rgba(255,255,255,0.035))!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  box-shadow:0 24px 70px rgba(0,0,0,0.42)!important;
}
@media(max-width:768px){
  html body #page-profile{
    background:#07070b!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-cover{
    height:300px!important;
    margin-top:-50px!important;
    background:
      radial-gradient(circle at 18% 28%,rgba(200,255,0,0.18),transparent 28%),
      radial-gradient(circle at 78% 18%,rgba(123,94,167,0.18),transparent 32%),
      linear-gradient(180deg,#12131d 0%,#07070b 100%)!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-cover::after{
    background:
      linear-gradient(180deg,rgba(7,7,11,0.05) 0%,rgba(7,7,11,0.22) 36%,rgba(7,7,11,0.94) 100%),
      linear-gradient(90deg,rgba(7,7,11,0.68),transparent 58%)!important;
    z-index:3!important;
  }
  html body #page-profile:not(.profile-signed-out) .prof-cover-img{
    z-index:1!important;
    filter:saturate(1.08) brightness(0.72)!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-cover-pattern{
    opacity:0.18!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-cover-glow{
    width:380px!important;
    height:260px!important;
    left:42%!important;
    top:42%!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-identity-wrap{
    position:relative!important;
    margin-top:-118px!important;
    padding:0 16px!important;
    background:transparent!important;
    border-bottom:none!important;
    z-index:5!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-identity{
    display:grid!important;
    grid-template-columns:74px minmax(0,1fr)!important;
    grid-template-areas:
      "avatar identity"
      "actions actions"!important;
    gap:12px 14px!important;
    align-items:end!important;
    padding:0 0 14px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-avi-wrap{
    grid-area:avatar!important;
    margin-top:0!important;
    align-self:end!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-avi{
    width:74px!important;
    height:74px!important;
    border-radius:8px!important;
    border:1px solid rgba(255,255,255,0.18)!important;
    background:linear-gradient(145deg,#15151f,#08080d)!important;
    box-shadow:0 18px 42px rgba(0,0,0,0.46),0 0 0 2px rgba(200,255,0,0.08)!important;
    font-size:22px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-avi img{
    border-radius:8px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-avi-edit{
    right:-8px!important;
    bottom:-8px!important;
    width:30px!important;
    height:30px!important;
    border:1px solid rgba(255,255,255,0.16)!important;
    background:rgba(12,12,18,0.86)!important;
    backdrop-filter:blur(12px)!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-identity-body{
    grid-area:identity!important;
    padding:0!important;
    align-self:end!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-name-row{
    margin-bottom:4px!important;
    gap:6px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-name{
    color:#fff!important;
    font-size:24px!important;
    line-height:1.02!important;
    letter-spacing:-0.045em!important;
    text-shadow:0 12px 34px rgba(0,0,0,0.55)!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-handle{
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:rgba(255,255,255,0.66)!important;
    font-size:12px!important;
    font-weight:650!important;
  }
  html body #page-profile:not(.profile-signed-out) .profile-mode-toggle-mobile{
    margin-top:8px!important;
    background:rgba(255,255,255,0.08)!important;
    border-color:rgba(255,255,255,0.12)!important;
    backdrop-filter:blur(14px)!important;
  }
  html body #page-profile:not(.profile-signed-out) .pmt-btn{
    min-height:30px!important;
    padding:0 12px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-actions{
    grid-area:actions!important;
    display:grid!important;
    grid-template-columns:1.45fr 1fr 1fr 42px!important;
    gap:8px!important;
    width:100%!important;
    padding:0!important;
  }
  html body #page-profile:not(.profile-signed-out) #prof-actions .dash-btn-primary,
  html body #page-profile:not(.profile-signed-out) #prof-actions .dash-btn-ghost{
    height:40px!important;
    min-height:40px!important;
    justify-content:center!important;
    border-radius:8px!important;
    font-size:12px!important;
    font-weight:800!important;
    padding:0 12px!important;
  }
  html body #page-profile:not(.profile-signed-out) #prof-actions .dash-btn-primary{
    background:#fff!important;
    color:#050508!important;
  }
  html body #page-profile:not(.profile-signed-out) #prof-actions .dash-btn-ghost{
    background:rgba(255,255,255,0.09)!important;
    border-color:rgba(255,255,255,0.13)!important;
    color:#fff!important;
  }
  html body #page-profile:not(.profile-signed-out) #prof-actions .btn-label{
    display:inline!important;
  }
  html body #page-profile:not(.profile-signed-out) #prof-actions .dash-btn-icon .btn-label{
    display:none!important;
  }
  html body #page-profile:not(.profile-signed-out) #prof-studio-btn{
    grid-column:1/-1!important;
    width:100%!important;
    justify-content:center!important;
    border-radius:8px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-stats-bar{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    padding:6px 16px 14px!important;
    background:#07070b!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-stat{
    min-width:0!important;
    padding:11px 6px!important;
    align-items:center!important;
    text-align:center!important;
    border:1px solid rgba(255,255,255,0.075)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,0.04)!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-stat + .dash-stat{
    border-left:1px solid rgba(255,255,255,0.075)!important;
    padding-left:6px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-stat-val{
    font-size:20px!important;
    color:#fff!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-stat-key{
    margin-top:5px!important;
    font-size:8.5px!important;
    font-weight:800!important;
    color:rgba(255,255,255,0.42)!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-tabs-wrap{
    top:50px!important;
    background:rgba(7,7,11,0.96)!important;
    border-top:1px solid rgba(255,255,255,0.06)!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-tabs{
    padding:0 16px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-tab{
    padding:13px 14px!important;
    font-size:12px!important;
    font-weight:750!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-body{
    padding:16px 16px calc(96px + env(safe-area-inset-bottom,0px))!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-quick-grid,
  html body #page-profile:not(.profile-signed-out) .dash-insights-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-quick-card,
  html body #page-profile:not(.profile-signed-out) .dash-insight-card,
  html body #page-profile:not(.profile-signed-out) .creator-tip-card,
  html body #page-profile:not(.profile-signed-out) .empty-state{
    border-radius:8px!important;
    background:rgba(255,255,255,0.04)!important;
    border-color:rgba(255,255,255,0.08)!important;
  }
  html body #page-profile:not(.profile-signed-out) .series-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  html body #page-profile:not(.profile-signed-out) .series-grid .card,
  html body #page-profile:not(.profile-signed-out) .series-grid .card-thumb{
    border-radius:8px!important;
  }
}
@media(max-width:360px){
  html body #page-profile:not(.profile-signed-out) .dash-identity{
    grid-template-columns:66px minmax(0,1fr)!important;
    gap:10px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-avi{
    width:66px!important;
    height:66px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-name{
    font-size:21px!important;
  }
  html body #page-profile:not(.profile-signed-out) .dash-actions{
    grid-template-columns:1.2fr 1fr 1fr 38px!important;
    gap:6px!important;
  }
  html body #page-profile:not(.profile-signed-out) #prof-actions .dash-btn-primary,
  html body #page-profile:not(.profile-signed-out) #prof-actions .dash-btn-ghost{
    font-size:11px!important;
    padding:0 8px!important;
  }
}

/* Detail title page polish */
#detail-modal{
  background:rgba(0,0,0,0.78)!important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.detail-modal{
  max-width:min(1060px, calc(100vw - 32px))!important;
  max-height:92vh!important;
  background:#141414!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  border-radius:8px!important;
}
.detail-close-pill{
  width:44px!important;height:44px!important;padding:0!important;border-radius:50%!important;
  justify-content:center!important;
  top:16px!important;right:16px!important;left:auto!important;background:rgba(50,50,50,0.95)!important;
  border:1px solid rgba(255,255,255,0.12)!important;color:#fff!important;font-size:0!important;
}
.detail-close-pill svg{width:18px!important;height:18px!important;flex-shrink:0!important;stroke:#fff!important}
.detail-close-pill:hover{background:rgba(80,80,80,1)!important}
.detail-banner{
  min-height:clamp(430px, 57vh, 620px)!important;
  background:linear-gradient(135deg,rgba(255,255,255,0.02),rgba(255,255,255,0.04))!important;
}
.detail-banner-bg{
  filter:blur(18px) brightness(0.45) saturate(1.08)!important;
  transform:scale(1.1)!important;
}
.detail-banner-grad{
  background:
    linear-gradient(90deg,#141414 0%,rgba(20,20,20,0.86) 27%,rgba(20,20,20,0.32) 65%,rgba(20,20,20,0.05) 100%),
    linear-gradient(180deg,rgba(20,20,20,0.02) 0%,rgba(20,20,20,0.12) 44%,#141414 100%)!important;
}
.detail-banner-content{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:flex-end;
  padding:44px 46px 42px!important;
  padding-right:clamp(232px, 30vw, 320px)!important;
  z-index:2;
}
.detail-cat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(10,11,17,0.62);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.82);
  letter-spacing:0.18em;
  margin-bottom:0;
}
.detail-title{
  font-size:clamp(38px, 5.6vw, 62px)!important;
  font-weight:900!important;
  line-height:0.92;
  max-width:12ch;
  text-wrap:balance;
  text-shadow:0 3px 28px rgba(0,0,0,0.8);
}
.detail-meta{
  margin-bottom:0;
  gap:8px;
}
.detail-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.72);
}
.detail-meta .detail-rating{
  background:rgba(200,255,0,0.12);
  border-color:rgba(200,255,0,0.18);
  color:var(--lime);
}
.detail-meta .detail-match{
  border-color:transparent;
  color:#46d369;
  font-weight:850;
  padding-left:0;
  background:transparent;
}
.detail-banner-summary{
  max-width:60ch;
  color:rgba(255,255,255,0.82);
  font-size:15px;
  line-height:1.6;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.detail-banner-stats{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.detail-stat{
  min-width:0;
  padding:10px 0 0;
  border-radius:0;
  background:transparent;
  border:1px solid rgba(255,255,255,0.08);
  border-width:1px 0 0;
  box-shadow:none;
}
.detail-stat-label{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin-bottom:6px;
}
.detail-stat-value{
  min-width:0;
  font-size:13px;
  font-weight:800;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.detail-stat-value.accent{
  color:var(--lime);
}
.detail-banner-btns{
  margin-top:8px;
  gap:10px;
}
.detail-play-btn,
.detail-list-btn{
  min-height:44px;
  border-radius:8px!important;
  box-shadow:none;
  font-weight:800!important;
}
.detail-play-btn{
  background:#fff!important;color:#000!important;padding:12px 28px!important;
}
.detail-play-btn:hover{background:rgba(255,255,255,0.84)!important}
.detail-list-btn{
  background:rgba(109,109,110,0.72)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,0.3)!important;
}
.detail-list-btn:hover{background:rgba(109,109,110,0.54)!important}
.detail-body{
  background:#141414!important;
  padding:30px 46px 52px!important;
}
.detail-poster{
  position:absolute;
  right:28px;
  bottom:24px;
  width:clamp(190px, 25vw, 252px);
  height:clamp(270px, 34vw, 360px);
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(11,12,18,0.88);
  box-shadow:0 30px 70px rgba(0,0,0,0.48);
  z-index:1;
}
.detail-poster-art{
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  overflow:hidden;
}
.detail-poster-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.detail-poster-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.22) 42%,rgba(0,0,0,0.92) 100%);
}
.detail-poster-copy{
  position:relative;
  z-index:1;
  margin-top:auto;
  width:100%;
  padding:14px 14px 15px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.detail-poster-kicker{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.54);
}
.detail-poster-title{
  font-size:16px;
  font-weight:850;
  line-height:1.08;
  color:#fff;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.detail-poster-sub{
  font-size:11px;
  line-height:1.45;
  color:rgba(255,255,255,0.68);
}
.detail-highlights{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:22px;
}
.detail-highlight{
  min-width:0;
  padding:12px 0 0;
  border-radius:0;
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  border-width:1px 0 0;
  box-shadow:none;
}
.detail-highlight-label{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin-bottom:6px;
}
.detail-highlight-value{
  min-width:0;
  font-size:13px;
  font-weight:800;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-transform:capitalize;
}
.detail-highlight-value.accent{
  color:var(--lime);
}
.detail-creator{
  background:rgba(255,255,255,0.035)!important;
  border-color:rgba(255,255,255,0.08)!important;
  border-radius:6px!important;
  box-shadow:none;
}
.detail-creator-avi{
  box-shadow:0 0 0 4px rgba(200,255,0,0.08);
}
.detail-desc{
  max-width:70ch;
  font-size:15px;
  line-height:1.65;
  color:rgba(232,232,240,0.88);
  margin-bottom:18px;
}
.detail-tags{
  margin-bottom:18px;
}
.detail-tag{
  background:rgba(200,255,0,0.09);
  color:rgba(240,244,255,0.9);
  border-color:rgba(200,255,0,0.16);
}
.detail-genre-label{
  width:100%;
  font-size:9px;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  margin-bottom:4px;
}
.detail-eps-title{
  font-size:20px;
  margin:28px 0 14px;
  letter-spacing:-0.02em;
}
.detail-ep-list,
.detail-eps-list{
  gap:1px;
  border-radius:6px;
  overflow:hidden;
  background:rgba(255,255,255,0.05);
}
.detail-ep{
  min-height:76px;
  padding:14px 18px;
  border:0;
  border-radius:0!important;
  background:#2f2f2f;
}
.detail-ep:hover{
  background:#3b3b3b;
  border-color:transparent;
}
.detail-ep-num{
  width:28px!important;height:28px!important;min-width:28px!important;
  border:0!important;background:transparent!important;color:#b3b3b3!important;
}
.detail-ep-name{font-size:14px!important;font-weight:800!important}
.detail-ep-dur{font-size:12px!important;color:#b3b3b3!important}
.detail-ep-play{
  width:34px!important;height:34px!important;border-radius:50%!important;
  border:1px solid rgba(255,255,255,0.28)!important;background:rgba(0,0,0,0.16)!important;
}
.detail-secondary-btns{
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,0.09);
}
.detail-sec-btn{
  border-radius:4px!important;
  background:rgba(255,255,255,0.06)!important;
  border-color:rgba(255,255,255,0.1)!important;
}
.detail-more-section{
  margin-top:30px!important;
  padding-top:24px!important;
  border-top:1px solid rgba(255,255,255,0.09);
}
.detail-more-title{
  color:#fff!important;
  font-size:20px!important;
  font-weight:800!important;
  letter-spacing:-0.02em!important;
  text-transform:none!important;
}
.detail-more-reel{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  overflow:visible!important;
  padding-bottom:0!important;
}
.detail-more-reel .more-card{
  width:auto!important;
  border-radius:4px!important;
  background:#2f2f2f!important;
}
@media(max-width:900px){
  .detail-banner-content{
    padding-right:32px!important;
  }
  .detail-poster{
    display:none;
  }
  .detail-highlights{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:600px){
  .detail-modal{
    max-width:100vw!important;
    max-height:96vh!important;
  }
  .detail-banner{
    min-height:390px!important;
  }
  .detail-banner-content{
    padding:74px 18px 22px!important;
    padding-right:16px!important;
  }
  .detail-title{
    max-width:none;
    font-size:clamp(24px, 8vw, 30px)!important;
  }
  .detail-banner-summary{
    font-size:13px;
    -webkit-line-clamp:2;
  }
  .detail-highlights{
    grid-template-columns:1fr 1fr;
  }
  .detail-banner-stats{
    gap:16px;
  }
  .detail-desc{
    font-size:14px;
  }
  .detail-body{
    padding:18px 18px 36px!important;
  }
  .detail-close-pill{top:12px!important;right:12px!important;left:auto!important}
  .detail-more-reel{grid-template-columns:1fr!important}
}
@media(max-width:380px){
  .detail-highlights{
    grid-template-columns:1fr;
  }
  .detail-banner-btns{
    flex-direction:column;
  }
  .detail-play-btn,
  .detail-list-btn{
    width:100%;
    justify-content:center;
  }
}

/* Netflix-style pro/pricing page */
#page-pricing{
  background:#050507!important;
  color:#fff!important;
  overflow:hidden;
}
#page-pricing .pricing-hero{
  max-width:none!important;
  width:100%!important;
  min-height:clamp(430px,58vh,620px)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  padding:clamp(112px,14vh,160px) var(--layout-gutter) clamp(52px,8vh,88px)!important;
  background:#050507!important;
  text-align:left!important;
  isolation:isolate;
}
#page-pricing .pricing-hero::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:url('https://picsum.photos/seed/scenvox-pro-cinema/1800/920') center/cover no-repeat;
  opacity:.42;filter:saturate(.9) contrast(1.08);
}
#page-pricing .pricing-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,#050507 0%,rgba(5,5,7,.88) 22%,rgba(5,5,7,.3) 58%,rgba(5,5,7,.82) 100%),
    linear-gradient(to right,rgba(5,5,7,.94),rgba(5,5,7,.34) 54%,rgba(5,5,7,.82));
}
#page-pricing .pricing-hero > div[style*="background-image"]{display:none!important}
#page-pricing .pricing-hero > div[style*="max-width"]{
  max-width:1120px!important;
  width:100%!important;
  margin:0 auto!important;
}
#page-pricing .pricing-hero h1{
  max-width:780px!important;
  font-size:clamp(42px,6vw,78px)!important;
  line-height:.94!important;
  letter-spacing:0!important;
  text-shadow:0 10px 34px rgba(0,0,0,.62);
}
#page-pricing .pricing-hero h1 span{color:#fff!important}
#page-pricing .pricing-hero p{
  max-width:560px!important;
  margin:0 0 28px!important;
  color:rgba(255,255,255,.76)!important;
  font-size:clamp(15px,1.7vw,19px)!important;
}
#page-pricing .pricing-hero [style*="Upgrade your studio"]{
  background:#e50914!important;
  border-color:#e50914!important;
  color:#fff!important;
  border-radius:4px!important;
  letter-spacing:1.8px!important;
}
#page-pricing .billing-toggle{
  margin:0!important;
  border-radius:4px!important;
  background:rgba(20,20,20,.82)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  padding:3px!important;
}
#page-pricing .bill-btn{
  border-radius:3px!important;
  color:rgba(255,255,255,.72)!important;
}
#page-pricing .bill-btn.active{
  background:#fff!important;
  color:#111!important;
}
#page-pricing .plans-grid{
  max-width:1180px!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  padding:0 var(--layout-gutter) 34px!important;
  margin:-28px auto 0!important;
  position:relative;
  z-index:2;
}
#page-pricing .plan{
  border-radius:6px!important;
  padding:26px 24px!important;
  background:#171717!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.44)!important;
}
#page-pricing .plan:hover{
  transform:translateY(-4px)!important;
  background:#202020!important;
  border-color:rgba(255,255,255,.28)!important;
}
#page-pricing .plan.featured{
  background:linear-gradient(180deg,#2a0508 0%,#151515 54%)!important;
  border-color:#e50914!important;
}
#page-pricing .plan-popular{
  top:-15px!important;
  background:#e50914!important;
  color:#fff!important;
  border-radius:3px!important;
  box-shadow:0 12px 30px rgba(229,9,20,.28);
}
#page-pricing .plan-tier{
  color:rgba(255,255,255,.72)!important;
  letter-spacing:1.6px!important;
}
#page-pricing .plan-price{
  font-size:42px!important;
  color:#fff!important;
}
#page-pricing .plan-price .mo{
  color:rgba(255,255,255,.55)!important;
}
#page-pricing .plan-divider{
  background:rgba(255,255,255,.13)!important;
}
#page-pricing .plan-features li{
  color:rgba(255,255,255,.78)!important;
  font-size:13px!important;
}
#page-pricing .feat-check{
  background:rgba(255,255,255,.1)!important;
  border-color:rgba(255,255,255,.22)!important;
}
#page-pricing .plan-btn{
  border-radius:4px!important;
  min-height:44px!important;
  font-size:14px!important;
}
#page-pricing .plan-btn.primary,
#page-pricing .plan-btn.gold{
  background:#e50914!important;
  color:#fff!important;
  border-color:#e50914!important;
  box-shadow:none!important;
}
#page-pricing .plan-btn.outline{
  border-color:rgba(255,255,255,.28)!important;
  color:#fff!important;
  background:rgba(255,255,255,.06)!important;
}
#page-pricing > div[style*="max-width:860px"]{
  max-width:1180px!important;
  margin:0 auto!important;
  padding:6px var(--layout-gutter) 86px!important;
  justify-content:flex-start!important;
  border-top:1px solid rgba(255,255,255,.12);
}
#page-pricing > div[style*="max-width:860px"] > div{
  color:rgba(255,255,255,.62)!important;
}
@media(max-width:900px){
  #page-pricing .plans-grid{grid-template-columns:1fr!important;max-width:560px!important;margin-top:-18px!important}
  #page-pricing .pricing-hero{text-align:center!important;align-items:center!important}
  #page-pricing .pricing-hero p{margin-left:auto!important;margin-right:auto!important}
}
@media(max-width:520px){
  #page-pricing .pricing-hero{min-height:520px!important;padding-left:20px!important;padding-right:20px!important}
  #page-pricing .pricing-hero h1{font-size:clamp(34px,11vw,48px)!important}
  #page-pricing .billing-toggle{width:100%;max-width:320px;justify-content:center}
  #page-pricing .bill-btn{flex:1;justify-content:center;padding-left:10px!important;padding-right:10px!important}
  #page-pricing .plans-grid{padding-left:20px!important;padding-right:20px!important}
}

/* Mobile app pricing flow */
@media(max-width:768px){
  #page-pricing{
    padding-top:0!important;
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  }
  #page-pricing .pricing-hero{
    min-height:auto!important;
    align-items:flex-end!important;
    text-align:left!important;
    padding:calc(80px + env(safe-area-inset-top,0px)) 18px 30px!important;
  }
  #page-pricing .pricing-hero::before{
    opacity:.3!important;
    background-position:center top!important;
  }
  #page-pricing .pricing-hero::after{
    background:
      linear-gradient(to top,#050507 0%,rgba(5,5,7,.94) 34%,rgba(5,5,7,.42) 78%,rgba(5,5,7,.82) 100%),
      linear-gradient(to right,rgba(5,5,7,.9),rgba(5,5,7,.2))!important;
  }
  #page-pricing .pricing-hero > div[style*="max-width"]{
    max-width:440px!important;
  }
  #page-pricing .pricing-hero h1{
    font-size:clamp(34px,10vw,44px)!important;
    line-height:.96!important;
    max-width:10ch!important;
    margin-bottom:12px!important;
  }
  #page-pricing .pricing-hero p{
    margin:0 0 18px!important;
    max-width:34ch!important;
    font-size:14px!important;
    line-height:1.52!important;
    color:rgba(255,255,255,.72)!important;
  }
  #page-pricing .pricing-hero [style*="Upgrade your studio"]{
    margin-bottom:14px!important;
    font-size:8px!important;
    padding:5px 10px!important;
  }
  #page-pricing .billing-toggle{
    width:100%!important;
    max-width:340px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    margin:0!important;
  }
  #page-pricing .bill-btn{
    min-height:38px!important;
    justify-content:center!important;
    padding:0 10px!important;
    font-size:12px!important;
  }
  #page-pricing .plans-grid{
    display:flex!important;
    gap:14px!important;
    max-width:none!important;
    margin:0!important;
    padding:4px 18px 28px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-left:18px!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  #page-pricing .plans-grid::-webkit-scrollbar{display:none}
  #page-pricing .plan{
    flex:0 0 min(86vw,360px)!important;
    width:min(86vw,360px)!important;
    scroll-snap-align:start!important;
    padding:22px 18px!important;
    min-height:0!important;
  }
  #page-pricing .plan.featured{
    order:-1!important;
  }
  #page-pricing .plan-price{
    font-size:38px!important;
  }
  #page-pricing .plan-features{
    gap:1px!important;
    margin-bottom:18px!important;
  }
  #page-pricing .plan-features li{
    font-size:12px!important;
    line-height:1.35!important;
    padding:4px 0!important;
  }
  #page-pricing .plan-btn{
    min-height:46px!important;
  }
  #page-pricing > div[style*="max-width:860px"]{
    margin:0!important;
    padding:14px 18px 28px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    border-top:0!important;
  }
  #page-pricing > div[style*="max-width:860px"] > div{
    align-items:flex-start!important;
    font-size:11px!important;
    line-height:1.35!important;
    color:rgba(255,255,255,.58)!important;
  }
  #mnt-library .m-icon,
  #mnt-library svg{
    color:inherit!important;
  }
}

@media(max-width:380px){
  #page-pricing .pricing-hero{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  #page-pricing .plans-grid{
    padding-left:14px!important;
    padding-right:14px!important;
    scroll-padding-left:14px!important;
  }
  #page-pricing .plan{
    flex-basis:88vw!important;
    width:88vw!important;
  }
}

/* ══════════════════════════════════════
   CINEMATIC HOME REDESIGN
══════════════════════════════════════ */

/* 1. Atmosphere — deeper base, stronger purple glow, grain + scanlines */
#page-home .featured-hero{background:#05050d!important}
#page-home .fh-glow-purple{
  top:-10%!important;bottom:auto!important;
  left:-5%!important;right:auto!important;
  width:70%!important;height:100%!important;
  background:radial-gradient(ellipse,rgba(110,60,180,0.38) 0%,transparent 65%)!important;
}
#page-home .fh-grain{opacity:0.045!important;background-size:180px 180px!important}
#page-home .featured-hero::after{
  content:'';
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0.025;
  background:repeating-linear-gradient(
    0deg,
    transparent,transparent 2px,
    rgba(255,255,255,0.45) 2px,rgba(255,255,255,0.45) 3px
  );
}

/* 2. Badge → eyebrow line on mobile */
@media(max-width:768px){
  #page-home .fh-badge{
    background:none!important;
    border:none!important;
    border-radius:0!important;
    padding:0!important;
    gap:8px!important;
    height:auto!important;
    margin-bottom:10px!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:0.18em!important;
    color:rgba(200,255,0,0.8)!important;
    text-transform:uppercase!important;
  }
  #page-home .fh-badge .badge-dot{display:none!important}
  #page-home .fh-badge::before{
    content:'';
    display:inline-block;
    width:20px;height:1.5px;
    background:linear-gradient(to right,#c8ff00,rgba(200,255,0,0));
    flex-shrink:0;align-self:center;
  }
}

/* 3. Title — cinematic purple glow text shadow on mobile */
@media(max-width:768px){
  html body #page-home .fh-title{
    text-shadow:
      0 2px 0 rgba(0,0,0,0.4),
      0 8px 32px rgba(0,0,0,0.6),
      0 0 80px rgba(110,60,180,0.22)!important;
  }
}

/* 4. Buttons — flex row, Play glow, List/Info icon-only squares */
@media(max-width:768px){
  html body #page-home .fh-btns{
    display:flex!important;
    flex-direction:row!important;
    gap:8px!important;
    width:auto!important;
    max-width:none!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
  }
  html body #page-home .fh-btn-play{
    height:46px!important;
    padding:0 22px!important;
    border-radius:10px!important;
    font-size:15px!important;
    font-weight:900!important;
    background:#fff!important;
    color:#050505!important;
    box-shadow:0 4px 20px rgba(255,255,255,0.18)!important;
    flex-shrink:0!important;
    justify-content:center!important;
  }
  html body #page-home .fh-btn-info{
    height:46px!important;
    width:46px!important;
    min-width:46px!important;
    padding:0!important;
    border-radius:10px!important;
    font-size:0!important;
    justify-content:center!important;
    flex-shrink:0!important;
    grid-column:auto!important;
  }
  html body #page-home .fh-btn-info svg{
    display:block!important;
    width:18px!important;
    height:18px!important;
  }
  html body #page-home .fh-btn-list{
    height:46px!important;
    width:46px!important;
    min-width:46px!important;
    padding:0!important;
    border-radius:10px!important;
    font-size:0!important;
    justify-content:center!important;
    align-items:center!important;
    flex-shrink:0!important;
    grid-column:auto!important;
  }
  html body #page-home .fh-btn-list::before{
    content:'+';
    font-size:22px!important;
    font-weight:300!important;
    color:#fff!important;
    line-height:1!important;
  }
}

/* 5. Genre bar — frosted glass, solid lime active pill */
@media(max-width:768px){
  #page-home .genre-filter-bar{
    background:rgba(5,5,13,0.78)!important;
    backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
    border-top:1px solid rgba(255,255,255,0.06)!important;
    border-bottom:1px solid rgba(255,255,255,0.05)!important;
  }
  #page-home .genre-pill.active{
    background:#c8ff00!important;
    border-color:#c8ff00!important;
    color:#050505!important;
    box-shadow:0 0 16px rgba(200,255,0,0.28)!important;
  }
  #page-home .genre-pill.active svg{
    stroke:#050505!important;
    color:#050505!important;
    opacity:1!important;
  }
}

/* Mobile home hero final pass: shorter Netflix-style hero with controls on the CTA row. */
@media(max-width:768px){
  html body #page-home{
    --home-left:16px!important;
  }
  html body #page-home .featured-hero{
    min-height:420px!important;
    height:min(58svh,460px)!important;
    max-height:460px!important;
    grid-template-rows:minmax(64px,1fr) auto 18px!important;
  }
  html body #page-home .featured-hero .fh-content{
    grid-column:1 / -1!important;
    grid-row:2!important;
    align-self:end!important;
    padding:0 calc(var(--home-left) + 104px) 24px var(--home-left)!important;
    width:100%!important;
  }
  html body #page-home .featured-hero .fh-title{
    max-width:11ch!important;
    margin:7px 0 9px!important;
    font-size:clamp(31px,10.8vw,44px)!important;
    line-height:0.94!important;
  }
  html body #page-home .featured-hero .fh-meta{
    margin-bottom:9px!important;
  }
  html body #page-home .featured-hero .fh-desc{
    -webkit-line-clamp:2!important;
    margin-bottom:12px!important;
  }
  html body #page-home .featured-hero .fh-btns{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:7px!important;
    width:100%!important;
    max-width:none!important;
    flex-wrap:nowrap!important;
  }
  html body #page-home .featured-hero .fh-btn-play{
    height:42px!important;
    min-height:42px!important;
    min-width:88px!important;
    padding:0 16px!important;
    border-radius:8px!important;
    font-size:13px!important;
    flex:1 1 auto!important;
  }
  html body #page-home .featured-hero .fh-btn-info,
  html body #page-home .featured-hero .fh-btn-list{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    border-radius:8px!important;
    flex:0 0 42px!important;
    grid-column:auto!important;
    font-size:0!important;
  }
  html body #page-home .featured-hero .fh-btn-more svg{
    width:18px!important;
    height:18px!important;
    display:block!important;
  }
  html body #page-home .featured-hero .fh-btn-list::before{
    content:'+'!important;
    font-size:22px!important;
    line-height:1!important;
  }
  html body #page-home .featured-hero .fh-controls{
    position:absolute!important;
    left:auto!important;
    right:var(--home-left)!important;
    bottom:30px!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:0!important;
    margin:0!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    transform:none!important;
  }
  html body #page-home .featured-hero .fh-counter{
    font-size:11px!important;
  }
  html body #page-home .featured-hero .fh-nav{
    gap:4px!important;
  }
  html body #page-home .featured-hero .fh-nav-btn{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    border-radius:7px!important;
    font-size:18px!important;
  }
}
@media(max-width:420px){
  html body #page-home .featured-hero{
    min-height:390px!important;
    height:min(54svh,430px)!important;
    max-height:430px!important;
  }
  html body #page-home .featured-hero .fh-content{
    padding-right:calc(var(--home-left) + 96px)!important;
    padding-bottom:22px!important;
  }
  html body #page-home .featured-hero .fh-title{
    font-size:clamp(29px,10vw,40px)!important;
  }
  html body #page-home .featured-hero .fh-controls{
    bottom:29px!important;
  }
}

/* ================================================================
   HOME ALIGNMENT PASS
   Geometry only: retain the original Scenvox visual design.
   ================================================================ */
#page-home{
  --home-left:clamp(16px,2.78vw,40px)!important;
}
#page-home .home-align-container{
  width:100%!important;
  max-width:none!important;
  padding-left:var(--home-left)!important;
  padding-right:var(--home-left)!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
}
#page-home .home-align-container .genre-filter-bar,
#page-home .home-align-container #home-content-row,
#page-home .home-align-container .content-row,
#page-home .home-align-container .row-header,
#page-home .home-align-container .row-scroll{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
#page-home .home-align-container .genre-filter-bar,
#page-home .home-align-container .row-header,
#page-home .home-align-container .row-scroll{
  padding-left:0!important;
  padding-right:0!important;
}
#page-home .content-row{
  margin-bottom:clamp(30px,3vw,44px)!important;
}
#page-home .content-row .row-header{
  min-height:32px!important;
  margin-bottom:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
}
#page-home .content-row .row-title{
  margin:0!important;
  padding:0!important;
  min-width:0!important;
}
#page-home .row-scroll{
  gap:clamp(14px,1.4vw,20px)!important;
  padding-top:4px!important;
  padding-bottom:16px!important;
  scroll-padding-left:0!important;
  overscroll-behavior-x:contain!important;
}
#page-home .row-scroll > *{
  scroll-snap-align:start!important;
}
#page-home .row-scroll::after{
  min-width:0!important;
}
#page-home #home-content-row{
  align-items:flex-start!important;
  gap:clamp(20px,2.2vw,32px)!important;
}
#page-home #home-rows{
  min-width:0!important;
}
#page-home .home-sidebar{
  margin:0!important;
  box-sizing:border-box!important;
}

@media(max-width:900px){
  #page-home{
    --home-left:24px!important;
  }
  #page-home #home-content-row{
    gap:24px!important;
  }
}
@media(max-width:768px){
  #page-home{
    --home-left:16px!important;
  }
  #page-home .content-row{
    margin-bottom:30px!important;
  }
  #page-home .content-row .row-header{
    min-height:28px!important;
    margin-bottom:12px!important;
    gap:12px!important;
  }
  #page-home .row-scroll{
    gap:12px!important;
    padding-bottom:14px!important;
  }
}
@media(max-width:390px){
  #page-home{
    --home-left:14px!important;
  }
}

/* ================================================================
   HOME STREAMING CARDS
   Cinematic shelf cards while retaining the original Scenvox theme.
   ================================================================ */
#page-home .row-scroll{
  gap:16px!important;
  padding-top:10px!important;
  padding-bottom:22px!important;
  scroll-snap-type:x proximity!important;
  scrollbar-width:none!important;
}
#page-home .row-scroll::-webkit-scrollbar{
  display:none!important;
}
#page-home .nf-card{
  width:clamp(260px,20vw,294px)!important;
  flex:0 0 clamp(260px,20vw,294px)!important;
  border-radius:10px!important;
  background:rgba(12,12,18,0.84)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
  box-shadow:0 8px 24px rgba(0,0,0,0.28)!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:normal!important;
  transform-origin:center bottom!important;
}
#page-home .nf-card-thumb{
  aspect-ratio:16 / 9!important;
  border-radius:9px!important;
}
#page-home .nf-card-thumb::before{
  opacity:0.24!important;
}
#page-home .nf-card-grad{
  background:
    linear-gradient(to top,rgba(4,4,8,0.96) 0%,rgba(4,4,8,0.72) 28%,rgba(4,4,8,0.16) 64%,rgba(4,4,8,0.04) 100%),
    linear-gradient(to right,rgba(0,0,0,0.18),transparent 52%)!important;
}
#page-home .nf-card-pin{
  padding:56px 12px 12px!important;
}
#page-home .nf-card-title-text{
  max-width:100%!important;
  font-size:14px!important;
  line-height:1.2!important;
  -webkit-line-clamp:1!important;
}
#page-home .nf-card-meta-row{
  margin-top:5px!important;
  gap:7px!important;
  font-size:10px!important;
}
#page-home .nf-card-badge{
  top:9px!important;
  left:9px!important;
}
#page-home .nf-card-new-badge{
  top:9px!important;
  right:9px!important;
}
#page-home .nf-card-actions{
  left:12px!important;
  right:auto!important;
  bottom:11px!important;
}
@media(hover:hover) and (pointer:fine){
  #page-home .nf-card:hover{
    transform:translateY(-3px) scale(1.03)!important;
    box-shadow:
      0 20px 42px rgba(0,0,0,0.58),
      0 0 0 1px rgba(255,255,255,0.13),
      0 0 0 2px rgba(200,255,0,0.12)!important;
  }
  #page-home .nf-card:hover .nf-card-pin{
    padding-bottom:48px!important;
  }
  #page-home .nf-card:hover .nf-card-thumb img{
    transform:scale(1.045)!important;
  }
}
@media(max-width:1100px){
  #page-home .nf-card{
    width:clamp(230px,29vw,260px)!important;
    flex-basis:clamp(230px,29vw,260px)!important;
  }
}
@media(max-width:768px){
  #page-home .row-scroll{
    gap:12px!important;
    padding-top:6px!important;
    padding-bottom:16px!important;
    scroll-snap-type:x mandatory!important;
  }
  #page-home .nf-card{
    width:min(78vw,300px)!important;
    flex-basis:min(78vw,300px)!important;
    border-radius:9px!important;
  }
  #page-home .nf-card-thumb{
    aspect-ratio:16 / 9!important;
    border-radius:8px!important;
  }
  #page-home .nf-card-pin{
    padding:46px 10px 10px!important;
  }
  #page-home .nf-card-title-text{
    font-size:13px!important;
    -webkit-line-clamp:1!important;
  }
  #page-home .nf-card-meta-row{
    margin-top:4px!important;
    font-size:9.5px!important;
  }
}
@media(max-width:390px){
  #page-home .nf-card{
    width:82vw!important;
    flex-basis:82vw!important;
    max-width:292px!important;
  }
}
@media(hover:none), (pointer:coarse){
  #page-home .nf-card-actions{
    display:none!important;
  }
  #page-home .nf-card,
  #page-home .nf-card:hover{
    transform:none!important;
  }
}

/* ================================================================
   HOME VISUAL HIERARCHY
   A quieter, easier-to-scan version of the approved homepage.
   ================================================================ */
#page-home,
#page-home button,
#page-home input,
#page-home select{
  font-family:'Inter',sans-serif!important;
}
#page-home .featured-hero{
  height:clamp(500px,64svh,620px)!important;
  min-height:500px!important;
  max-height:620px!important;
}
#page-home .featured-hero::before{
  background:
    linear-gradient(to right,rgba(5,5,8,0.94) 0%,rgba(5,5,8,0.72) 31%,rgba(5,5,8,0.2) 62%,rgba(5,5,8,0.38) 100%),
    linear-gradient(to top,rgba(5,5,8,1) 0%,rgba(5,5,8,0.32) 30%,transparent 67%)!important;
}
#page-home .featured-hero .fh-content{
  padding-bottom:2px!important;
}
#page-home .featured-hero .fh-badge,
#page-home .featured-hero .fh-title,
#page-home .featured-hero .fh-meta,
#page-home .featured-hero .fh-desc,
#page-home .featured-hero .fh-btns{
  max-width:560px!important;
}
#page-home .featured-hero .fh-title{
  margin:8px 0 11px!important;
  font-size:clamp(46px,6.1vw,78px)!important;
  line-height:0.94!important;
}
#page-home .featured-hero .fh-meta{
  margin-bottom:11px!important;
}
#page-home .featured-hero .fh-desc{
  max-width:52ch!important;
  margin-bottom:18px!important;
  font-size:clamp(14px,1.2vw,16px)!important;
  line-height:1.48!important;
  color:rgba(255,255,255,0.72)!important;
}
#page-home .featured-hero .fh-btns{
  gap:9px!important;
}
#page-home .featured-hero .fh-btn-play,
#page-home .featured-hero .fh-btn-info{
  height:42px!important;
  min-height:42px!important;
}
#page-home .genre-filter-bar{
  min-height:48px!important;
  gap:7px!important;
  padding-top:7px!important;
  padding-bottom:7px!important;
  background:rgba(8,8,13,0.68)!important;
  border-top-color:rgba(255,255,255,0.035)!important;
  border-bottom-color:rgba(255,255,255,0.055)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#page-home .genre-pill{
  height:31px!important;
  min-height:31px!important;
  padding:0 12px!important;
  background:rgba(255,255,255,0.026)!important;
  border-color:rgba(255,255,255,0.07)!important;
  color:rgba(255,255,255,0.56)!important;
  font-size:11px!important;
}
#page-home .genre-pill.active{
  background:rgba(200,255,0,0.095)!important;
  border-color:rgba(200,255,0,0.24)!important;
}
#page-home #home-rows{
  padding-top:18px!important;
}
#page-home .content-row{
  margin-bottom:34px!important;
}
#page-home .content-row .row-header{
  min-height:26px!important;
  margin-bottom:10px!important;
}
#page-home .row-title{
  font-size:17px!important;
  font-weight:720!important;
  letter-spacing:-0.018em!important;
}
#page-home .row-more{
  color:rgba(255,255,255,0.42)!important;
  font-size:10px!important;
  letter-spacing:0.08em!important;
}
#page-home .row-more:hover{
  color:var(--lime)!important;
}
#page-home .row-scroll{
  padding-top:5px!important;
  padding-bottom:15px!important;
}
#page-home .nf-card{
  border-color:rgba(255,255,255,0.07)!important;
  box-shadow:0 7px 20px rgba(0,0,0,0.22)!important;
}
#page-home .editor-pick-badge{
  display:none!important;
}
#page-home .nf-card-badge,
#page-home .scenvox-orig-badge{
  background:rgba(7,7,11,0.62)!important;
  border-color:rgba(255,255,255,0.11)!important;
  box-shadow:none!important;
}
#page-home .nf-card-new-badge{
  box-shadow:none!important;
}
#page-home .nf-card-meta-row{
  color:rgba(255,255,255,0.5)!important;
}
@media(max-width:900px){
  #page-home .featured-hero{
    height:clamp(470px,60svh,560px)!important;
    min-height:470px!important;
    max-height:560px!important;
  }
  #page-home #home-rows{
    padding-top:14px!important;
  }
}
@media(max-width:600px){
  #page-home .featured-hero{
    height:clamp(430px,58svh,510px)!important;
    min-height:430px!important;
    max-height:510px!important;
  }
  #page-home .featured-hero .fh-title{
    margin:6px 0 9px!important;
    font-size:clamp(34px,10vw,44px)!important;
    line-height:0.98!important;
  }
  #page-home .featured-hero .fh-desc{
    margin-bottom:14px!important;
    font-size:13px!important;
    line-height:1.42!important;
    -webkit-line-clamp:2!important;
  }
  #page-home .genre-filter-bar{
    min-height:44px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
  #page-home .genre-pill{
    height:30px!important;
    min-height:30px!important;
    padding:0 11px!important;
  }
  #page-home #home-rows{
    padding-top:12px!important;
  }
  #page-home .content-row{
    margin-bottom:27px!important;
  }
}

/* New editorial guest landing sections */
.landing-intro,
.landing-feature,
.landing-audiences,
.landing-how{display:none}
body.guest-landing-active .landing-intro,
body.guest-landing-active .landing-feature,
body.guest-landing-active .landing-audiences,
body.guest-landing-active .landing-how{display:block}
body.guest-landing-active .landing-intro,
body.guest-landing-active .landing-audiences,
body.guest-landing-active .landing-how{
  width:min(1280px,calc(100% - 128px));
  margin:0 auto;
}
.landing-section-label{
  margin-bottom:22px;
  color:var(--accent);
  font-size:10px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
body.guest-landing-active .landing-intro{padding:110px 0 48px}
.landing-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  align-items:end;
  gap:80px;
}
.landing-intro h2,
.landing-audiences > h2,
.landing-how > h2{
  margin:0;
  color:#f8f6fb;
  font-family:'Syne','Inter',sans-serif;
  font-size:clamp(42px,5vw,68px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.055em;
}
.landing-intro h2 em,
.landing-audiences > h2 em{color:var(--accent);font-style:normal}
.landing-intro p{
  margin:0 0 5px;
  color:rgba(230,226,239,.58);
  font-size:17px;
  line-height:1.65;
}
body.guest-landing-active .home-align-container{padding-bottom:108px!important}
body.guest-landing-active .landing-feature{
  position:relative;
  width:calc(100% - 128px);
  height:min(72vh,760px);
  min-height:610px;
  margin:0 64px 120px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  background:#111;
}
.landing-feature > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.landing-feature-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(4,4,8,.94),rgba(4,4,8,.48) 46%,rgba(4,4,8,.06) 75%),linear-gradient(0deg,rgba(4,4,8,.65),transparent 45%);
}
.landing-feature-copy{
  position:absolute;
  z-index:2;
  left:clamp(30px,5vw,72px);
  bottom:clamp(34px,6vw,72px);
  width:min(540px,calc(100% - 60px));
  padding:32px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:17px;
  background:rgba(10,10,16,.62);
  backdrop-filter:blur(26px) saturate(135%);
}
.landing-feature-copy > span{
  color:var(--accent);
  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.landing-feature-copy h2{
  margin:12px 0 14px;
  font-family:'Syne','Inter',sans-serif;
  font-size:clamp(45px,5vw,72px);
  line-height:.88;
  letter-spacing:-.06em;
}
.landing-feature-copy p{max-width:48ch;margin:0;color:rgba(240,236,247,.68);font-size:14px;line-height:1.55}
.landing-feature-meta{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;color:rgba(255,255,255,.55);font-size:10px}
.landing-feature-meta > *{padding:5px 8px;border:1px solid rgba(255,255,255,.1);border-radius:5px;background:rgba(255,255,255,.055)}
.landing-feature-meta b{color:var(--accent)}
.landing-feature-actions{display:flex;align-items:center;gap:9px}
.landing-feature-actions button{
  height:48px;
  min-width:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
.landing-feature-actions button:first-child{border-color:var(--accent);background:var(--accent);color:#09090c}
.landing-feature-actions .landing-feature-info{width:auto;padding:0 18px;border-radius:10px;font-size:12px;font-weight:750}
body.guest-landing-active .landing-audiences{padding:0 0 120px}
.landing-audiences > h2{margin-bottom:46px}
.landing-bento{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.landing-bento-card{
  position:relative;
  min-height:460px;
  display:flex;
  flex-direction:column;
  padding:42px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
}
.landing-bento-card::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(80px);opacity:.16;right:-80px;top:-100px}
.landing-bento-card.viewer::before{background:var(--accent)}
.landing-bento-card.creator::before{background:#9c5cff}
.landing-bento-card > span{color:var(--accent);font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.landing-bento-card h3{max-width:13ch;margin:74px 0 18px;font-family:'Syne','Inter',sans-serif;font-size:clamp(28px,3vw,42px);line-height:1.03;letter-spacing:-.045em}
.landing-bento-card p{max-width:53ch;margin:0;color:rgba(232,228,240,.56);font-size:14px;line-height:1.6}
.landing-bento-card ul{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 34px;padding:0;list-style:none}
.landing-bento-card li{padding:7px 9px;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:rgba(255,255,255,.68);font-size:10px}
.landing-bento-card button{width:max-content;height:48px;margin-top:auto;padding:0 18px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-weight:750;cursor:pointer}
.landing-bento-card.viewer button{border-color:var(--accent);background:var(--accent);color:#09090c}
.landing-bento-card button b{margin-left:18px}
body.guest-landing-active .landing-how{padding:0 0 120px}
.landing-how > h2{margin-bottom:46px}
.landing-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.11)}
.landing-steps article{position:relative;padding:30px 34px 20px 0;border-right:1px solid rgba(255,255,255,.09)}
.landing-steps article+article{padding-left:34px}
.landing-steps article:last-child{border-right:0}
.landing-steps b{display:block;margin-bottom:48px;color:var(--accent);font:700 11px 'DM Sans',sans-serif}
.landing-steps span{display:block;margin-bottom:10px;font:750 26px 'Syne','Inter',sans-serif}
.landing-steps p{max-width:30ch;margin:0;color:rgba(232,228,240,.5);font-size:13px;line-height:1.55}
body.guest-landing-active #page-home #guest-hero-overlay .gho-title{max-width:8ch!important}
body.guest-landing-active #page-home #guest-hero-overlay .gho-title em{color:var(--accent)!important}
@media(max-width:768px){
  body.guest-landing-active .landing-intro,
  body.guest-landing-active .landing-audiences,
  body.guest-landing-active .landing-how{width:calc(100% - 32px)}
  body.guest-landing-active .landing-intro{padding:72px 0 32px}
  .landing-intro-grid{grid-template-columns:1fr;gap:22px}
  .landing-intro h2,.landing-audiences > h2,.landing-how > h2{font-size:clamp(36px,11vw,48px)}
  .landing-intro p{font-size:14px}
  body.guest-landing-active .landing-feature{width:calc(100% - 20px);height:620px;min-height:620px;margin:0 10px 80px;border-radius:18px}
  .landing-feature-shade{background:linear-gradient(0deg,rgba(4,4,8,.96),rgba(4,4,8,.5) 65%,rgba(4,4,8,.08))}
  .landing-feature-copy{left:12px;bottom:12px;width:calc(100% - 24px);padding:20px}
  .landing-feature-copy h2{font-size:42px}
  .landing-feature-copy p{font-size:12.5px}
  body.guest-landing-active .landing-audiences,body.guest-landing-active .landing-how{padding-bottom:80px}
  .landing-bento{grid-template-columns:1fr}
  .landing-bento-card{min-height:400px;padding:26px}
  .landing-bento-card h3{margin-top:48px}
  .landing-steps{grid-template-columns:1fr}
  .landing-steps article,.landing-steps article+article{padding:24px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}
  .landing-steps b{margin-bottom:24px}
}

/* Full-bleed public hero */
body.guest-landing-active #page-home .featured-hero{
  width:100%!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:700px!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.guest-landing-active #main-nav,
body.guest-landing-active nav#main-nav{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  background:linear-gradient(180deg,rgba(5,5,9,.78),transparent)!important;
  border-bottom-color:transparent!important;
  backdrop-filter:none!important;
}
body.guest-landing-active #page-home #guest-hero-overlay .gho-inner{
  margin-bottom:clamp(48px,7vh,86px)!important;
}

/* Restore original Netflix-style labeled member hero actions */
body:not(.guest-landing-active) #page-home .featured-hero .fh-btn-play,
body:not(.guest-landing-active) #page-home .featured-hero .fh-btn-list{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 22px!important;
  border-radius:10px!important;
  font-size:13px!important;
  font-weight:800!important;
  gap:9px!important;
}
body:not(.guest-landing-active) #page-home .featured-hero .fh-btn-play svg{
  width:17px!important;
  height:17px!important;
}
body:not(.guest-landing-active) #page-home .featured-hero .fh-btn-list::before{
  display:none!important;
  content:none!important;
}
body:not(.guest-landing-active) #page-home .featured-hero .fh-btn-play span,
body:not(.guest-landing-active) #page-home .featured-hero .fh-btn-list span{
  display:inline!important;
  font-size:13px!important;
  line-height:1!important;
}
body:not(.guest-landing-active) #page-home .featured-hero .fh-btn-list.is-listed{
  border-color:rgba(200,255,0,.36)!important;
  background:rgba(200,255,0,.1)!important;
  color:var(--accent)!important;
}
@media(max-width:768px){
  body.guest-landing-active #page-home .featured-hero{
    width:100%!important;
    height:100svh!important;
    height:100dvh!important;
    min-height:680px!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
  }
  body.guest-landing-active #page-home #guest-hero-overlay .gho-inner{
    margin-bottom:24px!important;
  }
  body:not(.guest-landing-active) #page-home .featured-hero .fh-btn-play,
  body:not(.guest-landing-active) #page-home .featured-hero .fh-btn-list{
    width:auto!important;
    min-width:0!important;
    height:46px!important;
    min-height:46px!important;
    padding:0 17px!important;
    border-radius:9px!important;
  }
}