/* ============================================================
   PUWEB TV — styles.css (optimised)
   ============================================================ */

/* ── ROOT ── */
:root{
  --bg:#040407;--surface:#0a0a10;--surface2:#13131a;
  --border:rgba(255,255,255,.07);--border-g:rgba(255,255,255,.12);
  --accent:#4f8ef7;--accent2:#7c3aed;--gold:#f5c842;--green:#22c55e;
  --text:#f0f0f5;--muted:#6e6e88;--radius:14px;--nav-h:98px;
}

/* ── RESET + BASE ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-gutter:stable;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;overscroll-behavior-y:none;}

/* ── SCROLL TO TOP ── */
.scroll-top-btn{position:fixed;right:12px;bottom:24px;z-index:91;width:38px;height:38px;border-radius:50%;background:rgba(8,8,14,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-g);color:var(--muted);cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);transition:all .3s;pointer-events:none;}
.scroll-top-btn.visible{opacity:1;transform:translateY(0);pointer-events:all;}
.scroll-top-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ── TOAST ── */
.toast-container{position:fixed;top:78px;right:16px;z-index:600;display:flex;flex-direction:column;gap:7px;pointer-events:none;}
.toast{background:rgba(8,8,14,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-g);border-left:3px solid var(--accent);border-radius:12px;padding:11px 15px;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;box-shadow:0 8px 28px rgba(0,0,0,.55);animation:toastIn .3s cubic-bezier(.34,1.4,.64,1);max-width:240px;}
.toast.success{border-left-color:var(--green);}
.toast.warn{border-left-color:var(--gold);}
.toast.out{animation:toastOut .2s ease forwards;}

/* ── NAV — Liquid Glass ── */
nav{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(0) translateZ(0);z-index:200;height:66px;width:min(860px,calc(100vw - 32px));display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-radius:100px;background:transparent;backdrop-filter:blur(17px) saturate(300%);-webkit-backdrop-filter:blur(17px) saturate(300%);border:1px solid rgba(255,255,255,.10);border-top:1px solid rgba(255,255,255,.18);box-shadow:0 8px 32px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06) inset,0 -1px 0 rgba(0,0,0,.18) inset;transition:transform .45s cubic-bezier(.34,1.4,.64,1),opacity .35s ease,box-shadow .3s ease;will-change:transform,opacity;isolation:isolate;overflow:hidden;}
nav::before{content:'';position:absolute;inset:0;border-radius:100px;pointer-events:none;z-index:0;background:radial-gradient(ellipse 70% 40% at 50% -10%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.5) 40%,transparent 70%),linear-gradient(105deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.1) 25%,transparent 50%,rgba(255,255,255,.08) 100%);opacity:.05;filter:saturate(3);mix-blend-mode:screen;}
nav::after{content:'';position:absolute;inset:0;border-radius:100px;pointer-events:none;z-index:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.12),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(255,255,255,.08);}
nav.nav-hidden{transform:translateX(-50%) translateY(-90px);opacity:0;pointer-events:none;}
nav.nav-scrolled{box-shadow:0 16px 48px rgba(0,0,0,.6),0 1.5px 0 rgba(255,255,255,.11) inset,0 -1px 0 rgba(0,0,0,.35) inset;}
.logo{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;flex-shrink:0;}
.logo-icon{flex-shrink:0;filter:drop-shadow(0 3px 10px rgba(79,142,247,.5));transition:all .25s;}
.logo:hover .logo-icon{filter:drop-shadow(0 5px 18px rgba(124,58,237,.7));transform:scale(1.06);}
.logo-wordmark{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.5px;background:linear-gradient(140deg,#fff 20%,rgba(255,255,255,.7) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.logo-wordmark em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.nav-links{display:flex;gap:26px;align-items:center;}
.nav-link{color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;transition:color .2s;letter-spacing:.2px;position:relative;padding-bottom:2px;}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transition:transform .2s;}
.nav-link:hover{color:#fff;}
.nav-link.active{color:#fff;}
.nav-link.active::after{transform:scaleX(1);}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
/* hamburger permanently removed — nav uses .mobile-nav-dd instead */
.hamburger{display:none !important;}

/* ── SEARCH CAPSULE ── */
.search-wrap{display:flex;align-items:center;background:rgba(255,255,255,.04);backdrop-filter:blur(9px) saturate(5000%);-webkit-backdrop-filter:blur(9px) saturate(5000%);border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.28);border-radius:40px;padding:7px 14px;gap:7px;width:190px;transition:all .25s;position:relative;overflow:hidden;isolation:isolate;}
.search-wrap::before{content:'';position:absolute;inset:0;border-radius:40px;pointer-events:none;z-index:0;background:linear-gradient(115deg,hsla(0,100%,75%,.85) 0%,hsla(45,100%,70%,.85) 14%,hsla(90,100%,70%,.85) 28%,hsla(180,100%,70%,.85) 42%,hsla(220,100%,75%,.85) 57%,hsla(270,100%,75%,.85) 71%,hsla(320,100%,75%,.85) 85%,hsla(360,100%,75%,.85) 100%);opacity:.08;mix-blend-mode:screen;}
.search-wrap::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 40%,rgba(255,255,255,.9) 60%,transparent);border-radius:1px;pointer-events:none;z-index:1;}
.search-wrap:focus-within{border-color:rgba(79,142,247,.55);border-top-color:rgba(79,142,247,.8);width:260px;background:rgba(79,142,247,.06);box-shadow:0 0 0 3px rgba(79,142,247,.12);}
.search-wrap svg,.search-wrap input{position:relative;z-index:2;}
.search-wrap svg{opacity:.45;flex-shrink:0;}
.search-wrap:focus-within svg{opacity:.8;}
.search-wrap input{background:none;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit;width:100%;}
.search-wrap input::placeholder{color:var(--muted);}
.search-wrap.searching::after{content:'';width:11px;height:11px;border:1.5px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin .65s linear infinite;flex-shrink:0;}
.nav-search-icon{display:none;background:rgba(255,255,255,.06);border:1px solid var(--border-g);border-radius:50%;width:36px;height:36px;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all .2s;flex-shrink:0;}
.nav-search-icon:hover{color:#fff;border-color:rgba(255,255,255,.2);}

/* ── SEARCH DROPDOWN ── */
.search-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:370px;background:rgba(6,6,12,.92);backdrop-filter:blur(20px) saturate(200%);-webkit-backdrop-filter:blur(20px) saturate(200%);border:1px solid var(--border-g);border-radius:18px;overflow:hidden;overflow-y:auto;max-height:420px;box-shadow:0 24px 64px rgba(0,0,0,.7);z-index:999;display:none;animation:dropIn .2s cubic-bezier(.34,1.4,.64,1);scrollbar-width:none;}
.search-dropdown::-webkit-scrollbar{display:none;}
.search-dropdown.open{display:block;}
.search-suggestion{display:flex;align-items:center;gap:11px;padding:9px 15px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.04);min-height:58px;flex-shrink:0;}
.search-suggestion:hover{background:rgba(79,142,247,.1);}
.dropdown-label{display:block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:10px 15px 6px;}
.suggestion-thumb{width:34px;height:51px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--surface2);}
.suggestion-info{flex:1;min-width:0;}
.suggestion-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;color:var(--text);}
.suggestion-meta{font-size:11px;color:var(--muted);}
.suggestion-type{font-size:9px;font-weight:700;padding:3px 8px;border-radius:10px;flex-shrink:0;letter-spacing:.5px;text-transform:uppercase;background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.2);color:var(--accent);}
.suggestion-type.tv{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.2);color:var(--accent2);}
.dropdown-see-all{display:flex;align-items:center;gap:7px;padding:10px 15px;font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;border-top:1px solid rgba(255,255,255,.05);transition:background .15s;}
.dropdown-see-all:hover{background:rgba(79,142,247,.08);}

/* ── MOBILE NAV DROPDOWN ── */
.mobile-nav-dd{position:fixed;z-index:250;width:min(200px,calc(100vw - 16px));background:rgba(10,10,18,.55);backdrop-filter:blur(40px) saturate(220%);-webkit-backdrop-filter:blur(40px) saturate(220%) brightness(1.08);border:1px solid rgba(255,255,255,.13);border-top:1px solid rgba(255,255,255,.22);border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.45),0 1.5px 0 rgba(255,255,255,.09) inset;display:none;animation:dropIn .22s cubic-bezier(.34,1.4,.64,1);}
.mobile-nav-dd.open{display:block;}
.mobile-nav-link{padding:14px 22px;font-size:15px;font-weight:500;color:var(--muted);cursor:pointer;transition:color .2s,background .2s;border:none;background:none;font-family:inherit;text-align:left;width:100%;display:flex;align-items:center;gap:10px;}
.mobile-nav-link:hover{color:#fff;background:rgba(255,255,255,.04);}

/* ── MOBILE SEARCH OVERLAY ── */
.search-overlay{position:fixed;inset:0;z-index:500;background:rgba(4,4,8,.95);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:none;flex-direction:column;padding:var(--nav-h) 20px 20px;}
.search-overlay.open{display:flex;}
.search-overlay-bar{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid var(--border-g);border-radius:14px;padding:12px 16px;margin-top:20px;margin-bottom:16px;}
.search-overlay-bar svg{opacity:.5;flex-shrink:0;}
.search-overlay-input{background:none;border:none;outline:none;color:var(--text);font-size:16px;font-family:inherit;width:100%;}
.search-overlay-input::placeholder{color:var(--muted);}
.search-overlay-close{background:rgba(255,255,255,.07);border:1px solid var(--border-g);color:var(--muted);padding:6px 14px;border-radius:20px;font-family:inherit;font-size:13px;cursor:pointer;}
/* Grid: posters auto-fill on desktop, 2-col on mobile — see responsive */
.search-overlay-results{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;align-content:start;min-height:0;}

/* ── HERO ── */
#hero{position:relative;width:100%;height:100vh;display:flex;align-items:flex-end;padding-bottom:120px;padding-left:60px;overflow:hidden;}
#hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 20%;transition:background-image .9s ease;transform:scale(1.06);will-change:opacity;}
.hero-gradient{position:absolute;inset:0;background:linear-gradient(to right,rgba(4,4,7,.96) 0%,rgba(4,4,7,.5) 52%,transparent 100%),linear-gradient(to top,rgba(4,4,7,1) 0%,rgba(4,4,7,.3) 42%,transparent 72%),linear-gradient(to bottom,rgba(4,4,7,.55) 0%,transparent 25%);}
.hero-content{position:relative;z-index:2;max-width:580px;}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.28);border-radius:30px;padding:5px 13px;margin-bottom:18px;font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1px;text-transform:uppercase;backdrop-filter:blur(10px);}
.hero-badge::before{content:'●';font-size:8px;animation:pulse 2s infinite;}
.hero-title{font-family:'Syne',sans-serif;font-size:clamp(34px,5vw,62px);font-weight:800;line-height:1.04;letter-spacing:-2px;margin-bottom:16px;text-shadow:0 2px 30px rgba(0,0,0,.6);}
.hero-meta{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap;}
.hero-rating{display:flex;align-items:center;gap:4px;color:var(--gold);font-weight:700;font-size:14px;}
.hero-pill{font-size:12px;color:rgba(240,240,245,.65);background:rgba(255,255,255,.07);border-radius:30px;padding:3px 11px;border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(8px);}
.hero-overview{color:rgba(240,240,245,.65);font-size:15px;line-height:1.7;margin-bottom:28px;max-width:480px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap;}
.hero-dots{position:absolute;bottom:80px;right:60px;z-index:2;display:flex;gap:7px;align-items:center;}
.hero-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:all .3s;border:none;}
.hero-dot.active{background:var(--accent);width:20px;border-radius:4px;}

