/* ══════════ CONFIG NOTICE BANNER ══════════ */
#setup-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(135deg,#e8b84b,#e05c3a);color:#111;font-family:"DM Sans",sans-serif;font-size:.85rem;font-weight:700;padding:.75rem 2rem;text-align:center}
#setup-banner a{color:#111;text-decoration:underline}

:root{--bg:#090b10;--surface:#0f1219;--surface2:#161b26;--border:rgba(255,255,255,0.07);--accent:#e8b84b;--accent2:#e05c3a;--text:#f0f0f0;--muted:#8892a4;--card-radius:10px;--star:#f5c518}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* Noise overlay moved off fixed layer — now baked into body background for GPU-friendly scrolling */
body{background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")}

/* NAV */
nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:1.2rem;padding:0 2.5rem;height:62px;background:linear-gradient(to bottom,rgba(9,11,16,.98),rgba(9,11,16,.88));backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.05)}
.logo{font-family:"Bebas Neue",sans-serif;font-size:1.9rem;letter-spacing:3px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0}
/* Back button shown ONLY while the watch player is open. Sits to the left of
   the logo so it reads "← FINALVERSE" — matches the egydead/shahid4u layout
   the user referenced. Subtle but tappable; gold tint on hover hints that
   it's part of the brand. */
.wp-nav-back-btn{display:none;align-items:center;gap:.35rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);font-family:"DM Sans",sans-serif;font-size:.82rem;font-weight:600;padding:.42rem .82rem .42rem .68rem;border-radius:18px;cursor:pointer;transition:all .18s;letter-spacing:.2px;flex-shrink:0;margin-right:.2rem}
.wp-nav-back-btn:hover{background:rgba(232,184,75,.14);border-color:rgba(232,184,75,.45);color:#fff}
.wp-nav-back-btn:active{transform:translateY(1px)}
.wp-nav-back-btn svg{flex-shrink:0}
/* On narrow screens hide the "Back" label and show only the chevron — saves
   horizontal space next to the logo. */
@media (max-width: 640px){
  .wp-nav-back-btn{padding:.42rem .55rem}
  .wp-nav-back-btn span{display:none}
}
.nav-links{display:flex;gap:.2rem;align-items:center;flex:1}
.nav-pill{background:transparent;border:none;color:rgba(255,255,255,.55);font-family:"DM Sans",sans-serif;font-size:.85rem;font-weight:600;padding:.42rem .95rem;border-radius:20px;cursor:pointer;transition:all .2s;letter-spacing:.2px}
.nav-pill:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-pill.active{color:#fff;background:rgba(255,255,255,.1)}
.nav-pill.mega-open{color:var(--accent)}
.nav-caret{font-size:.6rem;display:inline-block;transition:transform .25s;margin-left:.15rem}
.nav-caret.open{transform:rotate(180deg)}
.nav-right{display:flex;align-items:center;gap:.7rem;margin-left:auto}
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap svg.search-icon{position:absolute;left:10px;color:rgba(255,255,255,.35);pointer-events:none}
#searchInput{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:20px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.83rem;padding:.4rem 2rem .4rem 2.2rem;width:240px;outline:none;transition:all .3s}
#searchInput:focus{border-color:rgba(232,184,75,.5);width:300px;background:rgba(255,255,255,.1)}
#searchInput::placeholder{color:rgba(255,255,255,.3)}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:rgba(255,255,255,.4);cursor:pointer;padding:2px 6px;font-size:1rem;line-height:1;border-radius:50%;display:none;transition:color .15s,background .15s}
.search-clear:hover{color:#fff;background:rgba(255,255,255,.08)}
.search-clear.visible{display:block}

/* ─── Search dropdown (results-as-you-type) ─── */
.search-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-width:calc(100vw - 30px);background:rgba(14,17,24,.97);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.09);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);overflow:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s;z-index:300;max-height:min(70vh,520px);display:flex;flex-direction:column}
.search-dropdown.open{opacity:1;transform:translateY(0);pointer-events:all}
.sd-header{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem .55rem;font-size:.7rem;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}
.sd-header .sd-count{color:var(--accent);font-weight:700}
.sd-list{overflow-y:auto;flex:1;padding:.3rem 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.sd-list::-webkit-scrollbar{width:6px}
.sd-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.sd-item{display:flex;gap:.7rem;padding:.55rem .85rem;cursor:pointer;transition:background .15s;align-items:center;border-left:2px solid transparent}
.sd-item:hover,.sd-item.sd-active{background:rgba(255,255,255,.06);border-left-color:var(--accent)}
.sd-poster{width:42px;height:62px;object-fit:cover;border-radius:5px;background:#0f1219;flex-shrink:0;border:1px solid rgba(255,255,255,.06)}
.sd-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sd-title{color:#fff;font-size:.86rem;font-weight:600;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-title mark{background:rgba(232,184,75,.25);color:#ffeec3;padding:0 1px;border-radius:2px}
.sd-meta{color:rgba(255,255,255,.5);font-size:.72rem;display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.sd-meta .sd-dot{color:rgba(255,255,255,.25)}
.sd-type{display:inline-block;padding:1px 6px;border-radius:8px;font-size:.62rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.sd-type-movie{background:rgba(232,184,75,.18);color:#e8b84b;border:1px solid rgba(232,184,75,.3)}
.sd-type-series{background:rgba(96,165,250,.18);color:#93c5fd;border:1px solid rgba(96,165,250,.3)}
.sd-rating{color:#facc15;font-weight:600}
.sd-watched{color:#10b981;font-size:.72rem;display:inline-flex;align-items:center;gap:2px}
.sd-empty{padding:2rem 1rem;text-align:center;color:rgba(255,255,255,.45);font-size:.85rem}
.sd-empty-icon{font-size:1.6rem;margin-bottom:.4rem;opacity:.55}
.sd-footer{padding:.55rem .9rem;background:rgba(0,0,0,.25);border-top:1px solid rgba(255,255,255,.05);font-size:.72rem;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.sd-footer kbd{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:3px;padding:1px 5px;font-family:inherit;font-size:.68rem;color:rgba(255,255,255,.7)}
.sd-see-all{background:transparent;border:none;color:var(--accent);font-family:inherit;font-size:.74rem;font-weight:600;cursor:pointer;padding:0;letter-spacing:.3px}
.sd-see-all:hover{text-decoration:underline}

@media (max-width:760px){
  .search-dropdown{width:calc(100vw - 24px);right:auto;left:50%;transform:translate(-50%,-6px)}
  .search-dropdown.open{transform:translate(-50%,0)}
  #searchInput{width:170px}
  #searchInput:focus{width:200px}
}

/* ═══ MOOD PICKER ═══
   Brand-themed (gold accent, no purple) — matches the rest of the site.
   No emoji icons; all visuals are inline SVG (Lucide-style) so they tint
   with currentColor and look consistent across OS.
*/
.cat-tab.cat-tab-mood{background:linear-gradient(135deg,rgba(232,184,75,.22),rgba(224,92,58,.18));border:1px solid rgba(232,184,75,.5);color:var(--accent);font-weight:700;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.4rem}
.cat-tab.cat-tab-mood::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);transform:translateX(-100%);transition:transform .8s}
.cat-tab.cat-tab-mood:hover::before{transform:translateX(100%)}
.cat-tab.cat-tab-mood:hover{background:linear-gradient(135deg,rgba(232,184,75,.32),rgba(224,92,58,.25));color:#fff;border-color:var(--accent)}
.cat-tab.cat-tab-mood svg{width:14px;height:14px;flex-shrink:0}

/* ── Modal shell ── */
.mp-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:1.5rem;opacity:0;transition:opacity .25s}
.mp-overlay.open{display:flex;opacity:1}
.mp-modal{background:linear-gradient(165deg,rgba(18,20,28,.98),rgba(12,14,20,.98));border:1px solid rgba(232,184,75,.18);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04),0 0 60px rgba(232,184,75,.04);width:100%;max-width:660px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;font-family:"DM Sans",sans-serif;transform:scale(.96);transition:transform .25s;position:relative}
.mp-overlay.open .mp-modal{transform:scale(1)}
/* Cinematic backdrop layer — a blurred poster fades behind the modal */
.mp-backdrop{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease,transform 1.4s ease;filter:blur(28px) saturate(1.1) brightness(.45);transform:scale(1.15);z-index:0;pointer-events:none}
.mp-backdrop.show{opacity:.55}
.mp-modal::before{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(18,20,28,.85),rgba(12,14,20,.95));z-index:1;pointer-events:none}
.mp-modal > *{position:relative;z-index:2}
/* Side accent bar — anchors the eye, gold/orange gradient */
.mp-modal::after{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent2));z-index:3}

.mp-header{padding:1.5rem 1.8rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:1.1rem}
.mp-header-icon{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,rgba(232,184,75,.18),rgba(224,92,58,.12));border:1px solid rgba(232,184,75,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)}
.mp-header-icon svg{width:22px;height:22px}
.mp-header-text{flex:1;min-width:0}
.mp-title{font-family:"Bebas Neue",sans-serif;font-size:1.7rem;letter-spacing:3px;color:#fff;line-height:1;margin-bottom:.35rem}
.mp-title-accent{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mp-subtitle{color:rgba(255,255,255,.55);font-size:.82rem;line-height:1.45}
.mp-close{background:transparent;border:none;color:rgba(255,255,255,.5);cursor:pointer;padding:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.mp-close:hover{color:#fff;background:rgba(255,255,255,.08)}
.mp-close svg{width:16px;height:16px}

.mp-body{padding:1.6rem 1.8rem;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.mp-body::-webkit-scrollbar{width:6px}
.mp-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.mp-step{animation:mpFadeIn .35s ease}
@keyframes mpFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Big step counter — Bebas Neue, very brand */
.mp-step-counter{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1.3rem;font-family:"Bebas Neue",sans-serif;letter-spacing:2px}
.mp-step-num{font-size:2.4rem;line-height:1;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:400}
.mp-step-divider{color:rgba(255,255,255,.18);font-size:1.6rem;font-weight:300}
.mp-step-total{color:rgba(255,255,255,.3);font-size:1.4rem}
.mp-step-label{color:rgba(255,255,255,.45);font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;font-family:"DM Sans",sans-serif;margin-left:auto;font-weight:600}

.mp-question{color:#fff;font-size:1.15rem;font-weight:600;margin-bottom:1.3rem;letter-spacing:.1px;line-height:1.4}

/* Option cards — Lucide icons inside, gold accent on selection */
.mp-options{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mp-options.three-col{grid-template-columns:1fr 1fr 1fr}
.mp-option{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1rem .95rem;cursor:pointer;text-align:left;transition:all .2s cubic-bezier(.34,1.56,.64,1);font-family:inherit;color:#fff;display:flex;align-items:center;gap:.85rem;position:relative;overflow:hidden}
.mp-option::after{content:"";position:absolute;top:.5rem;right:.5rem;width:18px;height:18px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center}
.mp-option:hover{background:rgba(232,184,75,.08);border-color:rgba(232,184,75,.35);transform:translateY(-1px)}
.mp-option.selected{background:linear-gradient(135deg,rgba(232,184,75,.14),rgba(224,92,58,.08));border-color:var(--accent);box-shadow:0 0 0 1px rgba(232,184,75,.3),0 6px 22px rgba(232,184,75,.1)}
.mp-option.selected::after{opacity:1;transform:scale(1);content:"✓";color:#111;font-size:.7rem;font-weight:700;line-height:18px;text-align:center}
.mp-option.selected .mp-option-icon{color:var(--accent)}
.mp-option-icon{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.7);transition:all .2s}
.mp-option-icon svg{width:18px;height:18px}
.mp-option:hover .mp-option-icon{color:var(--accent)}
.mp-option.selected .mp-option-icon{background:rgba(232,184,75,.15);border-color:rgba(232,184,75,.4)}
.mp-option-text{font-size:.9rem;font-weight:600;letter-spacing:.1px;flex:1;min-width:0}
.mp-option-text small{display:block;color:rgba(255,255,255,.5);font-size:.72rem;font-weight:400;margin-top:3px;white-space:normal;line-height:1.35}

/* Free-text textarea */
.mp-freetext-wrap{margin-top:.4rem}
.mp-freetext{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:11px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.9rem;padding:.85rem 1rem;outline:none;resize:vertical;min-height:80px;transition:all .2s;line-height:1.5}
.mp-freetext:focus{border-color:rgba(232,184,75,.5);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(232,184,75,.08)}
.mp-freetext::placeholder{color:rgba(255,255,255,.3)}
.mp-freetext-hint{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;color:rgba(255,255,255,.4);font-size:.74rem}
.mp-freetext-hint svg{width:13px;height:13px;color:var(--accent);flex-shrink:0}

/* Footer */
.mp-footer{padding:1rem 1.8rem;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-shrink:0;background:rgba(0,0,0,.25)}
.mp-btn{font-family:inherit;font-size:.85rem;font-weight:600;padding:.65rem 1.4rem;border-radius:10px;cursor:pointer;border:1px solid;transition:all .15s;letter-spacing:.3px;display:inline-flex;align-items:center;gap:.5rem}
.mp-btn svg{width:14px;height:14px}
.mp-btn-back{background:transparent;border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.7)}
.mp-btn-back:hover{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.25)}
.mp-btn-back:disabled{opacity:.3;cursor:not-allowed}
.mp-btn-next{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#111;box-shadow:0 4px 18px rgba(232,184,75,.25)}
.mp-btn-next:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(232,184,75,.4)}
.mp-btn-next:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.mp-step-meta{font-size:.74rem;color:rgba(255,255,255,.4);letter-spacing:.5px}

/* ── Loading / "Analyzing your taste" ── */
.mp-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1rem;text-align:center;animation:mpFadeIn .3s ease}
.mp-loading-ring{width:64px;height:64px;position:relative;margin-bottom:1.4rem}
.mp-loading-ring svg{width:100%;height:100%;animation:mpSpin 1.4s linear infinite}
@keyframes mpSpin{to{transform:rotate(360deg)}}
.mp-loading-title{font-family:"Bebas Neue",sans-serif;font-size:1.4rem;letter-spacing:2.5px;color:#fff;margin-bottom:.5rem}
.mp-loading-sub{color:rgba(255,255,255,.5);font-size:.85rem;line-height:1.5;max-width:340px;margin-bottom:1.4rem}
.mp-loading-steps{display:flex;flex-direction:column;gap:.45rem;width:100%;max-width:300px}
.mp-loading-step{display:flex;align-items:center;gap:.65rem;font-size:.78rem;color:rgba(255,255,255,.35);transition:color .3s;text-align:left}
.mp-loading-step.active{color:#fff}
.mp-loading-step.done{color:rgba(232,184,75,.85)}
.mp-loading-step-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.15);flex-shrink:0;transition:background .3s,box-shadow .3s}
.mp-loading-step.active .mp-loading-step-dot{background:var(--accent);box-shadow:0 0 8px rgba(232,184,75,.6);animation:mpPulse 1s ease-in-out infinite}
.mp-loading-step.done .mp-loading-step-dot{background:var(--accent)}
@keyframes mpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}

/* ── Results screen ── */
.mp-results-intro{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.3rem;flex-wrap:wrap}
.mp-results-headline{font-family:"Bebas Neue",sans-serif;font-size:1.6rem;letter-spacing:2.5px;color:#fff;line-height:1}
.mp-results-headline-accent{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mp-results-sub{font-size:.78rem;color:rgba(255,255,255,.5);letter-spacing:.3px}

/* Top pick — full-width hero card */
.mp-top-pick{display:flex;gap:1.1rem;padding:1rem;background:linear-gradient(135deg,rgba(232,184,75,.1),rgba(224,92,58,.06));border:1px solid rgba(232,184,75,.3);border-radius:14px;cursor:pointer;transition:all .25s;margin-bottom:1.3rem;position:relative;overflow:hidden}
.mp-top-pick::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.7}
.mp-top-pick:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(232,184,75,.18);border-color:var(--accent)}
.mp-top-pick-poster{width:100px;height:150px;object-fit:cover;border-radius:8px;background:#0f1219;flex-shrink:0;border:1px solid rgba(255,255,255,.06)}
.mp-top-pick-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.45rem}
.mp-top-pick-tag{display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;font-size:.62rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#111;background:linear-gradient(135deg,var(--accent),var(--accent2));padding:.25rem .55rem;border-radius:5px;margin-bottom:.1rem}
.mp-top-pick-tag svg{width:11px;height:11px}
.mp-top-pick-title{font-family:"Bebas Neue",sans-serif;font-size:1.6rem;letter-spacing:2px;color:#fff;line-height:1.05}
.mp-top-pick-meta{display:flex;gap:.55rem;flex-wrap:wrap;font-size:.78rem;color:rgba(255,255,255,.6);align-items:center}
.mp-top-pick-meta .sd-dot{color:rgba(255,255,255,.25)}
.mp-top-pick-rating{color:#facc15;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.mp-top-pick-rating svg{width:12px;height:12px;fill:#facc15;stroke:none}
.mp-match{display:inline-flex;align-items:center;gap:.35rem;background:rgba(232,184,75,.12);border:1px solid rgba(232,184,75,.3);color:var(--accent);font-weight:700;padding:.18rem .5rem;border-radius:5px;font-size:.7rem;letter-spacing:.3px}
.mp-top-pick-reason{font-size:.82rem;color:rgba(255,255,255,.7);line-height:1.45}

/* Alternative picks (smaller list) */
.mp-alts-label{font-size:.7rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
.mp-alts-label::before,.mp-alts-label::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.06)}
.mp-results{display:flex;flex-direction:column;gap:.55rem}
.mp-result-card{display:flex;gap:.85rem;padding:.7rem .8rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:11px;cursor:pointer;transition:all .18s;align-items:center}
.mp-result-card:hover{background:rgba(232,184,75,.08);border-color:rgba(232,184,75,.3);transform:translateX(3px)}
.mp-result-poster{width:48px;height:72px;object-fit:cover;border-radius:6px;background:#0f1219;flex-shrink:0;border:1px solid rgba(255,255,255,.06)}
.mp-result-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mp-result-title{color:#fff;font-size:.92rem;font-weight:600;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-result-meta{display:flex;gap:.5rem;font-size:.72rem;color:rgba(255,255,255,.55);flex-wrap:wrap;align-items:center}
.mp-result-meta .sd-dot{color:rgba(255,255,255,.25)}
.mp-result-rating{color:#facc15;font-weight:600}
.mp-result-reason{font-size:.72rem;color:rgba(232,184,75,.8);line-height:1.35}
.mp-match-mini{font-size:.68rem;color:var(--accent);font-weight:700;letter-spacing:.3px;flex-shrink:0;padding-left:.4rem}

.mp-empty{padding:2.5rem 1rem;text-align:center;color:rgba(255,255,255,.55)}
.mp-empty-icon{width:50px;height:50px;margin:0 auto .8rem;color:rgba(255,255,255,.3)}
.mp-empty-icon svg{width:100%;height:100%}
.mp-empty strong{display:block;color:#fff;font-weight:600;margin-bottom:.5rem;font-size:.95rem}

@media (max-width:560px){
  .mp-options,.mp-options.three-col{grid-template-columns:1fr}
  .mp-modal{max-height:95vh}
  .mp-header{padding:1.1rem 1.2rem .9rem;gap:.85rem}
  .mp-header-icon{width:36px;height:36px}
  .mp-header-icon svg{width:18px;height:18px}
  .mp-title{font-size:1.4rem}
  .mp-body{padding:1.2rem}
  .mp-footer{padding:.85rem 1.2rem}
  .mp-step-num{font-size:2rem}
  .mp-top-pick{flex-direction:column;text-align:left}
  .mp-top-pick-poster{width:100%;height:auto;aspect-ratio:2/3;max-width:160px}
  .mp-top-pick-title{font-size:1.4rem}
}

/* ═══ MEGA PANEL ═══ */
.mega-overlay{position:fixed;inset:0;top:62px;z-index:150;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s}
.mega-overlay.open{opacity:1;pointer-events:all}
.mega-panel{position:fixed;top:62px;left:0;right:0;z-index:160;background:rgba(10,13,20,.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.25,.46,.45,.94),opacity .3s}
.mega-panel.open{transform:translateY(0);opacity:1;pointer-events:all}
.mega-inner{display:flex;max-width:1300px;margin:0 auto;padding:1.75rem 2.5rem 2rem}
.mega-section{flex:1}
.mega-label{font-family:"Bebas Neue",sans-serif;font-size:1rem;letter-spacing:2.5px;color:rgba(255,255,255,.28);margin-bottom:1rem}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
.mega-lang-card{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:16/7;border:1px solid rgba(255,255,255,.07);transition:transform .2s,border-color .2s;background:var(--surface)}
.mega-lang-card:hover{transform:translateY(-3px) scale(1.02);border-color:rgba(232,184,75,.4)}
.mega-lang-card img{width:100%;height:100%;object-fit:cover;opacity:.45;transition:opacity .2s}
.mega-lang-card:hover img{opacity:.65}
.mlc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,11,16,.92),transparent 65%);display:flex;flex-direction:column;justify-content:flex-end;padding:.5rem .6rem}
.mlc-flag{font-size:1.1rem;margin-bottom:.1rem}
.mlc-name{font-size:.73rem;font-weight:700;color:#fff;letter-spacing:.2px}
.mlc-count{font-size:.6rem;color:rgba(255,255,255,.4)}
.mega-all-card{background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.2);border-radius:8px;cursor:pointer;aspect-ratio:16/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;transition:all .2s}
.mega-all-card:hover{background:rgba(232,184,75,.16);border-color:rgba(232,184,75,.45)}
.mega-all-card span:first-child{font-size:1.3rem}
.mega-all-card span:last-child{font-size:.68rem;font-weight:700;color:var(--accent);letter-spacing:.5px}

/* ═══ HOME ROWS ═══ */
.home-row{padding:1.6rem 0 .5rem;position:relative}
.home-row-header{display:flex;align-items:center;gap:.75rem;padding:0 3rem;margin-bottom:.85rem}
.home-row-title{font-family:"Bebas Neue",sans-serif;font-size:1.1rem;letter-spacing:2px;color:var(--text);white-space:nowrap}
.home-row-see-all{font-size:.68rem;color:var(--accent);font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;opacity:.8;transition:all .2s;background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.2);padding:.2rem .65rem;border-radius:20px;white-space:nowrap}
.home-row-see-all:hover{opacity:1;background:rgba(232,184,75,.15);border-color:rgba(232,184,75,.4)}
.home-row-count{font-size:.65rem;color:var(--muted);margin-left:auto;background:rgba(255,255,255,.05);padding:.15rem .5rem;border-radius:10px}
/* The scroll track */
.home-row-scroll-wrap{position:relative;overflow:visible;margin:-14px 0 -6px}
.home-row-scroll{display:flex;gap:.7rem;overflow-x:auto;overflow-y:hidden;padding:14px 3rem 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.home-row-scroll::-webkit-scrollbar{display:none}
/* Arrow buttons */
.home-row-arrow{position:absolute;top:calc(50% + 20px);transform:translateY(-50%);z-index:30;width:48px;height:80px;border-radius:6px;background:rgba(9,11,16,.92);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s,background .2s,color .2s;backdrop-filter:blur(12px);opacity:0;pointer-events:none}
.home-row:hover .home-row-arrow{opacity:1;pointer-events:all}
.home-row-arrow:hover,.home-row-arrow:focus{opacity:1!important;background:rgba(232,184,75,.25);color:var(--accent);border-color:rgba(232,184,75,.4);outline:none}
.home-row-arrow.arr-left{left:0;border-radius:0 8px 8px 0}
.home-row-arrow.arr-right{right:0;border-radius:8px 0 0 8px}
.home-row-arrow.arr-hidden{opacity:0!important;pointer-events:none!important}
/* UNIFORM card size — fixed width+height, no aspect-ratio (prevents misalignment) */
.row-card{position:relative;flex-shrink:0;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.05);transition:transform .25s cubic-bezier(.25,.46,.45,.94),box-shadow .25s,border-color .25s;width:155px;height:232px;background:var(--surface)}
.row-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,11,16,.96) 0%,rgba(9,11,16,.3) 45%,transparent 75%);z-index:1}
.row-card:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 16px 40px rgba(0,0,0,.7),0 0 0 1px rgba(232,184,75,.25);z-index:20}
.row-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s,filter .22s;display:block}
.row-card:hover img{transform:scale(1.06);filter:brightness(.72)}
/* ── Touch devices: hover doesn't exist, so give a clear press feedback
      (scale-down) instead. Mirrors how Netflix/streaming apps respond to a
      tap. Kept inside (hover:none) so it never fights the desktop hover. ── */
@media (hover: none) and (pointer: coarse) {
  .row-card:active{transform:scale(.96);transition:transform .12s ease}
  .row-card:active img{filter:brightness(.85)}
}
/* ── Perf: let the browser skip rendering off-screen rows until they scroll
      into view. contain-intrinsic-size reserves height so the scrollbar and
      layout stay stable (no CLS). Big win on pages with many rows. ── */
.home-row{content-visibility:auto;contain-intrinsic-size:auto 320px}
.row-card-info{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:.6rem}
.row-card-hover{opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;margin-bottom:.22rem}
.row-card:hover .row-card-hover{opacity:1;transform:translateY(0)}
.row-card-genre{font-size:.55rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:.1rem}
.row-card-overview{font-size:.62rem;color:rgba(255,255,255,.6);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-card-title{font-size:.76rem;font-weight:700;line-height:1.2;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);margin-bottom:.18rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-card-meta{display:flex;align-items:center;justify-content:space-between;font-size:.62rem;color:rgba(255,255,255,.4)}
.row-card-rating{color:var(--star);font-weight:700}
.row-card-badge{position:absolute;top:6px;right:6px;z-index:3;font-size:.52rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:.13rem .36rem;border-radius:3px}
.row-badge-movie{background:rgba(232,184,75,.18);color:var(--accent);border:1px solid rgba(232,184,75,.3)}
.row-badge-series{background:rgba(91,192,235,.14);color:#7dd3fc;border:1px solid rgba(91,192,235,.25)}
.row-card-watch-btn{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.row-card:hover .row-card-watch-btn{opacity:1}
.row-card-watch-inner{background:rgba(232,184,75,.92);color:#111;font-size:.7rem;font-weight:800;padding:.35rem .85rem;border-radius:20px;border:none;cursor:pointer;display:flex;align-items:center;gap:.35rem;box-shadow:0 4px 14px rgba(0,0,0,.5);transform:translateY(5px);transition:transform .2s}
.row-card:hover .row-card-watch-inner{transform:translateY(0)}
.row-card.is-watched{border-color:rgba(34,197,94,.2)}
.row-card .remove-btn{position:absolute;top:6px;left:6px;z-index:5;width:24px;height:24px;border-radius:50%;border:1px solid rgba(224,92,58,.5);background:rgba(9,11,16,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:rgba(224,92,58,.7);transition:all .2s;opacity:0}
.row-card:hover .remove-btn{opacity:1}
.row-card .remove-btn:hover{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.row-card .watch-btn{position:absolute;bottom:6px;left:6px;z-index:5;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(9,11,16,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:all .2s;color:rgba(255,255,255,.4)}
.row-card .watch-btn.watched{background:#22c55e;border-color:#22c55e;color:#fff}
/* Admin-only: Watch Override toggle — sits next to the ✓ watched button (bottom-left).
   When .active, the button glows gold meaning the Watch button will appear on the
   card even if the title is Coming Soon. Hidden by default, revealed on hover
   (unless active, in which case it's always visible as a status indicator). */
.row-card .override-btn{position:absolute;bottom:6px;left:36px;z-index:5;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(9,11,16,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.72rem;transition:all .2s;color:rgba(255,255,255,.4);padding:0;line-height:1;opacity:0}
.row-card:hover .override-btn{opacity:1}
.row-card .override-btn.active{opacity:1;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#111;box-shadow:0 0 10px rgba(232,184,75,.45)}
.row-card .override-btn:hover{color:#fff;border-color:rgba(232,184,75,.6)}
.row-card .override-btn.active:hover{color:#111;filter:brightness(1.1)}
/* ══ SOON OVERLAY STRIP ══ */
.soon-strip{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  z-index:6;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.55rem 0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(9,11,16,.72) 12%,
    rgba(9,11,16,.82) 50%,
    rgba(9,11,16,.72) 88%,
    transparent 100%
  );
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border-top:1px solid rgba(232,184,75,.25);
  border-bottom:1px solid rgba(232,184,75,.25);
}
.soon-strip-text{
  font-family:"Bebas Neue",sans-serif;
  font-size:1rem;
  letter-spacing:4px;
  color:var(--accent);
  text-shadow:0 0 18px rgba(232,184,75,.6);
  animation:soon-glow 2.4s ease-in-out infinite;
}
.soon-strip-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  opacity:.6;
  flex-shrink:0;
}
@keyframes soon-glow{
  0%,100%{opacity:.85;text-shadow:0 0 12px rgba(232,184,75,.4)}
  50%{opacity:1;text-shadow:0 0 22px rgba(232,184,75,.85)}
}
/* card border glow when SOON */
.row-card.is-soon{border-color:rgba(232,184,75,.35)!important}
.card.is-soon{border-color:rgba(232,184,75,.35)!important}

.row-card .card-qe-bar{position:absolute;top:6px;left:6px;display:flex;gap:3px;opacity:0;transition:opacity .2s;z-index:10;pointer-events:none}
.row-card:hover .card-qe-bar{opacity:1;pointer-events:auto}
/* Entrance animation */
@keyframes rowCardIn{from{opacity:0;transform:translateX(18px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}}
.row-card-animate{animation:rowCardIn .35s cubic-bezier(.25,.46,.45,.94) both}

/* ═══ WATCH PAGE SIDEBAR ═══ */
.wp-subtitle-text{font-size:.78rem;color:rgba(255,255,255,.3);margin-left:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.wp-sidebar-toggle{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.wp-sidebar-toggle:hover,.wp-sidebar-toggle.active{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.25)}
.wp-body{display:flex;flex-direction:row;flex:1;overflow:hidden}
.wp-player-wrap{position:relative;background:#000;flex:1;min-height:0;min-width:0}
.wp-sidebar{width:290px;flex-shrink:0;background:rgba(9,11,16,.97);border-left:1px solid rgba(255,255,255,.06);overflow-y:auto;backdrop-filter:blur(16px)}
.wp-sidebar::-webkit-scrollbar{width:3px}
.wp-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09)}
.wp-sidebar-inner{padding:1.1rem}
.wp-sidebar-poster{width:100%;border-radius:8px;margin-bottom:.85rem;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.wp-sidebar-title{font-family:"Bebas Neue",sans-serif;font-size:1.2rem;letter-spacing:2px;color:#fff;margin-bottom:.3rem;line-height:1.1}
.wp-sidebar-meta{font-size:.7rem;color:rgba(255,255,255,.38);margin-bottom:.65rem;display:flex;flex-wrap:wrap;gap:.3rem}
.wp-sidebar-meta span{background:rgba(255,255,255,.06);border-radius:3px;padding:.12rem .4rem}
.wp-sidebar-overview{font-size:.75rem;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:.9rem;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.wp-sidebar-actions{display:flex;flex-direction:column;gap:.45rem}
.wp-sidebar-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.65);font-family:"DM Sans",sans-serif;font-size:.78rem;font-weight:600;padding:.48rem;border-radius:8px;cursor:pointer;transition:all .2s;text-align:center}
.wp-sidebar-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.wp-sidebar-btn.watched-active{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);color:#22c55e}

/* arrow styles moved to HOME ROWS section */
#grid-browse, #grid-search{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:1rem}
#grid-browse .row-card, #grid-search .row-card{width:100%}
.empty-state{padding:3rem;color:var(--muted);font-size:.85rem;text-align:center}

/* CAT TABS */
.cat-tabs{display:flex;align-items:center;gap:.4rem;padding:.85rem 3rem .5rem;flex-wrap:wrap}
.cat-tab{background:transparent;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.4);font-family:"DM Sans",sans-serif;font-size:.8rem;font-weight:600;padding:.34rem 1rem;border-radius:20px;cursor:pointer;transition:all .2s;white-space:nowrap}
.cat-tab:hover{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.05)}
.cat-tab.active{background:rgba(232,184,75,.15);border-color:rgba(232,184,75,.4);color:var(--accent)}

/* AUTH BUTTON */
#auth-btn{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--muted);font-family:"DM Sans",sans-serif;font-size:.78rem;font-weight:600;padding:.38rem .9rem;border-radius:20px;cursor:pointer;transition:all .2s;letter-spacing:.3px;display:inline-flex;align-items:center;gap:.4rem}
#auth-btn:hover{color:var(--accent);border-color:rgba(232,184,75,.5);background:rgba(232,184,75,.07)}
#auth-btn.logged-in{color:#22c55e;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.07)}
#admin-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#111;font-family:"DM Sans",sans-serif;font-size:.78rem;font-weight:700;padding:.38rem .9rem;border-radius:20px;cursor:pointer;transition:opacity .2s,transform .15s;display:none;letter-spacing:.3px;align-items:center;gap:.4rem}
#admin-btn:hover{opacity:.9;transform:translateY(-1px)}

/* ═══ HERO — Immersive Cinematic ═══ */
#hero{position:relative;height:clamp(460px,54vh,680px);display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(135deg,#0d1018,#141922)}
#hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 15%;filter:brightness(.5) saturate(1.1);transition:background-image .9s ease}
#hero-bg-blur{position:absolute;inset:0;background-size:cover;background-position:center 15%;filter:blur(60px) brightness(.3) saturate(1.4);transform:scale(1.1);transition:background-image 1s ease}
#hero-vignette{position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 0%,rgba(9,11,16,.7) 38%,rgba(9,11,16,.1) 65%,transparent 100%),linear-gradient(to right,var(--bg) 0%,rgba(9,11,16,.6) 25%,transparent 60%)}
.hero-content{position:relative;z-index:2;padding:0 3.5rem 3.5rem;max-width:680px;animation:heroEntrance .6s ease both}
@keyframes heroEntrance{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero-eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.hero-badge{display:inline-flex;align-items:center;gap:.35rem;background:linear-gradient(135deg,rgba(232,184,75,.2),rgba(224,92,58,.15));border:1px solid rgba(232,184,75,.35);color:var(--accent);font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:.28rem .7rem;border-radius:3px}
.hero-lang-pill{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);font-size:.68rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:.28rem .65rem;border-radius:3px}
.hero-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(3rem,6.5vw,5.5rem);letter-spacing:3px;line-height:.95;margin-bottom:1rem;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.hero-meta{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;font-size:.82rem;flex-wrap:wrap}
.hero-rating{display:inline-flex;align-items:center;gap:.35rem;background:rgba(245,197,24,.15);border:1px solid rgba(245,197,24,.3);color:#f5c518;font-weight:800;font-size:.8rem;padding:.25rem .65rem;border-radius:4px}
.hero-pill{color:rgba(255,255,255,.55);font-size:.78rem;font-weight:500}
.hero-pill+.hero-pill::before{content:"·";margin-right:.8rem;opacity:.4}
.hero-overview{font-size:.9rem;line-height:1.7;color:rgba(240,240,240,.72);margin-bottom:1.6rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:540px}
.hero-btns{display:flex;gap:.75rem;flex-wrap:wrap}
.btn-play{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:none;color:#0a0a0a;font-family:"DM Sans",sans-serif;font-size:.9rem;font-weight:800;padding:.72rem 1.8rem;border-radius:6px;cursor:pointer;transition:transform .15s,background .2s,box-shadow .15s;letter-spacing:.2px}
.btn-play:hover{transform:translateY(-2px);background:#f0f0f0;box-shadow:0 8px 28px rgba(255,255,255,.2)}
.btn-play svg{flex-shrink:0}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff;font-family:"DM Sans",sans-serif;font-size:.88rem;font-weight:700;padding:.65rem 1.6rem;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,184,75,.3)}
.btn-info{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);color:#fff;font-family:"DM Sans",sans-serif;font-size:.88rem;font-weight:600;padding:.72rem 1.5rem;border-radius:6px;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s}
.btn-info:hover{background:rgba(255,255,255,.22)}
.btn-trailer{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-family:"DM Sans",sans-serif;font-size:.88rem;font-weight:600;padding:.65rem 1.4rem;border-radius:8px;cursor:pointer;backdrop-filter:blur(4px);transition:background .2s;display:inline-flex;align-items:center;gap:.5rem}
.btn-trailer:hover{background:rgba(255,255,255,.2)}
/* Hero nav dots */
#hero-dots{position:absolute;bottom:1.5rem;right:3rem;z-index:3;display:flex;gap:.45rem}
.hero-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:all .3s;border:none;padding:0}
.hero-dot.active{width:20px;border-radius:3px;background:var(--accent)}

/* ═══ STATS BAR ═══ */
.stats-bar{display:flex;align-items:center;gap:1.5rem;padding:.65rem 3rem;background:rgba(15,18,25,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);font-size:.78rem;flex-wrap:wrap;position:sticky;top:64px;z-index:50}
.stat-item{display:flex;align-items:center;gap:.4rem;color:var(--muted)}
.stat-item strong{color:var(--text);font-size:.92rem}
.stat-item.green strong{color:#22c55e}
.stat-divider{width:1px;height:14px;background:var(--border)}
.watch-filter{display:flex;gap:.3rem;margin-left:auto}
.wf-btn{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:"DM Sans",sans-serif;font-size:.73rem;font-weight:600;padding:.28rem .75rem;border-radius:20px;cursor:pointer;transition:all .2s}
.wf-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.wf-btn.wf-active{background:var(--accent);border-color:var(--accent);color:#111}

/* ═══ SECTION HEADERS — Netflix-style ═══ */
.section-wrap{padding:2rem 3rem 0}
.section-header{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.1rem}
.section-title{font-family:"Bebas Neue",sans-serif;font-size:1.35rem;letter-spacing:2px;color:var(--text)}
.section-subtitle{font-size:.75rem;color:var(--accent);font-weight:700;letter-spacing:.5px;text-transform:uppercase;opacity:.8;cursor:pointer;transition:opacity .2s}
.section-subtitle:hover{opacity:1}
.section-count{font-size:.72rem;color:var(--muted);margin-left:auto;font-weight:500}

/* ═══ CATEGORY TABS — pill style ═══ */
.cat-tabs{display:flex;align-items:center;gap:.4rem;padding:.9rem 3rem .5rem;flex-wrap:wrap}
.cat-tabs#cat-tabs-bar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.cat-tabs#cat-tabs-bar::-webkit-scrollbar{height:5px}
.cat-tabs#cat-tabs-bar::-webkit-scrollbar-track{background:transparent}
.cat-tabs#cat-tabs-bar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.cat-tabs#cat-tabs-bar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}
/* Home button — visually distinct (filled accent border, brighter) so users
   can spot it instantly as the "go home" anchor. */
.cat-tab.cat-tab-home{background:linear-gradient(135deg,rgba(232,184,75,.2),rgba(224,92,58,.15));border:1px solid rgba(232,184,75,.45);color:var(--accent);font-weight:700;box-shadow:0 0 0 1px rgba(232,184,75,.08) inset}
.cat-tab.cat-tab-home:hover{background:linear-gradient(135deg,rgba(232,184,75,.3),rgba(224,92,58,.22));color:#fff;border-color:var(--accent)}
.cat-tab.cat-tab-home.active{background:var(--accent);border-color:var(--accent);color:#111}
/* Grouped tab — wrapper for the trigger button + its dropdown menu.
   The tab itself is a single button now; clicking it opens the dropdown. */
.cat-tab-group{position:relative;display:inline-flex;align-items:stretch}
.cat-tab-caret{font-size:.65rem;opacity:.55;margin-left:.25rem;transition:transform .18s}
.cat-tab-group.menu-open .cat-tab-caret{transform:rotate(180deg);opacity:1}
.cat-tab-group.menu-open .cat-tab{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.35);color:var(--accent)}
.cat-tab-type-label{font-size:.68rem;color:rgba(255,255,255,.4);font-weight:500;margin-left:.15rem}
.cat-tab.active .cat-tab-type-label{color:rgba(0,0,0,.55)}
/* Type filter dropdown — uses position:fixed (set in JS) so it escapes
   the parent #cat-tabs-bar's overflow:hidden clipping. */
.cat-type-menu{display:none;position:fixed;background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.35rem;min-width:170px;z-index:200;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.cat-type-menu.open{display:block}
.cat-type-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;background:transparent;border:none;color:rgba(255,255,255,.85);font-family:"DM Sans",sans-serif;font-size:.82rem;font-weight:500;padding:.5rem .65rem;border-radius:6px;cursor:pointer;text-align:left;gap:.5rem;white-space:nowrap}
.cat-type-menu button:hover{background:rgba(232,184,75,.1);color:var(--accent)}
.cat-type-menu button.selected{background:rgba(232,184,75,.15);color:var(--accent);font-weight:700}
.cat-type-menu button.selected::after{content:"✓";color:var(--accent);margin-left:auto}
/* Visual divider between "Open view" item and filter items */
.cat-type-menu hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:.3rem .25rem}
.cat-tab{background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--muted);font-family:"DM Sans",sans-serif;font-size:.8rem;font-weight:600;padding:.38rem 1rem;border-radius:20px;cursor:pointer;transition:all .2s;letter-spacing:.2px;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem}
.cat-tab:hover{color:var(--text);border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.05)}
.cat-tab.active{background:var(--accent);border-color:var(--accent);color:#111;font-weight:700}
.cat-tab-count{margin-left:auto;font-size:.72rem;color:var(--muted);font-weight:500}
.cat-view{padding:.75rem 3rem 4rem}

/* GENRE SUBTABS */
.genre-tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
.g-tab{background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--muted);font-family:"DM Sans",sans-serif;font-size:.75rem;font-weight:600;padding:.3rem .8rem;border-radius:20px;cursor:pointer;transition:all .18s}
.g-tab:hover{color:var(--text);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.g-tab.active{background:rgba(232,184,75,.15);border-color:rgba(232,184,75,.4);color:var(--accent)}

/* ═══ CARD GRID — Cinematic ═══ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem}
.card{position:relative;border-radius:8px;overflow:hidden;background:var(--surface);cursor:pointer;aspect-ratio:2/3;border:1px solid transparent;transition:transform .28s cubic-bezier(.25,.46,.45,.94),box-shadow .28s,border-color .28s;content-visibility:auto;contain-intrinsic-size:170px 255px}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,11,16,.96) 0%,rgba(9,11,16,.4) 45%,transparent 75%);z-index:1;transition:opacity .28s}
.card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 24px 50px rgba(0,0,0,.7),0 0 0 1px rgba(232,184,75,.2);z-index:10}
.card:hover::after{opacity:.85}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.25,.46,.45,.94),filter .28s}
.card:hover img{transform:scale(1.06);filter:brightness(.75)}
.card-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:.85rem}
.card-hover-info{opacity:0;transform:translateY(6px);transition:opacity .28s,transform .28s;margin-bottom:.4rem}
.card:hover .card-hover-info{opacity:1;transform:translateY(0)}
.card-genre-tag{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:.2rem}
.card-overview-mini{font-size:.7rem;color:rgba(240,240,240,.68);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-title{font-size:.84rem;font-weight:700;line-height:1.2;margin-bottom:.28rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;color:var(--muted)}
.card-rating{color:var(--star);font-weight:700;font-size:.72rem}
.card-type-badge{position:absolute;top:8px;right:8px;z-index:3;font-size:.58rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:.18rem .45rem;border-radius:3px;backdrop-filter:blur(6px)}
.badge-movie{background:rgba(232,184,75,.18);color:var(--accent);border:1px solid rgba(232,184,75,.3)}
.badge-series{background:rgba(91,192,235,.14);color:#7dd3fc;border:1px solid rgba(91,192,235,.25)}

/* WATCHED */
.remove-btn{position:absolute;top:8px;left:8px;z-index:5;width:26px;height:26px;border-radius:50%;border:1px solid rgba(224,92,58,.5);background:rgba(9,11,16,.8);backdrop-filter:blur(6px);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:rgba(224,92,58,.7);transition:all .2s;opacity:0}
.card:hover .remove-btn{opacity:1}
.remove-btn:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;transform:scale(1.15)}
.watch-btn{position:absolute;bottom:8px;left:8px;z-index:5;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(9,11,16,.8);backdrop-filter:blur(6px);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .2s;color:rgba(255,255,255,.4)}
.watch-btn:hover{border-color:rgba(255,255,255,.6);color:#fff}
.watch-btn.watched{background:#22c55e;border-color:#22c55e;color:#fff;box-shadow:0 2px 12px rgba(34,197,94,.45)}
.watched-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,197,94,.1),transparent 60%);pointer-events:none;opacity:0;transition:opacity .3s;z-index:1}
.card.is-watched .watched-overlay{opacity:1}
.card.is-watched{border-color:rgba(34,197,94,.15)}

/* LOADING SKELETONS */
.card-skeleton{border-radius:8px;background:var(--surface);aspect-ratio:2/3;border:1px solid var(--border);overflow:hidden;position:relative}
.card-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);animation:shimmer 1.6s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* DETAIL MODAL */
/* ══════════════════════════════════════════════════════════════
   DETAIL PAGE — a real route, NOT a modal floating over the home.
   The detail container behaves like every other "view" (view-home,
   view-browse, etc.): hidden by default, shown when active. The
   main FinalVerse navbar at the top remains visible (no z-index
   stacking needed) so navigation is consistent.
   ══════════════════════════════════════════════════════════════ */
#modal-overlay{display:none;width:100%;background:var(--bg);min-height:calc(100vh - 62px)}
#modal-overlay.open{display:block}
#modal{background:var(--bg);border:none;border-radius:0;width:100%;max-width:none;position:relative;margin:0;padding-top:0}
/* Detail "topbar" — slim breadcrumb-style strip with a Back button. Stays
   inline with the page (sticky to the bottom of the main nav). */
.detail-topbar{position:sticky;top:62px;left:0;right:0;z-index:40;background:rgba(15,18,25,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);height:48px;display:flex;align-items:center;padding:0 1.5rem}
.modal-close{position:relative;top:auto;left:auto;right:auto;background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;width:auto;height:auto;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;cursor:pointer;font-size:.82rem;font-weight:600;font-family:'DM Sans',sans-serif;padding:.42rem .85rem;transition:background .2s,transform .15s,border-color .2s;box-shadow:none}
.modal-close:hover{background:rgba(255,255,255,.08);transform:translateX(-2px);border-color:rgba(255,255,255,.32)}
/* Backdrop hero — full width, soft fade to bg */
.modal-backdrop-wrap{position:relative;height:440px;overflow:hidden;border-radius:0;flex-shrink:0;width:100%}
.modal-backdrop-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:saturate(.85) brightness(.65)}
.modal-backdrop-fade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,18,25,.4) 0%,rgba(15,18,25,.7) 50%,var(--bg) 100%)}
/* Body container — full width, comfortable padding */
.modal-body{padding:0 2.5rem 4rem;max-width:1400px;margin:0 auto}
.modal-layout{display:grid;grid-template-columns:300px 1fr;gap:2.5rem;align-items:flex-start;margin-top:-200px;position:relative;z-index:2}
/* Poster column */
.modal-poster-col{flex-shrink:0}
.modal-poster-col img{width:300px;height:450px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08);box-shadow:0 25px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);display:block}
/* Views pill on the detail page — centered under the poster.
   Same visual language as the watch-sidebar pill so the two read as the
   same component. Slightly larger here since the page has more room. */
.detail-views-pill{display:inline-flex;align-items:center;gap:.5rem;margin:1rem auto 0;padding:.5rem .9rem;background:linear-gradient(135deg,rgba(232,184,75,.15),rgba(232,184,75,.07));border:1px solid rgba(232,184,75,.3);border-radius:22px;color:rgba(255,255,255,.85);font-family:"DM Sans",sans-serif;font-size:.85rem;justify-content:center;width:fit-content}
.detail-views-pill svg{color:var(--accent);flex-shrink:0}
.detail-views-num{font-weight:700;color:#fff;letter-spacing:.2px;font-size:.95rem}
.detail-views-label{color:rgba(255,255,255,.55);font-size:.78rem}
/* Publish-date pill — quieter than the views pill so the count stays the
   primary stat. Same dimensions/shape so they sit cleanly side by side. */
.detail-date-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:22px;color:rgba(255,255,255,.75);font-family:"DM Sans",sans-serif;font-size:.82rem;width:fit-content}
.detail-date-pill svg{color:rgba(255,255,255,.45);flex-shrink:0}
.detail-date-label{color:rgba(255,255,255,.5);font-size:.76rem}
.detail-date-text{font-weight:600;color:#fff;letter-spacing:.2px;font-size:.85rem}
.modal-poster-col{display:flex;flex-direction:column;align-items:center}
/* Info column */
.modal-info-col{flex:1;min-width:0;padding-top:170px}
.modal-title{font-family:"Bebas Neue",sans-serif;font-size:3.2rem;letter-spacing:2px;line-height:1;margin-bottom:.85rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.modal-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.4rem;align-items:center}
.modal-tag{font-size:.8rem;font-weight:600;padding:.35rem .85rem;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--muted)}
.modal-rating-large{display:flex;align-items:center;gap:.4rem;background:rgba(245,197,24,.13);border:1px solid rgba(245,197,24,.35);color:var(--star);font-weight:700;font-size:1rem;padding:.35rem .85rem;border-radius:6px}
/* Action buttons */
.modal-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.75rem}
.modal-actions .btn-primary{font-size:1rem;padding:.9rem 1.8rem;border-radius:10px;font-weight:700;letter-spacing:.3px}
.modal-actions .btn-trailer{font-size:.88rem;padding:.78rem 1.25rem;border-radius:10px}
/* Overview block */
.modal-overview{font-size:.96rem;line-height:1.85;color:rgba(240,240,240,.85);margin-top:1.2rem;padding:1.25rem 1.4rem;background:var(--surface2);border:1px solid var(--border);border-radius:10px;border-right:3px solid var(--accent);max-width:none}
/* ── Quick facts grid (technical details) ── */
.detail-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-top:1.5rem}
.detail-fact{padding:.85rem 1rem;background:var(--surface2);border:1px solid var(--border);border-radius:9px;display:flex;flex-direction:column;gap:.2rem}
.detail-fact-label{font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.detail-fact-value{font-size:.92rem;font-weight:600;color:#fff}
/* ── Stats strip (views, watchlist count) ── */
.detail-stats{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:1rem;padding:.85rem 1.1rem;background:var(--surface2);border:1px solid var(--border);border-radius:9px}
.detail-stat{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:rgba(240,240,240,.8)}
.detail-stat-num{font-weight:700;color:#fff;font-size:.95rem}
.detail-stat-icon{font-size:1rem;opacity:.8}
/* ── Embedded trailer block ── */
.detail-trailer{margin:2.5rem 0 0;padding-top:2rem;border-top:1px solid var(--border)}
.detail-section-label{font-family:"Bebas Neue",sans-serif;font-size:1.4rem;letter-spacing:2px;color:#fff;margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.detail-section-label::before{content:'';width:4px;height:20px;background:var(--accent);border-radius:2px}
.detail-trailer-frame{position:relative;width:100%;max-width:900px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--border);margin:0 auto}
.detail-trailer-frame iframe{width:100%;height:100%;border:none;display:block}
.detail-trailer-thumb{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
.detail-trailer-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,.35);transition:background .2s}
.detail-trailer-play:hover{background:rgba(0,0,0,.5)}
.detail-trailer-play svg{width:64px;height:64px;color:#fff;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
/* ── Cast & Crew ── */
.detail-cast{margin:2.5rem 0 0;padding-top:2rem;border-top:1px solid var(--border)}
.detail-cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}
.detail-cast-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem}
.detail-cast-photo{width:90px;height:90px;border-radius:50%;object-fit:cover;border:2px solid var(--border);background:var(--surface2)}
.detail-cast-photo-fallback{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#e8b84b 0%,#e05c3a 100%);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 -8px 20px rgba(0,0,0,.18)}
.detail-cast-photo-fallback svg{width:88%;height:88%;display:block;margin-top:8%}
.detail-cast-name{font-size:.82rem;font-weight:600;color:#fff;line-height:1.25}
.detail-cast-role{font-size:.7rem;color:var(--muted);line-height:1.2}
/* ── Suggestions: horizontal carousel with arrows ── */
.modal-suggestions{margin:2.5rem 0 0;padding-top:2rem;border-top:1px solid var(--border)}
.modal-suggestions-label{font-family:"Bebas Neue",sans-serif;font-size:1.4rem;letter-spacing:2px;color:#fff;margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.modal-suggestions-label::before{content:'';width:4px;height:20px;background:var(--accent);border-radius:2px}
.sug-row-wrap{position:relative}
.sug-row{display:flex;gap:.85rem;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:.5rem;-ms-overflow-style:none;scrollbar-width:none}
.sug-row::-webkit-scrollbar{display:none}
.sug-card{flex:0 0 175px;cursor:pointer;border-radius:10px;overflow:hidden;background:var(--surface2);border:1px solid var(--border);transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;flex-direction:column;scroll-snap-align:start}
.sug-card:hover{transform:translateY(-3px);border-color:rgba(232,184,75,.45);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.sug-poster{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#0f1219}
.sug-meta{padding:.55rem .65rem .7rem}
.sug-title{font-size:.82rem;font-weight:600;color:#fff;line-height:1.3;margin-bottom:.3rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.1rem}
.sug-info{display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--muted)}
.sug-info .sug-rating{color:var(--star);font-weight:700}
.sug-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(15,18,25,.92);border:1px solid rgba(255,255,255,.18);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:background .2s,transform .15s;backdrop-filter:blur(8px)}
.sug-arrow:hover{background:rgba(232,184,75,.85);color:#111;border-color:transparent}
.sug-arrow.prev{left:-12px}
.sug-arrow.next{right:-12px}
.sug-row-wrap.has-overflow .sug-arrow{display:flex}
.sug-arrow:disabled{opacity:.35;cursor:default;pointer-events:none}
/* Mobile */
@media (max-width:760px){
  .detail-topbar{height:44px;top:0;padding:0 1rem}
  /* On mobile the main nav can be tall — make detail-topbar sticky to its
     parent's natural top so it doesn't visually collide. */
  .modal-backdrop-wrap{height:260px}
  .modal-body{padding:0 1rem 3rem}
  .modal-layout{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-140px;gap:1.5rem}
  .modal-poster-col img{width:190px;height:285px}
  .modal-info-col{padding-top:0;width:100%}
  .modal-title{font-size:2.2rem;text-align:center}
  .modal-tags{justify-content:center}
  .modal-actions{justify-content:center}
  .modal-actions .btn-primary{flex:1;min-width:140px}
  .modal-overview{text-align:right;border-right-width:0;border-top:3px solid var(--accent)}
  .detail-facts{grid-template-columns:repeat(2,1fr)}
  .detail-cast-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr))}
  .detail-cast-photo,.detail-cast-photo-fallback{width:75px;height:75px}
  .sug-card{flex:0 0 140px}
  .sug-arrow{width:36px;height:36px}
}

/* ══════════════════════════════════════════════════════════════
   COMING SOON — modal placement mirrors the card style
   The card uses a horizontal gold strip across the middle of the
   poster with dotted accents. We apply the exact same visual to the
   modal's small poster so the info view feels consistent with the
   grid. A subtle gold border glow on the poster reinforces status.
   ══════════════════════════════════════════════════════════════ */

/* Horizontal strip across the modal poster (matches .soon-strip on cards) */
.modal-poster-col{position:relative}
.modal-soon-strip{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  z-index:4;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.5rem 0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(9,11,16,.72) 12%,
    rgba(9,11,16,.82) 50%,
    rgba(9,11,16,.72) 88%,
    transparent 100%
  );
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border-top:1px solid rgba(232,184,75,.28);
  border-bottom:1px solid rgba(232,184,75,.28);
}
.modal-soon-strip .mss-text{
  font-family:"Bebas Neue",sans-serif;
  font-size:.82rem;
  letter-spacing:3px;
  color:var(--accent);
  text-shadow:0 0 14px rgba(232,184,75,.55);
  animation:soon-glow 2.4s ease-in-out infinite;
}
.modal-soon-strip .mss-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--accent);
  opacity:.6;
  flex-shrink:0;
}
/* Give the poster a gentle gold border when Coming Soon (same feel as is-soon cards) */
.modal-poster-col.is-soon img{
  box-shadow:0 12px 35px rgba(0,0,0,.6),0 0 0 2px rgba(232,184,75,.35),0 0 24px rgba(232,184,75,.25);
}

/* Mobile tweaks — shrink the strip so it stays readable on the small poster */
@media (max-width:600px){
  .modal-soon-strip{padding:.38rem 0;gap:.35rem}
  .modal-soon-strip .mss-text{font-size:.7rem;letter-spacing:2px}
}
/* (.modal-actions and .modal-overview defined above in the detail-page section) */
.modal-scenes{margin:2rem 0 .5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.scenes-label{font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:.85rem}
.scenes-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.scenes-row img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--border);cursor:zoom-in;transition:transform .2s,box-shadow .2s,border-color .2s}
.scenes-row img:hover{transform:scale(1.03);box-shadow:0 6px 20px rgba(0,0,0,.5);border-color:rgba(255,255,255,.2)}
.my-rating{display:flex;gap:2px;margin-top:.4rem;margin-bottom:.6rem}
.my-rating span{font-size:.85rem;cursor:pointer;color:var(--border);transition:color .15s;line-height:1}
.my-rating span.lit{color:var(--star)}
.my-note-wrap{margin-top:.5rem}
.my-note-label{font-size:.72rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.my-note{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.85rem;padding:.55rem .75rem;outline:none;resize:vertical;min-height:60px;transition:border-color .2s}
.my-note:focus{border-color:var(--accent)}
.my-note::placeholder{color:var(--muted)}

/* LIGHTBOX */
#lightbox{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(10px)}
#lightbox.open{opacity:1;pointer-events:all}
#lb-img{max-width:90vw;max-height:82vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.7);object-fit:contain;user-select:none}
.lb-close{position:absolute;top:1.2rem;right:1.2rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb-close:hover{background:rgba(255,255,255,.25)}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;width:50px;height:50px;border-radius:50%;font-size:2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;line-height:1}
.lb-arrow:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:1.5rem}
.lb-next{right:1.5rem}
.lb-counter{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:.82rem;font-weight:600;letter-spacing:.5px;background:rgba(0,0,0,.4);padding:.3rem .8rem;border-radius:20px}

/* TRAILER MODAL */
#trailer-modal{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(8px)}
#trailer-modal.open{opacity:1;pointer-events:all}
.trailer-wrap{position:relative;width:100%;max-width:900px;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.7);background:#000}
.trailer-wrap iframe{width:100%;aspect-ratio:16/9;border:none;display:block}
.trailer-close{position:absolute;top:-44px;right:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:background .2s}
.trailer-close:hover{background:rgba(255,255,255,.25)}

/* AUTH MODAL */
#auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:400;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(8px)}
#auth-overlay.open{opacity:1;pointer-events:all}
#auth-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:100%;max-width:400px;padding:2rem}
.auth-title{font-family:"Bebas Neue",sans-serif;font-size:1.8rem;letter-spacing:2px;margin-bottom:.4rem}
.auth-sub{font-size:.82rem;color:var(--muted);margin-bottom:1.5rem}
.auth-fg{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.auth-fg label{font-size:.72rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.auth-fg input{background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.9rem;padding:.65rem .85rem;outline:none;transition:border-color .2s}
.auth-fg input:focus{border-color:var(--accent)}
#auth-error{color:var(--accent2);font-size:.82rem;margin-bottom:.75rem;display:none}
.auth-footer{text-align:center;margin-top:1rem;font-size:.8rem;color:var(--muted)}
.auth-footer button{background:none;border:none;color:var(--accent);cursor:pointer;font-family:"DM Sans",sans-serif;font-size:.8rem;font-weight:600}
#auth-logout-wrap{display:none;text-align:center;margin-top:1rem}

/* ══════════════════════════════════════════════════════
   ADMIN DASHBOARD — Full redesign
   Layout: fixed fullscreen overlay, slim sidebar, content
   ══════════════════════════════════════════════════════ */
#admin-overlay{
  position:fixed;inset:0;z-index:300;
  background:#0a0c12;
  display:none;flex-direction:column;overflow:hidden;
}
#admin-overlay.open{display:flex}

/* ── TOP BAR ── */
.adm-topbar{
  height:56px;
  display:flex;align-items:center;gap:1rem;
  padding:0 1.5rem;
  background:#0d0f16;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.adm-topbar-back{
  display:flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:7px;
  color:rgba(255,255,255,.7);
  font-family:"DM Sans",sans-serif;
  font-size:.82rem;font-weight:600;
  padding:.38rem .8rem;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
}
.adm-topbar-back:hover{color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.adm-topbar-logo{
  font-family:"Bebas Neue",sans-serif;
  font-size:1.35rem;letter-spacing:3px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.adm-topbar-sep{width:1px;height:22px;background:rgba(255,255,255,.1);margin:0 .1rem}
.adm-topbar-title{
  font-size:.8rem;font-weight:600;
  color:rgba(255,255,255,.4);
  letter-spacing:.5px;
  text-transform:uppercase;
}
.adm-topbar-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.adm-live-badge{
  display:flex;align-items:center;gap:.35rem;
  font-size:.68rem;font-weight:700;
  color:#22c55e;
  letter-spacing:.5px;text-transform:uppercase;
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.2);
  padding:.28rem .65rem;border-radius:20px;
}
.adm-live-dot{width:5px;height:5px;border-radius:50%;background:#22c55e;animation:pulse-dot 1.5s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ── BODY LAYOUT ── */
.adm-body{flex:1;display:flex;overflow:hidden}

/* ── SIDEBAR ── */
.adm-sidebar{
  width:220px;flex-shrink:0;
  background:#0d0f16;
  border-right:1px solid rgba(255,255,255,.05);
  display:flex;flex-direction:column;
  overflow-y:auto;
  padding:.75rem 0 2rem;
}
.adm-sidebar::-webkit-scrollbar{width:3px}
.adm-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08)}

.adm-sidebar-section{
  padding:.6rem 1.2rem .3rem;
  font-size:.62rem;font-weight:800;
  color:rgba(255,255,255,.25);
  letter-spacing:2.5px;text-transform:uppercase;
  margin-top:.6rem;
}
.adm-nav-item{
  display:flex;align-items:center;gap:.7rem;
  padding:.62rem .9rem .62rem 1.2rem;
  cursor:pointer;
  transition:background .14s,color .14s,border-color .14s;
  border-left:2px solid transparent;
  color:rgba(255,255,255,.52);
  font-family:"DM Sans",sans-serif;
  font-size:.87rem;font-weight:500;
  position:relative;letter-spacing:.1px;
  border-radius:0 6px 6px 0;
  margin:1px .5rem 1px 0;
}
.adm-nav-item:hover{
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.04);
  border-left-color:rgba(255,255,255,.15);
}
.adm-nav-item.active{
  color:var(--accent);
  background:rgba(232,184,75,.08);
  border-left-color:var(--accent);
  font-weight:700;
}
.adm-nav-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0;opacity:.85}
.adm-nav-badge{
  margin-left:auto;
  font-size:.62rem;font-weight:800;
  padding:.18rem .45rem;border-radius:20px;
  background:rgba(224,92,58,.18);
  color:#ff8166;
  border:1px solid rgba(224,92,58,.3);
}

/* ── CONTENT AREA ── */
.adm-content{flex:1;overflow-y:auto;padding:2rem 2.25rem 3rem}
.adm-content::-webkit-scrollbar{width:5px}
.adm-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

/* ── SECTION PANELS ── */
.adm-section{display:none;animation:adm-fade-in .2s ease}
.adm-section.active{display:block}
@keyframes adm-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Section headers */
.adm-section-title{
  font-family:"Bebas Neue",sans-serif;
  font-size:1.9rem;letter-spacing:3px;
  margin-bottom:.3rem;color:var(--text);
}
.adm-section-desc{
  font-size:.88rem;color:rgba(255,255,255,.45);
  margin-bottom:1.6rem;line-height:1.6;max-width:680px;
}

/* ── STAT CARDS ── */
.adm-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.75rem;
  margin-bottom:1.5rem;
}
.adm-stat-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:1rem 1.1rem;
  position:relative;overflow:hidden;
  transition:border-color .2s,background .2s;
}
.adm-stat-card:hover{
  border-color:rgba(232,184,75,.2);
  background:rgba(255,255,255,.045);
}
.adm-stat-label{
  font-size:.67rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:.45rem;
}
.adm-stat-value{
  font-family:"Bebas Neue",sans-serif;
  font-size:2rem;letter-spacing:1px;
  color:var(--text);line-height:1;
}
.adm-stat-sub{font-size:.7rem;color:rgba(255,255,255,.35);margin-top:.3rem}

