/* V7 · 午夜冰晶玻璃雾感 · 手机/平板/电脑全端 */
:root {
    --accent: #7dd3fc;
    --accent2: #bae6fd;
    --accent-dim: rgba(125,211,252,.28);
    --accent-glow: rgba(125,211,252,.12);
    --text: #f1f5f9;
    --text-soft: rgba(241,245,249,.62);
    --glass: rgba(255,255,255,.04);
    --glass2: rgba(255,255,255,.07);
    --glass-border: rgba(255,255,255,.11);
    --glass-shine: rgba(255,255,255,.16);
    --bg: #06080f;
    --card-radius: 22px;
    --btn-radius: 14px;
    --font: "PingFang SC","HarmonyOS Sans SC","SF Pro SC","Microsoft YaHei UI",sans-serif;
    --shadow: 0 24px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
    --safe-t: env(safe-area-inset-top,0px);
    --safe-b: env(safe-area-inset-bottom,0px);
    --player-ratio: 56.25%;
    --gold: var(--accent);
    --gold2: var(--accent2);
    --gold-dim: var(--accent-dim);
    --cream: var(--text);
    --muted: var(--text-soft);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    min-height:100vh;min-height:100dvh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    padding-bottom:var(--safe-b);
}

/* ===== 动态雾感场景 ===== */
.scene{
    position:fixed;inset:-20px;z-index:0;pointer-events:none;overflow:hidden;
    transition:transform .4s cubic-bezier(.22,1,.36,1);
    will-change:transform;
}
.mesh-blob{
    position:absolute;border-radius:50%;filter:blur(90px);opacity:.65;
    animation:blobMove 18s ease-in-out infinite;
}
.mb1{width:55vw;height:55vw;max-width:560px;background:radial-gradient(circle,var(--accent-glow),transparent 70%);top:-20%;left:-15%;animation-duration:22s}
.mb2{width:45vw;height:45vw;max-width:480px;background:rgba(147,112,219,.14);bottom:-15%;right:-10%;animation-delay:-7s;animation-duration:26s}
.mb3{width:35vw;height:35vw;max-width:380px;background:rgba(255,255,255,.06);top:40%;left:40%;animation-delay:-13s;animation-duration:20s}
@keyframes blobMove{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(4vw,3vh) scale(1.08)}
    66%{transform:translate(-3vw,5vh) scale(.94)}
}

.aurora-layer{
    position:absolute;inset:-40%;opacity:.45;
    background:conic-gradient(from 0deg at 50% 50%,var(--accent-glow),transparent 30%,rgba(255,255,255,.04),transparent 60%,rgba(147,112,219,.08),transparent);
    filter:blur(70px);
    animation:auroraSpin 50s linear infinite;
}
@keyframes auroraSpin{to{transform:rotate(360deg)}}

.bg-deep{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 100% 70% at 50% -30%,rgba(125,211,252,.08),transparent 55%),
        radial-gradient(ellipse 80% 60% at 100% 100%,rgba(99,102,241,.06),transparent 50%),
        linear-gradient(180deg,#0c1018 0%,#06080f 45%,#04060a 100%);
}

.light-pool{position:absolute;border-radius:50%;filter:blur(110px);animation:poolDrift 24s ease-in-out infinite}
.lp1{width:48vw;height:48vw;max-width:480px;background:var(--accent-glow);top:-12%;left:-8%}
.lp2{width:38vw;height:38vw;max-width:400px;background:rgba(147,112,219,.08);bottom:-8%;right:-6%;animation-delay:-9s}
.lp3{width:32vw;height:32vw;max-width:340px;background:rgba(255,255,255,.04);top:50%;left:38%;animation-delay:-15s}
@keyframes poolDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(2vw,3vh)}}

.frost-grid{
    position:absolute;inset:0;opacity:.035;
    background-image:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);
    animation:gridShift 40s linear infinite;
}
@keyframes gridShift{to{transform:translate(56px,56px)}}

