:root{
  --bg:#050706; --surface:#0b0f0c; --card:#0d120f; --card2:#111512; --hi:#272c28;
  --line:#1e2922; --line2:#205a2d; --green:#22ff3b; --green2:#16a34a; --on:#e8eee9;
  --muted:#9aa39c; --muted2:#b7bfb9; --input:#111512; --inputline:#263029; --chip:#0e1711;
  --navbg:#0b0f0c; --navind:#123f1a; --shadow:rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --bg:#f6f8f6; --surface:#ffffff; --card:#ffffff; --card2:#ffffff; --hi:#e6ebe6; --line:#d6ddd7; --line2:#9fd5a8;
  --green:#16b52a; --green2:#15803d; --on:#101410; --muted:#566058; --muted2:#4f5751; --input:#ffffff;
  --inputline:#d0d8d1; --chip:#ffffff; --navbg:#ffffff; --navind:#d9f5dd; --shadow:rgba(0,0,0,.15);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--on);font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;min-height:100%}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea{font-family:inherit;color:inherit}
.ic{display:inline-block;vertical-align:middle;flex:none}
#app{min-height:100vh;display:flex;flex-direction:column}
#view{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:12px 18px 150px}
#view.narrow{max-width:640px}
#view.full{max-width:none;padding:0}
.hide{display:none!important}
/* header */
.top{display:flex;align-items:center;gap:8px;padding:6px 0}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:23px;letter-spacing:-.7px}
.logo img{width:42px;height:42px;object-fit:contain}
.spacer{flex:1}
.avatar-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--green);background:var(--hi);display:grid;place-items:center;color:#fff}
:root[data-theme="light"] .avatar-btn{color:var(--on)}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.icon-btn:hover{background:rgba(127,127,127,.15)}
.search{position:relative;margin:16px 0 18px}
.search input{width:100%;height:56px;border-radius:18px;border:1px solid var(--inputline);background:var(--input);padding:0 48px 0 52px;font-size:16px;outline:0}
.search input:focus{border-color:var(--green);border-width:1.5px}
.search .ic.l{position:absolute;left:15px;top:15px;color:var(--muted2)}
.search .clr{position:absolute;right:8px;top:6px}
.chips{display:flex;gap:10px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:10px 20px;border-radius:22px;background:var(--chip);border:1px solid var(--line2);font-weight:800;font-size:14px;color:var(--on);transition:.18s}
.chip.on{background:var(--green);border-color:var(--green);color:#000}
/* hero */
.hero{position:relative;height:245px;border-radius:24px;overflow:hidden;border:1px solid #1d2b22;background:var(--hi);display:block;width:100%;text-align:left}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.67),rgba(0,0,0,.96))}
.hero .meta{position:absolute;left:18px;right:18px;bottom:18px;color:#fff}
.hero .meta small{font-size:14px;font-weight:700;display:block}
.hero .meta b{display:block;font-size:25px;font-weight:900;margin:4px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 20px;border-radius:24px;background:var(--green);color:#000;font-weight:900;font-size:14px;border:0}
.btn.big{height:54px;border-radius:18px;font-size:16px;width:100%}
.btn.mid{height:50px;border-radius:19px;font-size:16px;width:100%}
.btn.out{background:transparent;color:var(--on);border:1px solid var(--line2);font-weight:800}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.dis{background:#16301c;color:#6a8a70}
.dots{display:flex;justify-content:center;gap:10px;margin-top:10px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);transition:.18s}
.dot.on{width:10px;height:10px;background:var(--green)}
/* sections / cards */
.sec{font-size:21px;font-weight:900;margin:0}
.sec-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.sec-row small{color:var(--muted);font-weight:800}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 12px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.grid.g2{grid-template-columns:repeat(4,1fr)}}
.row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.row::-webkit-scrollbar{display:none}
.row .mc{width:132px;flex:none}
.mc{display:block;cursor:pointer;min-width:0}
.mc-img{aspect-ratio:3/4;border-radius:15px;overflow:hidden;background:var(--hi);border:1px solid var(--line);display:grid;place-items:center;color:var(--green)}
.mc-img img{width:100%;height:100%;object-fit:cover;display:block}
.mc-t{margin-top:8px;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-r{display:flex;align-items:center;gap:3px;margin-top:3px;font-size:11px;color:#aab2ac}
.mc-r .ic{color:var(--green)}
.pager{display:flex;gap:12px;margin-top:12px}
.pager .btn{flex:1;height:48px;border-radius:18px}
.block{margin-bottom:28px}
.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.ctitle{font-size:28px;font-weight:800;margin:20px 0 14px}
/* cw */
.cw{position:relative;width:128px;flex:none;cursor:pointer}
.cw .im{position:relative;aspect-ratio:3/4;border-radius:15px;overflow:hidden;background:var(--hi)}
.cw .im img{width:100%;height:100%;object-fit:cover}
.cw .im .ov{position:absolute;inset:0;background:rgba(0,0,0,.2);display:grid;place-items:center;color:#fff}
.cw .im .x{position:absolute;top:2px;right:2px;padding:5px;color:#ffffffb3}
.cw .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.24)}
.cw .bar i{display:block;height:100%;background:var(--green)}
.cw b{display:block;margin-top:6px;font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw small{color:#9da69f;font-size:11px}
/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--navbg);border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom)}
.nav-in{display:flex;width:100%;max-width:760px;height:74px}
.nav button{flex:1;min-width:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:700;color:#b8c0ba}
.nav button .pill{width:min(60px,88%);height:30px;border-radius:16px;display:grid;place-items:center}
.nav button.on{color:var(--green)}
.nav button.on .pill{background:var(--navind)}
:root[data-theme="light"] .nav button{color:#4f5751}
:root[data-theme="light"] .nav button.on{color:var(--green2)}
/* social */
.social{position:fixed;left:16px;right:16px;bottom:86px;z-index:35;display:flex;justify-content:space-between;pointer-events:none;max-width:1148px;margin:0 auto}
.social a{pointer-events:auto;display:flex;align-items:center;gap:7px;padding:10px 15px;border-radius:24px;color:#fff;font-weight:800;font-size:13px;box-shadow:0 6px 18px var(--shadow);animation:bob 2.4s ease-in-out infinite}
.social a:nth-child(2){animation-delay:1.2s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;opacity:0;pointer-events:none;transition:.2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--bg);z-index:61;transform:translateX(100%);transition:.22s;padding:16px 0;overflow:auto}
.drawer.on{transform:none}
.drawer .dh{display:flex;align-items:center;gap:10px;padding:6px 22px 22px;font-weight:900;font-size:22px;letter-spacing:-.6px}
.drawer .dh img{width:40px;height:40px}
.drawer .it{display:flex;align-items:center;gap:14px;width:100%;padding:14px 24px;font-size:18px;font-weight:800;text-align:left}
.drawer .it .ic{color:var(--green)}
.sw{margin-left:auto;width:46px;height:26px;border-radius:14px;background:#3a403b;position:relative}
.sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.18s}
.sw.on{background:var(--green2)}
.sw.on i{left:23px}
/* forms / auth */
.auth{max-width:440px;margin:0 auto;padding:28px 6px 40px}
.auth .lg{display:block;margin:0 auto;width:170px;height:170px;object-fit:contain}
.auth h1{font-size:30px;font-weight:900;text-align:center;margin:4px 0 9px}
.auth p.sub{color:#9ca49e;text-align:center;font-size:15px;line-height:1.4;margin:0 0 26px}
.fld{position:relative;margin-bottom:13px}
.fld input{width:100%;height:56px;border-radius:18px;border:1px solid var(--inputline);background:var(--input);padding:0 16px 0 52px;font-size:16px;outline:0}
.fld input:focus{border-color:var(--green);border-width:1.5px}
.fld>span.ic{position:absolute;left:15px;top:0;height:56px;display:flex;align-items:center;color:var(--muted2);pointer-events:none}
.fld svg.ic{position:static}
.fld .eye{position:absolute;right:6px;top:6px;left:auto;width:44px;height:44px;display:grid;place-items:center}

.link{color:var(--green);font-weight:800}
.msg{padding:12px 14px;border-radius:14px;margin:6px 0;font-size:14px;line-height:1.4}
.msg.err{background:#2a1214;border:1px solid #6b2328;color:#ffb4b8}
.msg.ok{background:#0f2616;border:1px solid #1f6b36;color:#9bf0b0}
:root[data-theme="light"] .msg.err{background:#fde8ea;color:#8a1f26}
:root[data-theme="light"] .msg.ok{background:#e4f6e8;color:#14532d}
.or{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:#8f9891}
.or hr{flex:1;border:0;border-top:1px solid #29312c;margin:0}
.gbtn{width:100%;height:54px;border-radius:18px;background:var(--hi);border:1px solid #2a332d;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:16px}
.gbtn b{font-size:21px;font-weight:900}
.cen{text-align:center;margin-top:28px;color:#9ca49e}
/* panels */
.panel{padding:16px;border-radius:18px;background:var(--hi);border:1px solid #1d2821}
:root[data-theme="light"] .panel{border-color:var(--line)}
.prow{display:flex;padding:6px 0}
.prow span{width:104px;color:#9da69f}
.prow b{flex:1;font-weight:700}
.pbar{height:8px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:10px}
.pbar i{display:block;height:100%;background:var(--green)}
.badge{display:inline-block;padding:4px 10px;border-radius:20px;background:#1e8e4e;color:#fff;font-size:11px;font-weight:900}
.act{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:20px;background:var(--hi);border:1px solid var(--line);margin-bottom:12px;text-align:left}
.act.hl{border-color:var(--green)}
.act .ib{width:46px;height:46px;border-radius:14px;background:#123f1a;display:grid;place-items:center;color:var(--green);flex:none}
.act b{display:block;font-size:16px;font-weight:900}
.act small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.35}
.sp{height:14px}
/* subscribe */
.plan{padding:14px;border-radius:16px;background:var(--hi);border:1px solid var(--line);margin-bottom:12px}
:root[data-theme="light"] .plan{background:#fff}
.plan .pr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.plan .pr b{font-size:17px;font-weight:800;display:block}
.plan .pr small{color:var(--muted)}
.plan .pr strong{font-size:18px;font-weight:900}
.pbtn{width:100%;height:48px;border-radius:14px;background:var(--green2);color:#fff;font-weight:900;font-size:15px}
.pageh{display:flex;align-items:center;gap:6px;padding:6px 0 10px}
.pageh h2{margin:0;font-size:22px;font-weight:700}
/* details */
.dposter{height:330px;border-radius:24px;overflow:hidden;background:#effaf2;border:1px solid #d1fae5;display:grid;place-items:center;color:var(--green2)}
.dposter img{width:100%;height:100%;object-fit:cover}
.dtitle{font-size:27px;font-weight:900;margin:14px 0 6px}
.dmeta{color:#9da69f;font-size:14px;font-weight:600}
.acts{display:flex;justify-content:space-around;margin:14px 0}
.da{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;font-size:12px;color:var(--muted2)}
.da .ic{color:var(--on)}
.tabs{display:flex;border-bottom:1px solid #1c251f;margin-top:20px}
.tabs button{flex:1;padding:12px 0;font-weight:600;color:#7f8981;border-bottom:2px solid transparent}
.tabs button.on{color:var(--on);border-color:var(--green)}
.tabc{padding-top:16px;min-height:150px}
.desc{color:var(--muted2);font-size:15px;line-height:1.55;white-space:pre-wrap}
.ep{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--card);margin-bottom:9px;cursor:pointer}
.ep .th{width:50px;height:50px;border-radius:10px;overflow:hidden;background:#152119;display:grid;place-items:center;color:var(--green)}
.ep .th img{width:100%;height:100%;object-fit:cover}
.ep b{display:block;font-weight:800}
.ep small{color:#8f9891}
/* sheet / dialog */
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center;padding:10px}
.modal.c{align-items:center}
.sheet{width:100%;max-width:520px;background:var(--hi);border:1.3px solid #2bea63;border-radius:30px;padding:14px 18px 18px;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.grab{width:44px;height:5px;border-radius:20px;background:#1f5e32;margin:0 auto 17px}
.wo{display:flex;align-items:center;gap:14px;width:100%;padding:15px;border-radius:20px;background:#101512;border:1px solid #23372a;margin-bottom:11px;text-align:left;color:#fff}
.wo.f{background:#0f2a18;border:1.4px solid #2bea63}
.wo .ib{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;color:#fff;flex:none}
.wo b{display:block;font-size:16px;font-weight:900}
.wo small{display:block;color:#6b7280;font-size:13px;line-height:1.4;margin-top:5px}
.dlg{width:100%;max-width:420px;background:var(--hi);border-radius:28px;padding:24px 22px 18px;text-align:center}
.dlg h3{margin:12px 0 10px;font-size:19px;font-weight:900;line-height:1.3}
.dlg p{margin:0 0 16px;line-height:1.45;font-size:14.5px;color:var(--muted2)}
.dlg .bt{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dlg .bt button{padding:12px 20px;border-radius:22px;font-weight:900}
.dlg .bt .p{background:var(--green2);color:#fff}
.dlg .bt .s{color:var(--green)}
.prevend{background:#f8fffa;color:#111827;border:1.5px solid #86efac}
.prevend p{color:#4b5563}
.prevend .tag{padding:14px;border-radius:16px;background:#ecfdf5;color:#166534;font-weight:900;margin-bottom:16px;display:flex;gap:10px;align-items:center;justify-content:center}
.prevend .circ{width:70px;height:70px;border-radius:50%;background:#16a34a;display:grid;place-items:center;margin:0 auto;color:#fff}
/* toast */
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:#2d332e;color:#fff;padding:13px 18px;border-radius:12px;font-size:14px;z-index:120;opacity:0;pointer-events:none;transition:.2s;max-width:88vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}
/* splash/loading */
#splash{position:fixed;inset:0;z-index:200;background:radial-gradient(circle at 82% 56%,#07361a 0,#02150a 45%,#000 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:opacity .4s}
#splash img{width:240px;height:240px;object-fit:contain}
#splash .sp1{width:38px;height:38px;border-radius:50%;border:4px solid rgba(34,255,59,.25);border-top-color:#22ff3b;animation:spin 1s linear infinite;margin-top:22px}
#splash .ld{margin-top:14px;font-size:16px;color:#dde5df;text-decoration:underline;text-decoration-color:#22ff3b;text-decoration-thickness:2px}
#splash .tg{margin-top:56px;text-align:center;color:#fff;font:italic 25px/1.15 "Lobster Two",cursive;text-decoration:underline;text-decoration-color:#22ff3b;text-decoration-thickness:2px}
#splash .ln{width:150px;height:3px;border-radius:20px;background:#22ff3b;margin-top:14px}
#splash.off{opacity:0;pointer-events:none}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(34,255,59,.25);border-top-color:#22ff3b;animation:spin 1s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
#busy{position:fixed;inset:0;z-index:150;background:rgba(5,7,6,.92);display:none;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:12px;font-weight:700}
#busy.on{display:flex}
/* player */
.pwrap{max-width:1100px;margin:0 auto}
.pl{position:relative;background:#000;aspect-ratio:16/9;width:100%;overflow:hidden;user-select:none}
.pl.fs{position:fixed;inset:0;z-index:90;aspect-ratio:auto;height:100vh}
.pl video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.pl .tops{position:absolute;top:12px;right:14px;display:flex;gap:8px;z-index:3}
.pl .tops a,.pl .tops span{padding:8px 12px;border-radius:12px;font-size:10px;font-weight:900}
.pl .tops a{background:var(--green);color:#000}
.pl .tops span{background:#052e16dd;border:1px solid #86efac;color:#fff;font-size:11px;border-radius:10px;padding:7px 12px}
.pl .back{position:absolute;top:8px;left:8px;z-index:3;color:#fff;background:rgba(0,0,0,.4);border-radius:50%}
.pl .ctl{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 60%,rgba(0,0,0,.7));transition:opacity .2s;color:#fff}
.pl .ctl.off{opacity:0;pointer-events:none}
.pl .mid{display:flex;align-items:center;justify-content:center;gap:34px;flex:1}
.pl .mid button{width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;color:#fff;font-weight:900;font-size:13px}
.pl .mid button.pp{width:72px;height:72px}
.pl .bot{padding:0 14px 10px}
.pl .tm{display:flex;align-items:center;gap:10px;font-size:12px}
.pl input[type=range]{flex:1;accent-color:#22ff3b;height:18px}
.pl .bar2{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.pl .bar2 button{padding:6px 10px;font-weight:800;font-size:13px;border-radius:10px;color:#fff;display:flex;align-items:center;gap:5px}
.qm{position:absolute;right:14px;bottom:60px;z-index:4;background:#111712f2;border:1px solid #2a3a2e;border-radius:14px;padding:6px;min-width:130px}
.qm button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;font-weight:700;color:#fff;font-size:14px}
.qm button.on{color:#22ff3b}
.pl .ldr{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.pinfo{padding:14px 18px 40px;background:var(--bg)}
.pinfo .dtitle{font-size:25px}
.warn{padding:30px;text-align:center;color:#fff}
@media(min-width:900px){.hero{height:340px}.dposter{height:420px}}
.hf-seo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#busyX{margin-top:18px;padding:11px 24px;border-radius:22px;border:1px solid #ffffff55;color:#fff;font-weight:800;background:transparent}

#topbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--green);z-index:300;opacity:0;pointer-events:none}
#topbar.on{opacity:1;width:92%;transition:width 8s cubic-bezier(.1,.8,.2,1)}
#view>*{animation:hfin .28s ease both}
@keyframes hfin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sk{min-width:0}.sk-i{aspect-ratio:3/4;border-radius:15px;background:linear-gradient(100deg,var(--hi) 30%,rgba(127,127,127,.18) 50%,var(--hi) 70%);background-size:300% 100%;animation:shim 1.2s linear infinite}
.sk-t{height:12px;width:70%;border-radius:6px;margin-top:10px;background:var(--hi)}
@keyframes shim{from{background-position:100% 0}to{background-position:0 0}}
.mc,.cw,.hero,.act,.plan,.ep,.btn,.chip,.da,.pbtn,.nav button,.drawer .it,.icon-btn{transition:transform .12s ease,opacity .12s ease,background-color .15s ease}
.mc:active,.cw:active,.hero:active,.act:active,.ep:active,.da:active,.drawer .it:active{transform:scale(.96);opacity:.85}
.btn:active,.pbtn:active,.chip:active,.nav button:active,.icon-btn:active{transform:scale(.94)}
.mc-img img{transition:transform .35s ease}
.mc:hover .mc-img img{transform:scale(1.04)}
.pl .ttl{position:absolute;top:14px;left:56px;right:150px;z-index:3;color:#fff;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px #000}
.pl.fs .mid button{width:64px;height:64px}
.pl.fs .mid button.pp{width:84px;height:84px}
.pl.fs .mid{gap:56px}
.pl.fs .bot{padding:0 28px 18px}
.pl.fs .ttl{top:18px;left:70px;font-size:17px}
@media (orientation:landscape) and (max-height:520px){.pl.fs .mid{gap:44px}.pl.fs .mid button{width:54px;height:54px}.pl.fs .mid button.pp{width:70px;height:70px}}