/* ── GLASS BUTTONS — shared base ── */
.btn-play,.btn-glass-play{position:relative;overflow:hidden;isolation:isolate;border-radius:50px;cursor:pointer;font-family:inherit;}
.btn-play::before,.btn-glass-play::before{content:'';position:absolute;top:1px;left:8%;right:8%;height:46%;background:linear-gradient(to bottom,rgba(255,255,255,.22),transparent);border-radius:50px 50px 0 0;pointer-events:none;}

.btn-play{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);backdrop-filter:blur(20px) saturate(280%);-webkit-backdrop-filter:blur(20px) saturate(280%);color:#fff;border:1px solid rgba(255,255,255,.22);border-top:1px solid rgba(255,255,255,.40);padding:13px 30px;font-size:15px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.14),0 8px 32px rgba(0,0,0,.28);transition:all .22s cubic-bezier(.34,1.4,.64,1);}
.btn-play::after{content:'';position:absolute;inset:0;border-radius:50px;background:linear-gradient(105deg,rgba(255,255,255,.18) 0%,transparent 45%,rgba(255,255,255,.06) 100%);pointer-events:none;}
.btn-play:hover{transform:translateY(-2px);background:rgba(79,142,247,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 40px rgba(79,142,247,.45);}
.btn-play:active{transform:scale(.96) !important;transition:transform .08s ease !important;}

.btn-info{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:50px;padding:13px 24px;font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s;}
.btn-info:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.28);}

.btn-glass-play{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);backdrop-filter:blur(22px) saturate(280%);-webkit-backdrop-filter:blur(22px) saturate(280%);border:1px solid rgba(255,255,255,.22);border-top:1px solid rgba(255,255,255,.42);padding:10px 22px;font-size:14px;font-weight:600;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.14),0 6px 24px rgba(0,0,0,.26);transition:all .2s cubic-bezier(.34,1.4,.64,1);text-shadow:0 1px 4px rgba(0,0,0,.4);}
.btn-glass-play::after{content:'';position:absolute;inset:0;border-radius:50px;background:linear-gradient(120deg,rgba(255,255,255,.14) 0%,transparent 50%);pointer-events:none;}
.btn-glass-play:hover{transform:translateY(-1px) scale(1.02);background:rgba(255,255,255,.20);border-top-color:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 10px 32px rgba(0,0,0,.35);}
.btn-glass-play:active{transform:scale(.96) !important;transition:transform .08s ease !important;}

.btn-glass-list{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);backdrop-filter:blur(16px) saturate(200%);-webkit-backdrop-filter:blur(16px) saturate(200%);border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.26);border-radius:50px;padding:10px 18px;font-size:14px;font-weight:500;color:rgba(255,255,255,.80);cursor:pointer;font-family:inherit;position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.10);transition:all .2s;}
.btn-glass-list::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);pointer-events:none;}
.btn-glass-list:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);border-top-color:rgba(255,255,255,.40);color:#fff;}
.btn-glass-list.in-list{border-color:rgba(79,142,247,.35);border-top-color:rgba(79,142,247,.55);color:var(--accent);background:rgba(79,142,247,.10);}
.btn-glass-list:active{transform:scale(.96) !important;transition:transform .08s ease !important;}

.btn-glass-share{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);border-radius:50px;padding:10px 18px;font-size:14px;font-weight:500;color:rgba(255,255,255,.85);cursor:pointer;font-family:inherit;transition:all .2s;}
.btn-glass-share:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.28);color:#fff;}

/* ── SECTIONS ── */
.section{padding:0 44px 48px;content-visibility:auto;contain-intrinsic-size:0 600px;}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.section-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:9px;}
.section-bar{display:inline-block;width:4px;height:16px;background:linear-gradient(to bottom,var(--accent),var(--accent2));border-radius:2px;flex-shrink:0;}
.see-all{font-size:12px;color:var(--accent);cursor:pointer;font-weight:600;opacity:.85;transition:opacity .2s;}
.see-all:hover{opacity:1;text-decoration:underline;}

/* ── CARDS ── */
.cards-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;}
.card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.4,.64,1),box-shadow .28s ease;background:rgba(10,10,18,.75);border:1px solid rgba(255,255,255,.07);box-shadow:0 4px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);aspect-ratio:2/3;contain:layout style;}
.card:hover{transform:scale(1.06) translateY(-5px);z-index:10;box-shadow:0 20px 56px rgba(0,0,0,.7),0 0 0 1px rgba(79,142,247,.35),inset 0 1px 0 rgba(255,255,255,.12);}
.card:active{transform:scale(1.02) translateY(-2px) !important;}
.card img{width:100%;height:100%;object-fit:cover;display:block;}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,4,7,.97) 0%,rgba(4,4,7,.25) 50%,transparent 78%);opacity:0;transition:opacity .3s;display:flex;flex-direction:column;justify-content:flex-end;padding:12px 11px;}
.card:hover .card-overlay{opacity:1;}
.card-title{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;line-height:1.2;margin-bottom:4px;}
.card-meta{font-size:11px;color:var(--muted);margin-bottom:9px;}
.card-play-btn{display:flex;align-items:center;justify-content:center;background:var(--accent);border-radius:50%;width:34px;height:34px;border:none;cursor:pointer;transition:transform .2s;box-shadow:0 4px 14px rgba(79,142,247,.45);}
.card-rating{position:absolute;top:9px;right:9px;background:rgba(4,4,7,.72);border-radius:6px;padding:3px 7px;font-size:11px;font-weight:700;color:var(--gold);backdrop-filter:blur(8px);display:flex;align-items:center;gap:3px;border:1px solid rgba(245,200,66,.15);}
.card-wl-btn{position:absolute;top:9px;left:9px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,color .2s;z-index:5;line-height:1;}
.card:hover .card-wl-btn{opacity:1;}
.card-wl-btn.in-list{color:var(--accent);border-color:rgba(79,142,247,.5);opacity:1;}
.card-shimmer{position:absolute;inset:0;overflow:hidden;}
.card-shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);animation:shimmer 1.6s ease-in-out infinite;}
.card.touch-hover .card-overlay,.card.touch-hover .card-wl-btn{opacity:1;}