.fog-layer{position:absolute;inset:-25%;filter:blur(70px);opacity:.4;animation:fogRoll 28s ease-in-out infinite}
.fl1{background:radial-gradient(circle at 25% 35%,rgba(255,255,255,.09),transparent 58%)}
.fl2{background:radial-gradient(circle at 75% 55%,var(--accent-glow),transparent 52%);animation-delay:-11s}
.fl3{background:radial-gradient(circle at 50% 85%,rgba(255,255,255,.05),transparent 48%);animation-delay:-19s;animation-direction:reverse}
@keyframes fogRoll{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(1.5%,-2%) scale(1.03)}}

.grain{
    position:absolute;inset:0;opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.particle-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}

.glass-orb{
    position:absolute;border-radius:50%;
    background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 8px 32px rgba(0,0,0,.2);
    animation:orbFloat 20s ease-in-out infinite;
}
.go1{width:100px;height:100px;top:16%;right:10%}
.go2{width:72px;height:72px;bottom:28%;left:8%;animation-delay:-7s}
.go3{width:52px;height:52px;top:58%;right:20%;animation-delay:-14s}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-14px)}}

.cursor-glow{
    position:fixed;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(circle,var(--accent-glow),transparent 68%);
    transform:translate(-50%,-50%);opacity:0;transition:opacity .35s;
}
@media(hover:hover){.cursor-glow{opacity:1}}

/* ===== 布局 ===== */
.wrap{
    position:relative;z-index:1;
    width:100%;max-width:min(540px,100%);margin:0 auto;
    padding:calc(12px + var(--safe-t)) 14px calc(40px + var(--safe-b));
}
.main-grid{display:flex;flex-direction:column;gap:14px}
.side-stack{display:flex;flex-direction:column;gap:14px}

@media(min-width:640px){
    .wrap{max-width:640px;padding:20px 20px calc(48px + var(--safe-b))}
}
@media(min-width:900px){
    .wrap{max-width:920px;padding:28px 28px calc(56px + var(--safe-b))}
    .main-grid{
        display:grid;
        grid-template-columns:1fr min(340px,38%);
        grid-template-rows:auto 1fr;
        gap:18px;
        align-items:start;
    }
    .player-wrap{grid-column:1;grid-row:1/span 2}
    .side-stack{grid-column:2;grid-row:1/span 2}
    .stat-row{grid-template-columns:1fr}
}
@media(min-width:1200px){
    .wrap{max-width:1080px;padding:32px 36px calc(64px + var(--safe-b))}
    .main-grid{grid-template-columns:1fr 380px;gap:22px}
}

/* ===== 玻璃卡片 ===== */
.frost-card{
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
    border:1px solid var(--glass-border);
    border-radius:var(--card-radius);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    box-shadow:var(--shadow);
    position:relative;overflow:hidden;
    transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s;
}
.frost-card.tilt{transform-style:preserve-3d}
.frost-card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(125deg,rgba(255,255,255,.12) 0%,transparent 38%,transparent 100%);
}
.frost-card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(145deg,rgba(255,255,255,.18),transparent 40%,rgba(125,211,252,.12));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:.55;
}
.frost-card:hover{border-color:rgba(255,255,255,.16);box-shadow:0 28px 72px rgba(0,0,0,.55),0 0 0 1px rgba(125,211,252,.06),inset 0 1px 0 rgba(255,255,255,.08)}

.reveal{animation:rise .75s cubic-bezier(.16,1,.3,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

/* ===== 顶栏 ===== */
.head{
    display:flex;align-items:center;justify-content:space-between;
    padding:15px 18px;margin-bottom:14px;gap:12px;
}
.brand{display:flex;align-items:center;gap:13px;min-width:0;flex:1}
.brand-mark{
    width:48px;height:48px;flex-shrink:0;border-radius:15px;
    background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.1);
}
.mark-ring{
    position:absolute;inset:-1px;border-radius:inherit;
    border:1px solid rgba(125,211,252,.25);
    animation:markPulse 3.5s ease-in-out infinite;
}
@keyframes markPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.9;transform:scale(1.03)}}
.mark-img{width:100%;height:100%;object-fit:cover;border-radius:15px;position:relative;z-index:1}
.mark-img[hidden]{display:none!important}
.mark-svg{width:20px;height:20px;color:var(--accent2);position:relative;z-index:1}
.brand-txt{min-width:0}
.brand-txt h1{
    font-size:clamp(16px,4vw,21px);font-weight:700;letter-spacing:-.01em;
    color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-txt p{font-size:clamp(11px,2.5vw,12px);color:var(--text-soft);margin-top:2px}

.pill-count{
    flex-shrink:0;display:flex;align-items:center;gap:6px;
    padding:8px 14px;border-radius:999px;
    background:rgba(255,255,255,.04);border:1px solid var(--glass-border);
    font-size:11px;color:var(--text-soft);font-weight:600;
    backdrop-filter:blur(16px);
}
.pill-count b{font-size:clamp(16px,3.8vw,20px);color:var(--accent2);font-weight:800;font-variant-numeric:tabular-nums}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.55);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35;transform:scale(.85)}}