/* ── GENERIC CARD ── */
.adm-card{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:1.35rem 1.5rem;
  margin-bottom:1rem;
}
/* ══════════════════════════════════════════════════════════════════
   Smart Grabber — refined wizard UI
   Premium look matching the rest of the admin dashboard. The wizard now
   has a proper hero header, a step indicator, themed step cards, and
   refined inputs/selected-title pills.
   ══════════════════════════════════════════════════════════════════ */

/* Hero header — sits at the top of the section. Replaces the plain
   `.adm-section-title` so this tool feels like its own surface. */
.grab-hero{
  display:flex; align-items:center; gap:1.15rem;
  padding:1.4rem 1.55rem;
  margin-bottom:1.4rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(232,184,75,.12), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(168,140,255,.08), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(232,184,75,.18);
  border-radius:14px;
  position:relative; overflow:hidden;
}
.grab-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--accent), transparent);
  height:2px; top:0; opacity:.6;
}
.grab-hero-icon{
  font-size:2.4rem;
  width:62px; height:62px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(232,184,75,.18), rgba(232,184,75,.06));
  border:1px solid rgba(232,184,75,.3);
  border-radius:14px;
  flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(232,184,75,.1);
}
.grab-hero-text{ flex:1; min-width:0 }
.grab-hero-eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:.2rem;
}
.grab-hero-title{
  font-family:"Bebas Neue", sans-serif;
  font-size:2.1rem; letter-spacing:3px;
  color:var(--text);
  line-height:1; margin-bottom:.4rem;
}
.grab-hero-desc{
  font-size:.88rem; color:rgba(255,255,255,.6);
  line-height:1.55; max-width:640px;
}