/* ── CONTINUE WATCHING ── */
#continue-section{display:none;}
.continue-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.continue-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;aspect-ratio:16/9;background:var(--surface);transition:transform .3s cubic-bezier(.34,1.4,.64,1);}
.continue-card:hover{transform:scale(1.04) translateY(-4px);z-index:10;}
.continue-card img{width:100%;height:100%;object-fit:cover;display:block;}
.continue-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,4,7,.95) 0%,rgba(4,4,7,.15) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:13px 13px 14px;}
.continue-card-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.continue-card-meta{font-size:11px;color:var(--muted);margin-bottom:9px;}
.continue-play-row{display:flex;align-items:center;gap:9px;}
.continue-play-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;flex-shrink:0;box-shadow:0 4px 14px rgba(79,142,247,.4);transition:transform .2s;}
.continue-progress-bar{flex:1;height:2.5px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;}
.continue-progress-fill{height:100%;background:var(--accent);border-radius:2px;}
.continue-badge{position:absolute;top:9px;left:9px;background:rgba(79,142,247,.88);backdrop-filter:blur(8px);color:#fff;border-radius:6px;padding:3px 8px;font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;}

/* ── CATEGORY TABS ── */
.cat-tabs{display:flex;gap:6px;padding:18px 44px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.cat-tabs::-webkit-scrollbar{display:none;}
.cat-tab{flex-shrink:0;background:rgba(255,255,255,.04);border:1px solid var(--border-g);border-radius:30px;color:var(--muted);font-size:13px;font-weight:500;padding:6px 16px;cursor:pointer;font-family:inherit;transition:all .2s;}
.cat-tab:hover{color:#fff;border-color:rgba(255,255,255,.2);}
.cat-tab.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(79,142,247,.35);}
.cat-tab:active{transform:scale(.96) !important;transition:transform .08s ease !important;}

/* ── LOAD MORE ── */
.load-more-wrap{text-align:center;margin-top:18px;}
.load-more-btn{background:rgba(255,255,255,.04);border:1px solid var(--border-g);color:var(--muted);border-radius:30px;padding:9px 26px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s;}
.load-more-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(79,142,247,.06);}
.load-more-btn:disabled{opacity:.4;cursor:not-allowed;}
.load-more-btn:active{transform:scale(.96) !important;transition:transform .08s ease !important;}

/* ── SEARCH PAGE ── */
#search-page{display:none;padding:calc(var(--nav-h) + 40px) 44px 60px;}
.search-heading{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.7px;margin-bottom:18px;}
.search-heading em{color:var(--accent);font-style:normal;}
.search-filters{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center;}
.filter-sep{width:1px;height:26px;background:var(--border);}
.filter-chip,.sort-chip{background:rgba(255,255,255,.04);border:1px solid var(--border-g);color:var(--muted);border-radius:20px;padding:6px 13px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .18s;}
.filter-chip:hover,.sort-chip:hover{color:#fff;border-color:rgba(255,255,255,.2);}
.filter-chip.active,.sort-chip.active{background:rgba(79,142,247,.15);border-color:var(--accent);color:var(--accent);}

/* ── DETAIL MODAL ── */
.detail-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
.detail-overlay.open{opacity:1;pointer-events:all;}
.detail-box{width:min(92vw,780px);max-height:90vh;background:rgba(8,8,14,.82);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid var(--border-g);border-radius:22px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:scale(.93) translateY(18px);transition:transform .4s cubic-bezier(.34,1.4,.64,1);box-shadow:0 40px 100px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.1);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;}
.detail-box::-webkit-scrollbar{width:4px;}
.detail-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px;}
.detail-overlay.open .detail-box{transform:scale(1) translateY(0);}
/* overflow:visible so poster image can extend below hero */
.detail-hero{position:relative;width:100%;height:320px;overflow:visible;flex-shrink:0;border-radius:22px 22px 0 0;}
.detail-hero-img{position:absolute;inset:-5%;background-size:cover;background-position:center 15%;transition:transform 8s ease;filter:brightness(.9);}
.detail-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,14,1) 0%,rgba(8,8,14,.7) 28%,rgba(8,8,14,.1) 65%,transparent 100%),linear-gradient(to bottom,rgba(8,8,14,.45) 0%,transparent 30%),linear-gradient(155deg,rgba(255,255,255,.04) 0%,transparent 45%);}
.detail-hero-gloss{position:absolute;top:0;left:0;right:0;height:55%;background:linear-gradient(to bottom,rgba(255,255,255,.06) 0%,transparent 100%);pointer-events:none;}
.detail-close-btn{position:absolute;top:14px;right:14px;z-index:30;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.detail-close-btn:hover{background:rgba(239,68,68,.35);border-color:#ef4444;color:#fff;transform:scale(1.08);}
.detail-poster-wrap{position:absolute;bottom:-56px;left:28px;z-index:20;}
.detail-poster{width:105px;height:157px;border-radius:13px;object-fit:cover;border:2.5px solid rgba(255,255,255,.18);box-shadow:0 14px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.15);}
.detail-hero-text{position:absolute;bottom:18px;left:155px;right:20px;z-index:20;}
.detail-hero-title{font-family:'Syne',sans-serif;font-size:clamp(18px,3.5vw,28px);font-weight:800;letter-spacing:-.5px;line-height:1.1;text-shadow:0 2px 20px rgba(0,0,0,.8);margin-bottom:12px;}
.detail-glass-actions{display:flex;gap:9px;flex-wrap:wrap;}
.detail-body{padding:68px 28px 28px 28px;}
.detail-meta-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.detail-pill{font-size:11px;color:rgba(240,240,245,.62);background:rgba(255,255,255,.06);border-radius:20px;padding:3px 10px;border:1px solid rgba(255,255,255,.08);}
.detail-rating-pill{display:flex;align-items:center;gap:4px;color:var(--gold);font-size:12px;font-weight:700;background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.2);border-radius:20px;padding:3px 10px;}
.detail-desc-section{margin-bottom:22px;}
.detail-desc-text{font-size:14px;line-height:1.75;color:rgba(240,240,245,.7);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;transition:all .3s;}
.detail-desc-text.expanded{display:block;-webkit-line-clamp:unset;}
.detail-view-more{background:none;border:none;color:var(--accent);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 0 0;display:flex;align-items:center;gap:4px;transition:opacity .2s;}
.detail-view-more:hover{opacity:.75;}
.detail-view-more-icon{transition:transform .3s;display:inline-block;}
.detail-view-more.expanded .detail-view-more-icon{transform:rotate(180deg);}
.detail-section{margin-bottom:24px;}
.detail-section-label{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.detail-section-label::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06);}
.cast-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.cast-scroll::-webkit-scrollbar{display:none;}
.cast-chip{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;width:62px;cursor:pointer;transition:transform .2s;}
.cast-chip:hover{transform:translateY(-3px);}
.cast-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;background:var(--surface2);border:2px solid rgba(255,255,255,.1);}
.cast-name{font-size:10px;color:rgba(240,240,245,.7);text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cast-char{font-size:9px;color:var(--muted);text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.recs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:11px;}
.rec-card{position:relative;border-radius:11px;overflow:hidden;cursor:pointer;aspect-ratio:2/3;background:var(--surface);transition:transform .25s;flex-shrink:0;}
.rec-card:hover{transform:scale(1.05);box-shadow:0 12px 36px rgba(0,0,0,.6);}
.rec-card img{width:100%;height:100%;object-fit:cover;display:block;}
.rec-card-info{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,4,7,.95) 0%,transparent 55%);opacity:0;transition:opacity .25s;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 9px;}
.rec-card:hover .rec-card-info{opacity:1;}
.rec-card-title{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;line-height:1.2;margin-bottom:3px;}
.rec-card-meta{font-size:10px;color:var(--muted);}
.rec-card-rating{position:absolute;top:7px;right:7px;background:rgba(4,4,7,.72);border-radius:5px;padding:2px 6px;font-size:10px;font-weight:700;color:var(--gold);backdrop-filter:blur(8px);}
.trailer-wrap{max-width:100%;border-radius:13px;overflow:hidden;aspect-ratio:16/9;margin-bottom:4px;cursor:pointer;position:relative;background:var(--surface2);}
.trailer-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.trailer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;transition:background .2s;}
.trailer-wrap:hover .trailer-overlay{background:rgba(0,0,0,.22);}
.trailer-play{width:54px;height:54px;border-radius:50%;background:rgba(79,142,247,.88);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.3);box-shadow:0 8px 28px rgba(79,142,247,.5);}
.trailer-wrap iframe{width:100%;height:100%;border:none;display:block;}
.resume-bar{display:flex;align-items:center;gap:9px;padding:8px 12px;background:rgba(79,142,247,.07);border:1px solid rgba(79,142,247,.15);border-radius:9px;margin-bottom:14px;font-size:12px;color:rgba(240,240,245,.7);}
.resume-bar-fill{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;}
.resume-bar-prog{height:100%;background:var(--accent);border-radius:2px;}
.resume-bar-label{font-size:11px;color:var(--accent);font-weight:600;flex-shrink:0;}