/* ===== 播放器 ===== */
.player-wrap{padding:13px;margin-bottom:0}
.sec-label{
    display:inline-flex;align-items:center;gap:5px;
    font-size:9px;font-weight:700;letter-spacing:.18em;color:var(--accent);
    margin-bottom:10px;padding:4px 10px;border-radius:999px;
    background:rgba(125,211,252,.08);border:1px solid rgba(125,211,252,.15);
}
.sec-label svg{width:6px;height:6px;animation:pulse 1.4s infinite}

.player-shell{
    position:relative;border-radius:calc(var(--card-radius) - 5px);
    overflow:hidden;background:#000;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 16px 48px rgba(0,0,0,.55),0 0 60px var(--accent-glow);
}
.player-shine{
    position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%);
    animation:shinePass 7s ease-in-out infinite;
}
@keyframes shinePass{0%,100%{transform:translateX(-130%)}45%,55%{transform:translateX(130%)}}
.player-ratio{position:relative;width:100%;padding-top:var(--player-ratio);background:#000}
.player-ratio #dplayer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}

.lock-mask{
    display:none;position:absolute;inset:0;z-index:10;
    background:rgba(6,8,15,.88);backdrop-filter:blur(28px) saturate(1.4);
    -webkit-backdrop-filter:blur(28px) saturate(1.4);
    align-items:center;justify-content:center;padding:20px;
}
.lock-mask.show{display:flex}
.lock-inner{text-align:center;padding:28px 22px;max-width:320px;width:100%;animation:rise .4s ease}
.lock-ring{
    position:absolute;top:22px;left:50%;transform:translateX(-50%);
    width:64px;height:64px;border-radius:50%;
    border:1.5px solid rgba(125,211,252,.35);
    animation:ringOut 2.8s ease-out infinite;
}
@keyframes ringOut{0%{transform:translateX(-50%) scale(.75);opacity:1}100%{transform:translateX(-50%) scale(2);opacity:0}}
.lock-svg{width:40px;height:40px;color:var(--accent2);margin:12px auto 14px}
.lock-inner h3{font-size:17px;font-weight:700;margin-bottom:6px}
.lock-inner p{font-size:12px;color:var(--text-soft);margin-bottom:20px;line-height:1.7}

.countdown{margin-top:10px;padding:11px 14px;border-radius:var(--btn-radius);background:rgba(125,211,252,.06);border:1px solid rgba(125,211,252,.12)}
.countdown[hidden]{display:none!important}
.cd-track{height:3px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-bottom:7px}
.cd-bar{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1s linear;box-shadow:0 0 10px var(--accent-dim)}
.countdown p{font-size:11px;color:var(--accent2);font-weight:600;text-align:center}

/* ===== 统计 ===== */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0}
@media(max-width:380px){.stat-row{grid-template-columns:1fr}}
@media(min-width:900px){.stat-row{grid-template-columns:1fr}}
.stat{display:flex;align-items:center;gap:12px;padding:14px 16px}
.stat-icon{
    width:42px;height:42px;border-radius:13px;flex-shrink:0;
    background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;
}
.stat-icon img{width:24px;height:24px;object-fit:contain}
.stat-icon img[hidden]{display:none!important}
.stat-svg{width:20px;height:20px;color:var(--accent2);stroke:var(--accent2)}
.stat-icon img[hidden]~.stat-svg{display:block}
.stat-icon img:not([hidden])~.stat-svg{display:none}
.stat-k{display:block;font-size:9px;color:var(--text-soft);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.stat-v{font-size:14px;font-weight:700;margin-top:2px}
.stat-v em{font-style:normal;color:var(--accent2)}

/* ===== 按钮 ===== */
.btn-row{display:flex;gap:10px;margin-bottom:0;flex-wrap:wrap}
.btn-gold,.btn-frost,.btn-frost-sm{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:none;cursor:pointer;font-family:var(--font);font-weight:600;
    border-radius:var(--btn-radius);position:relative;overflow:hidden;
    transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn-icon{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.btn-icon[hidden]{display:none!important}
.btn-icon-svg{width:18px;height:18px;flex-shrink:0}
.btn-icon:not([hidden])+.btn-icon-svg{display:none}
.btn-gold{
    background:linear-gradient(145deg,var(--accent2),var(--accent));
    color:#0c1220;
    box-shadow:0 6px 28px var(--accent-dim),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(125,211,252,.35)}
.btn-gold:active{transform:scale(.97)}
.ripple::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.25) 50%,transparent 62%);
    transform:translateX(-100%);animation:ripple 5s ease-in-out infinite;
}
@keyframes ripple{0%,80%,100%{transform:translateX(-100%)}92%{transform:translateX(100%)}}
.btn-frost{
    background:var(--glass);color:var(--text);
    border:1px solid var(--glass-border);backdrop-filter:blur(14px);
}
.btn-frost:hover{background:var(--glass2);border-color:rgba(125,211,252,.22)}
.btn-frost.disabled{opacity:.35;pointer-events:none}
.btn-frost-sm{padding:11px 16px;font-size:12px;min-height:44px;background:var(--glass);color:var(--accent2);border:1px solid var(--glass-border);white-space:nowrap}
.btn-lg{flex:1;min-width:0;padding:14px 18px;font-size:14px;min-height:50px}
.btn-full{width:100%;padding:14px;font-size:14px;margin-top:8px;min-height:50px}