/* Stepper — the progress indicator above the cards */
.grab-stepper{
  display:flex; align-items:center; gap:0;
  margin-bottom:1.25rem;
  padding:.85rem 1rem;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  overflow-x:auto;
}
.grab-step-pill{
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem .85rem;
  border-radius:999px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
  transition:all .25s ease;
}
.grab-step-pill.active{
  background:linear-gradient(135deg, rgba(232,184,75,.2), rgba(232,184,75,.08));
  border-color:rgba(232,184,75,.5);
  box-shadow:0 4px 14px rgba(232,184,75,.18);
}
.grab-step-pill.done{
  background:rgba(34,197,94,.1);
  border-color:rgba(34,197,94,.35);
}
.grab-step-num{
  width:22px; height:22px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.55);
  font-family:"Bebas Neue", sans-serif;
  font-size:.95rem; letter-spacing:0;
  border-radius:50%;
  transition:all .25s ease;
}
.grab-step-pill.active .grab-step-num{
  background:var(--accent); color:#111;
  box-shadow:0 0 0 3px rgba(232,184,75,.18);
}
.grab-step-pill.done .grab-step-num{
  background:#22c55e; color:#fff;
}
.grab-step-pill.done .grab-step-num::before{ content:"✓" }
.grab-step-pill.done .grab-step-num{ font-size:.8rem }
.grab-step-label{
  font-size:.78rem; font-weight:600;
  color:rgba(255,255,255,.6);
  letter-spacing:.3px; white-space:nowrap;
}
.grab-step-pill.active .grab-step-label{ color:#fff }
.grab-step-line{
  flex:1; height:1px; min-width:18px;
  background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  margin:0 .25rem;
}

/* Step cards — refined version of `.adm-card` for the wizard. Stays in
   sync with the dashboard look but adds a small "Step N" eyebrow. */
.grab-card{
  position:relative;
  margin-top:.85rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
  transition:border-color .2s, box-shadow .2s;
}
.grab-card:hover{
  border-color:rgba(232,184,75,.22);
  box-shadow:0 6px 22px rgba(0,0,0,.25);
}
.grab-card-head{
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:.45rem;
}
.grab-card-step{
  font-size:.65rem; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--accent);
  background:rgba(232,184,75,.12);
  border:1px solid rgba(232,184,75,.28);
  padding:.22rem .55rem;
  border-radius:5px;
}