/* ── PLAYER MODAL ── */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-box{background:rgba(8,8,14,.9);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-radius:22px;border:1px solid var(--border-g);overflow:hidden;width:min(94vw,1140px);transform:scale(.93) translateY(14px);transition:transform .38s cubic-bezier(.34,1.4,.64,1);box-shadow:0 50px 120px rgba(0,0,0,.85);max-height:95vh;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.modal-box::-webkit-scrollbar{display:none;}
.modal-overlay.open .modal-box{transform:scale(1) translateY(0);}
.modal-player-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.modal-player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.player-loading{position:absolute;inset:0;background:rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:5;transition:opacity .4s;}
.player-loading.hidden{opacity:0;pointer-events:none;}
.player-loading-spinner{width:42px;height:42px;border:3px solid rgba(255,255,255,.07);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
.player-loading-text{font-size:13px;color:var(--muted);}
.modal-close-overlay{position:absolute;top:14px;right:14px;z-index:10;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.modal-close-overlay:hover{background:rgba(239,68,68,.35);border-color:#ef4444;color:#fff;transform:scale(1.08);}
:fullscreen .modal-close-overlay,:-webkit-full-screen .modal-close-overlay,:-moz-full-screen .modal-close-overlay{display:none !important;}

/* ── SERVER DROPDOWN ── */
.server-bar{display:flex;align-items:center;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(4,4,7,.55);gap:12px;}
.server-label{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);flex-shrink:0;display:flex;align-items:center;gap:6px;}
.server-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:pulse 2s infinite;}
.server-dropdown-wrap{position:relative;flex:1;}
.server-trigger{display:flex;align-items:center;gap:9px;width:100%;max-width:220px;padding:7px 11px;border-radius:50px;cursor:pointer;font-family:inherit;background:rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(280%);-webkit-backdrop-filter:blur(20px) saturate(280%);border:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.28);transition:all .22s cubic-bezier(.34,1.4,.64,1);position:relative;overflow:hidden;isolation:isolate;}
.server-trigger::before{content:'';position:absolute;top:1px;left:8%;right:8%;height:46%;background:linear-gradient(to bottom,rgba(255,255,255,.18),transparent);border-radius:50px 50px 0 0;pointer-events:none;}
.server-trigger:hover{background:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.48);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 28px rgba(0,0,0,.38);}
.server-trigger.open{border-color:rgba(79,142,247,.45);border-top-color:rgba(79,142,247,.72);background:rgba(79,142,247,.12);box-shadow:inset 0 1px 0 rgba(79,142,247,.28),0 0 0 3px rgba(79,142,247,.12),0 8px 28px rgba(0,0,0,.38);}
.srv-trig-icon{font-size:14px;flex-shrink:0;}
.srv-trig-name{font-size:12px;font-weight:700;color:rgba(240,240,245,.9);flex:1;}
.srv-trig-badge{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:20px;flex-shrink:0;}
.srv-trig-chevron{font-size:10px;color:var(--muted);flex-shrink:0;transition:transform .25s cubic-bezier(.34,1.4,.64,1);}
.server-trigger.open .srv-trig-chevron{transform:rotate(180deg);}
.server-menu{position:absolute;top:calc(100% + 9px);left:0;min-width:210px;z-index:50;border-radius:16px;overflow-x:hidden;overflow-y:auto;max-height:230px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.97);transition:opacity .22s ease,transform .28s cubic-bezier(.34,1.4,.64,1);background:rgba(8,8,16,.65);backdrop-filter:blur(20px) saturate(220%);-webkit-backdrop-filter:blur(20px) saturate(220%);border:1px solid rgba(255,255,255,.13);border-top:1px solid rgba(255,255,255,.24);box-shadow:0 24px 64px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.18);}
.server-menu::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 40%,rgba(255,255,255,.55) 60%,transparent);pointer-events:none;}
.server-menu.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1);}
.srv-menu-header{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);padding:11px 15px 7px;border-bottom:1px solid rgba(255,255,255,.06);}
.srv-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.04);}
.srv-item:last-child{border-bottom:none;}
.srv-item:hover{background:rgba(79,142,247,.08);}
.srv-item.active{background:rgba(79,142,247,.10);}
.srv-item-icon{font-size:16px;flex-shrink:0;}
.srv-item-info{flex:1;min-width:0;}
.srv-item-name{font-size:13px;font-weight:700;color:rgba(240,240,245,.92);margin-bottom:1px;}
.srv-item-sub{font-size:10px;color:var(--muted);line-height:1.3;}
.srv-item-badge{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:5px;flex-shrink:0;}
.srv-item-check{font-size:13px;color:var(--accent);opacity:0;flex-shrink:0;transition:opacity .18s;font-weight:800;}
.srv-item.active .srv-item-check{opacity:1;}
.badge-hd{background:rgba(34,197,94,.13);color:var(--green);border:1px solid rgba(34,197,94,.22);}
.badge-4k{background:rgba(79,142,247,.13);color:var(--accent);border:1px solid rgba(79,142,247,.25);}
.badge-new{background:rgba(245,200,66,.13);color:var(--gold);border:1px solid rgba(245,200,66,.22);}
.modal-info-panel{padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.05);}
.modal-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.4px;margin-bottom:8px;}
.modal-meta-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.modal-rating-badge{display:flex;align-items:center;gap:4px;color:var(--gold);font-size:11px;font-weight:700;background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.2);border-radius:16px;padding:3px 9px;}
.modal-meta-pill{font-size:11px;color:rgba(240,240,245,.6);background:rgba(255,255,255,.06);border-radius:16px;padding:3px 9px;border:1px solid rgba(255,255,255,.07);}
.modal-close{background:rgba(255,255,255,.06);border:1px solid var(--border-g);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s;color:var(--muted);font-size:15px;}
.modal-close:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#ef4444;transform:scale(1.08);}
.episodes-panel{padding:14px 22px 20px;}
.ep-section-label{font-size:10px;font-weight:700;margin-bottom:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;}
.season-select{background:rgba(255,255,255,.05);border:1px solid var(--border-g);color:var(--text);border-radius:9px;padding:7px 13px;font-family:inherit;font-size:13px;outline:none;cursor:pointer;margin-bottom:12px;display:block;}
.season-select:focus{border-color:var(--accent);}
.episodes-grid{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;padding-right:4px;}
.episodes-grid::-webkit-scrollbar{width:3px;}
.episodes-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
.ep-btn{display:flex;align-items:center;gap:10px;width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:rgba(240,240,245,.82);border-radius:10px;padding:9px 13px;font-size:13px;font-family:inherit;cursor:pointer;text-align:left;transition:all .15s;}
.ep-btn:hover:not(:disabled){border-color:var(--accent);background:rgba(79,142,247,.08);color:#fff;}
.ep-btn.active{background:rgba(79,142,247,.18);border-color:var(--accent);color:var(--accent);font-weight:700;}
.ep-btn.unaired{opacity:.38;cursor:not-allowed;}
.ep-btn.unaired:hover{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.04);color:rgba(240,240,245,.82);}
.ep-num{font-size:10px;font-weight:700;color:var(--muted);flex-shrink:0;min-width:28px;letter-spacing:.3px;}
.ep-btn.active .ep-num{color:var(--accent);}
.ep-name{flex:1;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── MY LIST ── */
#mylist-section{display:none;}

/* ── CONFIRM DIALOG ── */
.confirm-overlay{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.78);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .26s;}
.confirm-overlay.open{opacity:1;pointer-events:all;}
.confirm-box{width:min(88vw,340px);background:rgba(8,8,14,.88);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.22);border-radius:24px;padding:32px 26px 26px;text-align:center;box-shadow:0 40px 100px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.1);transform:scale(.92) translateY(16px);transition:transform .35s cubic-bezier(.34,1.4,.64,1);}
.confirm-overlay.open .confirm-box{transform:scale(1) translateY(0);}
.confirm-icon{font-size:36px;margin-bottom:13px;}
.confirm-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.4px;margin-bottom:7px;}
.confirm-sub{font-size:13px;color:rgba(240,240,245,.55);line-height:1.55;margin-bottom:24px;}
.confirm-btns{display:flex;gap:10px;justify-content:center;}
.confirm-cancel{display:flex;align-items:center;justify-content:center;padding:11px 26px;border-radius:50px;background:rgba(255,255,255,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.26);color:rgba(240,240,245,.8);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 18px rgba(0,0,0,.2);transition:all .2s cubic-bezier(.34,1.4,.64,1);}
.confirm-cancel::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);pointer-events:none;}
.confirm-cancel:hover{background:rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.4);color:#fff;transform:translateY(-1px) scale(1.02);}
.confirm-ok{display:flex;align-items:center;justify-content:center;padding:11px 26px;border-radius:50px;background:rgba(239,68,68,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(239,68,68,.35);border-top:1px solid rgba(239,68,68,.55);color:#f87171;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 18px rgba(239,68,68,.18);transition:all .2s cubic-bezier(.34,1.4,.64,1);}
.confirm-ok::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,100,100,.6),transparent);pointer-events:none;}
.confirm-ok:hover{background:rgba(239,68,68,.32);border-top-color:rgba(239,68,68,.75);color:#fff;transform:translateY(-1px) scale(1.02);box-shadow:0 8px 28px rgba(239,68,68,.35);}

/* ── FOOTER ── */
footer{text-align:center;padding:40px 36px 32px;color:var(--muted);font-size:13px;border-top:1px solid var(--border);}
footer strong{color:rgba(255,255,255,.45);font-weight:700;letter-spacing:1px;}
.footer-links{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 4px;}
.footer-links button{background:none;border:none;color:rgba(255,255,255,.28);font-family:inherit;font-size:11px;cursor:pointer;padding:3px 6px;border-radius:4px;transition:color .2s;}
.footer-links button:hover{color:rgba(255,255,255,.7);}
.footer-sep{color:rgba(255,255,255,.12);font-size:11px;}
.fpg-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);z-index:800;align-items:flex-end;justify-content:center;}
.fpg-overlay.open{display:flex;}
.fpg-box{background:#0e0e1a;border:1px solid rgba(255,255,255,.08);border-bottom:none;border-radius:20px 20px 0 0;width:100%;max-width:680px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;animation:fpg-up .3s cubic-bezier(.22,.68,0,1.2);}
.fpg-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.fpg-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;color:#fff;}
.fpg-close{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.fpg-close:hover{background:rgba(255,255,255,.12);color:#fff;}
.fpg-body{padding:24px;overflow-y:auto;flex:1;line-height:1.75;color:rgba(255,255,255,.6);font-size:14px;}
.fpg-body h3{font-family:'Syne',sans-serif;color:#fff;font-size:15px;margin:20px 0 8px;}
.fpg-body h3:first-child{margin-top:0;}
.fpg-body p{margin:0 0 12px;}
.contact-form{display:flex;flex-direction:column;gap:14px;}
.contact-form label{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:4px;display:block;}
.contact-form input,.contact-form textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;color:#fff;font-family:inherit;font-size:14px;outline:none;resize:none;transition:border-color .2s;box-sizing:border-box;}
.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(79,142,247,.5);}
.contact-submit{background:rgba(79,142,247,.15);border:1px solid rgba(79,142,247,.35);color:#4f8ef7;border-radius:10px;padding:12px;font-family:'Syne',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:4px;}
.contact-submit:hover{background:rgba(79,142,247,.25);}
.contact-submit:disabled{opacity:.5;cursor:not-allowed;}

/* ── AUTH MODAL ── */
.auth-overlay{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);}
.auth-overlay.open{opacity:1;pointer-events:all;}
.auth-box{position:relative;background:rgba(8,8,14,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-g);border-radius:22px;width:min(92vw,400px);padding:32px;transform:scale(.94) translateY(16px);transition:transform .35s cubic-bezier(.34,1.4,.64,1);box-shadow:0 40px 80px rgba(0,0,0,.8);}
.auth-overlay.open .auth-box{transform:scale(1) translateY(0);}
.auth-logo{text-align:center;font-family:'Syne',sans-serif;font-size:22px;font-weight:800;margin-bottom:22px;}
.auth-logo em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.auth-tabs{display:flex;background:rgba(255,255,255,.04);border-radius:12px;padding:4px;margin-bottom:22px;border:1px solid var(--border);}
.auth-tab{flex:1;padding:9px;border-radius:9px;border:none;background:none;color:var(--muted);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;}
.auth-tab.active{background:rgba(79,142,247,.15);color:var(--accent);border:1px solid rgba(79,142,247,.25);}
.auth-field{margin-bottom:13px;}
.auth-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;}
.auth-field input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border-g);border-radius:10px;padding:11px 14px;color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;}
.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,142,247,.1);}
.auth-submit{width:100%;padding:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:12px;color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;transition:opacity .2s;position:relative;overflow:hidden;}
.auth-submit::before{content:'';position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(to bottom,rgba(255,255,255,.15),transparent);pointer-events:none;}
.auth-submit:hover{opacity:.85;}
.auth-submit:disabled{opacity:.45;cursor:not-allowed;}
.auth-err{font-size:12px;color:#f87171;margin-top:10px;text-align:center;min-height:16px;transition:color .2s;}
.auth-err.ok{color:var(--green);}
.auth-close-btn{position:absolute;top:13px;right:13px;background:rgba(255,255,255,.07);border:1px solid var(--border-g);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:13px;transition:all .2s;}
.auth-close-btn:hover{background:rgba(239,68,68,.15);color:#ef4444;}

/* ── PROFILE AVATAR & DROPDOWN ── */
.profile-avatar-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border-g);background:rgba(255,255,255,.06);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--muted);transition:all .2s;flex-shrink:0;font-family:'Syne',sans-serif;position:relative;}
.profile-avatar-btn:hover{border-color:var(--accent);color:var(--accent);}
.profile-avatar-btn.signed-in{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;}
.profile-avatar-btn .online-dot{position:absolute;top:0;right:0;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--bg);display:none;}
.profile-avatar-btn.signed-in .online-dot{display:block;}
.profile-dd{position:fixed;z-index:250;width:min(240px,calc(100vw - 16px));background:rgba(10,10,18,.55);backdrop-filter:blur(20px) saturate(220%);-webkit-backdrop-filter:blur(20px) saturate(220%);border:1px solid rgba(255,255,255,.13);border-top:1px solid rgba(255,255,255,.22);border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.45),0 1.5px 0 rgba(255,255,255,.09) inset,0 -1px 0 rgba(0,0,0,.3) inset;display:none;animation:dropIn .22s cubic-bezier(.34,1.4,.64,1);}
.profile-dd.open{display:block;}
.profile-dd-head{padding:15px 16px 11px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);}
.profile-dd-name{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-dd-email{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-dd-item{display:flex;align-items:center;gap:10px;padding:11px 16px;width:100%;border:none;background:none;color:rgba(240,240,245,.8);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:background .15s;}
.profile-dd-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.profile-dd-sep{height:1px;background:rgba(255,255,255,.07);}
.profile-dd-item.dd-danger{color:#f87171;}
.profile-dd-item.dd-danger:hover{background:rgba(239,68,68,.08);}
.dd-premium-btn{background:rgba(245,200,66,.07);border:none;border-top:1px solid rgba(245,200,66,.15);border-bottom:1px solid rgba(245,200,66,.15);border-radius:0;margin:0;padding:11px 16px !important;color:#f5c842 !important;font-weight:600 !important;position:relative;overflow:hidden;width:100%;}
.dd-premium-btn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2.5px;background:linear-gradient(to bottom,#f5c842,#e8a000);pointer-events:none;}
.dd-premium-btn:hover{background:rgba(245,200,66,.14) !important;}
.nav-unread-dot{position:absolute;top:-3px;right:-3px;min-width:14px;height:14px;border-radius:7px;background:#ef4444;border:1.5px solid var(--bg);font-size:8px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 3px;pointer-events:none;}
.dd-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;border-radius:8px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;padding:0 4px;margin-left:auto;flex-shrink:0;}

/* ── PREMIUM SHEET ── */
.premium-overlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.82);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
.premium-overlay.open{opacity:1;pointer-events:all;}
.premium-sheet{width:min(100vw,520px);max-height:92vh;background:rgba(8,8,12,.95);border:1px solid rgba(245,200,66,.18);border-top:1px solid rgba(245,200,66,.35);border-radius:28px 28px 0 0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:env(safe-area-inset-bottom,16px);transform:translateY(60px);transition:transform .42s cubic-bezier(.34,1.4,.64,1);box-shadow:0 -24px 80px rgba(245,200,66,.1),0 -1px 0 rgba(245,200,66,.2) inset;}
.premium-sheet::-webkit-scrollbar{display:none;}
.premium-overlay.open .premium-sheet{transform:translateY(0);}
.prem-handle{width:38px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:12px auto 0;}
.prem-logo-row{text-align:center;padding:22px 24px 6px;position:relative;}
.prem-close{position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--muted);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.prem-close:hover{background:rgba(239,68,68,.15);color:#ef4444;}
.prem-logo-txt{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.5px;}
.prem-logo-txt em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.prem-logo-txt .prem-gold{background:linear-gradient(135deg,#f5c842,#e8a000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.prem-crown-big{font-size:34px;display:block;margin:10px auto 0;filter:drop-shadow(0 0 18px rgba(245,200,66,.7));animation:crownFloat 3s ease-in-out infinite;}
.prem-tagline{font-size:13px;color:rgba(240,240,245,.5);text-align:center;padding:6px 24px 0;line-height:1.5;}
.prem-features{padding:18px 20px 6px;display:flex;flex-direction:column;gap:10px;}
.prem-feat{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:14px 16px;animation:featSlideIn .5s cubic-bezier(.34,1.4,.64,1) both;}
.prem-feat:nth-child(1){animation-delay:.05s}.prem-feat:nth-child(2){animation-delay:.1s}.prem-feat:nth-child(3){animation-delay:.15s}.prem-feat:nth-child(4){animation-delay:.2s}.prem-feat:nth-child(5){animation-delay:.25s}.prem-feat:nth-child(6){animation-delay:.3s}
.prem-feat-icon{font-size:22px;flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(245,200,66,.4));width:40px;height:40px;background:linear-gradient(135deg,rgba(245,200,66,.12),rgba(232,160,0,.07));border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(245,200,66,.18);}
.prem-feat-info{flex:1;}
.prem-feat-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px;}
.prem-feat-sub{font-size:11px;color:rgba(240,240,245,.45);line-height:1.4;}
.prem-feat-gold{border-color:rgba(245,200,66,.2);background:rgba(245,200,66,.05);}
.prem-buy-wrap{padding:20px 20px 10px;}
.prem-buy-btn{width:100%;padding:16px;border-radius:50px;cursor:pointer;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.2px;background:linear-gradient(135deg,#f5c842 0%,#e8a000 50%,#f5c842 100%);background-size:200% 100%;border:1px solid rgba(255,255,255,.3);border-top:1px solid rgba(255,255,255,.5);color:#1a1200;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 32px rgba(245,200,66,.4);position:relative;overflow:hidden;isolation:isolate;transition:all .25s cubic-bezier(.34,1.4,.64,1);animation:goldShimmer 3s ease-in-out infinite;}
.prem-buy-btn::before{content:'';position:absolute;top:1px;left:8%;right:8%;height:45%;background:linear-gradient(to bottom,rgba(255,255,255,.38),transparent);border-radius:50px 50px 0 0;pointer-events:none;}
.prem-buy-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 44px rgba(245,200,66,.55);}
.prem-buy-btn:active{transform:scale(.96) !important;transition:transform .08s ease !important;}
.prem-note{text-align:center;font-size:11px;color:rgba(240,240,245,.3);padding:8px 24px 18px;line-height:1.5;}
.prem-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.prem-toggle-info{display:flex;flex-direction:column;gap:3px;}
.prem-toggle-title{font-size:14px;font-weight:600;color:rgba(255,255,255,.88);}
.prem-toggle-sub{font-size:12px;color:rgba(255,255,255,.35);}
.apple-toggle{position:relative;width:48px;height:28px;flex-shrink:0;}
.apple-toggle input{opacity:0;width:0;height:0;position:absolute;}
.apple-toggle-track{position:absolute;inset:0;background:rgba(255,255,255,.12);border-radius:14px;cursor:pointer;transition:background .28s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.1);}
.apple-toggle input:checked + .apple-toggle-track{background:linear-gradient(135deg,#f5c842,#e8a000);border-color:transparent;}
.apple-toggle-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none;transition:transform .28s cubic-bezier(.4,0,.2,1);}
.apple-toggle input:checked ~ .apple-toggle-thumb{transform:translateX(20px);}

/* ── AI ASSISTANT ── */
.ai-btn{display:none;align-items:center;gap:6px;background:rgba(255,255,255,.06);backdrop-filter:blur(16px) saturate(200%);-webkit-backdrop-filter:blur(16px) saturate(200%);border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.28);border-radius:50px;padding:7px 14px;font-size:13px;font-weight:600;color:rgba(255,255,255,.8);cursor:pointer;font-family:inherit;transition:all .22s;position:relative;overflow:hidden;isolation:isolate;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 18px rgba(0,0,0,.2);}
.ai-btn::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);pointer-events:none;}
.ai-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff;transform:translateY(-1px);}
.ai-btn.active{background:rgba(79,142,247,.15);border-color:rgba(79,142,247,.42);border-top-color:rgba(79,142,247,.65);color:var(--accent);}
.ai-btn-dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));animation:pulse 2s infinite;flex-shrink:0;box-shadow:0 0 7px rgba(79,142,247,.7);}
.ai-panel{position:fixed;top:94px;left:50%;transform:translateX(-50%) translateY(-14px);z-index:300;width:min(660px,calc(100vw - 32px));background:transparent;backdrop-filter:blur(17px) saturate(300%);-webkit-backdrop-filter:blur(17px) saturate(300%);border:1px solid rgba(255,255,255,.10);border-top:1px solid rgba(255,255,255,.18);border-radius:22px;box-shadow:0 8px 32px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06) inset,0 -1px 0 rgba(0,0,0,.18) inset;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .32s ease,transform .38s cubic-bezier(.34,1.4,.64,1);isolation:isolate;}
.ai-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.28) 25%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.28) 75%,transparent 100%);pointer-events:none;z-index:1;}
.ai-panel.open{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0);}
.ai-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);}
.ai-spark{font-size:20px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(79,142,247,.9)) drop-shadow(0 0 4px rgba(124,58,237,.6));line-height:1;}
.ai-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:15px;letter-spacing:-.1px;}
.ai-input::placeholder{color:var(--muted);}
.ai-send-btn{width:34px;height:34px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(79,142,247,.5),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s cubic-bezier(.34,1.4,.64,1),box-shadow .15s;position:relative;overflow:hidden;}
.ai-send-btn::before{content:'';position:absolute;top:1px;left:12%;right:12%;height:46%;background:linear-gradient(to bottom,rgba(255,255,255,.32),transparent);border-radius:50% 50% 0 0;pointer-events:none;}
.ai-send-btn:hover{transform:scale(1.06);box-shadow:0 4px 14px rgba(79,142,247,.6);}
.ai-send-btn:active{transform:scale(.94);}
.ai-send-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}
.ai-clear-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:4px 11px;font-size:10px;font-weight:600;color:rgba(255,255,255,.25);cursor:pointer;font-family:inherit;transition:all .2s;letter-spacing:.3px;flex-shrink:0;}
.ai-clear-btn:hover{color:rgba(239,68,68,.65);border-color:rgba(239,68,68,.22);background:rgba(239,68,68,.06);}
.ai-body{padding:10px 14px 14px;min-height:64px;max-height:380px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;}
.ai-body::-webkit-scrollbar{width:3px;}
.ai-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
.ai-user-bubble{align-self:flex-end;background:rgba(79,142,247,.2);border:1px solid rgba(79,142,247,.32);border-radius:16px 16px 4px 16px;padding:9px 13px;font-size:13.5px;color:#fff;max-width:86%;word-break:break-word;flex-shrink:0;animation:_bubbleIn .2s cubic-bezier(.34,1.4,.64,1);}
.ai-assistant-bubble{font-size:14px;line-height:1.7;color:rgba(240,240,245,.88);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:4px 16px 16px 16px;padding:10px 13px;max-width:92%;word-break:break-word;flex-shrink:0;animation:_bubbleIn .22s cubic-bezier(.34,1.4,.64,1);}
.ai-state{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;padding:6px 0;}
.ai-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.07);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}
.ai-picks-label{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:9px;}
.ai-picks-label::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.05);}
.ai-results{display:flex;gap:11px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;cursor:grab;flex-shrink:0;}
.ai-results:active{cursor:grabbing;}
.ai-results::-webkit-scrollbar{height:3px;}
.ai-results::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px;}
.ai-result-card{flex-shrink:0;width:120px;scroll-snap-align:start;cursor:pointer;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:transform .28s cubic-bezier(.34,1.4,.64,1),box-shadow .28s,border-color .2s;position:relative;animation:_cardPop .26s cubic-bezier(.34,1.4,.64,1) both;}
.ai-result-card:nth-child(2){animation-delay:.04s}.ai-result-card:nth-child(3){animation-delay:.08s}.ai-result-card:nth-child(4){animation-delay:.12s}.ai-result-card:nth-child(5){animation-delay:.16s}
.ai-result-card:hover{transform:scale(1.08) translateY(-4px);box-shadow:0 16px 44px rgba(0,0,0,.65),0 0 0 1px rgba(79,142,247,.35);border-color:rgba(79,142,247,.3);}
.ai-result-card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;}
.ai-result-info{padding:7px 7px 8px;}
.ai-result-title{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;line-height:1.25;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ai-result-reason{font-size:9.5px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ai-result-badge{position:absolute;top:6px;right:6px;background:rgba(4,4,7,.78);backdrop-filter:blur(8px);border-radius:5px;padding:2px 6px;font-size:9px;font-weight:700;color:var(--accent);border:1px solid rgba(79,142,247,.22);text-transform:uppercase;letter-spacing:.4px;}
.ai-empty{text-align:center;padding:18px 0 6px;color:rgba(240,240,245,.45);font-size:13px;line-height:1.7;}
.ai-sug-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;justify-content:center;}
.ai-sug-chip{background:rgba(79,142,247,.07);border:1px solid rgba(79,142,247,.18);border-radius:20px;padding:5px 13px;font-size:12px;color:rgba(240,240,245,.65);cursor:pointer;font-family:inherit;transition:all .18s;}
.ai-sug-chip:hover{background:rgba(79,142,247,.18);color:#fff;border-color:rgba(79,142,247,.38);}

/* ── BADGES ── */
.verified-badge,.premium-badge{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:4px;flex-shrink:0;vertical-align:middle;position:relative;}
.verified-badge svg,.premium-badge svg{display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));}
.verified-badge::after{content:'Verified';position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(8,8,14,.95);border:1px solid var(--border-g);color:#fff;font-size:11px;font-weight:600;font-family:'DM Sans',sans-serif;padding:4px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s;backdrop-filter:blur(12px);}
.verified-badge:hover::after{opacity:1;}
.premium-badge::after{content:'Premium Member';position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(8,8,14,.95);border:1px solid rgba(245,200,66,.3);color:#f5c842;font-size:11px;font-weight:600;font-family:'DM Sans',sans-serif;padding:4px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s;backdrop-filter:blur(12px);}
.premium-badge:hover::after{opacity:1;}

/* ── SOCIAL CHAT ── */
.social-panel{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:450;display:flex;flex-direction:column;background:rgba(5,5,10,.9);backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);will-change:transform;border-left:1px solid rgba(255,255,255,.1);box-shadow:-24px 0 80px rgba(0,0,0,.65),inset 1px 0 0 rgba(255,255,255,.06);transform:translateX(105%);transition:transform .38s cubic-bezier(.34,1.4,.64,1);pointer-events:none;overscroll-behavior:none;}
.social-panel.open{transform:translateX(0);pointer-events:all;}
#chat-conv-panel{width:100vw;left:0;border-left:none;}
.sp-header{display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;min-height:62px;background:rgba(4,4,8,.6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
.sp-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.3px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-icon-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:all .2s;font-family:inherit;}
.sp-icon-btn:hover{border-color:var(--accent);color:var(--accent);}
.sp-icon-btn.close-btn:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#ef4444;}
.sp-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent;overscroll-behavior:none;}
.sp-body::-webkit-scrollbar{width:3px;}
.sp-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px;}
.sp-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:28px;padding:9px 14px;margin-bottom:14px;transition:all .22s;}
.sp-search:focus-within{border-color:var(--accent);background:rgba(79,142,247,.06);box-shadow:0 0 0 3px rgba(79,142,247,.09);}
.sp-search svg{opacity:.4;flex-shrink:0;}
.sp-search input{background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:14px;width:100%;}
.sp-search input::placeholder{color:var(--muted);}
.soc-card{display:flex;align-items:center;gap:11px;padding:10px 13px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:13px;margin-bottom:8px;transition:background .15s;}
.soc-card:hover{background:rgba(255,255,255,.06);}
.soc-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:#fff;flex-shrink:0;}
.soc-info{flex:1;min-width:0;}
.soc-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;}
.soc-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.ub{flex-shrink:0;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s;background:rgba(255,255,255,.04);color:var(--muted);}
.ub.add{background:rgba(79,142,247,.14);border-color:var(--accent);color:var(--accent);}
.ub.add:hover{background:rgba(79,142,247,.28);}
.ub.pending{color:var(--gold);border-color:rgba(245,200,66,.3);background:rgba(245,200,66,.06);cursor:default;}
.ub.accept{background:rgba(34,197,94,.13);border-color:var(--green);color:var(--green);}
.ub.accept:hover{background:rgba(34,197,94,.26);}
.ub.friends{color:rgba(240,240,245,.35);border-color:rgba(255,255,255,.06);cursor:default;}
.notif-item{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:13px;margin-bottom:8px;}
.notif-item.unread{border-color:rgba(79,142,247,.2);background:rgba(79,142,247,.05);}
.notif-icon{width:36px;height:36px;border-radius:50%;background:rgba(79,142,247,.14);border:1px solid rgba(79,142,247,.22);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;margin-top:1px;}
.notif-txt{flex:1;font-size:13px;line-height:1.45;color:rgba(240,240,245,.85);}
.notif-name{font-weight:700;}
.notif-time-lbl{font-size:10px;color:var(--muted);margin-top:4px;}
.notif-btns{display:flex;gap:5px;margin-top:7px;}
.nb-yes{background:rgba(34,197,94,.13);border:1px solid var(--green);color:var(--green);border-radius:14px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s;}
.nb-yes:hover{background:rgba(34,197,94,.26);}
.nb-no{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);color:#ef4444;border-radius:14px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s;}
.nb-no:hover{background:rgba(239,68,68,.2);}
.conv-item{display:flex;align-items:center;gap:12px;padding:11px 13px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:13px;margin-bottom:8px;cursor:pointer;transition:background .15s;}
.conv-item:hover{background:rgba(255,255,255,.08);}
.conv-item.has-unread{border-color:rgba(79,142,247,.22);background:rgba(79,142,247,.05);}
.conv-av{position:relative;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:17px;font-weight:800;color:#fff;flex-shrink:0;}
.conv-unread-dot{position:absolute;top:0;right:0;width:12px;height:12px;border-radius:50%;background:#ef4444;border:2px solid var(--bg);}
.conv-info{flex:1;min-width:0;}
.conv-name{font-size:14px;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.conv-last{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.conv-time{font-size:10px;color:var(--muted);flex-shrink:0;}
.chat-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 20px;display:flex;flex-direction:column;gap:9px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent;overscroll-behavior:none;}
.chat-msgs::-webkit-scrollbar{width:3px;}
.chat-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);}
.chat-date-div{text-align:center;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.25);margin:4px 0;flex-shrink:0;}
.msg-row{display:flex;align-items:flex-end;gap:7px;max-width:80%;}
.msg-row.sent{align-self:flex-end;flex-direction:row-reverse;}
.msg-row.received{align-self:flex-start;}
.msg-mini-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;font-family:'Syne',sans-serif;color:#fff;flex-shrink:0;}
.msg-bubble{padding:9px 13px;border-radius:18px 18px 18px 4px;font-size:13.5px;line-height:1.55;word-break:break-word;background:rgba(255,255,255,.07);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 14px rgba(0,0,0,.22);}
.msg-row.sent .msg-bubble{border-radius:18px 18px 4px 18px;background:rgba(79,142,247,.2);border-color:rgba(79,142,247,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 3px 14px rgba(79,142,247,.18);}
.msg-ts{font-size:10px;color:rgba(255,255,255,.28);margin-top:4px;display:block;}
.msg-row.sent .msg-ts{text-align:right;}
.msg-gif-wrap{max-width:200px;border-radius:11px;overflow:hidden;display:block;}
.msg-gif-wrap img{width:100%;display:block;}
.msg-share-card{display:flex;gap:9px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:9px 10px;cursor:pointer;transition:background .15s;min-width:180px;max-width:250px;}
.msg-share-card:hover{background:rgba(79,142,247,.1);}
.msg-share-poster{width:38px;height:57px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--surface2);}
.msg-share-info{flex:1;min-width:0;}
.msg-share-type{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);margin-bottom:2px;}
.msg-share-title{font-size:12px;font-weight:700;line-height:1.2;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-share-year{font-size:10px;color:var(--muted);}
.msg-share-cta{font-size:10px;color:var(--accent);font-weight:700;margin-top:4px;}
.msg-ticks{display:inline-flex;align-items:center;gap:1px;margin-left:5px;vertical-align:middle;opacity:.55;}
.msg-ticks svg{display:block;}
.msg-ticks.read{opacity:1;color:var(--accent);}
.chat-input-area{flex-shrink:0;border-top:1px solid rgba(255,255,255,.07);background:rgba(4,4,8,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.chat-input-row{display:flex;align-items:flex-end;gap:8px;padding:10px 14px;}
.chat-input-wrap{flex:1;display:flex;align-items:flex-end;gap:7px;background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:9px 13px;transition:border-color .2s,box-shadow .2s;}
.chat-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,142,247,.09);}
.chat-txt{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:14px;resize:none;max-height:88px;line-height:1.4;overflow-y:auto;scrollbar-width:none;}
.chat-txt::placeholder{color:var(--muted);}
.gif-trig{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:3px 6px;font-size:10px;font-weight:800;font-family:'Syne',sans-serif;color:var(--muted);cursor:pointer;transition:all .18s;flex-shrink:0;letter-spacing:.3px;line-height:1.5;}
.gif-trig:hover,.gif-trig.active{color:var(--accent);border-color:var(--accent);}
.chat-send{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(79,142,247,.38);transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;}
.chat-send::before{content:'';position:absolute;top:0;left:0;right:0;height:48%;background:linear-gradient(to bottom,rgba(255,255,255,.18),transparent);border-radius:50% 50% 0 0;pointer-events:none;}
.chat-send:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(79,142,247,.5);}
.gif-picker{display:none;flex-direction:column;gap:7px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.07);background:rgba(4,4,8,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);max-height:215px;}
.gif-picker.open{display:flex;}
.gif-sbar{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:7px 11px;transition:border-color .2s;flex-shrink:0;}
.gif-sbar:focus-within{border-color:var(--accent);}
.gif-sbar svg{opacity:.4;flex-shrink:0;}
.gif-sbar input{background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:13px;width:100%;}
.gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;overflow-y:auto;flex:1;scrollbar-width:none;}
.gif-grid::-webkit-scrollbar{display:none;}
.gif-cell{border-radius:7px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--surface2);}
.gif-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s;}
.gif-cell:hover img{transform:scale(1.06);}
.share-overlay{position:fixed;inset:0;z-index:460;background:rgba(0,0,0,.78);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .26s;}
.share-overlay.open{opacity:1;pointer-events:all;}
.share-box{width:min(90vw,390px);background:rgba(7,7,13,.93);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.07);transform:scale(.93) translateY(14px);transition:transform .35s cubic-bezier(.34,1.4,.64,1);max-height:74vh;display:flex;flex-direction:column;}
.share-overlay.open .share-box{transform:scale(1) translateY(0);}
.share-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);}
.share-head-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:800;}
.share-movie-row{display:flex;gap:11px;align-items:center;padding:11px 16px;background:rgba(79,142,247,.05);border-bottom:1px solid rgba(255,255,255,.06);}
.share-poster-sm{width:34px;height:51px;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,.1);flex-shrink:0;}
.share-movie-title-txt{font-size:13px;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.share-movie-sub-txt{font-size:11px;color:var(--muted);}
.share-friends-scroll{overflow-y:auto;padding:10px 14px 14px;flex:1;}
.share-fr-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;cursor:pointer;transition:background .15s;}
.share-fr-row:hover{background:rgba(255,255,255,.06);}
.share-fr-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;}
.share-fr-name{flex:1;font-size:14px;font-weight:500;}
.share-fr-btn{background:rgba(79,142,247,.13);border:1px solid var(--accent);color:var(--accent);border-radius:14px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s;flex-shrink:0;}
.share-fr-btn:hover{background:rgba(79,142,247,.26);}
.sp-empty{text-align:center;padding:38px 16px;color:var(--muted);font-size:14px;line-height:1.65;}
.sp-loading{display:flex;align-items:center;justify-content:center;padding:36px;gap:10px;color:var(--muted);font-size:13px;}
.sp-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.07);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}