.extra-row{display:flex;flex-direction:column;gap:8px;margin-bottom:0}
.extra-row:empty{display:none}
.extra-row a{
    display:flex;align-items:center;justify-content:center;
    padding:13px;text-decoration:none;font-size:13px;font-weight:600;
    color:var(--text-soft);background:var(--glass);border:1px solid var(--glass-border);
    border-radius:var(--btn-radius);transition:all .22s;min-height:48px;
}
.extra-row a:hover{color:var(--accent2);border-color:rgba(125,211,252,.25);background:rgba(125,211,252,.05)}

/* ===== 步骤 ===== */
.steps{padding:16px 18px}
.steps-title{font-size:13px;font-weight:700;margin-bottom:12px;color:var(--text)}
.steps-list{list-style:none}
.steps-list li{
    display:flex;align-items:flex-start;gap:10px;
    font-size:12px;color:var(--text-soft);line-height:1.65;
    padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.steps-list li:last-child{border-bottom:none}
.steps-list li span{
    flex-shrink:0;width:24px;height:24px;border-radius:8px;
    background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.15);
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:var(--accent2);
}

/* ===== Toast ===== */
.toast{
    position:fixed;bottom:calc(24px + var(--safe-b));left:50%;
    transform:translateX(-50%) translateY(20px);
    padding:12px 24px;max-width:calc(100% - 32px);
    background:rgba(12,16,24,.92);border:1px solid rgba(125,211,252,.18);
    border-radius:999px;color:var(--text);font-size:13px;font-weight:600;text-align:center;
    z-index:99999;opacity:0;pointer-events:none;
    backdrop-filter:blur(20px);
    transition:opacity .3s,transform .3s;
    box-shadow:0 10px 36px rgba(0,0,0,.45);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 弹窗 ===== */
.overlay{
    display:none;position:fixed;inset:0;z-index:9000;
    background:rgba(4,6,12,.75);backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    align-items:flex-end;justify-content:center;padding:0;overflow-y:auto;
}
@media(min-width:640px){.overlay{align-items:center;padding:20px}}
.overlay.show{display:flex}

.modal{
    width:100%;max-width:440px;
    padding:24px 20px calc(20px + var(--safe-b));
    border-radius:24px 24px 0 0;
    animation:sheetUp .45s cubic-bezier(.16,1,.3,1);
    max-height:94vh;max-height:94dvh;overflow-y:auto;
}
@media(min-width:640px){
    .modal{border-radius:24px;padding:26px 24px 24px;animation:modalIn .45s cubic-bezier(.16,1,.3,1);max-height:88vh}
}
@keyframes sheetUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:none}}
.modal-sm{max-width:360px;text-align:center}
.modal-x{
    position:absolute;top:14px;right:14px;width:36px;height:36px;
    border-radius:11px;border:1px solid var(--glass-border);
    background:rgba(255,255,255,.04);color:rgba(255,255,255,.45);
    font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all .2s;z-index:2;line-height:1;
}
.modal-x:hover{background:rgba(255,255,255,.1);color:#fff}
.modal-head{margin-bottom:16px;padding-right:36px}
.modal-head h2{font-size:18px;font-weight:700;margin-bottom:4px}
.modal-head p{font-size:12px;color:var(--text-soft);line-height:1.6}
.modal-sm h2{font-size:16px;margin-bottom:6px}
.modal-sm p{font-size:13px;color:var(--text-soft);line-height:1.7;margin-bottom:16px}
.alert-icon{
    width:48px;height:48px;margin:0 auto 14px;border-radius:50%;
    background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.2);
    display:flex;align-items:center;justify-content:center;
}
.alert-icon svg{width:24px;height:24px;color:var(--accent2)}