/* Step 1 — search input gets a slight icon affordance via padding */
.grab-search-input{
  font-size:.95rem !important;
  padding:.85rem 1rem !important;
}

/* Selected title pill — nicer than the inline-styles version */
.grab-selected{
  margin-top:.95rem;
  padding:.85rem 1rem;
  background:linear-gradient(135deg, rgba(232,184,75,.1), rgba(232,184,75,.04));
  border:1px solid rgba(232,184,75,.4);
  border-radius:10px;
  display:flex !important;
  align-items:center; gap:.85rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.grab-selected img{
  width:44px; height:66px;
  object-fit:cover;
  border-radius:5px;
  background:#0f1219;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.grab-selected-info{ flex:1; min-width:0 }
.grab-selected-name{
  font-weight:700; color:#fff;
  font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.grab-selected-meta{
  font-size:.78rem;
  color:rgba(255,255,255,.6);
  margin-top:.22rem;
}

/* Step 2 — season/episode grid */
.grab-episode-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.85rem;
  margin-top:.7rem;
}
.grab-default-toggle{
  display:flex; align-items:flex-start; gap:.7rem;
  margin-top:1rem;
  padding:.75rem .9rem;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.grab-default-toggle:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(232,184,75,.25);
}
.grab-default-toggle input[type="checkbox"]{
  margin-top:.18rem;
  accent-color:var(--accent);
  width:16px; height:16px;
  flex-shrink:0;
}
.grab-default-text{ flex:1; line-height:1.4 }
.grab-default-text strong{
  display:block;
  color:#fff; font-size:.86rem; font-weight:700;
  margin-bottom:.15rem;
}
.grab-default-text em{
  font-style:normal;
  color:rgba(255,255,255,.55);
  font-size:.78rem;
}

/* Step 3 — paste textarea
   Includes explicit color + padding + text-shadow:none because the class
   `adm-input` it carries elsewhere has no global rule defined; without these
   the textarea inherits browser defaults (often black text on near-black
   bg → invisible content). The minimum-height keeps it tall enough to feel
   like a real paste target rather than a one-line search input. */
.grab-paste{
  font-family:'JetBrains Mono', 'Fira Code', monospace !important;
  font-size:.85rem !important;
  line-height:1.6 !important;
  margin-top:.5rem !important;
  background:rgba(0,0,0,.32) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:8px !important;
  color:#f0f0f0 !important;
  caret-color:var(--accent, #e8b84b) !important;
  padding:.75rem .95rem !important;
  width:100%;
  min-height:140px;
  outline:none;
  resize:vertical;
  transition:border-color .18s, background .18s;
}
.grab-paste::placeholder{ color:rgba(255,255,255,.32) !important }
.grab-paste:focus{
  border-color:rgba(232,184,75,.55) !important;
  background:rgba(0,0,0,.4) !important;
}

/* Generic .adm-input fallback — covers every input/select/textarea that
   carries this class but isn't wrapped in .adm-fg. Without it, browsers
   render with their default colors which often clash with the dark UI. */
.adm-input,
input.adm-input,
textarea.adm-input,
select.adm-input{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:#f0f0f0;
  font-family:"DM Sans", sans-serif;
  font-size:.9rem;
  padding:.6rem .85rem;
  outline:none;
  transition:border-color .18s, background .18s;
}
.adm-input::placeholder,
textarea.adm-input::placeholder{
  color:rgba(255,255,255,.32);
}
.adm-input:focus{
  border-color:rgba(232,184,75,.55);
  background:rgba(255,255,255,.06);
}

/* ══════ original Smart Grabber dropdown/review styles, unchanged ══════ */
.grab-results{position:absolute;top:100%;left:0;right:0;margin-top:.3rem;background:#171b25;border:1px solid rgba(255,255,255,.12);border-radius:8px;max-height:280px;overflow-y:auto;z-index:30;box-shadow:0 14px 40px rgba(0,0,0,.55)}
.grab-result-row{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);transition:background .12s}
.grab-result-row:last-child{border-bottom:none}
.grab-result-row:hover{background:rgba(232,184,75,.08)}
.grab-result-poster{width:32px;height:48px;object-fit:cover;border-radius:3px;background:#0f1219;flex-shrink:0}
.grab-result-info{flex:1;min-width:0}
.grab-result-name{font-size:.88rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grab-result-meta{font-size:.72rem;color:rgba(255,255,255,.5);margin-top:.15rem}
.grab-result-empty{padding:1rem;text-align:center;color:rgba(255,255,255,.45);font-size:.85rem}
/* Review row — server name input + URL preview + remove */
.grab-review-row{display:flex;gap:.55rem;align-items:center;padding:.5rem .65rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:7px}
.grab-review-row.dup{opacity:.45;text-decoration:line-through}
.grab-review-host-pill{font-size:.7rem;font-weight:700;padding:.22rem .5rem;border-radius:4px;background:rgba(232,184,75,.18);color:var(--accent);flex-shrink:0;letter-spacing:.3px;text-transform:uppercase}
.grab-review-name{flex:0 0 180px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);color:#fff;padding:.42rem .6rem;border-radius:6px;font-size:.85rem;font-family:'DM Sans',sans-serif}
.grab-review-name:focus{outline:none;border-color:var(--accent)}
.grab-review-url{flex:1;min-width:0;font-size:.75rem;color:rgba(255,255,255,.55);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grab-review-remove{background:transparent;border:none;color:rgba(255,255,255,.45);cursor:pointer;font-size:1rem;padding:.2rem .4rem;border-radius:4px;transition:color .15s,background .15s}
.grab-review-remove:hover{color:#ff6b6b;background:rgba(255,107,107,.1)}
.adm-card-title{font-family:"Bebas Neue",sans-serif;font-size:1.2rem;letter-spacing:2px;color:var(--text);margin-bottom:.4rem;display:flex;align-items:center;gap:.55rem}
.adm-card-desc{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.65;margin-bottom:1.1rem}

/* Action buttons inside dashboard — bigger */
.adm-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.68rem 1.35rem;border-radius:8px;border:none;font-family:"DM Sans",sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.2px}
.adm-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111}
.adm-btn-primary:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,184,75,.3)}
.adm-btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
.adm-btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.adm-btn-danger{background:rgba(224,92,58,.15);border:1px solid rgba(224,92,58,.35);color:#ff8166}
.adm-btn-danger:hover{background:rgba(224,92,58,.25);border-color:rgba(224,92,58,.55)}
.adm-btn-purple{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff}
.adm-btn-purple:hover{opacity:.92;transform:translateY(-1px)}
.adm-btn-green{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.adm-btn-green:hover{opacity:.92}
.adm-btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.85rem}
.adm-btn-full{width:100%;justify-content:center}
.adm-btn-sm{padding:.4rem .8rem;font-size:.78rem}

/* Form elements inside dashboard — larger text */
.adm-fg{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.95rem}
.adm-fg label{font-size:.78rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.adm-fg input,.adm-fg select,.adm-fg textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:8px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.95rem;padding:.68rem .95rem;outline:none;transition:border-color .2s;resize:vertical}
.adm-fg input:focus,.adm-fg select:focus,.adm-fg textarea:focus{border-color:rgba(232,184,75,.55);background:rgba(255,255,255,.08)}
.adm-fg input::placeholder,.adm-fg textarea::placeholder{color:rgba(255,255,255,.28)}
.adm-fg select option{background:var(--surface);color:var(--text)}
.adm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.adm-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.9rem}
.adm-grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:.7rem}

/* Progress bars */
.adm-progress{margin-top:.95rem;display:none}
.adm-progress-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.85rem}
.adm-progress-bar-wrap{background:rgba(255,255,255,.08);border-radius:4px;height:6px;overflow:hidden}
.adm-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition:width .3s;border-radius:4px}
.adm-log{margin-top:.75rem;max-height:170px;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem;font-size:.82rem}
.adm-log::-webkit-scrollbar{width:3px}
.adm-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}

/* Divider */
.adm-divider{height:1px;background:rgba(255,255,255,.06);margin:1.4rem 0}

/* Type buttons */
.adm-type-row{display:flex;gap:.55rem;margin-bottom:.95rem}
.adm-type-btn{flex:1;padding:.62rem;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);font-family:"DM Sans",sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;transition:all .2s;text-align:center}
.adm-type-btn.active{border-color:var(--accent);background:rgba(232,184,75,.14);color:var(--accent)}

