@import url('/css/motion-system.css?v=20261005.1');
@import url('/css/interaction-system.css?v=20260929.2');
@import url('/css/icon-system.css?v=20261001.2');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&family=Prompt:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#050505; --ink-2:#090a10; --ink-3:#11121a; --surface:#0e0f17;
  --surface-2:#161722; --panel:#0f1017; --panel-2:#171924; --text:#e2e8f0; --text-strong:#ffffff; --muted:#94a3b8;
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.18); --coral:#e50914; --coral-hover:#ff1e2b; --brand:#e50914; --brand-dark:#b20710;
  --amber:#f59e0b; --lime:#95ff50; --success:#10b981; --danger:#ef4444; --info:#3b82f6;

  /* Cinejoy-grade Glassmorphism & Elevation */
  --glass-bg:rgba(15,15,19,0.72);
  --glass-border:1px solid rgba(255,255,255,0.09);
  --glass-blur:blur(28px) saturate(180%);
  --glass-shadow:0 20px 50px rgba(0,0,0,0.55);

  --radius-xs:6px; --radius-sm:8px; --radius:14px; --radius-lg:18px; --radius-xl:26px; --radius-pill:9999px;
  --shadow:0 20px 60px rgba(0,0,0,.65);
  --sat:env(safe-area-inset-top, 0px); --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px); --sar:env(safe-area-inset-right, 0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;max-width:100vw;overflow-x:hidden;background:var(--ink);color:var(--text);font-family:'Kanit','Prompt','Inter',system-ui,sans-serif;line-height:1.55}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 75% -10%,rgba(229,9,20,.06),transparent 40%),radial-gradient(circle at 20% 100%,rgba(255,255,255,.02),transparent 50%);z-index:-1}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3{font-family:'Kanit','Prompt',sans-serif;font-weight:700;color:var(--text-strong);line-height:1.2;margin:0}