.tabs{
    display:flex;gap:5px;padding:4px;margin-bottom:16px;
    background:rgba(0,0,0,.35);border-radius:12px;border:1px solid var(--glass-border);
}
.tab{
    flex:1;padding:11px 8px;border:none;border-radius:10px;
    background:transparent;color:var(--text-soft);
    font-family:var(--font);font-size:13px;font-weight:600;
    cursor:pointer;transition:all .25s;min-height:44px;
}
.tab.on{
    background:linear-gradient(145deg,var(--accent2),var(--accent));
    color:#0c1220;box-shadow:0 4px 16px var(--accent-dim);
}
.tab-body{display:none;animation:rise .3s ease}
.tab-body.show{display:block}

.poster-box{
    position:relative;border-radius:16px;overflow:hidden;
    background:rgba(0,0,0,.4);border:1px solid var(--glass-border);
    max-height:min(48vh,420px);display:flex;align-items:center;justify-content:center;
}
#posterCanvas{width:100%;height:auto;display:block;max-height:min(48vh,420px);object-fit:contain}
.poster-wait{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
    background:rgba(0,0,0,.6);color:var(--accent2);font-size:13px;font-weight:600;
}
.poster-wait.hide{display:none}
.spinner{
    width:18px;height:18px;border:2px solid rgba(125,211,252,.2);
    border-top-color:var(--accent2);border-radius:50%;
    animation:spin .6s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
.poster-hint{text-align:center;font-size:11px;color:var(--text-soft);margin:10px 0 6px}

.info-box{
    font-size:12px;color:var(--text-soft);line-height:1.75;
    padding:14px;margin-bottom:12px;
    background:rgba(255,255,255,.03);border-radius:12px;border:1px solid var(--glass-border);
}
.info-box:empty{display:none}
.link-row{display:flex;gap:8px;margin-bottom:6px}
.link-row input{
    flex:1;min-width:0;padding:12px 14px;
    background:rgba(0,0,0,.35);border:1px solid var(--glass-border);
    border-radius:12px;color:rgba(255,255,255,.7);
    font-size:11px;outline:none;font-family:var(--font);min-height:44px;
}

@media(max-width:480px){
    .btn-row{flex-direction:column}
    .btn-lg{width:100%}
    .link-row{flex-direction:column}
    .head{padding:13px 15px}
    .glass-orb,.mesh-blob.mb3{display:none}
}

.dplayer-menu,.dplayer-notice-list{display:none!important}

.page-loader{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:rgba(6,8,15,.94);backdrop-filter:blur(16px);
    transition:opacity .4s,visibility .4s;
}
.page-loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-box{text-align:center}
.loader-ring{
    width:40px;height:40px;border-radius:50%;margin:0 auto 12px;
    border:2px solid rgba(125,211,252,.15);
    border-top-color:var(--accent);
    animation:spin .65s linear infinite;
}
.loader-txt{font-size:12px;color:var(--text-soft);letter-spacing:.15em;font-weight:500}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    .scene{transform:none!important}
}