/* Genre checkboxes */
.adm-genre-grid{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.45rem}
.adm-genre-label{display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:rgba(255,255,255,.62);cursor:pointer;padding:.34rem .7rem;border-radius:6px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);transition:all .15s}
.adm-genre-label:hover{color:#fff;border-color:rgba(255,255,255,.22)}
.adm-genre-label input[type=checkbox]{accent-color:var(--accent)}
.adm-genre-label:has(input:checked){color:var(--accent);border-color:rgba(232,184,75,.4);background:rgba(232,184,75,.1)}

/* ═══ Bulk-import option toggles ═══
   Used by both Import-by-Name and TMDB Discovery to expose the per-import
   flags ("Add auto servers", "Mark as Coming Soon"). Each row reads as a
   labeled toggle — title in bold, hint underneath — so the admin doesn't
   have to guess what the checkbox controls. */
.adm-bulk-flags{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin:1rem 0 1.1rem;
}
.adm-bulk-flag{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.7rem .9rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.adm-bulk-flag:hover{
  border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
}
.adm-bulk-flag input[type=checkbox]{
  accent-color:var(--accent);
  width:18px;
  height:18px;
  margin-top:.1rem;
  flex-shrink:0;
  cursor:pointer;
}
.adm-bulk-flag-text{
  display:flex;
  flex-direction:column;
  gap:.18rem;
  flex:1;
  min-width:0;
}
.adm-bulk-flag-text strong{
  color:#fff;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.1px;
}
.adm-bulk-flag-text em{
  font-style:normal;
  color:rgba(255,255,255,.5);
  font-size:.78rem;
  line-height:1.45;
}
.adm-bulk-flag:has(input:checked){
  border-color:rgba(232,184,75,.4);
  background:rgba(232,184,75,.06);
}

/* VidAPI flag — visually distinct from the standard ones because it's the
   "premium feel" option; admins should be able to spot it instantly. The
   purple/gold accent + small badge separates it from the regular toggles
   without making it feel like a different control. */
.adm-bulk-flag-vidapi{
  background:linear-gradient(135deg, rgba(168,85,247,.06), rgba(232,184,75,.04));
  border-color:rgba(168,85,247,.25);
}
.adm-bulk-flag-vidapi:hover{
  border-color:rgba(168,85,247,.45);
  background:linear-gradient(135deg, rgba(168,85,247,.1), rgba(232,184,75,.06));
}
.adm-bulk-flag-vidapi:has(input:checked){
  border-color:rgba(168,85,247,.55);
  background:linear-gradient(135deg, rgba(168,85,247,.12), rgba(232,184,75,.08));
  box-shadow:0 0 0 1px rgba(168,85,247,.2);
}
.adm-bulk-flag-badge{
  display:inline-block;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:.12rem .45rem;
  border-radius:4px;
  background:linear-gradient(135deg, #a855f7, #e8b84b);
  color:#fff;
  margin-left:.4rem;
  vertical-align:1px;
}

/* TMDB search results */
#adm-tmdb-list{display:none;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;background:var(--bg);max-height:300px;overflow-y:auto;margin-top:.5rem}
#adm-tmdb-list::-webkit-scrollbar{width:3px}
#adm-tmdb-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
.adm-r-row{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);transition:background .12s;user-select:none}
.adm-r-row:last-child{border-bottom:none}
.adm-r-row:hover{background:rgba(255,255,255,.05)}
.adm-r-row img{width:52px;height:78px;object-fit:cover;border-radius:6px;flex-shrink:0}
.adm-r-ph{width:52px;height:78px;background:rgba(255,255,255,.07);border-radius:6px;flex-shrink:0}
.adm-r-title{font-size:1rem;font-weight:700;margin-bottom:.22rem}
.adm-r-meta{font-size:.82rem;color:rgba(255,255,255,.55)}

/* Preview card */
#adm-prev-card{display:none;background:rgba(232,184,75,.07);border:1px solid rgba(232,184,75,.25);border-radius:10px;padding:1.1rem;margin-bottom:1.3rem}
.adm-prev-inner{display:flex;gap:1.1rem;align-items:flex-start}
#adm-prev-img{width:70px;height:105px;object-fit:cover;border-radius:6px;flex-shrink:0}
#adm-prev-ttl{font-family:"Bebas Neue",sans-serif;font-size:1.45rem;letter-spacing:1px;margin-bottom:.35rem}
#adm-prev-met{font-size:.85rem;color:rgba(255,255,255,.55);margin-bottom:.55rem}
#adm-prev-ov{font-size:.88rem;color:rgba(240,240,240,.7);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Server link rows */
.adm-wl-row{display:flex;gap:.55rem;margin-bottom:.5rem;align-items:center}
.adm-wl-row input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:7px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.88rem;padding:.5rem .8rem;outline:none}
.adm-wl-row input:focus{border-color:rgba(232,184,75,.45)}
.adm-wl-del{background:none;border:1px solid rgba(224,92,58,.35);color:#e05c3a;width:32px;height:32px;border-radius:7px;cursor:pointer;font-size:.95rem;flex-shrink:0;transition:all .2s;display:flex;align-items:center;justify-content:center}
.adm-wl-del:hover{background:#e05c3a;color:#fff}

/* Embed section movie search */
.adm-embed-movie-item{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border-radius:8px;cursor:pointer;transition:background .15s;border:1px solid transparent}
.adm-embed-movie-item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
.adm-embed-movie-item img{width:40px;height:60px;object-fit:cover;border-radius:5px;flex-shrink:0}
.adm-embed-movie-item-info{flex:1;min-width:0}
.adm-embed-movie-item-title{font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-embed-movie-item-meta{font-size:.76rem;color:rgba(255,255,255,.5)}
.adm-embed-movie-item-status{flex-shrink:0;font-size:.68rem;font-weight:700;padding:.18rem .5rem;border-radius:4px}
.status-has{background:rgba(34,197,94,.18);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.status-no{background:rgba(224,92,58,.14);color:#e05c3a;border:1px solid rgba(224,92,58,.22)}

/* Arabic link editor */
.adm-ar-link-row{display:flex;gap:.45rem;margin-bottom:.45rem;align-items:center}
.adm-ar-link-row input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:7px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.86rem;padding:.47rem .72rem;outline:none;transition:border-color .2s}
.adm-ar-link-row input:focus{border-color:rgba(232,184,75,.45)}

/* Tools section */
.adm-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.1rem}
.adm-tool-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:1.2rem 1.3rem;
  transition:border-color .18s,background .18s;
  display:flex;flex-direction:column;
  cursor:pointer;
}
.adm-tool-card:hover{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.045)}
.adm-tool-icon{font-size:1.5rem;margin-bottom:.55rem}
.adm-tool-name{font-family:"Bebas Neue",sans-serif;font-size:1.05rem;letter-spacing:1.5px;margin-bottom:.3rem}
.adm-tool-desc{font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.5;margin-bottom:.9rem}

/* Hint text */
.adm-hint{font-size:.78rem;color:rgba(255,255,255,.5);line-height:1.55;margin-top:.35rem}

/* ── Dashboard quick-action cards (2-row grid) ── */
.adm-dash-action{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:.9rem 1rem;
  cursor:pointer;
  transition:background .16s,border-color .16s,transform .14s;
  display:flex;flex-direction:column;gap:.15rem;
}
.adm-dash-action:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(232,184,75,.22);
  transform:translateY(-1px);
}
.adm-dash-action:active{transform:translateY(0)}
.adm-dash-action-icon{font-size:1.3rem;margin-bottom:.1rem;line-height:1}
.adm-dash-action-label{
  font-family:"DM Sans",sans-serif;
  font-size:.85rem;font-weight:700;
  color:rgba(255,255,255,.88);
  letter-spacing:.1px;
}
.adm-dash-action-sub{
  font-size:.72rem;
  color:rgba(255,255,255,.38);
  line-height:1.4;
}

/* ═══ NEW: Content Library TABLE ═══ */
.adm-tbl-wrap{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;margin-top:1rem}
.adm-tbl-toolbar{display:flex;gap:.65rem;padding:1rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);align-items:center;flex-wrap:wrap}
.adm-tbl-search{flex:1;min-width:200px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.92rem;padding:.58rem .85rem;outline:none}
.adm-tbl-search:focus{border-color:rgba(232,184,75,.5)}
.adm-tbl-select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.88rem;padding:.55rem .8rem;outline:none;cursor:pointer}
/* Force readable dropdown options across all admin selects.
   Without this, the browser inherits the dark theme background but renders
   option text in a near-invisible color when the popup opens. */
.adm-tbl-select option,
.adm-kv-input option,
select option{background:#1a1f2c;color:#fff;padding:.4rem}
select optgroup{background:#0f1219;color:rgba(255,255,255,.55);font-weight:700}
.adm-tbl-scroll{max-height:640px;overflow-y:auto}
.adm-tbl-scroll::-webkit-scrollbar{width:6px}
.adm-tbl-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.adm-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.adm-tbl thead th{position:sticky;top:0;background:rgba(6,8,14,.98);color:rgba(255,255,255,.65);font-size:.74rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;text-align:left;padding:.85rem .9rem;border-bottom:1px solid rgba(255,255,255,.1);z-index:2}
.adm-tbl tbody tr{border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s}
.adm-tbl tbody tr:hover{background:rgba(255,255,255,.04)}
.adm-tbl tbody td{padding:.75rem .9rem;vertical-align:middle;color:rgba(255,255,255,.82)}
.adm-tbl-poster{width:36px;height:54px;object-fit:cover;border-radius:4px;display:block;background:rgba(255,255,255,.07)}
.adm-tbl-title{font-weight:700;color:#fff;font-size:.94rem;display:block;margin-bottom:.18rem}
.adm-tbl-meta{font-size:.75rem;color:rgba(255,255,255,.5)}
.adm-tbl-pill{display:inline-block;font-size:.68rem;font-weight:700;padding:.18rem .5rem;border-radius:4px;letter-spacing:.5px}
.adm-tbl-pill-movie{background:rgba(232,184,75,.14);color:var(--accent);border:1px solid rgba(232,184,75,.25)}
.adm-tbl-pill-series{background:rgba(91,192,235,.14);color:#5bc0eb;border:1px solid rgba(91,192,235,.25)}
.adm-tbl-pill-soon{background:rgba(232,184,75,.12);color:var(--accent);border:1px solid rgba(232,184,75,.22)}
.adm-tbl-pill-ready{background:rgba(34,197,94,.14);color:#22c55e;border:1px solid rgba(34,197,94,.25)}
.adm-tbl-pill-nosrv{background:rgba(224,92,58,.1);color:#e05c3a;border:1px solid rgba(224,92,58,.2)}
.adm-tbl-actions{display:flex;gap:.3rem}
.adm-tbl-ibtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);width:30px;height:30px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);transition:all .18s;font-size:.85rem}
.adm-tbl-ibtn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.adm-tbl-ibtn.danger:hover{background:rgba(224,92,58,.2);border-color:rgba(224,92,58,.5);color:#e05c3a}
.adm-tbl-footer{padding:.9rem 1.2rem;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:.75rem;font-size:.82rem;color:rgba(255,255,255,.55);background:rgba(255,255,255,.02)}
.adm-tbl-count{margin-right:auto;font-weight:600}
.adm-tbl-empty{padding:3rem 1rem;text-align:center;color:rgba(255,255,255,.4);font-size:.9rem}

/* ═══ NEW: Tabs inside sections (for grouped tools) ═══ */
.adm-sub-tabs{display:flex;gap:.4rem;margin-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.05rem}
.adm-sub-tab{background:none;border:none;color:rgba(255,255,255,.5);font-family:"DM Sans",sans-serif;font-size:.92rem;font-weight:600;padding:.7rem 1.1rem;cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;margin-bottom:-1px}
.adm-sub-tab:hover{color:rgba(255,255,255,.85)}
.adm-sub-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ═══ NEW: Settings — key/value editor ═══ */
.adm-kv-grid{display:grid;grid-template-columns:1fr;gap:.9rem}
.adm-kv-row{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:1rem 1.2rem}
.adm-kv-label{font-size:.82rem;font-weight:700;color:#fff;margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}
.adm-kv-desc{font-size:.78rem;color:rgba(255,255,255,.5);margin-bottom:.65rem;line-height:1.5}
.adm-kv-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:7px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.9rem;padding:.55rem .8rem;outline:none;transition:border-color .2s}
.adm-kv-input:focus{border-color:rgba(232,184,75,.5)}
.adm-kv-input[type=color]{height:40px;padding:.25rem;cursor:pointer}

/* ═══ Theme preset gallery (Settings → Appearance) ═══
   Compact card grid where each card shows the four colors as stacked
   swatches plus the preset name. Hover lifts and outlines in gold so the
   admin can browse the gallery and click to apply. */
.adm-theme-presets{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:.7rem;
  margin-top:.75rem;
}
.adm-theme-preset{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:.7rem;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:transform .15s, border-color .15s, background .15s, box-shadow .15s;
  font-family:"DM Sans", sans-serif;
  text-align:left;
}
.adm-theme-preset:hover{
  transform:translateY(-2px);
  border-color:rgba(232,184,75,.5);
  background:rgba(232,184,75,.05);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.adm-theme-preset-swatches{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  height:46px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.adm-theme-preset-sw{
  display:block;
  width:100%;
  height:100%;
}
.adm-theme-preset-name{
  font-size:.78rem;
  font-weight:600;
  color:rgba(255,255,255,.85);
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ═══ NEW: Manual JSON editor ═══ */
.adm-json-editor{width:100%;min-height:320px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#a7f3d0;font-family:"Courier New",monospace;font-size:.82rem;padding:.9rem;outline:none;line-height:1.55;tab-size:2}
.adm-json-editor:focus{border-color:rgba(232,184,75,.5)}

.admin-title{display:none}
.fg{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}
.fg label{font-size:.72rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.fg input,.fg select,.fg textarea{background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.85rem;padding:.55rem .75rem;outline:none;transition:border-color .2s;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent)}
.fg select option{background:var(--surface)}
.hint{font-size:.72rem;color:var(--muted);margin-top:.2rem;line-height:1.4}
.ag{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem}
.ag .full{grid-column:1/-1}
/* TMDB single-title search results — bigger posters so the admin can
   actually identify the right title at a glance. The previous 58×87 px
   thumbnails were too small for the admin to spot the difference between
   Wonka 2023 vs Willy Wonka 1971 at a quick scan. 96×144 px is roughly
   poster-card sized; combined with overview text underneath, the row
   reads as a proper search result rather than a tight dropdown. */
#tmdb-list{display:none;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg);max-height:520px;overflow-y:auto;margin-top:.6rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
#tmdb-list::-webkit-scrollbar{width:6px}
#tmdb-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.r-row{display:flex;align-items:flex-start;gap:1rem;padding:.95rem 1.1rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);transition:background .14s, transform .14s;user-select:none}
.r-row:last-child{border-bottom:none}
.r-row:hover{background:rgba(232,184,75,.06);transform:translateX(2px)}
.r-row img{width:96px;height:144px;object-fit:cover;border-radius:7px;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,.5);background:#0f1219}
.r-ph{width:96px;height:144px;background:linear-gradient(135deg,#1a1f2c,#0f1219);border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.25);font-size:1.6rem}
.r-ph::after{content:"🎬"}
.r-row > div:not(.r-ph){flex:1;min-width:0;padding-top:.15rem}
.r-title{font-size:1.05rem;font-weight:700;margin-bottom:.3rem;line-height:1.3;color:#fff}
.r-meta{font-size:.85rem;color:var(--muted);line-height:1.5}
.r-overview{font-size:.78rem;color:rgba(255,255,255,.55);margin-top:.45rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width: 640px){
  .r-row img,.r-ph{width:72px;height:108px}
  .r-row{padding:.75rem .85rem;gap:.75rem}
  .r-title{font-size:.95rem}
  .r-overview{display:none}
}
#prev-card{display:none;background:var(--surface2);border:1px solid rgba(232,184,75,.3);border-radius:10px;padding:1rem;margin-bottom:1.25rem}
.prev-inner{display:flex;gap:1rem;align-items:flex-start}
#prev-img{width:70px;height:105px;object-fit:cover;border-radius:6px;flex-shrink:0}
#prev-ttl{font-family:"Bebas Neue",sans-serif;font-size:1.3rem;letter-spacing:1px;margin-bottom:.3rem}
#prev-met{font-size:.78rem;color:var(--muted);margin-bottom:.5rem}
#prev-ov{font-size:.8rem;color:rgba(240,240,240,.7);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ══════════════════════════════════════
   WATCH PAGE — Full Redesign
══════════════════════════════════════ */
/* Watch page now leaves room at the top for the main FinalVerse navbar so the
   user has consistent navigation while watching. The page-level back arrow
   was removed in favor of using the main nav's logo / Home button. */
#watch-page{position:fixed;top:62px;left:0;right:0;bottom:0;z-index:150;background:#0a0a0f;display:none;flex-direction:column;overflow:hidden}
#watch-page.open{display:flex}

/* ── Watch sub-bar (slimmer now — no back button, just title + info toggle) ── */
.wp-nav{height:48px;display:flex;align-items:center;gap:.85rem;padding:0 1.5rem;background:linear-gradient(to bottom,rgba(5,5,10,.98),rgba(5,5,10,.7));flex-shrink:0;position:relative;z-index:5;border-bottom:1px solid rgba(255,255,255,.05)}
.wp-title{font-family:"Bebas Neue",sans-serif;font-size:1.2rem;letter-spacing:2px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.wp-subtitle-text{font-size:.72rem;color:rgba(255,255,255,.35);letter-spacing:.3px;flex-shrink:0}
.wp-nav-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0}

/* ── Body layout ── */
.wp-body{display:flex;flex:1;overflow:hidden;position:relative}
.wp-player-wrap{position:relative;flex:1;background:#000;min-width:0}
.wp-player-wrap iframe{width:100%;height:100%;border:none;display:block}
.wp-no-links{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;color:rgba(255,255,255,.3)}
.wp-no-links p{font-size:.88rem}
.wp-no-links p:last-child{font-size:.72rem;opacity:.6}

/* Custom fullscreen button — overlays the player in the bottom-right corner.
   Hidden by default; fades in on hover. Always visible when actually fullscreen. */
#wp-fs-btn{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(10,12,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .18s,background .18s,border-color .18s,transform .18s;z-index:6;padding:0}
.wp-player-wrap:hover #wp-fs-btn,#wp-player-wrap.is-fs #wp-fs-btn{opacity:.85}
/* Floating info toggle — sits at top-right of the player; replaces the
   removed top bar's info button. Visible whenever the user hovers the player.
   Higher contrast so it doesn't get lost over bright video frames. */
.wp-floating-info{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(10,12,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .18s,background .18s,border-color .18s,transform .18s;z-index:6;padding:0}
.wp-player-wrap:hover .wp-floating-info,#wp-player-wrap.is-fs .wp-floating-info{opacity:.85}
.wp-floating-info:hover,.wp-floating-info.active{opacity:1;background:rgba(232,184,75,.85);color:#111;border-color:transparent}
#wp-fs-btn:hover{opacity:1;background:rgba(232,184,75,.22);border-color:rgba(232,184,75,.45);color:var(--accent);transform:scale(1.05)}
#wp-player-wrap.is-fs{background:#000}
#wp-player-wrap:fullscreen{background:#000}
#wp-player-wrap:-webkit-full-screen{background:#000}

/* ── Info sidebar ── */
.wp-sidebar{width:280px;flex-shrink:0;background:rgba(8,10,16,.97);border-left:1px solid rgba(255,255,255,.06);overflow-y:auto;display:flex;flex-direction:column}
.wp-sidebar::-webkit-scrollbar{width:3px}
.wp-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}
.wp-sidebar-inner{padding:1.25rem}
.wp-sidebar-poster{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;margin-bottom:.85rem;border:1px solid rgba(255,255,255,.08)}
/* Views counter pill — sits between the small poster and the title.
   Uses an accent-tinted background with subtle border so it reads as a
   stat badge, not a button. Number is prominent; label is muted. */
.wp-views-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;background:linear-gradient(135deg,rgba(232,184,75,.14),rgba(232,184,75,.07));border:1px solid rgba(232,184,75,.28);border-radius:20px;color:rgba(255,255,255,.85);font-family:"DM Sans",sans-serif;font-size:.78rem;margin-bottom:.85rem}
.wp-views-pill svg{color:var(--accent);flex-shrink:0}
.wp-views-num{font-weight:700;color:#fff;letter-spacing:.2px}
.wp-views-label{color:rgba(255,255,255,.5);font-size:.72rem}
.wp-sidebar-title{font-family:"Bebas Neue",sans-serif;font-size:1.3rem;letter-spacing:1.5px;margin-bottom:.35rem}
.wp-sidebar-meta{font-size:.72rem;color:var(--muted);margin-bottom:.65rem;line-height:1.6}
.wp-sidebar-overview{font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:.85rem}
.wp-sidebar-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.wp-sidebar-btn{flex:1;padding:.45rem .6rem;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-family:"DM Sans",sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.wp-sidebar-btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.wp-sidebar-toggle{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;margin-left:auto}
.wp-sidebar-toggle:hover,.wp-sidebar-toggle.active{background:rgba(232,184,75,.15);border-color:rgba(232,184,75,.3);color:var(--accent)}

/* ══════════════════════════════════════
   BOTTOM CONTROLS — Full Redesign
══════════════════════════════════════ */
.wp-bottom{background:rgba(6,7,12,.98);border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;display:flex;flex-direction:column}

/* ── Server tabs (always visible for series) ── */
.wp-srv-bar{display:flex;align-items:center;gap:.5rem;padding:.55rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.05);overflow-x:auto;flex-shrink:0;min-height:44px}
.wp-srv-bar::-webkit-scrollbar{height:2px}
.wp-srv-bar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}
.wp-srv-label{font-size:.6rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.2);white-space:nowrap;flex-shrink:0;margin-right:.25rem}
.wp-srv-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);font-family:"DM Sans",sans-serif;font-size:.73rem;font-weight:600;padding:.28rem .75rem;border-radius:5px;cursor:pointer;transition:all .18s;white-space:nowrap;flex-shrink:0}
.wp-srv-btn:hover{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.09)}
.wp-srv-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#111;font-weight:800;box-shadow:0 2px 12px rgba(232,184,75,.25)}

/* ── Season tabs ── */
.wp-season-bar{display:flex;align-items:center;gap:.35rem;padding:.5rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.05);overflow-x:auto;flex-shrink:0}
.wp-season-bar::-webkit-scrollbar{height:2px}
.wp-season-bar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}
.wp-season-label{font-size:.6rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.2);white-space:nowrap;flex-shrink:0;margin-right:.25rem}
.wp-season-chip{flex-shrink:0;padding:.26rem .7rem;border-radius:5px;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.38);font-family:"DM Sans",sans-serif;font-size:.73rem;font-weight:700;cursor:pointer;transition:all .16s;white-space:nowrap}
.wp-season-chip:hover{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.wp-season-chip.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}

/* ── Episode grid ── */
.wp-eps-area{padding:.55rem 1.25rem;overflow-y:auto;max-height:130px}
.wp-eps-area::-webkit-scrollbar{width:3px}
.wp-eps-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}
.wp-eps-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem}
.wp-eps-title{font-size:.6rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.22)}
.wp-now-badge{font-size:.6rem;font-weight:700;color:var(--accent);background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.2);padding:.12rem .45rem;border-radius:4px}
.wp-eps-row{display:flex;flex-wrap:wrap;gap:.28rem}
.wp-ep-chip{min-width:36px;height:32px;padding:0 .45rem;border-radius:5px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);font-family:"DM Sans",sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .14s;display:flex;align-items:center;justify-content:center}
.wp-ep-chip:hover{border-color:rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.09)}
.wp-ep-chip.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#111;font-weight:800;box-shadow:0 2px 8px rgba(232,184,75,.25)}