p{margin:0}
.container{width:min(1240px,calc(100% - 40px));margin-inline:auto}
.container-narrow{width:min(720px,calc(100% - 40px));margin-inline:auto}
.page{padding:42px 0 72px}
.page-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.page-head h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.02em}
.page-head p{color:var(--muted);margin-top:8px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.hidden{display:none!important}
.full{width:100%}

@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
.skeleton { background: linear-gradient(90deg, #1b1b22 25%, #272732 37%, #1b1b22 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--radius); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fadeScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes glowPulse { 0% { box-shadow: 0 0 0 0 rgba(229,9,20, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(229,9,20, 0); } 100% { box-shadow: 0 0 0 0 rgba(229,9,20, 0); } }
.fade-up { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fade-scale { animation: fadeScale 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #2e2e38; border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; }
.badge-brand { background: rgba(229, 9, 20, 0.14); color: #ff525d; border: 1px solid rgba(229, 9, 20, 0.35); }
@keyframes membershipRankPulse {
  0%,100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-1px); filter: brightness(1.18); }
}
@keyframes membershipRankShine {
  0% { transform: translateX(-160%); opacity: 0; }
  25% { opacity: .55; }
  55%,100% { transform: translateX(180%); opacity: 0; }
}
.membership-rank{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;line-height:1.25;letter-spacing:.03em;border:1px solid rgba(255,255,255,.12);white-space:nowrap;vertical-align:middle}
.membership-rank::after{content:'';position:absolute;z-index:-1;inset:-40% auto -40% -35%;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-160%);animation:membershipRankShine 4.5s ease-in-out infinite}
.membership-rank i{font-size:12px;animation:membershipRankPulse 2.6s ease-in-out infinite}
.membership-rank-member{color:#cbd5e1;background:linear-gradient(135deg,rgba(100,116,139,.18),rgba(51,65,85,.32));border-color:rgba(148,163,184,.28)}
.membership-rank-vip-member{color:#fde68a;background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(120,53,15,.38));border-color:rgba(251,191,36,.42)}
.membership-rank-vip-plus{color:#c4b5fd;background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(76,29,149,.42));border-color:rgba(167,139,250,.5)}
.membership-rank-vip-elite{color:#a5f3fc;background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(30,64,175,.4));border-color:rgba(103,232,249,.48);box-shadow:0 0 16px rgba(34,211,238,.08)}
.membership-rank-admin{color:#fca5a5;background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(127,29,29,.4));border-color:rgba(248,113,113,.42)}
@media (prefers-reduced-motion:reduce){.membership-rank::after,.membership-rank i{animation:none}}

.site-header{height:72px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(5,5,8,0.72);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);position:sticky;top:0;z-index:100;transition:all .25s ease}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:'Prompt','Kanit',sans-serif;font-weight:800;font-size:1.55rem;color:var(--coral);letter-spacing:-.03em;display:inline-flex;align-items:center;gap:7px}
.logo span{color:var(--text-strong)}

/* Cinejoy Pill Navigation Dock */
.nav-pill-dock{display:inline-flex;align-items:center;gap:5px;background:rgba(18,19,26,0.78);border:1px solid rgba(255,255,255,0.09);border-radius:var(--radius-pill);padding:4px 6px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 8px 30px rgba(0,0,0,0.45)}
.nav-pill-dock a,.nav-pill-dock button{font-size:.88rem;font-weight:500;color:rgba(255,255,255,0.72);background:transparent;border:0;padding:7px 16px;border-radius:var(--radius-pill);transition:all .18s ease;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.nav-pill-dock a:hover,.nav-pill-dock button:hover{color:#fff;background:rgba(255,255,255,0.08)}
.nav-pill-dock a.active,.nav-pill-dock button.active{color:#050505;background:#ffffff;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,0.25)}
.nav-pill-dock a.active i,.nav-pill-dock button.active i{color:#050505}

.nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav a,.nav button{font-size:.92rem;font-weight:500;color:#a1a1aa;background:none;border:0;padding:8px 14px;border-radius:var(--radius-pill);transition:.15s}
.nav a:hover,.nav a.active,.nav button:hover{color:var(--text-strong);background:rgba(255,255,255,.07)}
.header-actions{display:flex;align-items:center;gap:10px}
.user-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);padding:3px 12px 3px 5px;border-radius:999px;max-width:240px;text-decoration:none;backdrop-filter:blur(10px);transition:all .2s ease}
.user-pill:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2)}
.user-avatar{width:26px;height:26px;border-radius:50%;background:rgba(229,9,20,.18);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.user-meta{display:flex;flex-direction:column;line-height:1.2;overflow:hidden}
.user-meta strong{font-size:12.5px;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.user-meta small{font-size:11px;white-space:nowrap}
.mobile-nav, .mobile-bottom-nav{display:none}

/* --- Cinejoy Signature Pill & Glass Buttons --- */
.btn{border:1px solid transparent;border-radius:var(--radius);padding:10px 18px;font-family:'Prompt','Kanit',sans-serif;font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s ease;min-height:42px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(0.98)}

/* High-Contrast White Primary Pill Button (Cinejoy signature) */
.btn-pill-primary{background:#f2f2f2;color:#050505!important;border-radius:var(--radius-pill);padding:11px 26px;font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;box-shadow:0 4px 18px rgba(255,255,255,0.18);transition:all .2s cubic-bezier(0.16, 1, 0.3, 1);text-decoration:none}
.btn-pill-primary:hover{background:#ffffff;transform:translateY(-2px) scale(1.02);box-shadow:0 8px 26px rgba(255,255,255,0.32)}
.btn-pill-primary i{font-size:1.15rem;color:#050505}

/* Translucent Frosted Glass Pill Button */
.btn-pill-glass{background:var(--glass-bg);color:#ffffff;border:var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:var(--radius-pill);padding:10px 22px;font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease;box-shadow:0 4px 16px rgba(0,0,0,0.3);text-decoration:none}
.btn-pill-glass:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.25);transform:translateY(-1px)}

/* Circular Glass Action Button (+ / ⓘ / ⬇) */
.btn-circle-glass{width:44px;height:44px;border-radius:50%;background:var(--glass-bg);border:var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:#ffffff;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;transition:all .2s cubic-bezier(0.16, 1, 0.3, 1);box-shadow:0 4px 16px rgba(0,0,0,0.3);text-decoration:none}
.btn-circle-glass:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.32);transform:scale(1.08)}

.btn-primary{background:var(--brand);color:white;box-shadow:0 8px 24px rgba(229,9,20,.32);border-radius:var(--radius-pill)}
.btn-primary:hover{background:var(--brand-dark);box-shadow:0 10px 28px rgba(229,9,20,.45)}
.btn-secondary{background:transparent;border-color:var(--amber);color:var(--amber);border-radius:var(--radius-pill)}
.btn-ghost{background:rgba(255,255,255,.07);border-color:transparent;color:var(--text-strong);border-radius:var(--radius-pill)}
.btn-ghost:hover{background:rgba(255,255,255,.13)}
.btn-outline{background:transparent;border-color:var(--line);color:var(--text);border-radius:var(--radius-pill)}
.btn-outline:hover{border-color:var(--line-strong);background:rgba(255,255,255,.06);color:#fff}
.btn-danger{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#ff8585;border-radius:var(--radius-pill)}
.btn-danger:hover{background:rgba(239,68,68,.25)}
.btn-success{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:#6ee7b7;border-radius:var(--radius-pill)}
.btn-sm{min-height:34px;padding:6px 14px;font-size:.82rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.panel-pad{padding:26px}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:20px}
.section-title h2{font-size:clamp(1.45rem,2.4vw,2rem);font-weight:700}
.section-title p{color:var(--muted);font-size:.9rem}
.divider{height:1px;background:var(--line);margin:22px 0}

.field{display:grid;gap:8px;margin-bottom:16px}
.field label{font-size:.84rem;font-weight:500;color:#c5cfdb}
input,select{width:100%;min-height:44px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--text-strong);padding:10px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(229,9,20,.2)}
input::placeholder{color:#71717a}
input[type=file]{padding:9px}
.error{color:#f87171;font-size:.85rem;min-height:1.25em}
.form-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}

.hero{min-height:680px;position:relative;display:flex;align-items:center;border-bottom:1px solid var(--line);overflow:hidden}
.hero-media{position:absolute;inset:0;background:url('/assets/jsflix-hero.png') center/cover no-repeat}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(5,13,24,.97) 28%,rgba(5,13,24,.2) 72%,rgba(5,13,24,.18) 100%)}
.hero-content{position:relative;z-index:2;width:min(650px,58%);padding:72px 0}
.hero h1{font-size:clamp(3rem,6.4vw,6rem);letter-spacing:-.055em;line-height:1.04}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero-copy{font-size:1.08rem;color:#c8d0d9;max-width:560px;margin:24px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:18px;color:var(--muted);font-size:.82rem}
.landing-section{padding:72px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.service-rail{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start;margin-top:22px}
.service-copy{padding-top:12px}.service-mark{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:white;margin-bottom:14px}.service-copy p{font-size:.88rem;color:var(--muted);margin-top:8px}
.poster-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.poster-card{position:relative;aspect-ratio:2/3;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:.2s ease}
.poster-card:hover{transform:translateY(-5px);border-color:var(--amber)}
.poster-card img{width:100%;height:100%;object-fit:cover}
.poster-card::after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(2,7,12,.95))}
.poster-meta{position:absolute;z-index:2;left:14px;right:14px;bottom:14px}.poster-meta strong{display:block;color:white}.poster-meta small{color:#c8d0d9}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:34px}.step{position:relative;padding-top:18px;border-top:1px solid var(--line)}.step-num{color:var(--amber);font:600 2.3rem 'Noto Serif Thai',serif}.step h3{margin:6px 0}.step p{color:var(--muted);font-size:.9rem}
.plans-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.plan-preview{padding:26px;border:1px solid var(--line);border-radius:var(--radius);text-align:center}.plan-preview.featured{border-color:var(--amber);background:rgba(229,168,70,.05)}.plan-preview h3{font-size:1.8rem}.plan-preview strong{display:block;color:var(--coral);font-size:1.65rem;margin:10px 0}.plan-preview p{color:var(--muted);font-size:.85rem}
.footer{padding:38px 0;color:var(--muted);font-size:.85rem}.footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:center}

.login-page{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-art{position:relative;background:url('/assets/jsflix-hero.png') 65% center/cover}.login-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,13,24,.08),rgba(5,13,24,.86))}.login-art-copy{position:absolute;z-index:2;left:clamp(30px,6vw,84px);right:40px;bottom:70px}.login-art h1{font-size:clamp(2.6rem,5vw,5rem);max-width:650px}.login-shell{display:grid;place-items:center;padding:38px}.login-card{width:min(440px,100%)}.login-card .logo{display:inline-block;margin-bottom:52px}.login-card h2{font-size:2.2rem;margin-bottom:8px}.login-card>p{color:var(--muted);margin-bottom:28px}.back-link{display:inline-block;margin-top:20px;color:var(--amber);font-size:.88rem}

.member-strip{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.member-strip strong{font-size:.85rem}.member-strip small{display:block;color:var(--muted)}
.catalog-search{display:flex;align-items:center;gap:10px;max-width:520px;margin:0 0 22px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.catalog-search span{color:var(--muted);font-size:1.25rem}.catalog-search input{width:100%;padding:15px 0;border:0;outline:0;background:transparent;color:var(--text);font:inherit}.platform-logo{width:56px;height:56px;border-radius:14px;object-fit:cover;display:block;margin-bottom:10px;border:1px solid var(--line)}
.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.app-card{display:flex;align-items:center;gap:18px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:.18s}.app-card:hover{border-color:var(--coral);transform:translateY(-2px)}.app-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;color:white;font-size:1.25rem;font-weight:800;flex:0 0 auto;overflow:hidden}.app-icon img{width:100%;height:100%;object-fit:cover;display:block}.app-card p{color:var(--muted);font-size:.85rem}.app-card .arrow{margin-left:auto;color:var(--muted);font-size:1.5rem}
.search-box{display:flex;gap:10px;max-width:680px}.search-box input{margin:0}.search-box .btn{flex:0 0 auto}
.series-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:24px}.series-card{cursor:pointer}.series-card .poster-card{width:100%}.series-card h3{font-family:'Prompt',sans-serif;font-size:.92rem;margin:10px 2px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.series-card p{font-size:.76rem;color:var(--muted);margin-inline:2px}
.state{padding:54px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);margin-top:22px}.state strong{display:block;color:var(--text);font-size:1.05rem;margin-bottom:5px}.spinner{width:26px;height:26px;border:2px solid var(--line);border-top-color:var(--coral);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 14px}@keyframes spin{to{transform:rotate(360deg)}}
.chapter-list{display:grid;gap:8px}.chapter-row{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:14px;padding:15px 17px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.018);transition:.15s}.chapter-row:hover{border-color:var(--coral);background:rgba(240,68,68,.05)}.chapter-no{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--coral);font-weight:700}.chapter-row small{color:var(--muted)}
.player-layout{display:grid;grid-template-columns:minmax(280px,430px) minmax(260px,1fr);gap:26px;align-items:start}.video-frame{background:#000;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.video-frame video{width:100%;aspect-ratio:9/16;display:block;background:#000}.player-copy{padding:8px 0}.player-copy h1{font-size:2.3rem}.player-controls{display:flex;gap:10px;margin-top:24px}.episode-list{margin-top:26px;max-height:390px;overflow:auto}.episode-mini{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:.88rem}.episode-mini.active{color:var(--coral)}

.plans-layout{display:grid;grid-template-columns:1fr .86fr;gap:20px;align-items:start}.plan-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.plan-option{padding:18px 10px;text-align:center;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text)}.plan-option.selected{border-color:var(--amber);background:rgba(229,168,70,.08)}.plan-option strong{display:block;font:600 1.45rem 'Noto Serif Thai',serif}.plan-option span{color:var(--coral);font-weight:700}.upload-box{border:1px dashed var(--line-strong);border-radius:12px;padding:18px;margin:20px 0}.slip-preview{max-height:300px;margin:14px auto 0;border-radius:10px}.order-list{display:grid;gap:10px}.order-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 9px;font-size:.72rem;font-weight:600;border:1px solid}.status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.status-pending{color:var(--amber);border-color:rgba(229,168,70,.4);background:rgba(229,168,70,.08)}.status-active,.status-verified{color:#70d493;border-color:rgba(56,181,106,.4);background:rgba(56,181,106,.08)}.status-rejected,.status-disabled{color:#ff7777;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08)}.status-maintenance{color:#9eb7d2;border-color:var(--line-strong);background:rgba(148,163,184,.06)}

.admin-body{background:#07111d}.admin-shell{min-height:100vh;display:grid;grid-template-columns:230px 1fr}.admin-sidebar{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);padding:26px 16px;display:flex;flex-direction:column;background:#081421}.admin-brand{padding:0 10px 28px}.admin-menu{display:grid;gap:7px}.admin-menu button{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:#b6c1cc;padding:12px 14px;border-radius:9px;text-align:left}.admin-menu button.active{background:linear-gradient(90deg,#b92f31,#8f272b);color:white}.admin-menu button:hover{background-color:rgba(255,255,255,.04)}.admin-side-actions{margin-top:auto;display:grid;gap:8px}.admin-main{min-width:0;padding:30px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.admin-top h1{font-size:2rem}.stats-bar{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:18px}.stat{padding:17px;border-right:1px solid var(--line)}.stat:last-child{border-right:0}.stat strong{font-size:1.45rem;color:var(--text-strong);display:block}.stat span{font-size:.75rem;color:var(--muted)}.admin-section{display:none}.admin-section.active{display:block}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:17px}.admin-card h2{font-family:'Prompt',sans-serif;font-size:1.05rem;margin-bottom:15px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.filters{display:flex;gap:7px}.filter-btn{border:1px solid var(--line);color:#bac5d0;background:#0a1624;border-radius:7px;padding:7px 11px}.filter-btn.active{background:var(--coral);border-color:var(--coral);color:white}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px}table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:720px}th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}th{background:#101d2c;color:#b8c3ce;font-size:.74rem;font-weight:600;white-space:nowrap}tbody tr:hover{background:rgba(255,255,255,.018)}td.actions{display:flex;gap:6px;white-space:nowrap}.admin-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}.admin-form .field{margin:0}.admin-form .btn{margin-bottom:0}.empty-row td{text-align:center;padding:34px;color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:60;display:grid;place-items:center;padding:20px}
.modal-card{width:min(540px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-head h2{font-size:1.15rem;font-weight:700}
.modal-head button{background:none;border:0;color:var(--muted);font-size:1.5rem;padding:4px;cursor:pointer;border-radius:6px;transition:.15s}
.modal-head button:hover{color:#fff;background:rgba(255,255,255,.08)}
.modal img{max-height:62vh;margin:auto;border-radius:8px;border:1px solid var(--line)}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.toast-stack{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;min-width:240px;max-width:440px;padding:10px 18px;border-radius:999px;display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:500;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 38px rgba(0,0,0,.5);transition:opacity .25s ease,transform .25s ease}
.toast.success{background:rgba(6,78,59,.9);color:#ecfdf5;border:1px solid rgba(16,185,129,.4)}
.toast.error{background:rgba(127,29,29,.9);color:#fef2f2;border:1px solid rgba(239,68,68,.4)}
.toast i{animation:iconPopIn .32s cubic-bezier(.34,1.56,.64,1)}

/* --- Shared micro-animations -----------------------------------------------
   Small, purposeful motion on real interaction feedback (favorite, save,
   new-item badges) -- never on page-load or polling refreshes, so it keeps
   reading as a reaction rather than decoration. */
.heart-pop{display:inline-block;animation:heartPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes heartPop{0%{transform:scale(1)}30%{transform:scale(1.35)}55%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes iconPopIn{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.badge-pop{animation:badgePop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes badgePop{0%{transform:scale(1)}35%{transform:scale(1.3) rotate(-8deg)}60%{transform:scale(.95) rotate(6deg)}100%{transform:scale(1) rotate(0)}}

@media(max-width:1020px){.series-grid{grid-template-columns:repeat(4,1fr)}.stats-bar{grid-template-columns:repeat(3,1fr)}.stat:nth-child(3){border-right:0}.stat:nth-child(-n+3){border-bottom:1px solid var(--line)}.admin-grid{grid-template-columns:1fr}.admin-form{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.container,.container-narrow{width:min(100% - 28px,1180px)}.site-header{height:64px}.nav{display:none}.header-actions .member-strip{display:none}body.has-mobile-nav{padding-bottom:calc(82px + env(safe-area-inset-bottom, 0px))}.mobile-bottom-nav{display:flex;position:fixed;bottom:calc(8px + env(safe-area-inset-bottom, 0px));left:8px;right:8px;margin:0 auto;max-width:440px;width:auto;transform:none;height:60px;padding:4px 6px;background:rgba(14,15,22,0.85);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-pill);z-index:950;align-items:center;justify-content:space-around;box-shadow:0 16px 40px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.06)}.mobile-bottom-nav .nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:rgba(255,255,255,0.6);flex:1;min-width:0;height:48px;padding:3px 2px;border-radius:var(--radius-pill);transition:all .2s ease;-webkit-tap-highlight-color:transparent;background:none;border:none;font-family:inherit}.mobile-bottom-nav .nav-item i{font-size:1.25rem;line-height:1;margin-bottom:2px;transition:transform .2s ease,color .2s ease}.mobile-bottom-nav .nav-item span{font-size:.68rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mobile-bottom-nav .nav-item:active{transform:scale(.92)}.mobile-bottom-nav .nav-item.active{color:#fff;background:rgba(255,255,255,0.12)}.mobile-bottom-nav .nav-item.active i{color:var(--coral);transform:scale(1.1)}.mobile-bottom-nav .nav-item.active span{font-weight:700;color:#fff}.mobile-nav{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:40;background:rgba(8,20,33,.96);border:1px solid var(--line);border-radius:14px;padding:8px;justify-content:space-around;box-shadow:var(--shadow)}.mobile-nav a{font-size:.76rem;color:#b9c4cf;padding:7px}.hero{min-height:640px;align-items:end}.hero-media{background-position:62% center}.hero-media::after{background:linear-gradient(180deg,rgba(5,13,24,.1),rgba(5,13,24,.45) 35%,var(--ink) 78%)}.hero-content{width:100%;padding:310px 0 56px}.hero h1{font-size:3.2rem}.landing-section{padding:54px 0}.service-rail{grid-template-columns:1fr}.poster-rail{grid-template-columns:repeat(2,1fr)}.steps,.plans-preview{grid-template-columns:1fr}.footer-inner{align-items:flex-start;flex-direction:column}.login-page{grid-template-columns:1fr}.login-art{display:none}.login-shell{padding:28px 20px}.app-grid{grid-template-columns:1fr}.series-grid{grid-template-columns:repeat(2,1fr)}.page-head{align-items:flex-start;flex-direction:column}.search-box{width:100%}.player-layout,.plans-layout{grid-template-columns:1fr}.video-frame{width:min(100%,390px);margin:auto}.plan-picker{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.admin-shell{display:block}.admin-sidebar{position:sticky;z-index:35;top:0;height:auto;padding:12px 14px;display:flex;flex-direction:row;align-items:center;overflow:auto}.admin-brand{padding:0 16px 0 0}.admin-menu{display:flex}.admin-menu button{white-space:nowrap;padding:9px 11px}.admin-side-actions{display:none}.admin-main{padding:20px 14px 72px}.admin-top{align-items:flex-start}.stats-bar{grid-template-columns:repeat(2,1fr)}.stat,.stat:nth-child(3){border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.stat:nth-child(2n){border-right:0}.admin-form{grid-template-columns:1fr}.toast-stack{left:14px;right:14px}.toast{max-width:none;min-width:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* --- PWA install bar ------------------------------------------------------ */
/* Offered once, only after the visitor has opened the player. Sits above the
   mobile nav so it never covers it. */
.pwa-install-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(22, 22, 26, .97);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}

.pwa-install-bar.visible { transform: none; opacity: 1; }

.pwa-install-icon { border-radius: 9px; flex-shrink: 0; }
.pwa-install-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pwa-install-text strong { font-size: 14px; color: #fff; }
.pwa-install-text span { font-size: 12px; color: var(--text-dim); }

.pwa-install-close {
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 17px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* Any page with a bottom nav needs the bar lifted clear of it. Was checking
   for `.mobile-nav`, a class no page actually has (all of them render
   `.mobile-bottom-nav`), so this never matched and the install bar sat at
   the same bottom offset as the nav underneath it. The offset also clears
   the roulette button and chat launcher on pages that have them (independent
   modules that don't know about each other, so this picks a height tall
   enough to sit above the highest of the three rather than coordinate them). */
body.has-mobile-nav .pwa-install-bar { bottom: calc(200px + env(safe-area-inset-bottom)); }

@media (min-width: 720px) {
  .pwa-install-bar { left: auto; right: 20px; bottom: 20px; max-width: 400px; }
  /* The mobile stacking offset above must not leak into this desktop layout. */
  body.has-mobile-nav .pwa-install-bar { bottom: 20px; }
}

/* An author display rule outranks the UA [hidden] rule at equal specificity. */
.pwa-install-bar[hidden] { display: none !important; }