/* ===== B25 TikTok-style player ===== */
:root{ --rail-gap:15px; }
html:has(body.tt){overflow:hidden;height:100%;overscroll-behavior:none}
body.tt{margin:0;background:#000;overflow:hidden;height:100dvh;width:100vw;max-width:100%;position:fixed;inset:0;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#fff}
.tt .ic{display:block;stroke:currentColor}
/* fixed ambient background — two layers crossfade smoothly between episodes */
.tt-bd{position:fixed;inset:0;background-size:cover;background-position:center;filter:blur(42px) brightness(.42) saturate(1.3);transform:scale(1.2);z-index:0;opacity:0;transition:opacity 1s ease}
.tt-bd.on{opacity:1}

/* vertical snap feed */
.feed{position:relative;z-index:1;height:100dvh;width:100%;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:y contain;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.slide{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
/* MOBILE-FIRST: wrappers are transparent (display:contents) so the video fills the
   whole screen and the rail/caption/time overlay it (absolute over the slide). */
.stage,.media-col{display:contents}
.phone{position:relative;width:100%;height:100%;margin:0 auto;background:transparent;overflow:hidden}
.vid{width:100%;height:100%;object-fit:cover;background:transparent;display:block;position:relative;z-index:2}
/* DESKTOP only (wide LANDSCAPE screens): centered box hugging the video's real aspect,
   rail OUTSIDE on the right, time/caption BELOW. Portrait/phone keeps full-screen above. */
@media(min-width:900px) and (orientation:landscape){
  .stage{display:flex;align-items:center;justify-content:center;gap:18px}
  .media-col{display:flex;flex-direction:column;align-items:center;gap:10px}
  /* default before metadata loads; JS then sets the REAL video size (clamped to fit). */
  .phone{width:auto;height:80dvh;aspect-ratio:var(--ar, 9 / 16);max-width:64vw;max-height:92dvh;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
  .vid{object-fit:contain}
}
.tap-hint{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.92);filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));pointer-events:none}

/* ---- HUD elements share a fade (auto-hide after 3s idle -> 25% transparent) ---- */
[data-hud]{transition:opacity .45s ease}
body.tt.idle [data-hud]{opacity:.25}

/* episode poster cover (shown until the frame starts playing) */
.ep-poster{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1;transition:opacity .5s ease}
.ep-poster.hide{opacity:0;pointer-events:none}
/* "already watched" badge */
.watched-tag{position:absolute;top:14px;left:14px;z-index:6;display:inline-flex;align-items:center;gap:5px;background:rgba(20,20,28,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);color:#7df0a6;font-size:12px;font-weight:700;padding:5px 11px;border-radius:30px}
/* ±5s seek flash */
.seek-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:7;background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:18px;padding:12px 20px;border-radius:40px;pointer-events:none;opacity:0}
.seek-flash.go{animation:seekpop .42s ease}
@keyframes seekpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}