/* ── Nav row (prev/next) ── */
.wp-nav-row{display:flex;align-items:center;gap:.6rem;padding:.45rem 1.25rem;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0}
.wp-nav-row button{padding:.32rem .9rem;border-radius:5px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-family:"DM Sans",sans-serif;font-size:.75rem;cursor:pointer;transition:all .15s;font-weight:600}
.wp-nav-row button:hover{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.1)}
.wp-nav-row .wp-next{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#111;font-weight:800}
.wp-nav-row .wp-next:hover{opacity:.9}
.wp-nav-row .wp-ep-info{flex:1;font-size:.72rem;color:rgba(255,255,255,.3);text-align:center;font-weight:600;letter-spacing:.3px}

/* old compat */
.wp-srvs-row{display:flex;align-items:center;gap:.4rem;padding:.45rem 1.2rem;border-top:1px solid rgba(255,255,255,.05);flex-wrap:wrap;flex-shrink:0}
.wp-srvs-label{font-size:.62rem;font-weight:800;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
/* Tools tab sections */
.tool-section{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
.tool-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.tool-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.tool-icon{font-size:1.1rem}
.tool-title{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1.5px;color:var(--text)}
.tool-desc{font-size:.75rem;color:var(--muted);line-height:1.5;margin-bottom:.65rem}
.tool-label{display:block;font-size:.7rem;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:.3rem}
/* Edit watch links in admin modal */
.wl-row{display:flex;gap:.5rem;margin-bottom:.5rem;align-items:center}
.wl-row input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:"DM Sans",sans-serif;font-size:.82rem;padding:.45rem .7rem;outline:none}
.wl-row input:focus{border-color:var(--accent)}
.wl-del{background:none;border:1px solid rgba(224,92,58,.3);color:var(--accent2);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:.9rem;flex-shrink:0;transition:all .2s}
.wl-del:hover{background:var(--accent2);color:#fff}
.adm-tabs{display:flex;gap:.25rem;margin-bottom:1.25rem;background:var(--bg);border-radius:12px;padding:.3rem;border:1px solid var(--border)}
.adm-tab{flex:1;padding:.5rem .3rem;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.73rem;font-weight:600;cursor:pointer;transition:all .22s;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:.3rem}
.adm-tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.adm-tab.active{background:linear-gradient(135deg,rgba(232,184,75,.18),rgba(224,92,58,.12));color:var(--accent);box-shadow:0 1px 6px rgba(0,0,0,.3);border:1px solid rgba(232,184,75,.2)}
.adm-pane{animation:fadeIn .2s ease}
/* Card quick-edit bar */
.card-qe-bar{position:absolute;top:6px;left:6px;display:flex;gap:4px;opacity:0;transition:opacity .2s;z-index:10;pointer-events:none}
.card:hover .card-qe-bar{opacity:1;pointer-events:auto}
.card-qe-btn{width:28px;height:28px;border-radius:6px;border:none;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1}
.card-qe-btn:hover{background:var(--accent);color:#111}
/* Floating inline edit popup */
.card-inline-edit{position:fixed;z-index:9999;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.75rem;box-shadow:0 8px 32px rgba(0,0,0,.6);min-width:240px;max-width:300px;animation:fadeIn .15s ease}
.card-inline-edit input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.85rem;padding:.45rem .65rem;outline:none;margin-bottom:.5rem}
.card-inline-edit input:focus{border-color:var(--accent)}
.card-inline-edit .cie-label{font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.5px}
.card-inline-edit .cie-btns{display:flex;gap:.4rem}
.card-inline-edit .cie-save{flex:1;padding:.4rem;border-radius:6px;border:none;background:var(--accent);color:#111;font-family:'DM Sans',sans-serif;font-weight:700;cursor:pointer;font-size:.82rem}
.card-inline-edit .cie-cancel{padding:.4rem .65rem;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-family:'DM Sans',sans-serif;cursor:pointer;font-size:.82rem}

/* ══ PAGINATION ══ */
.pager{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:2.5rem;flex-wrap:wrap;padding-bottom:.5rem}
.pager-btn{min-width:36px;height:36px;padding:0 .6rem;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:rgba(255,255,255,.45);font-family:"DM Sans",sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:.3rem}
.pager-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.pager-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#111;font-weight:800;box-shadow:0 2px 12px rgba(232,184,75,.3)}
.pager-btn:disabled{opacity:.25;cursor:not-allowed;pointer-events:none}
.pager-btn.prev-next{padding:0 .85rem;font-size:.78rem;letter-spacing:.3px}
.pager-dots{color:rgba(255,255,255,.2);font-size:.9rem;padding:0 .2rem;align-self:flex-end;line-height:2}
.pager-info{font-size:.72rem;color:var(--muted);margin-left:.5rem;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════════
   REPORT FEATURE — User-facing modal + admin reports view.
   Designed to match the Mood Picker (mp-) visual language: gold gradient
   header with SVG brand icon, Lucide-style stroke icons (no emojis),
   scale-on-open animation, gold accent on selection, sticky bottom footer.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Overlay (matches .mp-overlay) ─────────────────────────────────── */
.rp-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity .25s;
}
.rp-overlay.open { display: flex; opacity: 1; }

/* ── Modal (matches .mp-modal) ─────────────────────────────────────── */
.rp-modal {
  background: linear-gradient(165deg, rgba(18,20,28,.98), rgba(12,14,20,.98));
  border: 1px solid rgba(232, 184, 75, .18);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(255, 255, 255, .04),
    0 0 60px rgba(232, 184, 75, .04);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "DM Sans", sans-serif;
  transform: scale(.96);
  transition: transform .25s;
  position: relative;
}
.rp-overlay.open .rp-modal { transform: scale(1); }

/* Gold accent stripe down the left edge — matches mp-modal::after */
.rp-modal::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  z-index: 3;
}

/* ── Header (matches .mp-header) ───────────────────────────────────── */
.rp-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 1.8rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  flex-shrink: 0;
}
.rp-header-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(232, 184, 75, .18), rgba(224, 92, 58, .12));
  border: 1px solid rgba(232, 184, 75, .25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.rp-header-icon svg { width: 20px; height: 20px; }
.rp-header-text { flex: 1; min-width: 0; }
.rp-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 2.5px;
  color: #fff;
  line-height: 1;
  margin-bottom: .25rem;
}
.rp-title-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rp-subtitle {
  color: rgba(255, 255, 255, .55);
  font-size: .82rem;
  line-height: 1.45;
}
.rp-close {
  background: transparent; border: none;
  color: rgba(255, 255, 255, .5);
  cursor: pointer; padding: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.rp-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.rp-close svg { width: 16px; height: 16px; }

/* ── Body (matches .mp-body) ──────────────────────────────────────── */
.rp-body {
  padding: 1.4rem 1.8rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.rp-body::-webkit-scrollbar { width: 6px; }
.rp-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }

.rp-question {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .9rem;
  letter-spacing: .1px;
}
.rp-question-secondary {
  margin-top: 1.4rem;
  font-size: .9rem;
}
.rp-field-hint {
  font-weight: 400;
  color: rgba(255, 255, 255, .35);
  font-size: .78rem;
  margin-left: .5rem;
}

/* ── Options (matches .mp-options + .mp-option) ────────────────────── */
.rp-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
@media (max-width: 480px) {
  .rp-options { grid-template-columns: 1fr; }
}
.rp-option {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: .85rem .9rem;
  cursor: pointer;
  text-align: left;
  transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
  font-family: inherit;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .75rem;
  position: relative;
  overflow: hidden;
}
.rp-option::after {
  content: '';
  position: absolute;
  top: .5rem; right: .5rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
  display: flex; align-items: center; justify-content: center;
}
.rp-option:hover {
  background: rgba(232, 184, 75, .08);
  border-color: rgba(232, 184, 75, .35);
  transform: translateY(-1px);
}
.rp-option.selected {
  background: linear-gradient(135deg, rgba(232, 184, 75, .14), rgba(224, 92, 58, .08));
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(232, 184, 75, .3),
    0 6px 22px rgba(232, 184, 75, .1);
}
.rp-option.selected::after {
  opacity: 1; transform: scale(1);
  content: '✓';
  color: #111; font-size: .7rem; font-weight: 700;
  line-height: 18px; text-align: center;
}
.rp-option-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, .7);
  transition: all .2s;
}
.rp-option-icon svg { width: 16px; height: 16px; }
.rp-option:hover .rp-option-icon { color: var(--accent); }
.rp-option.selected .rp-option-icon {
  background: rgba(232, 184, 75, .15);
  border-color: rgba(232, 184, 75, .4);
  color: var(--accent);
}
.rp-option-text {
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .1px;
  flex: 1;
  min-width: 0;
}
.rp-option-text small {
  display: block;
  color: rgba(255, 255, 255, .5);
  font-size: .7rem;
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.35;
}

/* ── Context (gold-accent info card) ───────────────────────────────── */
.rp-context {
  background: rgba(232, 184, 75, .05);
  border: 1px solid rgba(232, 184, 75, .18);
  border-radius: 11px;
  padding: .7rem .9rem;
  margin: 1.4rem 0 0;
}
.rp-context-title {
  display: flex; align-items: center; gap: .35rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: .3rem;
}
.rp-context-body {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.45;
}

/* ── Textarea ───────────────────────────────────────────────────────── */
.rp-textarea {
  width: 100%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  padding: .85rem 1rem;
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: all .2s;
  line-height: 1.5;
}
.rp-textarea:focus {
  border-color: rgba(232, 184, 75, .5);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px rgba(232, 184, 75, .08);
}
.rp-textarea::placeholder { color: rgba(255, 255, 255, .3); }
.rp-char-count {
  text-align: right;
  font-size: .72rem;
  color: rgba(255, 255, 255, .4);
  margin-top: .3rem;
}

/* ── Status banner ──────────────────────────────────────────────────── */
.rp-status {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .85rem;
  border: 1px solid transparent;
}
.rp-status.success {
  background: rgba(34, 197, 94, .08);
  border-color: rgba(34, 197, 94, .3);
  color: #4ade80;
}
.rp-status.error {
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .3);
  color: #f87171;
}

/* ── Footer (matches .mp-footer) ───────────────────────────────────── */
.rp-footer {
  padding: 1rem 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  flex-shrink: 0;
  background: rgba(0, 0, 0, .25);
}
.rp-btn {
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .65rem 1.4rem;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid;
  transition: all .15s;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.rp-btn svg { width: 14px; height: 14px; }
.rp-btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .7);
}
.rp-btn-secondary:hover {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}
.rp-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: #111;
}
.rp-btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 4px 18px rgba(232, 184, 75, .35);
}
.rp-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Already-has-active blocked state ──────────────────────────────── */
.rp-blocked {
  text-align: center;
  padding: 2rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rp-blocked-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(232, 184, 75, .14), rgba(224, 92, 58, .08));
  border: 1px solid rgba(232, 184, 75, .3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: var(--accent);
}
.rp-blocked-icon svg { width: 30px; height: 30px; }
.rp-blocked h3 {
  margin: 0 0 .6rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: #fff;
}
.rp-blocked p {
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
  max-width: 380px;
  margin: 0 auto 1.4rem;
}

/* Disabled report button (when already has active report) */
.btn-trailer.report-disabled,
.wp-sidebar-btn.report-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN REPORTS SECTION
   ═══════════════════════════════════════════════════════════════════ */

/* Red badge on sidebar nav */
.adm-nav-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  margin-left: auto;
  background: #dc2626;
  color: #fff;
  border-radius: 10px;
  font-size: .65rem;
  font-weight: 800;
  font-family: 'DM Sans', sans-serif;
}

/* Filter chips (with SVG icons) */
.adm-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: rgba(255, 255, 255, .55);
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: 16px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.adm-filter-chip svg { color: rgba(255, 255, 255, .5); transition: color .15s; }
.adm-filter-chip:hover {
  border-color: rgba(232, 184, 75, .3);
  color: var(--text);
}
.adm-filter-chip:hover svg { color: var(--accent); }
.adm-filter-chip.active {
  background: rgba(232, 184, 75, .15);
  border-color: rgba(232, 184, 75, .45);
  color: var(--accent);
}
.adm-filter-chip.active svg { color: var(--accent); }

/* Master/detail layout */
.adm-reports-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: .85rem;
  margin-top: .85rem;
  min-height: 400px;
}
@media (max-width: 900px) {
  .adm-reports-layout { grid-template-columns: 1fr; }
}

.adm-reports-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-y: auto;
  max-height: 70vh;
}

.adm-report-row {
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.adm-report-row:last-child { border-bottom: 0; }
.adm-report-row:hover { background: rgba(255, 255, 255, .03); }
.adm-report-row.selected {
  background: rgba(232, 184, 75, .08);
  border-left: 3px solid var(--accent);
  padding-left: calc(.9rem - 3px);
}

.adm-report-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .4rem;
  margin-bottom: .25rem;
}
.adm-report-row-type {
  font-size: .76rem;
  font-weight: 700;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: .3rem;
}
.adm-report-row-type svg { width: 12px; height: 12px; }
.adm-report-row-time {
  font-size: .7rem;
  color: var(--muted);
  flex-shrink: 0;
}
.adm-report-row-title {
  font-size: .85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .2rem;
}
.adm-report-row-preview {
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}

.adm-reports-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem;
  overflow-y: auto;
  max-height: 70vh;
}

.adm-report-detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .8rem;
  margin-bottom: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.adm-report-detail-type-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(232, 184, 75, .12);
  border: 1px solid rgba(232, 184, 75, .3);
  color: var(--accent);
  padding: .3rem .7rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.adm-report-detail-type-pill svg { width: 13px; height: 13px; }
.adm-report-detail-id {
  color: var(--muted);
  font-family: monospace;
  font-size: .75rem;
}

.adm-report-field { margin-bottom: .85rem; }
.adm-report-field-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: .25rem;
}
.adm-report-field-value {
  font-size: .88rem;
  color: var(--text);
  word-break: break-word;
}
.adm-report-field-value.notes-block {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: .7rem .9rem;
  white-space: pre-wrap;
  line-height: 1.5;
}
.adm-report-field-value.muted {
  color: var(--muted);
  font-style: italic;
}
.adm-report-field-value.mono {
  font-family: monospace;
  font-size: .78rem;
  background: var(--surface2);
  padding: .4rem .6rem;
  border-radius: 5px;
  border: 1px solid var(--border);
}

