/* StreamWeb — iOS-style theme, mobile-first.
   iOS language: true black background, frosted glass, large
   titles, 20px+ rounded cards, springy motion, 44px+ tap
   targets, bottom tab bar on phones, bottom-sheet modals.
   Same class names as before; only the look changed. */
:root{
  --bg:#000; --bg2:#0a0a0e; --card:#1c1c1e; --card2:#2c2c2e; --card3:#3a3a3c;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.22);
  --txt:#fff; --mut:#98989f; --mut2:#6c6c70;
  --acc:#0a84ff; --acc2:#64d2ff; --grad:linear-gradient(135deg,#0a84ff,#64d2ff);
  --err:#ff453a; --ok:#30d158;
  --shadow:0 20px 50px rgba(0,0,0,.6); --shadow-sm:0 10px 28px rgba(0,0,0,.45);
  --r:20px; --r-lg:28px;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,1,.36,1);
}
/* ---------- Themes (body[data-theme]) — 8 total: 4 dark, 4 light.
   Default is "midnight" (the current look), so nothing changes
   unless the user picks a theme. Glass themes use translucent
   cards + backdrop blur; AMOLED is true black throughout. */
body[data-theme="midnight"]{--bg:#000;--bg2:#0a0a0e;--card:#1c1c1e;--card2:#2c2c2e;--card3:#3a3a3c;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.22);--txt:#fff;--mut:#98989f;--mut2:#6c6c70;--acc:#0a84ff;--acc2:#64d2ff;--grad:linear-gradient(135deg,#0a84ff,#64d2ff);--shadow:0 20px 50px rgba(0,0,0,.6);--shadow-sm:0 10px 28px rgba(0,0,0,.45);--topbar:rgba(0,0,0,.72);--tabsbg:rgba(255,255,255,.08);--scrim:rgba(0,0,0,.55);--glow:rgba(10,132,255,.28);--aurora-o:.5}
body[data-theme="amoled"]{--bg:#000;--bg2:#000;--card:#0d0d0d;--card2:#161616;--card3:#222;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.20);--txt:#fff;--mut:#a1a1aa;--mut2:#71717a;--acc:#38a1ff;--acc2:#7cc4ff;--grad:linear-gradient(135deg,#38a1ff,#7cc4ff);--shadow:0 20px 50px rgba(0,0,0,.8);--shadow-sm:0 10px 28px rgba(0,0,0,.7);--topbar:rgba(0,0,0,.85);--tabsbg:rgba(255,255,255,.07);--scrim:rgba(0,0,0,.65);--glow:rgba(56,161,255,.18);--aurora-o:.35}
body[data-theme="frosted-dark"]{--bg:#0d1120;--bg2:#111527;--card:rgba(255,255,255,.08);--card2:rgba(255,255,255,.12);--card3:rgba(255,255,255,.18);--line:rgba(255,255,255,.16);--line2:rgba(255,255,255,.30);--txt:#fff;--mut:#a7adc2;--mut2:#7c8296;--acc:#8b5cf6;--acc2:#22d3ee;--grad:linear-gradient(135deg,#8b5cf6,#ec4899,#22d3ee);--shadow:0 20px 50px rgba(0,0,0,.5);--shadow-sm:0 10px 28px rgba(0,0,0,.4);--topbar:rgba(13,17,32,.55);--tabsbg:rgba(255,255,255,.10);--scrim:rgba(5,8,18,.55);--glow:rgba(139,92,246,.30);--aurora-o:.65}
body[data-theme="liquid-dark"]{--bg:#07070b;--bg2:#0c0c12;--card:rgba(255,255,255,.10);--card2:rgba(255,255,255,.14);--card3:rgba(255,255,255,.20);--line:rgba(255,255,255,.18);--line2:rgba(255,255,255,.35);--txt:#fff;--mut:#a8a8b3;--mut2:#7a7a86;--acc:#ec4899;--acc2:#22d3ee;--grad:linear-gradient(135deg,#8b5cf6,#ec4899,#22d3ee);--shadow:0 20px 50px rgba(0,0,0,.55);--shadow-sm:0 10px 28px rgba(0,0,0,.45);--topbar:rgba(7,7,11,.5);--tabsbg:rgba(255,255,255,.12);--scrim:rgba(0,0,0,.5);--glow:rgba(236,72,153,.28);--aurora-o:.7}
body[data-theme="paper-light"]{--bg:#f5f5f7;--bg2:#fff;--card:#fff;--card2:#ececf1;--card3:#dcdce3;--line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.16);--txt:#111113;--mut:#6d6d72;--mut2:#8e8e93;--acc:#0a84ff;--acc2:#007aff;--grad:linear-gradient(135deg,#0a84ff,#64d2ff);--shadow:0 20px 50px rgba(0,0,0,.14);--shadow-sm:0 10px 28px rgba(0,0,0,.10);--topbar:rgba(255,255,255,.78);--tabsbg:rgba(0,0,0,.06);--scrim:rgba(0,0,0,.35);--glow:rgba(10,132,255,.14);--aurora-o:.28}
body[data-theme="frosted-light"]{--bg:#e9edf3;--bg2:#f4f7fb;--card:rgba(255,255,255,.60);--card2:rgba(255,255,255,.75);--card3:rgba(255,255,255,.90);--line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.16);--txt:#111827;--mut:#5b6472;--mut2:#8a94a6;--acc:#7c3aed;--acc2:#06b6d4;--grad:linear-gradient(135deg,#8b5cf6,#ec4899,#22d3ee);--shadow:0 20px 50px rgba(30,50,90,.16);--shadow-sm:0 10px 28px rgba(30,50,90,.12);--topbar:rgba(233,237,243,.55);--tabsbg:rgba(0,0,0,.05);--scrim:rgba(20,30,50,.30);--glow:rgba(139,92,246,.18);--aurora-o:.4}
body[data-theme="liquid-light"]{--bg:#eef1f8;--bg2:#f7f9fc;--card:rgba(255,255,255,.68);--card2:rgba(255,255,255,.80);--card3:#fff;--line:rgba(0,0,0,.10);--line2:rgba(0,0,0,.20);--txt:#0f172a;--mut:#5b6472;--mut2:#8a94a6;--acc:#ec4899;--acc2:#8b5cf6;--grad:linear-gradient(135deg,#8b5cf6,#ec4899,#22d3ee);--shadow:0 20px 50px rgba(30,50,90,.16);--shadow-sm:0 10px 28px rgba(30,50,90,.12);--topbar:rgba(238,241,248,.5);--tabsbg:rgba(0,0,0,.05);--scrim:rgba(15,23,42,.28);--glow:rgba(236,72,153,.16);--aurora-o:.45}
body[data-theme="sand-light"]{--bg:#faf6ee;--bg2:#fffdf7;--card:#fffdf7;--card2:#f3ecdc;--card3:#e8dcc2;--line:rgba(60,45,20,.10);--line2:rgba(60,45,20,.20);--txt:#1c1917;--mut:#78716c;--mut2:#a8a29e;--acc:#c2410c;--acc2:#d97706;--grad:linear-gradient(135deg,#d97706,#f59e0b);--shadow:0 20px 50px rgba(60,45,20,.14);--shadow-sm:0 10px 28px rgba(60,45,20,.10);--topbar:rgba(250,246,238,.78);--tabsbg:rgba(60,45,20,.06);--scrim:rgba(30,25,15,.35);--glow:rgba(217,119,6,.16);--aurora-o:.25}
/* Glass cards actually blur what is behind them */
body[data-theme="frosted-dark"] .modal-card,body[data-theme="frosted-light"] .modal-card,body[data-theme="frosted-dark"] .login-card,body[data-theme="frosted-light"] .login-card{backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8)}
body[data-theme="liquid-dark"] .modal-card,body[data-theme="liquid-dark"] .login-card{backdrop-filter:blur(28px) saturate(2);-webkit-backdrop-filter:blur(28px) saturate(2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--shadow)}
body[data-theme="liquid-light"] .modal-card,body[data-theme="liquid-light"] .login-card{backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--shadow)}
/* Theme picker */
.theme-list{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.8rem}
.theme-item{display:flex;flex-direction:column;gap:.5rem;text-align:left;background:var(--card2);border:2px solid transparent;color:var(--txt);border-radius:16px;padding:.7rem}
.theme-item.sel{border-color:var(--acc)}
.theme-sw{display:flex;height:40px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.theme-sw i{flex:1}
.theme-sw i:last-child{flex:1.4}
.theme-item .tn{font-weight:700;font-size:.92rem}
.theme-item .tm{color:var(--mut);font-size:.78rem}
*{box-sizing:border-box}
html{scrollbar-color:#2c2c2e transparent;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.015em}
a{color:var(--acc2);text-decoration:none}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:active{transform:scale(.95)}
input,select{font:inherit}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.hidden{display:none!important}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.btn{background:var(--card2);color:var(--txt);border:0;min-height:44px;
  padding:.65rem 1.1rem;border-radius:14px;font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;transition:transform .2s var(--spring),background .2s}
.btn:hover{background:var(--card3)}
.btn.primary{background:var(--acc);color:#fff;box-shadow:0 10px 28px rgba(10,132,255,.35)}
.btn.primary:hover{background:#2b93ff}
.btn.ghost{background:transparent;color:var(--acc)}
.btn.big{width:100%;min-height:52px;font-size:1.02rem;border-radius:16px}
.btn.danger{color:var(--err)}
.error{color:var(--err);min-height:1.2em;font-size:.9rem}
.hint{color:var(--mut);font-size:.86rem;line-height:1.55}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font-size:.85rem}
/* ---------- login ---------- */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:1rem;
  background:radial-gradient(50rem 26rem at 50% -10%,var(--glow,rgba(10,132,255,.28)),transparent 60%),var(--bg)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,5vw,2.2rem);width:min(420px,100%);box-shadow:var(--shadow);animation:popIn .45s var(--ease) both}
.logo{font-size:clamp(1.8rem,6vw,2.2rem);font-weight:800;letter-spacing:-.03em}
.logo.small{font-size:1.25rem}
.logo span,.login-card .logo{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-card label{display:block;margin:1.1rem 0;color:var(--mut);font-size:.9rem;font-weight:500}
.login-card input,.card input{width:100%;margin-top:.45rem;background:var(--card2);
  border:0;color:var(--txt);border-radius:12px;padding:.8rem 1rem;min-height:50px}
.login-card input:focus{outline:2px solid var(--acc)}
/* ---------- app shell: iOS segmented tabs on desktop ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
  padding:.65rem clamp(.9rem,4vw,1.5rem);padding-top:calc(.65rem + env(safe-area-inset-top));
  background:var(--topbar,rgba(0,0,0,.72));backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:0;background:var(--tabsbg,rgba(255,255,255,.08));border-radius:12px;padding:3px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;color:var(--mut);padding:.5rem .9rem;border-radius:9px;font-weight:600;white-space:nowrap;min-height:36px}
.tab.active{background:var(--card3);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.top-right{margin-left:auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
#searchInput{background:var(--card);border:0;color:var(--txt);
  border-radius:12px;padding:.65rem 1rem;width:min(280px,60vw);min-height:44px}
#searchInput:focus{outline:2px solid var(--acc)}
main{padding:0 clamp(.9rem,4vw,1.5rem) 3rem;max-width:1500px;margin:0 auto}
.hero{border-radius:var(--r-lg);overflow:hidden;margin:1rem 0;position:relative;
  min-height:clamp(240px,42vw,420px);background-size:cover;background-position:center 20%;
  display:flex;align-items:flex-end;box-shadow:var(--shadow);animation:fadeIn .5s var(--ease) both}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.96) 4%,rgba(0,0,0,.45) 45%,transparent 75%)}
.hero-inner{position:relative;padding:clamp(1.1rem,4vw,2rem);max-width:680px;animation:rise .55s var(--ease) both}
.hero-inner h1{margin:.25rem 0;font-size:clamp(1.9rem,6vw,3.2rem);line-height:1.02;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.row-block{margin:1.8rem 0;animation:rise .5s var(--ease) both}
.row-block h2{font-size:1.35rem;font-weight:700;margin:.4rem 0 .9rem;letter-spacing:-.02em}
.row{display:flex;gap:.9rem;overflow-x:auto;padding:.25rem .25rem 1rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;margin-top:1rem}
.poster-card{flex:0 0 148px;scroll-snap-align:start;background:none;border:0;text-align:left;color:var(--txt);padding:0;
  transition:transform .35s var(--spring);animation:rise .5s var(--ease) both}
.poster-card:hover{transform:translateY(-4px) scale(1.02)}
.poster-card:active{transform:scale(.94)}
.poster-card img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:18px;background:var(--card);
  box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.poster-card .t{font-size:.92rem;font-weight:600;margin-top:.55rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.poster-card .y{color:var(--mut);font-size:.8rem;margin-top:.15rem}
.poster-card .prog{height:5px;background:rgba(255,255,255,.15);border-radius:99px;margin-top:.45rem;overflow:hidden}
.poster-card .prog i{display:block;height:100%;background:var(--grad);border-radius:99px}
.empty{color:var(--mut);text-align:center;padding:3rem 0}
/* ---------- modals: centered pop on desktop, bottom sheet on phones ---------- */
.modal{position:fixed;inset:0;z-index:80;background:var(--scrim,rgba(0,0,0,.55));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:start center;overflow-y:auto;padding:clamp(.5rem,3vw,1.5rem);animation:fadeIn .25s ease both}
.modal-card{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);width:min(880px,100%);
  padding:clamp(1.1rem,4vw,1.7rem);margin:auto;box-shadow:var(--shadow);animation:popIn .4s var(--ease) both}
.modal-card.narrow{width:min(560px,100%)}
.modal-close{position:absolute;top:.8rem;right:.8rem;background:rgba(255,255,255,.14);border:0;
  color:var(--txt);border-radius:50%;width:40px;height:40px;z-index:2;font-size:1rem;display:grid;place-items:center}
.detail-head{display:flex;gap:1.25rem;flex-wrap:wrap}
.detail-head img{width:180px;aspect-ratio:2/3;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-sm)}
.meta-line{color:var(--mut);font-size:.9rem}
.desc{color:#e5e5ea;line-height:1.6}
.episodes{margin-top:1rem}
.ep{display:flex;gap:.85rem;width:100%;text-align:left;background:var(--card2);border:0;min-height:64px;
  color:var(--txt);border-radius:16px;padding:.75rem;margin:.5rem 0;transition:transform .2s var(--spring);align-items:center}
.ep:active{transform:scale(.97)}
.ep img{width:110px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;flex-shrink:0}
.stream-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem}
.stream-item{display:block;width:100%;text-align:left;background:var(--card2);border:0;min-height:64px;
  color:var(--txt);border-radius:16px;padding:.95rem;transition:transform .2s var(--spring)}
.stream-item:active{transform:scale(.97)}
.stream-item .sname{font-weight:650;white-space:pre-line;line-height:1.4}
.stream-item .smeta{color:var(--mut);font-size:.83rem;margin-top:.35rem}
.badge{display:inline-block;background:rgba(255,255,255,.14);border-radius:7px;padding:.15rem .55rem;font-size:.74rem;margin-right:.35rem}
/* ---------- external players ---------- */
.external-list{display:flex;flex-direction:column;gap:.6rem;margin:.8rem 0}
.external-list a{display:flex;justify-content:space-between;align-items:center;gap:.5rem;min-height:56px;
  background:var(--card2);border:0;color:var(--txt);text-decoration:none;
  border-radius:16px;padding:.9rem 1rem;transition:transform .2s var(--spring)}
.external-list a:active{transform:scale(.97)}
.external-list a.rec{background:rgba(10,132,255,.18);border:1px solid rgba(10,132,255,.5)}
.ext-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:rgba(44,44,46,.92);backdrop-filter:blur(12px);
  border:1px solid var(--line2);color:var(--txt);padding:.75rem 1.25rem;border-radius:999px;z-index:120;max-width:92vw;box-shadow:var(--shadow);
  text-align:center;font-weight:500}
/* ---------- iOS bottom tab bar (phones only, app only) ---------- */
.bottom-nav{display:none}
body.in-app .bottom-nav{display:none}
/* ---------- admin ---------- */
.admin-wrap{max-width:1100px;margin:0 auto;padding:clamp(.9rem,4vw,1.5rem)}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{text-align:left;padding:.65rem;border-bottom:1px solid var(--line);font-size:.92rem}
th{color:var(--mut);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1rem,3vw,1.4rem);margin:1rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card h3{margin-top:0}
.card input{width:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem}
.stat{background:var(--card2);border:0;border-radius:var(--r);padding:1rem}
.stat b{font-size:1.7rem;display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.key-box{background:rgba(48,209,88,.12);border:1px solid rgba(48,209,88,.45);border-radius:var(--r);
  padding:1rem;font-size:1.02rem;letter-spacing:.03em;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;word-break:break-all}
/* ---------- phones ---------- */
@media(max-width:720px){
  /* Top bar becomes slim: logo + user, search as its own iOS search bar row */
  .topbar{padding:.6rem .9rem}
  .tabs{display:none}
  .top-right{margin-left:0;width:100%;order:3}
  .top-right form{flex:1}
  #searchInput{width:100%;background:var(--card)}
  #userChip{display:none}
  main{padding:0 .9rem calc(6.5rem + env(safe-area-inset-bottom))}
  .hero{margin:.9rem 0;border-radius:22px;min-height:230px}
  .row-block{margin:1.4rem 0}
  .row-block h2{font-size:1.25rem}
  .row{gap:.75rem;margin:0 -.9rem;padding:.25rem .9rem 1rem}
  .grid{grid-template-columns:repeat(3,1fr);gap:.7rem}
  .poster-card{flex-basis:118px}
  .poster-card img{border-radius:14px}
  /* Bottom sheet modals with grabber */
  .modal{align-items:end;padding:0}
  .modal-card{border-radius:28px 28px 0 0;width:100%;max-height:92dvh;overflow-y:auto;margin:0;padding:1.3rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom));animation:sheetUp .45s cubic-bezier(.32,.72,0,1) both}
  .modal-card::before{content:"";display:block;width:40px;height:5px;border-radius:99px;background:rgba(255,255,255,.3);margin:0 auto .9rem}
  .modal-close{top:1.1rem}
  .detail-head img{width:118px}
  .ep img{width:88px}
  .toast{bottom:calc(5.8rem + env(safe-area-inset-bottom))}
  /* Bottom tab bar */
  body.in-app .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    background:rgba(20,20,22,.82);backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
    border-top:1px solid var(--line);justify-content:space-around}
  .bnav-btn{background:none;border:0;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:.65rem;font-weight:600;min-width:64px;min-height:48px;padding:.3rem 0}
  .bnav-btn .ico{font-size:1.35rem}
  .bnav-btn.active{color:var(--acc)}
  .bnav-btn:active{transform:scale(.92)}
  /* Admin on phones: full-width inputs, 2-col stats, scrollable tables */
  .stats{grid-template-columns:repeat(2,1fr)}
  .card input{width:100%;margin:.25rem 0}
  .admin-wrap{padding:.9rem}
}
@media(max-width:400px){
  .grid{grid-template-columns:repeat(3,1fr);gap:.6rem}
  .poster-card{flex-basis:104px}
  .poster-card .t{font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .poster-card:hover{transform:none}
}

/* ================= v3: gradients + visible motion ================= */
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes auroraMove{from{transform:translate(-6%,-4%) scale(1)}to{transform:translate(6%,5%) scale(1.15)}}
@keyframes heroGlow{from{opacity:.45}to{opacity:.85}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(236,72,153,.5)}70%{box-shadow:0 0 0 20px rgba(236,72,153,0)}100%{box-shadow:0 0 0 0 rgba(236,72,153,0)}}
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:var(--aurora-o,.5);filter:blur(80px);
  background:radial-gradient(38% 30% at 15% 10%,rgba(139,92,246,.55),transparent 70%),
             radial-gradient(35% 30% at 85% 20%,rgba(34,211,238,.4),transparent 70%),
             radial-gradient(40% 35% at 70% 90%,rgba(236,72,153,.38),transparent 70%),
             radial-gradient(30% 25% at 25% 85%,rgba(99,102,241,.4),transparent 70%);
  animation:auroraMove 26s ease-in-out infinite alternate}
#appView,.login-wrap,.admin-wrap{position:relative;z-index:1}
/* Logo */
.logo{display:flex;align-items:center;gap:.6rem}
.logo-mark{width:46px;height:46px;border-radius:13px;box-shadow:0 8px 24px rgba(139,92,246,.45);flex-shrink:0}
.logo-mark.small{width:30px;height:30px;border-radius:9px}
.logo span{background:linear-gradient(90deg,#c4b5fd,#f472b6,#22d3ee,#c4b5fd);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradShift 6s ease infinite}
/* Animated gradient primary buttons */
.btn.primary{background:linear-gradient(135deg,#7c5cff,#ec4899,#22d3ee,#7c5cff);background-size:250% 250%;
  animation:gradShift 7s ease infinite;box-shadow:0 12px 30px rgba(236,72,153,.35)}
.btn.primary:hover{background:linear-gradient(135deg,#7c5cff,#ec4899,#22d3ee,#7c5cff);background-size:250% 250%;filter:brightness(1.15)}
/* Hero: animated colour wash over the backdrop */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(124,92,246,.4),transparent 45%,rgba(34,211,238,.3));
  animation:heroGlow 9s ease-in-out infinite alternate}
/* Poster glow on hover/tap */
.poster-card img{transition:transform .45s var(--spring),box-shadow .35s}
.poster-card:hover img{transform:scale(1.05);box-shadow:0 0 0 2px rgba(236,72,153,.55),0 20px 44px rgba(124,92,246,.45)}
/* Section headers: gradient pill */
.row-block h2{display:flex;align-items:center;gap:.55rem}
.row-block h2::before{content:"";width:9px;height:24px;border-radius:99px;background:linear-gradient(#8b5cf6,#ec4899,#22d3ee);flex-shrink:0}
/* Bottom nav: gradient active state + indicator dot */
.bnav-btn svg{width:24px;height:24px}
.bnav-btn.active{color:#fff}
.bnav-btn.active svg{color:#f472b6}
.bnav-btn.active::after{content:"";width:5px;height:5px;border-radius:50%;background:linear-gradient(90deg,#8b5cf6,#ec4899,#22d3ee)}
/* Modal: gradient hairline on top */
.modal-card::after{content:"";position:absolute;top:0;left:28px;right:28px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,transparent,#8b5cf6,#ec4899,#22d3ee,transparent)}
/* Toast: gradient-tinted */
.toast{background:linear-gradient(135deg,rgba(44,44,46,.95),rgba(40,20,55,.95));border-color:rgba(139,92,246,.5)}
/* ================= loader + skeletons + polish ================= */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#000;transition:opacity .45s ease}
.loader.done{opacity:0;pointer-events:none}
.loader-card{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.loader-logo{width:84px;height:84px;border-radius:24px;box-shadow:0 16px 44px rgba(236,72,153,.45);animation:loaderPulse 1.6s ease-in-out infinite}
@keyframes loaderPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.loader-ring{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:#ec4899;border-right-color:#22d3ee;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-bar{width:180px;height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.loader-bar i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,#8b5cf6,#ec4899,#22d3ee);animation:barSlide 1.2s ease-in-out infinite}
@keyframes barSlide{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}
.loader-card p{color:var(--mut);font-weight:600;letter-spacing:.02em;margin:0}
.skeleton-row{display:flex;gap:.9rem;overflow:hidden;padding:.25rem 0 1rem}
.skeleton-card{flex:0 0 148px}
.skeleton-card .sk-img{aspect-ratio:2/3;border-radius:18px;background:linear-gradient(100deg,#1c1c1e 30%,#2c2c2e 50%,#1c1c1e 70%);background-size:200% 100%;animation:shimmer 1.4s ease infinite}
.skeleton-card .sk-line{height:12px;border-radius:6px;margin-top:.6rem;background:linear-gradient(100deg,#1c1c1e 30%,#2c2c2e 50%,#1c1c1e 70%);background-size:200% 100%;animation:shimmer 1.4s ease infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* Polish: gradient scrollbars, selection, hero/detail finish */
::selection{background:rgba(236,72,153,.55);color:#fff}
.row::-webkit-scrollbar{height:6px}
.row::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#8b5cf6,#ec4899,#22d3ee);border-radius:99px}
.hero{border:1px solid rgba(255,255,255,.14)}
.hero .btn.primary{margin-top:.4rem}
.detail-head h2,.modal-card h3{letter-spacing:-.02em}
.stream-item:hover{box-shadow:0 10px 28px rgba(124,92,246,.22)}
.topbar .logo{font-size:1.35rem}
/* Copy protection (user app only, not the admin dashboard):
   no text selection, no long-press callout / copy menu, no
   context menu, no image dragging — anywhere on the site.
   The one exception is the "Copy stream link" button, which
   copies via the Clipboard API on tap, not via selection, so
   it keeps working. Form fields are exempt so you can still
   type and paste your ID / key / search text.
   NOTE: these rules are on * (every element), not just
   body — iOS does not inherit -webkit-touch-callout, so a
   body-only rule left every paragraph long-pressable. */
*, *::before, *::after { -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; -webkit-user-drag: none; }
input, textarea, select { -webkit-touch-callout: default !important; -webkit-user-select: text !important; user-select: text !important; }
::selection { background: transparent; }
/* Search suggestions dropdown */
#searchForm{position:relative}
.search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
  background:var(--card);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow);
  max-height:62vh;overflow-y:auto;padding:.4rem;animation:popIn .25s var(--ease) both}
.suggest-item{display:flex;gap:.75rem;align-items:center;width:100%;text-align:left;
  background:none;border:0;color:var(--txt);border-radius:12px;padding:.55rem;min-height:56px}
.suggest-item:hover,.suggest-item:active{background:var(--card2)}
.suggest-item img{width:38px;aspect-ratio:2/3;object-fit:cover;border-radius:8px;background:var(--card2);flex-shrink:0}
.suggest-item .st{font-weight:600;font-size:.92rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.suggest-item .sy{color:var(--mut);font-size:.8rem}
.suggest-empty{color:var(--mut);font-size:.9rem;padding:.8rem;text-align:center}
/* Admin status dots (replaces coloured-emoji status) */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.dot.ok{background:#30d158;box-shadow:0 0 10px #30d158}
.dot.bad{background:#ff453a;box-shadow:0 0 10px #ff453a}