/* ── INNER PAGES ── */
.inner-page{display:none;padding:calc(var(--nav-h) + 38px) 44px 64px;min-height:100vh;}
.inner-page.active{display:block;}
.inner-pg-title{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.6px;margin-bottom:26px;display:flex;align-items:center;gap:12px;}
.pg-back-btn{background:rgba(255,255,255,.06);border:1px solid var(--border-g);border-radius:50%;width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;transition:all .2s;}
.pg-back-btn:hover{border-color:var(--accent);color:var(--accent);}
.profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:28px;}
.stat-card{background:rgba(255,255,255,.04);border:1px solid var(--border-g);border-radius:16px;padding:20px 16px;text-align:center;}
.stat-val{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:5px;}
.stat-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.9px;font-weight:700;}
.lb-empty{color:var(--muted);font-size:14px;padding:24px 0;}
.lb-item{display:flex;align-items:center;gap:13px;padding:13px 16px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;margin-bottom:9px;transition:background .15s;}
.lb-item:hover{background:rgba(255,255,255,.06);}
.lb-item.lb-me{border-color:rgba(79,142,247,.3);background:rgba(79,142,247,.06);}
.lb-rank{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;width:30px;text-align:center;flex-shrink:0;}
.lb-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:#fff;flex-shrink:0;}
.lb-info{flex:1;min-width:0;}
.lb-uname{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-wtime{font-size:11px;color:var(--muted);margin-top:2px;}
.lb-medal{font-size:18px;}
.settings-group{background:rgba(255,255,255,.03);border:1px solid var(--border-g);border-radius:16px;overflow:hidden;margin-bottom:16px;}
.settings-row{display:flex;align-items:center;gap:13px;padding:15px 18px;border-bottom:1px solid var(--border);transition:background .15s;}
.settings-row:last-child{border-bottom:none;}
.settings-row.clickable{cursor:pointer;}
.settings-row.clickable:hover{background:rgba(255,255,255,.04);}
.settings-icon{font-size:18px;flex-shrink:0;}
.settings-info{flex:1;}
.settings-title{font-size:14px;font-weight:600;}
.settings-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.settings-chevron{color:var(--muted);font-size:14px;}
.settings-input-field{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border-g);border-radius:10px;padding:10px 13px;color:var(--text);font-family:inherit;font-size:14px;outline:none;margin-top:10px;transition:border-color .2s;}
.settings-input-field:focus{border-color:var(--accent);}
.settings-save{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:10px;padding:9px 20px;color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-top:9px;display:block;transition:opacity .2s;}
.settings-save:hover{opacity:.85;}
.settings-row.danger-row .settings-title{color:#f87171;}

/* ── PROFILE SIDEBAR LAYOUT ── */
.inner-page#pg-profile-main{padding:calc(var(--nav-h) + 28px) 28px 56px;}
#pg-profile-main.active{display:flex !important;align-items:flex-start;gap:20px;}
.profile-sidebar{position:sticky;top:calc(var(--nav-h) + 18px);width:215px;flex-shrink:0;background:rgba(8,8,14,.50);backdrop-filter:blur(20px) saturate(240%);-webkit-backdrop-filter:blur(20px) saturate(240%);border:1px solid rgba(255,255,255,.10);border-top:1px solid rgba(255,255,255,.18);border-radius:26px;overflow:hidden;box-shadow:0 14px 48px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.20);padding:10px;isolation:isolate;}
.profile-sidebar::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);pointer-events:none;}
.psb-user-area{display:flex;flex-direction:column;align-items:center;padding:20px 14px 16px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:8px;}
.psb-av{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:#fff;margin-bottom:11px;flex-shrink:0;box-shadow:0 4px 20px rgba(79,142,247,.45),inset 0 1px 0 rgba(255,255,255,.28);}
.psb-user-txt{min-width:0;width:100%;text-align:center;}
.psb-uname{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;justify-content:center;}
.psb-uemail{font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.psb-tabs-row{display:flex;flex-direction:column;gap:2px;}
.psb-tab{display:flex;align-items:center;gap:9px;width:100%;padding:10px 13px;border-radius:14px;border:1px solid transparent;background:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:all .22s cubic-bezier(.34,1.4,.64,1);position:relative;overflow:hidden;isolation:isolate;}
.psb-tab:hover{background:rgba(255,255,255,.05);color:rgba(240,240,245,.88);border-color:rgba(255,255,255,.07);}
.psb-tab.active{background:rgba(79,142,247,.14);border-color:rgba(79,142,247,.22);border-top-color:rgba(79,142,247,.38);color:var(--accent);font-weight:700;box-shadow:inset 0 1px 0 rgba(79,142,247,.20),0 4px 14px rgba(79,142,247,.12);}
.psb-tab::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);pointer-events:none;opacity:0;transition:opacity .2s;}
.psb-tab.active::before{opacity:1;}
.psb-tab-icon{font-size:15px;flex-shrink:0;}
.psb-tab-label{flex:1;}
.psb-tab-count{font-size:10px;font-weight:700;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:2px 7px;color:var(--muted);flex-shrink:0;}
.psb-tab.active .psb-tab-count{background:rgba(79,142,247,.18);border-color:rgba(79,142,247,.28);color:var(--accent);}
.profile-content{flex:1;min-width:0;background:rgba(8,8,14,.40);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.14);border-radius:26px;padding:28px 28px 36px;box-shadow:0 10px 40px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.08);min-height:65vh;position:relative;isolation:isolate;}
.profile-content::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);pointer-events:none;}
.pc-title{font-family:'Syne',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.4px;margin-bottom:22px;display:flex;align-items:center;gap:9px;}
.pc-loading{display:flex;align-items:center;gap:10px;padding:36px 0;color:var(--muted);font-size:13px;}