.adm-report-detail-actions {
  display: flex;
  gap: .5rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════
   Smart filter bar — Letterboxd / Mubi-style dropdowns
   Used by Ready to Watch, Coming Soon, Top Rated, Recently Added,
   All Movies, All Series, and Continue Watching.
   Design intent: sit flush in the category header next to the title.
   Each filter is a compact pill-style trigger that opens a refined
   panel with counts. Mirrors the pattern used by Letterboxd, MUBI,
   and the major streaming services — minimal visual noise, scales
   gracefully with library size.
   ══════════════════════════════════════════════════════════════════ */

.smart-filter-bar{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  /* No box, no border, no padding — flush with the page so the bar
     reads as a continuation of the category header, not a separate
     panel docked underneath. */
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  margin:0;
}

.smart-filter-bar:empty{ display:none }

/* Each dropdown trigger looks like a compact pill button. Hover and
   active states are subtle — the focus is on what's selected. */
.sf-trigger{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  /* Default state — was too flat ("rgba(255,255,255,.04)") so the buttons
     looked like dim outlines floating in the page. Now they have a real
     surface, a soft inner gradient, and a subtle inset highlight that gives
     them the same "polished pill" presence as their selected/gold state. */
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  color:rgba(255,255,255,.92);
  font-family:"DM Sans", sans-serif;
  font-size:.8rem;
  font-weight:500;
  padding:.5rem .9rem .5rem 1rem;
  border-radius:9px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
  letter-spacing:.15px;
}
.sf-trigger:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.28);
  color:#fff;
}
/* Active state = a value is selected (not 'All'). Same exact shape as the
   default trigger — same gradient direction, same border weight, same
   shadow stack — only the COLOURS shift to gold. The user explicitly asked
   for this consistency: previously the active pill grew an outer ring and
   inset shadow which made it look like a different control type. */
.sf-trigger.is-active{
  background:linear-gradient(180deg, rgba(232,184,75,.18), rgba(232,184,75,.09));
  border-color:rgba(232,184,75,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--accent);
}
.sf-trigger.is-active:hover{
  background:linear-gradient(180deg, rgba(232,184,75,.24), rgba(232,184,75,.13));
  border-color:rgba(232,184,75,.7);
}

.sf-trigger-label{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:1.3px;
  text-transform:uppercase;
  /* Was rgba(.4) on a darker surface — basically invisible. Bumping the
     opacity so the LANGUAGE / TYPE / GENRE caption labels read clearly even
     before any filter is selected. */
  color:rgba(255,255,255,.55);
  margin-right:.15rem;
}
.sf-trigger.is-active .sf-trigger-label{
  color:rgba(232,184,75,.75);
}

.sf-trigger-value{
  font-weight:700;
  letter-spacing:.1px;
}

.sf-trigger-caret{
  font-size:.55rem;
  opacity:.7;
  margin-left:.2rem;
  transition:transform .2s;
}
.sf-trigger.is-open .sf-trigger-caret{ transform:rotate(180deg) }

/* Dropdown panel — appears anchored to the trigger that opened it.
   Wider than the trigger so the option labels breathe. Max-height
   forces a scrollbar on long genre lists instead of running off the
   bottom of the viewport. */
.sf-panel{
  position:absolute;
  z-index:9999;
  min-width:220px;
  max-width:320px;
  max-height:380px;
  overflow-y:auto;
  background:#13161e;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  padding:.4rem 0;
  /* Scoped scrollbar so it doesn't inherit the iframe's chunky default */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
  /* Smooth open/close — translateY ensures it appears to drop down from
     the trigger rather than just fading into place. */
  animation:sfPanelIn .14s cubic-bezier(.2,.7,.4,1);
}
.sf-panel::-webkit-scrollbar{ width:8px }
.sf-panel::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15);
  border-radius:4px;
}
@keyframes sfPanelIn{
  from{ opacity:0; transform:translateY(-4px) }
  to  { opacity:1; transform:translateY(0) }
}

.sf-panel-header{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  padding:.6rem .9rem .35rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:.3rem;
}

.sf-option{
  display:flex;
  align-items:center;
  width:100%;
  background:transparent;
  border:none;
  color:rgba(255,255,255,.82);
  font-family:"DM Sans", sans-serif;
  font-size:.85rem;
  font-weight:500;
  padding:.55rem .9rem;
  cursor:pointer;
  text-align:left;
  transition:background .12s, color .12s;
  gap:.55rem;
}
.sf-option:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}
.sf-option.is-selected{
  background:rgba(232,184,75,.1);
  color:var(--accent);
}
.sf-option.is-selected::before{
  content:"✓";
  color:var(--accent);
  font-weight:700;
  font-size:.85rem;
}
/* Reserve space for the checkmark even on unselected rows so labels
   line up vertically across the whole list. */
.sf-option:not(.is-selected)::before{
  content:"";
  display:inline-block;
  width:.85rem;
  flex-shrink:0;
}
.sf-option-label{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sf-option-count{
  font-size:.72rem;
  font-weight:500;
  color:rgba(255,255,255,.4);
  margin-left:.5rem;
  flex-shrink:0;
}
.sf-option.is-selected .sf-option-count{ color:rgba(232,184,75,.7) }

/* Active-filters summary — a small "Active: English · Action [Clear]"
   strip that appears under the dropdown row when filters are set.
   Helps the user see at a glance what's narrowing the list, and gives
   them a one-click escape hatch. */
.sf-active-summary{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:nowrap;
  font-size:.74rem;
  color:rgba(255,255,255,.55);
  margin-top:0;
}
.sf-active-summary-label{
  font-size:.6rem;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.sf-active-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:rgba(232,184,75,.1);
  border:1px solid rgba(232,184,75,.3);
  color:var(--accent);
  font-weight:600;
  padding:.2rem .55rem;
  border-radius:5px;
  font-size:.74rem;
}
.sf-active-clear{
  background:none;
  border:none;
  color:rgba(255,255,255,.45);
  font-family:"DM Sans", sans-serif;
  font-size:.74rem;
  font-weight:500;
  cursor:pointer;
  padding:0 .25rem;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.2);
  text-underline-offset:2px;
  transition:color .15s, text-decoration-color .15s;
}
.sf-active-clear:hover{
  color:#fff;
  text-decoration-color:#fff;
}

/* Backdrop — invisible click-catcher so clicking outside closes the
   panel. Sits below the panel but above everything else. */
.sf-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
  background:transparent;
}

/* Mobile — keep the bar tidy on narrow screens. The triggers shrink
   slightly and wrap to a second line when needed (flex-wrap is on
   the bar). */
@media (max-width: 640px){
  .sf-trigger{ padding:.4rem .65rem; font-size:.76rem }
  .sf-trigger-label{ font-size:.6rem; margin-right:.15rem }
  .sf-panel{ min-width:200px; max-width:calc(100vw - 2rem) }
}

/* ══════════════════════════════════════════════════════════════════
   Back button used at the top of every category page
   (Ready to Watch, Top Rated, Coming Soon, All Movies, All Series,
   Recently Added, Continue Watching). Used to live only on
   view-row-full; pulled out into a shared style and added to every
   category header for consistent navigation.
   ══════════════════════════════════════════════════════════════════ */

.cat-back-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);
  font-family:"DM Sans", sans-serif;
  font-size:.82rem;
  font-weight:600;
  padding:.45rem .95rem;
  border-radius:8px;
  cursor:pointer;
  transition:all .18s ease;
  letter-spacing:.2px;
  flex-shrink:0;
}
.cat-back-btn:hover{
  background:rgba(232,184,75,.1);
  border-color:rgba(232,184,75,.4);
  color:#fff;
  transform:translateX(-2px);
}
.cat-back-btn:active{ transform:translateX(-1px) scale(.98) }

@media (max-width: 640px){
  .cat-back-btn{ padding:.4rem .75rem; font-size:.78rem }
}

/* ══════════════════════════════════════════════════════════════════
   Unified category-page header
   Used by every category view (Coming Soon, Ready to Watch, etc.).
   Layout: [← Back] [Category Title]    [Filters]    [count]
   The filter dropdowns sit inline with the header, on the right of the
   title and just before the title count, so the page reads as a single
   horizontal row instead of stacked layers (header + filter strip +
   grid). This is the pattern used by Letterboxd, MUBI, Apple TV+ etc.
   ══════════════════════════════════════════════════════════════════ */

.cat-header{
  display:flex;
  align-items:center;
  gap:1.1rem;
  margin-bottom:1.6rem;
  padding-top:.5rem;
  padding-bottom:1.1rem;
  /* Subtle hairline below the header keeps it visually anchored — the
     posters grid below feels intentionally separated, not floating. */
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-wrap:wrap;
}

.cat-title{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.85rem;
  letter-spacing:2.5px;
  color:#fff;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  line-height:1;
}

/* The .cat-filters wrapper is the same element that .smart-filter-bar
   gets applied to by JS. The selector chain (.cat-header .cat-filters)
   gives it the right margin and growth behaviour without overriding
   the dropdown styles. */
.cat-filters{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  flex:1;
  min-width:0;
}
/* Active-summary strip stays inline with the filter triggers —
   no new-line, no layout break. The chips sit right after the
   last trigger pill separated by a thin divider. */
.cat-filters .sf-active-summary{
  flex-basis:auto;
  margin-top:0;
  padding-left:.5rem;
  border-left:1px solid rgba(255,255,255,.1);
}

.cat-count{
  font-size:.78rem;
  color:var(--muted, rgba(255,255,255,.5));
  margin-left:auto;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;
}

/* ── Sort toggle buttons (Ready to Watch only) ─────────────────────
   Two compact pill buttons that sit on the right side of the header,
   between the filter bar and the count. They share a connected-pill
   group shape (left pill has rounded-left corners, right has rounded-
   right) so they read as a single control — like a segmented button.
   Active state uses the gold accent, inactive stays translucent.    */
.rf-sort-group{
  display:inline-flex;
  align-items:center;
  gap:0;
  flex-shrink:0;
  border-radius:9px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.rf-sort-btn{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:none;
  color:rgba(255,255,255,.72);
  font-family:"DM Sans", sans-serif;
  font-size:.75rem;
  font-weight:600;
  padding:.42rem .85rem;
  cursor:pointer;
  letter-spacing:.15px;
  transition:background .15s, color .15s;
  white-space:nowrap;
  position:relative;
}
/* Thin divider between the two buttons */
.rf-sort-btn + .rf-sort-btn::before{
  content:'';
  position:absolute;
  left:0; top:20%; height:60%;
  width:1px;
  background:rgba(255,255,255,.1);
}
.rf-sort-btn:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));
  color:#fff;
}
.rf-sort-btn.is-active{
  background:linear-gradient(180deg,rgba(232,184,75,.22),rgba(232,184,75,.1));
  color:var(--accent,#e8b84b);
}
.rf-sort-btn.is-active:hover{
  background:linear-gradient(180deg,rgba(232,184,75,.28),rgba(232,184,75,.15));
}
.rf-sort-btn svg{
  width:12px; height:12px; flex-shrink:0;
}
@media (max-width:720px){
  .rf-sort-group{ margin-left:0; order:4; flex-basis:100%; border-radius:8px; }
  .rf-sort-btn{ flex:1; justify-content:center; font-size:.72rem; padding:.38rem .6rem; }
}

/* Mobile — the title and filters stack and the back button sits above. */
@media (max-width: 720px){
  .cat-header{ gap:.7rem; margin-bottom:1.2rem; padding-bottom:.85rem }
  .cat-title{ font-size:1.45rem; letter-spacing:2px }
  .cat-filters{
    flex-basis:100%;
    order:3;
  }
  .cat-count{ font-size:.74rem }
}

/* ══════════════════════════════════════════════════════════════════
   Mood Picker — top-bar CTA
   Promoted from a category tab to a top-level CTA. Subtle gold pill
   that lights up on hover so it feels distinct from the standard
   nav pills (Home / Movies / Series) without screaming for attention.
   Sits between the search bar and the right-side action buttons.
   ══════════════════════════════════════════════════════════════════ */

.nav-mood-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:rgba(232,184,75,.06);
  border:1px solid rgba(232,184,75,.4);
  color:var(--accent, #e8b84b);
  font-family:"DM Sans", sans-serif;
  font-size:.82rem;
  font-weight:600;
  padding:.45rem .9rem;
  border-radius:8px;
  cursor:pointer;
  letter-spacing:.2px;
  transition:background .18s, border-color .18s, color .18s, transform .12s;
  white-space:nowrap;
  /* Sit just before the search bar in the .nav-right flex row */
  margin-right:.4rem;
}
.nav-mood-btn:hover{
  background:linear-gradient(135deg, rgba(232,184,75,.18), rgba(232,184,75,.08));
  border-color:rgba(232,184,75,.7);
  color:#fff;
  box-shadow:0 4px 14px rgba(232,184,75,.18);
}
.nav-mood-btn:active{ transform:scale(.97) }

.nav-mood-btn svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  /* The sparkle icon — a touch above baseline alignment for visual
     balance with the text. */
  margin-top:-1px;
}

/* Mobile — shrink to icon-only on tight viewports so the search bar
   doesn't lose horizontal space. The text stays accessible via the
   aria-label on the button. */
@media (max-width: 720px){
  .nav-mood-btn{
    padding:.45rem .55rem;
    margin-right:.3rem;
  }
  .nav-mood-btn span{ display:none }
}

/* ══════════════════════════════════════════════════════════════════
   Category-mode body class
   When the user is inside a dedicated category page (Recently Added,
   Top Rated, etc.) we hide the home chrome (hero/stats/cat-tabs) via
   inline JS, but we also tighten up the main content padding so the
   page feels intentional rather than just "home with stuff missing".
   ══════════════════════════════════════════════════════════════════ */

body.category-mode main{
  /* Pull the category page up close to the top bar — no blank space
     left behind by the hidden hero. */
  padding-top:0;
}

/* The cat-tabs-bar lives below the topbar with its own margin in normal
   mode — that margin shouldn't collapse into the now-hidden bar. We
   neutralise it explicitly. */
body.category-mode #cat-tabs-bar{ margin:0 !important; padding:0 !important }

/* ══════════════════════════════════════════════════════════════════
   Ad Blocker Shield Button + Panel
   Matches the gold/red palette of the rest of the site. The button
   sits in the navbar (.nav-right) right before the Mood Picker.
   The panel slides in from the right when clicked.
   ══════════════════════════════════════════════════════════════════ */

.nav-shield-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:rgba(46,204,113,.08);
  border:1px solid rgba(46,204,113,.4);
  color:#2ecc71;
  font-family:"DM Sans", sans-serif;
  font-size:.8rem;
  font-weight:600;
  padding:.45rem .8rem;
  border-radius:8px;
  cursor:pointer;
  letter-spacing:.2px;
  transition:background .18s, border-color .18s, color .18s, transform .12s;
  white-space:nowrap;
  position:relative;
  margin-right:.4rem;
}
.nav-shield-btn:hover{
  background:linear-gradient(135deg, rgba(46,204,113,.18), rgba(46,204,113,.08));
  border-color:rgba(46,204,113,.7);
  color:#fff;
  box-shadow:0 4px 14px rgba(46,204,113,.18);
}
.nav-shield-btn:active{ transform:scale(.97) }
.nav-shield-btn.is-off{
  background:rgba(150,150,150,.08);
  border-color:rgba(150,150,150,.3);
  color:#888;
}
.nav-shield-btn.is-off:hover{
  background:rgba(150,150,150,.15);
  border-color:rgba(150,150,150,.5);
  color:#bbb;
  box-shadow:none;
}
.nav-shield-btn svg{
  width:14px;
  height:14px;
  flex-shrink:0;
}
.shield-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  background:#e63946;
  color:#fff;
  border-radius:9px;
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--bg, #090b10);
  letter-spacing:0;
}

@media (max-width: 720px){
  .nav-shield-btn{
    padding:.45rem .55rem;
    margin-right:.3rem;
  }
  .nav-shield-btn span:not(.shield-badge){ display:none }
}

/* ─── Slide-in panel ─── */
.adblock-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  z-index:9990;
  display:none;
  opacity:0;
  transition:opacity .25s;
}
.adblock-overlay.open{
  display:block;
  opacity:1;
}
.adblock-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:380px;
  max-width:92vw;
  background:linear-gradient(180deg, #0f1219 0%, #0a0c12 100%);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-8px 0 32px rgba(0,0,0,.5);
  z-index:9991;
  display:flex;
  flex-direction:column;
  padding:22px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  font-family:"DM Sans", sans-serif;
}
.adblock-overlay.open .adblock-panel{ transform:translateX(0); }

.adblock-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:18px;
}
.adblock-title-wrap{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:#2ecc71;
}
.adblock-title{
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.3px;
}
.adblock-subtitle{
  font-size:.72rem;
  color:rgba(255,255,255,.45);
  margin-top:1px;
}
.adblock-close{
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);
  width:30px;
  height:30px;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  flex-shrink:0;
  transition:background .15s, color .15s;
}
.adblock-close:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.adblock-status{
  display:flex;
  align-items:center;
  gap:.55rem;
  background:rgba(46,204,113,.1);
  border:1px solid rgba(46,204,113,.3);
  border-radius:10px;
  padding:9px 13px;
  margin-bottom:16px;
  font-size:.78rem;
  color:#fff;
  transition:all .25s;
}
.adblock-status.is-off{
  background:rgba(150,150,150,.08);
  border-color:rgba(150,150,150,.25);
  color:rgba(255,255,255,.6);
}
.adblock-status-dot{
  width:8px;
  height:8px;
  background:#2ecc71;
  border-radius:50%;
  box-shadow:0 0 8px #2ecc71;
  animation:adblock-pulse 2s infinite;
  flex-shrink:0;
}
.adblock-status.is-off .adblock-status-dot{
  background:#888;
  box-shadow:none;
  animation:none;
}
@keyframes adblock-pulse{
  0%, 100% { opacity:1 }
  50% { opacity:.45 }
}

.adblock-section{
  margin-bottom:18px;
}
.adblock-section-title{
  font-size:.7rem;
  font-weight:700;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
}
.adblock-section-hint{
  font-size:.7rem;
  color:rgba(255,255,255,.4);
  margin-top:-6px;
  margin-bottom:10px;
}

.adblock-toggle-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:13px 15px;
  cursor:pointer;
  transition:background .18s, border-color .18s;
}
.adblock-toggle-row:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}
.adblock-row-title{
  font-size:.88rem;
  font-weight:600;
  color:#fff;
}
.adblock-row-desc{
  font-size:.72rem;
  color:rgba(255,255,255,.5);
  margin-top:2px;
}