/* top bar */
.tt-topbar{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 12px 26px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.tt-ic{display:grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:#fff;cursor:pointer;padding:0;border-radius:50%;flex:0 0 auto}
.tt-ic:active{background:rgba(255,255,255,.12)}
.tt-right{display:flex;align-items:center;gap:4px;flex:0 0 auto}
/* screen-centered title regardless of how many buttons sit on each side */
.tt-title{position:absolute;left:50%;transform:translateX(-50%);max-width:56%;text-align:center;font-weight:700;font-size:16px;text-shadow:0 1px 6px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.prem-chip{position:fixed;top:calc(env(safe-area-inset-top) + 56px);left:12px;z-index:6;display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,#ff9ec0,#ff4d8d);color:#fff;font-weight:800;font-size:12px;padding:5px 11px;border-radius:30px;box-shadow:0 4px 14px rgba(255,117,163,.4)}
.admin-chip{position:fixed;top:calc(env(safe-area-inset-top) + 56px);right:12px;z-index:6;background:rgba(20,20,28,.7);border:1px solid #3a3a48;color:#9fd;font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;backdrop-filter:blur(8px)}

/* right action rail */
.rail{position:absolute;right:6px;bottom:76px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:var(--rail-gap)}
.rail-av{width:42px;height:42px;border-radius:50%;overflow:hidden;display:block;border:2px solid #fff;margin-bottom:2px;background:#222;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.rail-av img{width:100%;height:100%;object-fit:cover;display:block}
.rail-av:active{transform:scale(.92)}
.rail-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;border:0;color:#fff;cursor:pointer;padding:0}
.rb-ic{display:grid;place-items:center;width:36px;height:36px}
.rb-ic .ic{width:28px;height:28px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.rb-n{font-size:11px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.rail-btn.on .rb-ic{color:#ff2d55}
.rail-btn.act-like.on .rb-ic .ic{fill:#ff2d55;stroke:#ff2d55}
.rail-btn.act-save.on .rb-ic{color:#ffd24a}
.rail-btn.act-save.on .rb-ic .ic{fill:#ffd24a;stroke:#ffd24a}
.rail-btn:active{transform:scale(.88)}
.rail-btn{transition:transform .12s}
/* AUTO toggle — same outline style as the other rail icons; tints accent when on */
.rail-auto .rb-n{opacity:.9}
.rail-auto.on .rb-ic{color:#ff2d55}
.rail-auto.on .rb-ic .ic{stroke:#ff2d55}
.rail-auto.on .rb-n{color:#ff8a9c;opacity:1}
.rail-auto:not(.on) .rb-ic{color:rgba(255,255,255,.65)}

/* bottom caption (episode info only — series title lives in the top bar) */
.caption{position:absolute;left:14px;right:78px;bottom:48px;z-index:4;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.cap-ep{font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.real-n{display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.45);border:1px solid #2c6;color:#7df0a6;font-size:11px;padding:2px 7px;border-radius:12px}

/* progress + time */
.vbar{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 12px 14px;display:flex;flex-direction:column;gap:6px}
.vtime{font-size:11px;color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.7)}
.vprog{height:4px;background:rgba(255,255,255,.28);border-radius:3px;cursor:pointer}
.vprog:hover{height:6px}
.vfill{height:100%;width:0;background:#fff;border-radius:3px}

/* DESKTOP (wide landscape): rail moves OUTSIDE the player (right), time/caption BELOW it */
@media(min-width:900px) and (orientation:landscape){
  .rail{position:static;right:auto;bottom:auto;align-self:center;gap:20px}
  .rail-av{width:48px;height:48px}
  .rb-ic{width:44px;height:44px}.rb-ic .ic{width:32px;height:32px}
  .caption{position:static;left:auto;right:auto;bottom:auto;text-align:center;width:100%}
  .cap-ep{justify-content:center}
  .vbar{position:static;left:auto;right:auto;bottom:auto;padding:0;width:min(46vw,440px)}
  .vtime{text-align:center;font-size:12px}
  .vprog{height:5px}
}

/* paywall */
.paywall{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(circle at center,rgba(0,0,0,.55),rgba(0,0,0,.86));backdrop-filter:blur(6px)}
.pw-lock{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff9ec0,#ff4d8d);margin-bottom:16px;box-shadow:0 8px 30px rgba(255,117,163,.45)}
.paywall h3{font-size:21px;margin:0 0 6px}
.paywall p{color:rgba(255,255,255,.75);margin:0 0 20px;max-width:260px}
.pw-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ff9ec0,#ff4d8d);color:#fff;font-weight:800;padding:13px 26px;border-radius:30px;text-decoration:none;box-shadow:0 8px 24px rgba(255,117,163,.4);border:0;cursor:pointer}
.pw-coin{margin-top:12px;background:linear-gradient(180deg,#FFD98A,#FFB629);color:#5a2c00;box-shadow:0 8px 24px rgba(255,182,41,.35)}
.pw-coin:disabled{opacity:.7}

/* floating bottom-left controls */
.tt-floats{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:6;display:flex;align-items:center;gap:10px}
.tt-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(20,20,28,.6);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:800;font-size:13px;padding:9px 14px;border-radius:30px;cursor:pointer;backdrop-filter:blur(10px)}
.tt-pill.tt-auto.on{background:linear-gradient(135deg,#ff9ec0,#ff4d8d);border-color:transparent}
.tt-round{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:6;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(20,20,28,.6);border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;backdrop-filter:blur(10px)}

.tt-msg{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#ccc}
.tt-msg a{color:#ff6b8f}

/* ---- bottom sheets (episodes / comments / download) ---- */
.sheet{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-card{width:100%;max-width:560px;max-height:78dvh;background:#15151c;border-radius:20px 20px 0 0;display:flex;flex-direction:column;animation:sheetUp .25s ease}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #23232d;font-weight:700}
.sheet-head .tt-ic{width:34px;height:34px;color:#aaa}

.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:9px;padding:16px;overflow-y:auto}
.ep-grid .ep{position:relative;aspect-ratio:1;border:1px solid #2c2c38;background:#1d1d26;color:#eee;border-radius:11px;font-weight:700;cursor:pointer}
.ep-grid .ep.lk{color:#888}
.ep-grid .ep.wd{border-color:#2c6;color:#7df0a6}
.ep-lk{position:absolute;top:3px;right:4px;color:#ff8a3d}

/* comments */
.cmt-card{height:78dvh}
.cmt-list{flex:1;overflow-y:auto;padding:8px 14px}
.cmt-empty{color:#888;text-align:center;padding:40px 0;font-size:14px}
.cmt{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid #1e1e26}
.cmt-ava{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#5b6cff,#9b3df0);display:grid;place-items:center;font-weight:800;font-size:15px}
.cmt-main{flex:1;min-width:0}
.cmt-u{font-size:13px;color:#bbb;font-weight:700}.cmt-u span{color:#666;font-weight:400}
.cmt-b{font-size:14.5px;margin-top:2px;word-wrap:break-word}
.cmt-del{background:none;border:0;color:#ff6b8f;font-size:12px;cursor:pointer;padding:4px 0 0}
.cmt-like{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:#999;font-size:11px;cursor:pointer}
.cmt-like.on{color:#ff2d55}.cmt-like.on .ic{fill:#ff2d55;stroke:#ff2d55}
.cmt-form{display:flex;align-items:center;gap:9px;padding:11px 14px;border-top:1px solid #23232d;background:#15151c}
.cmt-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ff9ec0,#ff4d8d);display:grid;place-items:center;font-weight:800;flex:0 0 34px}
.cmt-form input{flex:1;background:#0e0e14;border:1px solid #2a2a36;color:#fff;border-radius:22px;padding:11px 15px;font-size:14px;outline:none}
.cmt-form input:focus{border-color:#ff4d8d}
.cmt-send{width:42px;height:42px;border-radius:50%;border:0;background:linear-gradient(135deg,#ff9ec0,#ff4d8d);color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 42px}
.cmt-login{display:block;text-align:center;padding:16px;color:#ff6b8f;border-top:1px solid #23232d}

/* download sheet */
.dl-body{padding:18px 16px 24px}
.dl-row{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-bottom:6px}
.dl-row b{color:#ffd24a}
.dl-bal{color:#999;font-size:13px;margin-bottom:18px}.dl-bal a{color:#ff6b8f}
.dl-go{width:100%;background:linear-gradient(135deg,#ff9ec0,#ff4d8d);border:0;color:#fff;font-weight:800;font-size:15px;padding:14px;border-radius:14px;cursor:pointer}
.dl-go:disabled{opacity:.6}
.dl-note{color:#666;font-size:12px;text-align:center;margin-top:12px}

/* toast */
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:40;background:rgba(20,20,28,.95);border:1px solid #333;color:#fff;padding:11px 18px;border-radius:30px;font-size:14px;max-width:86vw;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toast[hidden]{display:none}

/* API-loaded feed: loading state + comment heart size */
.tt-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3}
.tt-loading .spin{width:38px;height:38px;border:3px solid rgba(255,255,255,.25);border-top-color:#ff4d8d;border-radius:50%;animation:ttspin .8s linear infinite}
@keyframes ttspin{to{transform:rotate(360deg)}}
.cmt-like .ic{width:18px;height:18px}

/* mute lives in the top bar now */
.tt-topbar #btnMute .ic{width:22px;height:22px}

/* ===== Facebook-style reaction bar ===== */
.react-bar{position:fixed;z-index:60;display:flex;gap:4px;padding:6px 8px;
  background:rgba(28,28,34,.96);border:1px solid rgba(255,255,255,.12);
  border-radius:40px;box-shadow:0 10px 34px rgba(0,0,0,.55);
  transform:translateY(10px) scale(.7);transform-origin:center bottom;opacity:0;
  max-width:96vw;pointer-events:none;transition:transform .26s cubic-bezier(.2,1.4,.4,1),opacity .18s ease}
.react-bar[hidden]{display:none}
.react-bar.show{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.react-opt{background:none;border:0;cursor:pointer;font-size:30px;line-height:1;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transform:translateY(14px) scale(.4);opacity:0;
  transition:transform .22s ease,filter .15s ease;will-change:transform}
.react-bar.show .react-opt{transform:translateY(0) scale(1);opacity:1}
.react-bar.show .react-opt:nth-child(1){transition-delay:.02s}
.react-bar.show .react-opt:nth-child(2){transition-delay:.05s}
.react-bar.show .react-opt:nth-child(3){transition-delay:.08s}
.react-bar.show .react-opt:nth-child(4){transition-delay:.11s}
.react-bar.show .react-opt:nth-child(5){transition-delay:.14s}
.react-bar.show .react-opt:nth-child(6){transition-delay:.17s}
.react-opt:hover{transform:translateY(-10px) scale(1.45);filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.react-opt:active{transform:scale(1.2)}

/* chosen reaction shown on the like button — fixed size so it matches the heart icon */
.react-emoji{font-size:26px;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
.react-emoji img.emoji{width:26px;height:26px;margin:0;vertical-align:middle}
.rb-ic .react-emoji{width:28px;height:28px}
.react-emoji.pop{animation:reactPop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes reactPop{0%{transform:scale(0) rotate(-25deg)}55%{transform:scale(1.4) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.act-like.react-love .rb-n{color:#ff3b6b}
.act-like.react-haha .rb-n,.act-like.react-wow .rb-n,.act-like.react-sad .rb-n{color:#ffd24a}
.act-like.react-angry .rb-n{color:#ff9ec0}
.act-like.react-like .rb-n{color:#4a9bff}
.act-like.on .rb-ic .ic{fill:#ff4d8d;color:#ff4d8d}

@media(hover:none){.react-opt:hover{transform:translateY(0) scale(1.1)}}

/* ===== per-episode saved progress ===== */
.ep-saved{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#ff9ec0,#ff4d8d);z-index:5;border-radius:0 2px 0 0;transition:width .4s ease;pointer-events:none}
.cap-pct{font-size:11px;font-weight:800;color:#ffb27a;background:rgba(255,122,24,.16);padding:1px 7px;border-radius:20px;margin-left:6px;vertical-align:middle}
.cap-pct.done{color:#46d683;background:rgba(70,214,131,.15)}

/* picker ring + check */
.ep{position:relative}
.ep[style*="--p"]::before{content:"";position:absolute;inset:-3px;border-radius:12px;
  background:conic-gradient(#ff4d8d calc(var(--p,0)*1%),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  opacity:.9;pointer-events:none}
.ep .ep-ck{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:#46d683;color:#04210f;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;z-index:2}

/* ===== finale "extra episode" ===== */
.slide.finale{position:relative}
.fin-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(34px) brightness(.32) saturate(1.3);transform:scale(1.25);z-index:0}
.slide.finale::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(255,117,163,.18),transparent 55%),linear-gradient(180deg,rgba(8,8,12,.55),rgba(8,8,12,.92));z-index:1}
.fin-scroll{position:absolute;inset:0;z-index:2;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:54px 18px 90px}
.fin-card{width:100%;max-width:440px;text-align:center;color:#fff;animation:finIn .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes finIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fin-load{min-height:60vh;display:flex;align-items:center;justify-content:center;color:#999}
.fin-emoji{font-size:54px;line-height:1;animation:finPop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes finPop{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.fin-h{font-size:25px;font-weight:900;margin:8px 0 4px;background:linear-gradient(90deg,#ffd24a,#ff9ec0,#ff4d8d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fin-p{font-size:14.5px;line-height:1.55;color:#d6d6dd;margin:6px auto 12px;max-width:38ch}
.fin-p b{color:#fff}
.fin-rank{font-size:14px;color:#ffd9a0;background:rgba(255,170,60,.1);border:1px solid rgba(255,170,60,.22);border-radius:14px;padding:9px 14px;margin:0 auto 16px;display:inline-block}
.fin-rank b{color:#ffd24a}
.fin-badge{margin:6px auto 14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.fin-stats{display:flex;justify-content:center;gap:10px;margin:14px 0 8px}
.fs{flex:1;max-width:120px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:11px 6px}
.fs-n{font-size:18px;font-weight:900;color:#fff}
.fs-l{font-size:11px;color:#9a9aa3;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.fin-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px 0 4px}
.fin-bar-fill{height:100%;background:linear-gradient(90deg,#ff9ec0,#ff4d8d);border-radius:6px;transition:width .8s cubic-bezier(.2,.9,.3,1)}
.fin-bar-fill.full{background:linear-gradient(90deg,#ffd24a,#46d683)}
.fin-hint{font-size:12.5px;color:#b9b9c2;margin:8px 0 4px}.fin-hint b{color:#ffd24a}
.fin-rate{margin:18px auto 6px;padding:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;max-width:340px}
.fin-rate-h{font-size:14px;font-weight:700;margin-bottom:8px}
.fin-stars{display:flex;justify-content:center;gap:6px;font-size:34px;line-height:1}
.fin-stars .fst{color:#3a3a44;cursor:pointer;transition:transform .12s,color .12s}
.fin-stars .fst:hover{transform:scale(1.2)}
.fin-stars .fst.on{color:#ffd24a;text-shadow:0 0 14px rgba(255,210,74,.6)}
.fin-rate-i{font-size:12px;color:#9a9aa3;margin-top:8px}
.fin-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.fin-b{flex:1;min-width:140px;padding:13px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-weight:800;font-size:14px;cursor:pointer;text-decoration:none;text-align:center;transition:.16s}
.fin-b:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}
.fin-b.primary{background:linear-gradient(135deg,#ff9ec0,#ff4d8d);border:0}
.fin-b.ghost{background:transparent}

/* badge unlocked popup */
.bdg-pop{position:fixed;inset:0;z-index:90;background:rgba(6,6,10,.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .25s}
.bdg-pop.fade{animation:fade .5s reverse forwards}
.bdg-pop-card{text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:10px;animation:finPop .6s cubic-bezier(.2,1.4,.4,1)}
.bdg-pop-card .fin-b{margin-top:10px;min-width:220px}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ===== premium swipe checkout modal ===== */
.pm{position:fixed;inset:0;z-index:95;background:rgba(6,6,10,.72);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
@media(min-width:760px){.pm{align-items:center}}
.pm-sheet{width:100%;max-width:460px;max-height:92vh;background:#101015;border:1px solid rgba(255,255,255,.08);border-radius:22px 22px 0 0;display:flex;flex-direction:column;overflow:hidden;animation:pmUp .32s cubic-bezier(.2,.9,.3,1)}
@media(min-width:760px){.pm-sheet{border-radius:22px}}
@keyframes pmUp{from{transform:translateY(60px);opacity:.5}to{transform:none;opacity:1}}
.pm-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.pm-back,.pm-x{background:none;border:0;color:#fff;font-size:22px;width:34px;height:34px;border-radius:50%;cursor:pointer;line-height:1}
.pm-back:hover,.pm-x:hover{background:#ffffff14}
.pm-dots{display:flex;gap:6px;margin:0 auto}
.pm-dots span{width:7px;height:7px;border-radius:50%;background:#ffffff33;transition:.25s}
.pm-dots span.on{background:var(--accent);width:20px;border-radius:5px}
.pm-view{flex:1;overflow:hidden}
.pm-track{display:flex;height:100%;will-change:transform}
.pm-panel{min-width:100%;box-sizing:border-box;padding:20px 18px 26px;overflow-y:auto}
.pm-h{font-size:20px;font-weight:900;margin:0 0 4px;color:#fff}
.pm-sub{font-size:13.5px;color:#a8a8b2;margin:0 0 16px;line-height:1.5}.pm-sub b{color:#fff}
/* plans */
.pm-plans{display:flex;flex-direction:column;gap:10px}
.pm-plan{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;text-align:left;background:#17171f;border:1px solid #26262f;border-radius:16px;padding:14px 16px;cursor:pointer;transition:.16s;color:#fff}
.pm-plan:hover{border-color:var(--accent);transform:translateY(-2px)}
.pm-plan-badge{grid-column:1/3;justify-self:start;font-size:10.5px;font-weight:800;color:#04210f;background:linear-gradient(135deg,#ffd24a,#ff9d2e);padding:2px 8px;border-radius:20px;margin-bottom:4px}
.pm-plan-name{font-size:16px;font-weight:800}
.pm-plan-days{grid-row:2;font-size:12px;color:#9a9aa3}
.pm-plan-price{grid-column:2;grid-row:1/3;font-size:19px;font-weight:900;color:#ffd24a;align-self:center}
.pm-plan-go{grid-column:1/3;color:var(--accent);font-size:12.5px;font-weight:700;margin-top:6px}
/* account */
.pm-tabs{display:flex;gap:6px;background:#15151c;border-radius:12px;padding:4px;margin-bottom:14px}
.pm-tab{flex:1;background:none;border:0;color:#9a9aa3;font-weight:800;font-size:14px;padding:9px;border-radius:9px;cursor:pointer}
.pm-tab.on{background:var(--grad);color:#fff}
.pm-form{display:flex;flex-direction:column;gap:10px}
.pm-form input{background:#0e0e13;border:1px solid #28282f;color:#fff;border-radius:11px;padding:13px 14px;font-size:15px}
.pm-form input:focus{border-color:var(--accent);outline:none}
.pm-cta{background:var(--grad);border:0;color:#fff;font-weight:800;font-size:15px;padding:14px;border-radius:13px;cursor:pointer;margin-top:4px}
.pm-cta:disabled{opacity:.6}
.pm-cta.ghost{background:#1a1a22;border:1px solid #2c2c36}
.pm-cta.ghost.off{opacity:.5;cursor:default}
.pm-err,.pm-err2{color:#ff8aa6;font-size:13px;background:rgba(255,80,110,.1);border:1px solid rgba(255,80,110,.2);border-radius:10px;padding:9px 11px}
.pm-err2{margin:30px 0;text-align:center}
/* order */
.pm-order{background:#15151c;border:1px solid #24242d;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.pm-or-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:6px 0;color:#c9c9d2}
.pm-or-row b{color:#fff;font-weight:700;max-width:60%;text-align:right}
.pm-or-total{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:12px;border-top:1px solid #26262f;font-size:15px}
.pm-or-total b{font-size:21px;font-weight:900;color:#ffd24a}
.pm-pays{display:flex;flex-direction:column;gap:10px}
/* pay / pix / success */
.pm-load{display:flex;align-items:center;justify-content:center;gap:10px;color:#bbb;min-height:200px}
.pm-amount{font-size:30px;font-weight:900;text-align:center;color:#fff;margin:4px 0 14px}
.pm-qr{display:block;width:230px;max-width:72vw;aspect-ratio:1;margin:0 auto 14px;border-radius:14px;background:#fff;padding:10px}
.pm-copy{display:flex;gap:8px;margin-bottom:14px}
.pm-copy input{flex:1;min-width:0;background:#0e0e13;border:1px solid #28282f;color:#9a9aa3;border-radius:10px;padding:11px;font-size:12px}
.pm-copy button{background:var(--grad);border:0;color:#fff;font-weight:800;padding:0 16px;border-radius:10px;cursor:pointer}
.pm-wait{display:flex;align-items:center;justify-content:center;gap:9px;color:#ffd9a0;font-size:14px}
.pm-success{text-align:center;padding:14px 0}
.pm-check{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#46d683,#1ea863);color:#04210f;font-size:34px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:6px auto 14px;animation:finPop .55s cubic-bezier(.2,1.5,.4,1)}
.pm-badge-won{margin:16px auto;display:flex;flex-direction:column;align-items:center;gap:8px}
body.pm-open{overflow:hidden}