/* ── DEVICES ── */
.dev-list{display:flex;flex-direction:column;gap:10px;padding:2px 0 6px;}
.dev-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255,255,255,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.13);border-radius:18px;transition:background .2s,transform .25s,opacity .25s;}
.dev-item:hover{background:rgba(255,255,255,.07);}
.dev-item.removing{opacity:0;transform:translateX(14px);}
.dev-icon{font-size:22px;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.18);border-radius:13px;}
.dev-info{flex:1;min-width:0;}
.dev-name{font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.dev-this-badge{font-size:9.5px;font-weight:700;color:var(--accent);background:rgba(79,142,247,.14);border:1px solid rgba(79,142,247,.3);border-radius:20px;padding:2px 9px;letter-spacing:.3px;}
.dev-meta{font-size:12px;color:rgba(255,255,255,.36);margin-top:3px;}
.dev-status{font-size:11px;color:rgba(255,255,255,.33);margin-top:5px;display:flex;align-items:center;gap:5px;}
.dev-status.dev-online{color:#4ade80;}
.dev-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 7px rgba(74,222,128,.75);flex-shrink:0;animation:dev-pulse 2s ease-in-out infinite;}
.dev-remove-btn{flex-shrink:0;padding:8px 16px;border-radius:20px;background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.22);color:#ef4444;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap;}
.dev-remove-btn:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.5);}
.dev-section-hdr{display:flex;align-items:center;justify-content:space-between;padding:4px 0 12px;}
.dev-section-count{font-size:11px;font-weight:600;color:rgba(255,255,255,.28);letter-spacing:.4px;}
.dev-empty{font-size:13px;color:rgba(255,255,255,.3);padding:12px 0 8px;}
.dev-load-row{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.35);font-size:13px;padding:12px 0;}