.adblock-switch{
  position:relative;
  width:44px;
  height:24px;
  flex-shrink:0;
}
.adblock-switch input{
  opacity:0;
  width:0;
  height:0;
}
.adblock-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:rgba(100,100,100,.4);
  border-radius:24px;
  transition:.25s;
}
.adblock-slider:before{
  content:"";
  position:absolute;
  height:18px;
  width:18px;
  right:3px;
  top:3px;
  background:#fff;
  border-radius:50%;
  transition:.25s;
}
.adblock-switch input:checked + .adblock-slider{
  background:linear-gradient(90deg, #2ecc71, #27ae60);
}
.adblock-switch input:checked + .adblock-slider:before{
  transform:translateX(-20px);
}

.adblock-levels{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.adblock-level-btn{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:10px 6px;
  cursor:pointer;
  color:rgba(255,255,255,.7);
  text-align:center;
  transition:all .18s;
  font-family:inherit;
}
.adblock-level-btn:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.adblock-level-btn.active{
  background:linear-gradient(135deg, rgba(46,204,113,.2), rgba(46,204,113,.08));
  border-color:rgba(46,204,113,.6);
  color:#fff;
}
.adblock-level-btn[data-level="strict"].active{
  background:linear-gradient(135deg, rgba(230,57,70,.25), rgba(230,57,70,.1));
  border-color:rgba(230,57,70,.6);
}
.adblock-level-btn[data-level="off"].active{
  background:rgba(150,150,150,.12);
  border-color:rgba(150,150,150,.4);
}
.adblock-level-icon{
  font-size:1.4rem;
  line-height:1;
  margin-bottom:4px;
}
.adblock-level-name{
  font-size:.78rem;
  font-weight:700;
  margin-bottom:2px;
}
.adblock-level-desc{
  font-size:.62rem;
  color:rgba(255,255,255,.5);
  line-height:1.25;
}

.adblock-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.adblock-stat{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:14px;
  text-align:center;
}
.adblock-stat-value{
  font-size:1.6rem;
  font-weight:700;
  color:var(--accent, #e8b84b);
  line-height:1;
  margin-bottom:5px;
}
.adblock-stat-label{
  font-size:.7rem;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  letter-spacing:.8px;
}

.adblock-allowed-list{
  max-height:160px;
  overflow-y:auto;
}
.adblock-allowed-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  margin-bottom:6px;
  font-size:.74rem;
}
.adblock-allowed-item-name{
  color:rgba(255,255,255,.8);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  direction:ltr;
}
.adblock-allowed-item-remove{
  background:transparent;
  border:none;
  color:rgba(255,107,107,.7);
  cursor:pointer;
  font-size:.95rem;
  padding:2px 8px;
  border-radius:5px;
  transition:background .15s, color .15s;
}
.adblock-allowed-item-remove:hover{
  background:rgba(255,107,107,.15);
  color:#ff6b6b;
}

.adblock-reset{
  width:100%;
  padding:9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:rgba(255,255,255,.7);
  font-size:.78rem;
  cursor:pointer;
  font-family:inherit;
  transition:all .18s;
}
.adblock-reset:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.adblock-footer{
  text-align:center;
  font-size:.68rem;
  color:rgba(255,255,255,.35);
  margin-top:14px;
  line-height:1.5;
}

@media (max-width: 480px){
  .adblock-panel{
    width:100vw;
    max-width:100vw;
    padding:18px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SERVER RENAMER — admin section
   Preview cards show before/after server counts and a sample of name
   changes. Each card represents one title; collapsed by default for
   long previews. Soon-placeholder rows are tinted amber so they're
   visually distinct from real server changes.
   ══════════════════════════════════════════════════════════════════ */

.rn-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:.6rem;
  margin-bottom:1rem;
}
.rn-stat{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  padding:.85rem 1rem;
}
.rn-stat-label{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:.25rem;
}
.rn-stat-value{
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.rn-stat.is-highlight{
  border-color:rgba(232,184,75,.4);
  background:rgba(232,184,75,.08);
}
.rn-stat.is-highlight .rn-stat-value{ color:var(--accent) }
.rn-stat.is-warn{
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.07);
}
.rn-stat.is-warn .rn-stat-value{ color:#fbbf24 }

.rn-preview-card{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  margin-bottom:.6rem;
  overflow:hidden;
}
.rn-preview-head{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.7rem .9rem;
  cursor:pointer;
  user-select:none;
  transition:background .15s;
}
.rn-preview-head:hover{ background:rgba(255,255,255,.04) }
.rn-preview-poster{
  width:36px;
  height:54px;
  object-fit:cover;
  border-radius:4px;
  flex-shrink:0;
  background:#0f1219;
}
.rn-preview-info{ flex:1; min-width:0 }
.rn-preview-title{
  font-size:.92rem;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rn-preview-meta{
  font-size:.74rem;
  color:rgba(255,255,255,.5);
  margin-top:.15rem;
}
.rn-preview-counts{
  display:flex;
  gap:.4rem;
  flex-shrink:0;
  font-size:.72rem;
  font-variant-numeric:tabular-nums;
}
.rn-preview-pill{
  padding:.2rem .5rem;
  border-radius:4px;
  font-weight:700;
}
.rn-preview-pill.rn-pill-rename{ background:rgba(232,184,75,.12); color:var(--accent) }
.rn-preview-pill.rn-pill-soon{ background:rgba(245,158,11,.15); color:#fbbf24 }
.rn-preview-pill.rn-pill-skip{ background:rgba(255,255,255,.05); color:rgba(255,255,255,.5) }
.rn-preview-toggle{
  font-size:.78rem;
  color:rgba(255,255,255,.4);
  margin-left:.5rem;
  flex-shrink:0;
  transition:transform .2s;
}
.rn-preview-card.is-open .rn-preview-toggle{ transform:rotate(180deg) }

.rn-preview-body{
  display:none;
  padding:0 .9rem .9rem;
  border-top:1px solid rgba(255,255,255,.05);
}
.rn-preview-card.is-open .rn-preview-body{ display:block }

.rn-rename-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem 0;
  font-size:.8rem;
  border-bottom:1px dashed rgba(255,255,255,.04);
}
.rn-rename-row:last-child{ border-bottom:none }
.rn-rename-old{
  color:rgba(255,255,255,.5);
  text-decoration:line-through;
  font-size:.78rem;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rn-rename-arrow{ color:var(--accent); flex-shrink:0 }
.rn-rename-new{
  color:#fff;
  font-weight:600;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rn-rename-row.rn-soon-row .rn-rename-old{
  text-decoration:none;
  color:rgba(245,158,11,.5);
  font-style:italic;
}
.rn-rename-row.rn-soon-row .rn-rename-new{
  color:#fbbf24;
}
.rn-section-label{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-top:.7rem;
  margin-bottom:.3rem;
  padding-top:.5rem;
  border-top:1px solid rgba(255,255,255,.05);
}
.rn-section-label:first-child{ border-top:none; padding-top:0; margin-top:.4rem }

/* Single-title search results inside the renamer scope picker */
.rn-title-result{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.55rem .75rem;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .12s;
}
.rn-title-result:last-child{ border-bottom:none }
.rn-title-result:hover{ background:rgba(232,184,75,.08) }
.rn-title-result img{
  width:32px;
  height:48px;
  object-fit:cover;
  border-radius:4px;
  flex-shrink:0;
}
.rn-title-result-info{ flex:1; min-width:0 }
.rn-title-result-name{
  font-size:.86rem;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rn-title-result-meta{
  font-size:.72rem;
  color:rgba(255,255,255,.5);
  margin-top:.12rem;
}

/* ══════════════════════════════════════════════════════════════════
   Soon-placeholder support inside the watch player
   ──────────────────────────────────────────────────────────────────
   When a server entry is flagged soonPlaceholder, the player skips the
   iframe load and we drape an overlay over the player area showing the
   admin-configured image with a "Soon" caption. The matching server pill
   is tinted amber so users can tell at a glance which server is the
   placeholder (vs a real, watchable one).
   ══════════════════════════════════════════════════════════════════ */
.wp-srv-btn-soon{
  background:rgba(245,158,11,.1) !important;
  border-color:rgba(245,158,11,.35) !important;
  color:#fbbf24 !important;
}
.wp-srv-btn-soon:hover{
  background:rgba(245,158,11,.18) !important;
  border-color:rgba(245,158,11,.55) !important;
  color:#fde047 !important;
}
.wp-srv-btn-soon.active{
  background:linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  border-color:transparent !important;
  color:#111 !important;
}

.wp-soon-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
  align-items:stretch;
  justify-content:stretch;
  background:#000;
  pointer-events:auto;
}
.wp-soon-img{
  /* The image is the entire player surface — same size & aspect as a real
     iframe stream would be. cover keeps the artwork edge-to-edge without
     letterboxing. No text overlay (admin-controlled label lives on the
     server pill instead, per user request). */
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ════════════════════════════════════════════════════════════════════════
   TRENDING NOW — "Big Numbers" block (Design B, enhanced)
   Giant outlined rank numerals behind posters, horizontally scrollable, with
   captions and soft fade edges. Sits at the top of the home feed.
   FinalVerse identity: gold #e8b84b, orange #e05c3a, Bebas Neue display.
   ════════════════════════════════════════════════════════════════════════ */
.fv-trending-block{
  position:relative;
  margin:0 0 2.4rem;
  padding:1.5rem 0 1rem;
}
/* subtle ambient glow behind the whole block for depth */
.fv-trending-block::before{
  content:"";
  position:absolute;
  inset:0 0 30% 0;
  background:radial-gradient(80% 120% at 12% 0%, rgba(232,184,75,.05), transparent 60%);
  pointer-events:none;
}
.fv-trending-head{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:0 var(--page-pad, 3rem);
  margin-bottom:.2rem;
  position:relative;z-index:1;
}
.fv-trending-title{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:"Bebas Neue","DM Sans",sans-serif;
  font-size:1.7rem;
  letter-spacing:1.5px;
  background:linear-gradient(90deg,#e8b84b,#e05c3a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.fv-trending-title svg{flex-shrink:0;position:relative;top:-2px}

.fv-trending-wrap{position:relative}
/* soft fade on both edges so the strip feels like it continues off-screen */
.fv-trending-wrap::before,
.fv-trending-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:5%;z-index:3;pointer-events:none;
}
.fv-trending-wrap::before{left:0;background:linear-gradient(90deg,var(--bg,#0a0a0c),transparent)}
.fv-trending-wrap::after{right:0;background:linear-gradient(270deg,var(--bg,#0a0a0c),transparent)}
.fv-trending-strip{
  display:flex;
  align-items:flex-start;
  gap:2.6rem;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2rem var(--page-pad, 3rem) 1rem;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.fv-trending-strip::-webkit-scrollbar{display:none}

.fv-trending-card{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:flex-end;
  cursor:pointer;
  outline:none;
}
.fv-trending-numeral{
  font-family:"Bebas Neue","DM Sans",sans-serif;
  font-size:10rem;
  line-height:.62;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.15);
  margin-inline-end:-2.1rem;
  margin-bottom:1.4rem;
  position:relative;z-index:1;
  user-select:none;
  transition:-webkit-text-stroke .25s ease, transform .25s ease;
}
.fv-trending-card.is-top3 .fv-trending-numeral{
  -webkit-text-stroke:2px rgba(232,184,75,.5);
}
.fv-trending-card:hover .fv-trending-numeral,
.fv-trending-card:focus-visible .fv-trending-numeral{
  -webkit-text-stroke:2px #e8b84b;
  transform:translateY(-2px);
}
.fv-trending-poster-wrap{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:.5rem;
  width:142px;
}
.fv-trending-poster{
  width:142px;height:213px;
  border-radius:12px;object-fit:cover;
  background:#1c1c24;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fv-trending-card:hover .fv-trending-poster,
.fv-trending-card:focus-visible .fv-trending-poster{
  transform:translateY(-6px);
  box-shadow:0 18px 42px rgba(232,184,75,.22),0 0 0 1px rgba(232,184,75,.32);
}
.fv-trending-caption{
  padding-inline-start:.1rem;
  opacity:.95;
}
.fv-trending-name{
  font-family:"DM Sans",sans-serif;
  font-size:.82rem;font-weight:600;color:var(--text,#f4f4f6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:142px;
}
.fv-trending-meta{
  font-size:.72rem;color:var(--muted,#8a8a96);margin-top:.1rem;
}

@media(max-width:760px){
  .fv-trending-head{padding:0 1rem}
  .fv-trending-strip{gap:1.7rem;padding:1.6rem 1rem .8rem}
  .fv-trending-numeral{font-size:6.8rem;margin-inline-end:-1.4rem;margin-bottom:1.1rem;-webkit-text-stroke-width:1.5px}
  .fv-trending-poster,.fv-trending-poster-wrap{width:108px}
  .fv-trending-poster{height:162px}
  .fv-trending-name{max-width:108px;font-size:.78rem}
}



/* ════════════════════════════════════════════════════════════════════════
   ACTOR PAGE (fv-cast-crew.js) — browse all titles featuring an actor
   ════════════════════════════════════════════════════════════════════════ */
/* The actor page is a full-screen overlay, but its z-index sits BELOW the main
   nav (nav = 200) so the real site navbar stays visible and clickable on top of
   it — matching every other page. .fv-actor-inner gets a dynamic padding-top
   (set in JS = navbar height) so content never hides behind the navbar. */
#fv-actor-page{position:fixed;inset:0;z-index:150;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg,#0a0a0c)}
.fv-actor-inner{padding:1.5rem var(--page-pad,3rem) 4rem;min-height:100%}
body.fv-actor-open{overflow:hidden}
.fv-actor-head{margin-bottom:1.4rem}
.fv-actor-back{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text,#f4f4f6);padding:.4rem .9rem;border-radius:20px;cursor:pointer;font-family:"DM Sans",sans-serif;font-size:.85rem;transition:.2s}
.fv-actor-back:hover{border-color:rgba(232,184,75,.45);color:#e8b84b}
.fv-actor-hero{display:flex;align-items:center;gap:1.6rem;margin-bottom:2.4rem}
.fv-actor-avatar{width:108px;height:108px;border-radius:50%;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.5);flex-shrink:0;border:2px solid rgba(232,184,75,.3)}
.fv-actor-avatar-fallback{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8b84b,#e05c3a);overflow:hidden;box-shadow:inset 0 -10px 26px rgba(0,0,0,.18)}
.fv-actor-avatar-fallback svg{width:88%;height:88%;display:block;margin-top:8%}
.fv-actor-kicker{font-family:"Bebas Neue",sans-serif;letter-spacing:2px;font-size:.85rem;color:#e8b84b;margin-bottom:.2rem}
.fv-actor-name{font-family:"Bebas Neue",sans-serif;font-size:2.6rem;line-height:1;letter-spacing:1px;color:var(--text,#f4f4f6)}
.fv-actor-count{color:var(--muted,#8a8a96);font-size:.9rem;margin-top:.5rem}
.fv-actor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.4rem}
.fv-actor-card{cursor:pointer;outline:none}
.fv-actor-card-poster{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#1c1c24;box-shadow:0 8px 22px rgba(0,0,0,.45);transition:transform .25s ease,box-shadow .25s ease}
.fv-actor-card-poster img{width:100%;height:100%;object-fit:cover}
.fv-actor-card:hover .fv-actor-card-poster,.fv-actor-card:focus-visible .fv-actor-card-poster{transform:translateY(-5px);box-shadow:0 16px 36px rgba(232,184,75,.2),0 0 0 1px rgba(232,184,75,.3)}
.fv-actor-card-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:#e8b84b;font-family:"Bebas Neue",sans-serif;font-size:.62rem;letter-spacing:1px;padding:.15rem .45rem;border-radius:4px}
.fv-actor-card-title{font-size:.85rem;font-weight:600;margin-top:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text,#f4f4f6)}
.fv-actor-card-meta{font-size:.72rem;color:var(--muted,#8a8a96);margin-top:.1rem}
.fv-actor-empty{color:var(--muted,#8a8a96);text-align:center;padding:3rem 1rem;font-size:.95rem}
/* clickable cast cards */
.detail-cast-card{cursor:pointer;outline:none;transition:transform .18s ease}
.detail-cast-card:hover,.detail-cast-card:focus-visible{transform:translateY(-3px)}
@media(max-width:760px){
  .fv-actor-inner{padding:1.2rem 1rem 3rem}
  .fv-actor-avatar{width:80px;height:80px}
  .fv-actor-name{font-size:2rem}
  .fv-actor-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1rem}
}

/* ════════════════════════════════════════════════════════════════════════
   CAST & CREW admin panel — chips, progress, activity log
   ════════════════════════════════════════════════════════════════════════ */
.fv-cc-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0 .9rem}
.fv-cc-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:20px;background:var(--surface2,#1c1c24);border:1px solid rgba(255,255,255,.12);cursor:pointer;font-size:.82rem;color:var(--muted,#8a8a96);transition:all .18s ease;user-select:none}
.fv-cc-chip input{display:none}
.fv-cc-chip:hover{border-color:rgba(232,184,75,.4);color:var(--text,#f4f4f6)}
.fv-cc-chip.is-on{background:linear-gradient(135deg,rgba(232,184,75,.18),rgba(224,92,58,.14));border-color:rgba(232,184,75,.6);color:#e8b84b;font-weight:600}
.fv-cc-chip.is-on span::before{content:"✓ ";font-size:.75rem}
.fv-cc-overwrite{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;cursor:pointer;color:var(--muted,#8a8a96);margin-bottom:.4rem}
.fv-cc-track{height:8px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden}
.fv-cc-fill{height:100%;width:0;background:linear-gradient(90deg,#e8b84b,#e05c3a);border-radius:5px;transition:width .25s ease}
.fv-cc-progress-row{display:flex;justify-content:space-between;margin-top:.45rem;font-size:.78rem;color:var(--muted,#8a8a96)}
.fv-cc-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.7rem}
.fv-cc-danger{border-color:rgba(224,92,58,.45) !important;color:#e05c3a !important}
.fv-cc-danger:hover{background:rgba(224,92,58,.1) !important}
.fv-cc-log-head{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--muted,#8a8a96);text-transform:uppercase;letter-spacing:1px;margin-bottom:.4rem}
.fv-cc-log-clear{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--muted,#8a8a96);font-size:.72rem;padding:.2rem .55rem;border-radius:14px;cursor:pointer;transition:.18s}
.fv-cc-log-clear:hover{color:#e8b84b;border-color:rgba(232,184,75,.4)}
.fv-cc-log{max-height:240px;overflow-y:auto;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.5rem .75rem}
.fv-cc-log::-webkit-scrollbar{width:8px}
.fv-cc-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}

/* ── Cast & Crew — searchable title picker ───────────────────────────── */
.fv-cc-search{position:relative;max-width:480px}
.fv-cc-search-input{width:100%;padding:.6rem .85rem;border-radius:9px;background:var(--surface2,#1c1c24);color:var(--text,#f4f4f6);border:1px solid rgba(255,255,255,.15);font-size:.88rem;font-family:"DM Sans",sans-serif;transition:border-color .18s ease}
.fv-cc-search-input::placeholder{color:var(--muted,#8a8a96)}
.fv-cc-search-input:focus{outline:none;border-color:rgba(232,184,75,.6);box-shadow:0 0 0 3px rgba(232,184,75,.12)}
.fv-cc-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;max-height:320px;overflow-y:auto;background:#14141a;border:1px solid rgba(255,255,255,.14);border-radius:11px;box-shadow:0 16px 40px rgba(0,0,0,.55);padding:.35rem}
.fv-cc-search-results::-webkit-scrollbar{width:8px}
.fv-cc-search-results::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.fv-cc-search-item{display:flex;align-items:center;gap:.7rem;padding:.45rem .55rem;border-radius:8px;cursor:pointer;transition:background .15s ease;outline:none}
.fv-cc-search-item:hover,.fv-cc-search-item:focus-visible{background:rgba(232,184,75,.1)}
.fv-cc-search-item img,.fv-cc-search-noimg{width:34px;height:50px;border-radius:5px;object-fit:cover;flex-shrink:0;background:#26262f}
.fv-cc-search-meta{display:flex;flex-direction:column;min-width:0}
.fv-cc-search-meta .t{font-size:.85rem;font-weight:600;color:var(--text,#f4f4f6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-cc-search-meta .m{font-size:.74rem;color:var(--muted,#8a8a96);margin-top:.1rem}
.fv-cc-search-empty{padding:.8rem;color:var(--muted,#8a8a96);font-size:.84rem;text-align:center}