/* ── UTILITIES ── */
.no-results{grid-column:1/-1;text-align:center;color:var(--muted);padding:56px 0;font-size:15px;}
.fade-in{animation:fadeIn .4s ease forwards;}
button:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid rgba(79,142,247,.65);outline-offset:3px;border-radius:inherit;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:6px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* ── KEYFRAMES ── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(16px)}}
@keyframes dropIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes _bubbleIn{from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes _cardPop{from{opacity:0;transform:translateY(10px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes crownFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes goldShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes featSlideIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes fpg-up{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes dev-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media(max-width:860px){
  #pg-profile-main.active{flex-direction:column;padding:calc(var(--nav-h) + 14px) 12px 40px;}
  .profile-sidebar{position:static;width:100%;padding:10px;border-radius:20px;}
  .psb-user-area{flex-direction:row;gap:13px;padding:12px 10px;align-items:center;}
  .psb-av{width:44px;height:44px;font-size:18px;margin-bottom:0;}
  .psb-user-txt{text-align:left;}
  .psb-uname{justify-content:flex-start;}
  .psb-tabs-row{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;gap:4px;}
  .psb-tabs-row::-webkit-scrollbar{display:none;}
  .psb-tab{flex-shrink:0;white-space:nowrap;padding:8px 13px;}
  .profile-content{padding:20px 16px 26px;border-radius:20px;}
  .pc-title{font-size:17px;}
}

@media(max-width:768px){
  nav{padding:0 16px;}
  .nav-links{display:none;}
  .search-container{display:none;}
  .nav-search-icon{display:flex;}
  #hero{padding-left:20px;padding-bottom:100px;}
  .hero-dots{right:20px;bottom:70px;}
  .section{padding:0 16px 36px;}
  .cat-tabs{padding:14px 16px 4px;}
  .cards-row{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:11px;}
  .continue-row{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px;}
  #search-page{padding:calc(var(--nav-h) + 18px) 16px 56px;}
  .detail-overlay{align-items:flex-end;}
  .detail-box{width:100%;max-height:92vh;border-radius:20px 20px 0 0;transform:translateY(40px) scale(.98);}
  .detail-overlay.open .detail-box{transform:translateY(0) scale(1);}
  .detail-hero{height:230px;border-radius:20px 20px 0 0;}
  .detail-poster-wrap{left:18px;bottom:-48px;}
  .detail-poster{width:88px;height:132px;}
  .detail-hero-text{left:128px;bottom:14px;right:14px;}
  .detail-hero-title{font-size:18px;margin-bottom:10px;}
  .btn-glass-play{padding:9px 18px;font-size:13px;}
  .btn-glass-list{padding:9px 14px;font-size:13px;}
  .detail-body{padding:58px 18px 24px;}
  .server-bar{padding:9px 14px;}
  .episodes-panel{padding:10px 14px 16px;}
  .episodes-grid{max-height:200px;}
  .recs-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:9px;}
  .search-heading{font-size:20px;}
  .hero-title{font-size:clamp(28px,7vw,44px);}
  .inner-page{padding:calc(var(--nav-h) + 20px) 16px 56px;}
  .inner-pg-title{font-size:20px;}

  /* ── AI button: icon-only circle on mobile ── */
  .ai-btn{padding:0;width:36px;height:36px;border-radius:50%;gap:0;justify-content:center;}
  .ai-btn span:not(.ai-btn-dot){display:none;}
  .ai-panel{top:86px;}
  .ai-result-card{width:93px;}
  .ai-body{max-height:280px;}

  /* ── Search overlay: 2-col poster grid, no overlap ── */
  .search-overlay-results{grid-template-columns:repeat(2,1fr);gap:10px;grid-auto-rows:auto;}
  /* List-style suggestion rows always span both columns */
  .search-suggestion{grid-column:1 / -1;min-height:64px;padding:12px 15px;}
  .suggestion-thumb{width:38px;height:57px;}
}

@media(max-width:480px){
  .ai-panel{border-radius:0 0 22px 22px;top:82px;}
  .ai-body{max-height:240px;}
}

@media(max-width:380px){
  .detail-hero-text{left:116px;}
  .detail-poster{width:78px;height:117px;}
  .detail-hero-title{font-size:15px;}
  .btn-glass-play span{display:none;}
}

/* ============================================================
   ✦ POLISH LAYER — appended improvements (non-breaking)
   ============================================================ */

/* Ambient aurora background — adds depth behind content */
body::before{
  content:'';position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 15% 10%, rgba(79,142,247,.16), transparent 60%),
    radial-gradient(50% 40% at 90% 20%, rgba(124,58,237,.14), transparent 65%),
    radial-gradient(70% 50% at 50% 110%, rgba(79,142,247,.10), transparent 70%);
  filter:blur(40px) saturate(140%);
  animation:auroraDrift 28s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%  {transform:translate3d(0,0,0) scale(1);}
  50% {transform:translate3d(-2%,1%,0) scale(1.04);}
  100%{transform:translate3d(2%,-1%,0) scale(1.02);}
}

/* Selection */
::selection{background:rgba(79,142,247,.35);color:#fff;}
::-moz-selection{background:rgba(79,142,247,.35);color:#fff;}

/* Tap highlight */
html{-webkit-tap-highlight-color:transparent;}

/* Sleek scrollbars (desktop) */
@media (hover:hover){
  *::-webkit-scrollbar{width:10px;height:10px;}
  *::-webkit-scrollbar-track{background:transparent;}
  *::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,rgba(79,142,247,.35),rgba(124,58,237,.35));
    border-radius:10px;border:2px solid transparent;background-clip:padding-box;
  }
  *::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,rgba(79,142,247,.6),rgba(124,58,237,.6));
    background-clip:padding-box;border:2px solid transparent;
  }
  *{scrollbar-width:thin;scrollbar-color:rgba(124,58,237,.4) transparent;}
}

/* Accessible focus rings (only for keyboard nav) */
:focus{outline:none;}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:8px;
  transition:outline-offset .15s ease;
}
button:focus-visible, .card:focus-visible, .nav-link:focus-visible{
  box-shadow:0 0 0 3px rgba(79,142,247,.35);
}

/* Smoother card image fade-in as they load */
.card img, .continue-card img, .suggestion-thumb{
  transition:opacity .4s ease, transform .4s ease;
}
.card img[src=""], .continue-card img[src=""]{opacity:0;}

/* Subtle press feedback for all buttons */
button{ -webkit-user-select:none; user-select:none; }

/* Nicer hero title with subtle gradient sheen */
.hero-title{
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.78) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Card lift refinement — softer, more premium */
.card{ transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease; }
.card:hover{ border-color:rgba(79,142,247,.45); }

/* Loading shimmer — more elegant */
@keyframes shimmer{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}
.card-shimmer::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 50%,transparent);
  animation:shimmer 1.4s ease-in-out infinite;
}

/* Section titles get a soft glow on hover of section */
.section-title{transition:transform .3s ease;}
.section:hover .section-bar{box-shadow:0 0 16px rgba(79,142,247,.55);}

/* Improve link/clickable affordance on small chips */
.cat-tab, .filter-chip, .sort-chip{
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.cat-tab:active, .filter-chip:active, .sort-chip:active{transform:scale(.94);}

/* Better hero CTA glow */
.btn-play:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             0 14px 40px rgba(79,142,247,.45),
             0 0 60px rgba(124,58,237,.25);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  body::before{animation:none;}
}

/* Print — hide chrome */
@media print{
  nav, .scroll-top-btn, .ai-panel, .mobile-nav-dd, .toast-container, footer{display:none !important;}
  body{background:#fff;color:#000;}
}

/* ============================================================
   ✦ POLISH LAYER v2 — deeper visual upgrades
   ============================================================ */

/* Animated gradient border on hero CTA */
@keyframes ctaSheen{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}
.btn-play{
  background-image:
    linear-gradient(rgba(10,10,20,.4),rgba(10,10,20,.4)),
    linear-gradient(110deg,
      rgba(79,142,247,.55) 0%,
      rgba(124,58,237,.55) 25%,
      rgba(79,142,247,.55) 50%,
      rgba(124,58,237,.55) 75%,
      rgba(79,142,247,.55) 100%);
  background-size:100% 100%, 200% 100%;
  background-position:0 0, 0 50%;
  animation:ctaSheen 6s linear infinite;
}

/* Logo icon — gentle floating idle */
@keyframes logoFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-1.5px) rotate(-2deg);}
}
.logo-icon{animation:logoFloat 4s ease-in-out infinite;}

/* Card poster — gradient glow halo on hover */
.card{position:relative;}
.card::after{
  content:'';position:absolute;inset:-2px;border-radius:calc(var(--radius) + 2px);
  background:linear-gradient(135deg,rgba(79,142,247,.55),rgba(124,58,237,.55));
  opacity:0;z-index:-1;filter:blur(14px);transition:opacity .35s ease;
  pointer-events:none;
}
.card:hover::after{opacity:.7;}

/* Section reveal — fade up on first paint */
@keyframes sectionUp{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.section{animation:sectionUp .6s cubic-bezier(.22,1,.36,1) both;}
.section:nth-of-type(1){animation-delay:.05s;}
.section:nth-of-type(2){animation-delay:.12s;}
.section:nth-of-type(3){animation-delay:.18s;}
.section:nth-of-type(4){animation-delay:.24s;}
.section:nth-of-type(5){animation-delay:.30s;}

/* Hero pills get glass treatment */
.hero-pill{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

/* Cat tabs — subtle inner glow on active */
.cat-tab.active{
  box-shadow:inset 0 0 0 1px rgba(79,142,247,.45),
             0 4px 18px rgba(79,142,247,.25);
}

/* Avatar / profile button — pulsing online ring */
@keyframes onlinePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}
  50%{box-shadow:0 0 0 5px rgba(34,197,94,0);}
}
.online-dot{animation:onlinePulse 2.2s ease-out infinite;}

/* Search wrap — animated iridescent border on focus */
@keyframes irisSpin{
  0%{filter:hue-rotate(0deg);}
  100%{filter:hue-rotate(360deg);}
}
.search-wrap:focus-within::before{
  opacity:.18;
  animation:irisSpin 8s linear infinite;
}

/* Toast — subtle slide+blur in */
@keyframes toastIn{
  0%{opacity:0;transform:translateX(20px) scale(.95);filter:blur(6px);}
  100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0);}
}

/* Mobile tap micro-feedback */
@media (hover:none){
  .card:active{transform:scale(.97);}
  .nav-link:active, .cat-tab:active{opacity:.6;}
}

/* Scroll-to-top button: glow on visible */
.scroll-top-btn.visible{
  box-shadow:0 6px 24px rgba(79,142,247,.35),
             0 0 0 1px rgba(79,142,247,.25);
  color:var(--accent);
}

/* Detail modal close button — rotate on hover */
.detail-close-btn{transition:transform .25s ease, background .2s ease;}
.detail-close-btn:hover{transform:rotate(90deg) scale(1.08);}

/* Footer polish */
footer{
  background:linear-gradient(180deg,transparent,rgba(79,142,247,.04));
  border-top:1px solid rgba(255,255,255,.04);
}
.footer-links button{transition:color .2s ease, transform .2s ease;}
.footer-links button:hover{color:var(--accent);transform:translateY(-1px);}

/* Skeleton/placeholder cards keep subtle gradient */
.card:not(:has(img[src])){
  background:linear-gradient(135deg,rgba(20,20,30,.8),rgba(10,10,18,.9));
}

/* Better text rendering everywhere */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   ✦ MOBILE FIXES — z-index, hero clipping, scroll behavior
   ============================================================ */

/* 1. Detail modal must sit ABOVE the search overlay (was 400 vs 500) */
.detail-overlay{z-index:550 !important;}

/* 2. Info modal "top bar" bug — hero background image was leaking
      out above the rounded top corners because .detail-hero uses
      overflow:visible (so the poster can extend below) while the
      img had inset:-5%. Clip the visuals to the rounded top, the
      poster still escapes via its own absolute positioning. */
.detail-hero-img,
.detail-hero-overlay,
.detail-hero-gloss{
  inset:0 !important;
  border-radius:22px 22px 0 0;
}
@media(max-width:768px){
  .detail-hero-img,
  .detail-hero-overlay,
  .detail-hero-gloss{ border-radius:20px 20px 0 0; }
}

/* 3. Smoother / easier scrolling on mobile inside modals & panels.
      overscroll-behavior:none was hijacking momentum scroll on iOS;
      switch to "contain" and declare touch-action so the browser
      knows these regions accept vertical pan gestures. */
.detail-box,
.ai-body,
.chat-msgs,
.search-overlay-results,
.social-panel,
.episodes-grid{
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.chat-msgs,
.social-panel{
  overscroll-behavior-y:contain;
}

/* 4. Search overlay grid — make poster cards align cleanly on a
      tight 2-column mobile grid and never stretch row height. */
@media(max-width:768px){
  .search-overlay-results{
    grid-auto-rows:max-content;
    align-items:start;
    align-content:start;
  }
  .search-overlay-results .card{ height:auto; }
}

/* Hide the desktop gradient scrollbars on the inner mobile scroll
   areas — they were never meant for touch but the * selector leaked
   the styling on some browsers. */
@media (hover:none){
  .detail-box::-webkit-scrollbar,
  .ai-body::-webkit-scrollbar,
  .chat-msgs::-webkit-scrollbar,
  .search-overlay-results::-webkit-scrollbar,
  .social-panel::-webkit-scrollbar{ width:0; height:0; }
}