/* CSS 变量由页面内联 <style> 提供默认值，下载模块 xiazai*.php 覆盖 */
/* 安装/下载页面样式 — 星耀暗夜·极致华丽版 */
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:#050a08;
    min-height:100vh;min-height:100dvh;padding:20px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    overflow-x:hidden;
    overscroll-behavior-y:none;
    -webkit-overflow-scrolling:touch;
}

/* =================================================================
   第一层：宇宙深空背景
   ================================================================= */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:layout style paint;
    background:radial-gradient(ellipse at 50% 5%,#0a1410 0%,#080f0c 35%,#040806 70%,#020604 100%);
    background-size:100% 100%;}

/* 星云微粒层 */
.bg-fx::before{
    content:'';position:absolute;inset:0;
    background-image:
        radial-gradient(1px 1px at 8% 12%,rgba(255,255,255,.6),transparent),
        radial-gradient(1px 1px at 15% 28%,rgba(var(--lcr),.5),transparent),
        radial-gradient(1px 1px at 22% 8%,rgba(255,255,255,.4),transparent),
        radial-gradient(1.2px 1.2px at 30% 42%,rgba(var(--mcr),.5),transparent),
        radial-gradient(.8px .8px at 38% 18%,rgba(255,255,255,.35),transparent),
        radial-gradient(1px 1px at 45% 55%,rgba(var(--lcr),.45),transparent),
        radial-gradient(1.3px 1.3px at 52% 15%,rgba(255,255,255,.5),transparent),
        radial-gradient(.9px .9px at 60% 35%,rgba(var(--lcr),.45),transparent),
        radial-gradient(1px 1px at 68% 52%,rgba(var(--mcr),.4),transparent),
        radial-gradient(1.1px 1.1px at 75% 22%,rgba(255,255,255,.45),transparent),
        radial-gradient(.8px .8px at 82% 48%,rgba(var(--mcr),.4),transparent),
        radial-gradient(1px 1px at 88% 12%,rgba(var(--lcr),.5),transparent),
        radial-gradient(1.2px 1.2px at 93% 38%,rgba(255,255,255,.4),transparent),
        radial-gradient(.9px .9px at 5% 72%,rgba(var(--lcr),.4),transparent),
        radial-gradient(1px 1px at 18% 82%,rgba(var(--lcr),.35),transparent),
        radial-gradient(1.1px 1.1px at 35% 68%,rgba(255,255,255,.38),transparent),
        radial-gradient(.8px .8px at 50% 78%,rgba(var(--mcr),.35),transparent),
        radial-gradient(1px 1px at 62% 88%,rgba(var(--mcr),.32),transparent),
        radial-gradient(1.2px 1.2px at 78% 72%,rgba(255,255,255,.35),transparent),
        radial-gradient(.9px .9px at 90% 82%,rgba(var(--lcr),.3),transparent);
    background-size:100% 100%;animation:starTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starTwinkle{0%{opacity:.5}100%{opacity:.9}}

/* 星云光晕 */
.bg-fx::after{
    content:'';position:absolute;inset:-20%;
    background:
        radial-gradient(ellipse at 30% 20%,rgba(var(--mcr),.08) 0%,transparent 50%),
        radial-gradient(ellipse at 70% 30%,rgba(var(--mcr),.05) 0%,transparent 45%),
        radial-gradient(ellipse at 45% 65%,rgba(var(--lcr),.04) 0%,transparent 40%),
        radial-gradient(ellipse at 20% 75%,rgba(var(--lcr),.06) 0%,transparent 50%);
    animation:nebula 15s ease-in-out infinite;
}
@keyframes nebula{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* =================================================================
   第二层：浮动光球 (8个)
   ================================================================= */
.bg-glow{position:absolute;border-radius:50%;opacity:.28;will-change:transform,opacity}
.glow-a{width:500px;height:500px;top:-25%;left:-20%;
    background:radial-gradient(circle,rgba(var(--mcr),.35),rgba(var(--mcr),.08) 60%,transparent);
    filter:blur(45px);animation:gA 9s ease-in-out infinite}
.glow-b{width:420px;height:420px;right:-15%;bottom:-20%;
    background:radial-gradient(circle,rgba(var(--lcr),.3),rgba(var(--lcr),.06) 60%,transparent);
    filter:blur(45px);animation:gB 12s ease-in-out infinite}
.glow-c{width:340px;height:340px;top:40%;left:55%;
    background:radial-gradient(circle,rgba(var(--lcr),.22),rgba(var(--lcr),.04) 60%,transparent);
    filter:blur(45px);animation:gC 10s ease-in-out infinite}
.glow-d{width:300px;height:300px;top:5%;right:20%;
    background:radial-gradient(circle,rgba(var(--mcr),.25),rgba(var(--mcr),.05) 60%,transparent);
    filter:blur(45px);animation:gD 14s ease-in-out infinite}
.glow-e{width:380px;height:380px;bottom:5%;left:25%;
    background:radial-gradient(circle,rgba(var(--lcr),.18),rgba(var(--lcr),.04) 60%,transparent);
    filter:blur(45px);animation:gE 11s ease-in-out infinite}
.glow-f{width:260px;height:260px;top:55%;left:5%;
    background:radial-gradient(circle,rgba(var(--mcr),.2),rgba(var(--mcr),.05) 60%,transparent);
    filter:blur(40px);animation:gF 13s ease-in-out infinite}
.glow-g{width:320px;height:320px;top:25%;right:5%;
    background:radial-gradient(circle,rgba(var(--lcr),.18),rgba(var(--lcr),.04) 60%,transparent);
    filter:blur(40px);animation:gG 16s ease-in-out infinite}
.glow-h{width:280px;height:280px;bottom:30%;right:35%;
    background:radial-gradient(circle,rgba(var(--mcr),.16),rgba(var(--mcr),.03) 60%,transparent);
    filter:blur(40px);animation:gH 15s ease-in-out infinite}
@keyframes gA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,80px) scale(1.18)}66%{transform:translate(-30px,-40px) scale(.85)}}
@keyframes gB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,-70px) scale(1.25)}}
@keyframes gC{0%,100%{transform:translate(-50%,0) scale(1);opacity:.22}50%{transform:translate(-50%,-55px) scale(.72);opacity:.35}}
@keyframes gD{0%,100%{transform:translate(0,0) scale(1);opacity:.25}33%{transform:translate(-40px,50px) scale(1.3)}66%{transform:translate(30px,-30px) scale(.78);opacity:.35}}
@keyframes gE{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(45px,-60px) scale(1.22)}}
@keyframes gF{0%,100%{transform:translate(0,0) scale(1);opacity:.2}25%{transform:translate(30px,40px) scale(1.3);opacity:.32}75%{transform:translate(-20px,-20px) scale(.8);opacity:.18}}
@keyframes gG{0%,100%{transform:translate(0,0) scale(1);opacity:.18}50%{transform:translate(-30px,-35px) scale(1.28);opacity:.3}}
@keyframes gH{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,-45px) scale(1.2)}66%{transform:translate(-35px,25px) scale(.75)}}

/* =================================================================
   第三层：3D透视网格
   ================================================================= */
.bg-grid{position:absolute;inset:-50%;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:55px 55px;
    transform:perspective(600px) rotateX(58deg);
    animation:gridMove 18s linear infinite;}
@keyframes gridMove{0%{transform:perspective(600px) rotateX(58deg) translateY(0)}100%{transform:perspective(600px) rotateX(58deg) translateY(55px)}}

/* =================================================================
   第四层：扫描光线 + 光柱
   ================================================================= */
.bg-scan{position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 0%,rgba(var(--mcr),.04) 45%,rgba(var(--lcr),.06) 50%,rgba(var(--mcr),.04) 55%,transparent 100%);
    background-size:100% 180%;animation:scanDown 6s linear infinite;}
@keyframes scanDown{0%{background-position:0 -90%}100%{background-position:0 190%}}

/* 光柱射线 */
.bg-rays{position:absolute;inset:0;}
.bg-rays::before,.bg-rays::after{content:'';position:absolute;}
.bg-rays::before{
    top:-50%;left:10%;width:2px;height:200%;
    background:linear-gradient(180deg,transparent 0%,rgba(var(--mcr),.15) 40%,rgba(var(--lcr),.2) 50%,rgba(var(--mcr),.15) 60%,transparent 100%);
    transform:rotate(15deg);animation:raySway 8s ease-in-out infinite;}
.bg-rays::after{
    top:-50%;right:12%;width:2px;height:200%;
    background:linear-gradient(180deg,transparent 0%,rgba(var(--mcr),.12) 40%,rgba(var(--lcr),.15) 50%,rgba(var(--mcr),.12) 60%,transparent 100%);
    transform:rotate(-12deg);animation:raySway 10s ease-in-out infinite;}
@keyframes raySway{0%,100%{opacity:.3;transform:rotate(15deg) translateX(0)}50%{opacity:.7;transform:rotate(18deg) translateX(20px)}}

/* =================================================================
   第五层：三层星空
   ================================================================= */
.bg-stars{position:absolute;inset:0}
.bg-stars::before{content:'';position:absolute;inset:0;
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px,rgba(255,255,255,.55),transparent),
        radial-gradient(1px 1px at 60px 70px,rgba(var(--lcr),.45),transparent),
        radial-gradient(1px 1px at 130px 50px,rgba(255,255,255,.38),transparent),
        radial-gradient(1.5px 1.5px at 90px 130px,rgba(var(--mcr),.4),transparent),
        radial-gradient(1px 1px at 180px 90px,rgba(var(--lcr),.35),transparent),
        radial-gradient(1px 1px at 250px 160px,rgba(255,255,255,.35),transparent),
        radial-gradient(1.5px 1.5px at 300px 40px,rgba(var(--lcr),.38),transparent),
        radial-gradient(1px 1px at 350px 120px,rgba(255,255,255,.28),transparent),
        radial-gradient(1px 1px at 40px 180px,rgba(var(--mcr),.32),transparent),
        radial-gradient(1.5px 1.5px at 150px 210px,rgba(var(--mcr),.3),transparent),
        radial-gradient(1px 1px at 280px 230px,rgba(255,255,255,.26),transparent),
        radial-gradient(1px 1px at 380px 180px,rgba(var(--lcr),.25),transparent);
    background-repeat:repeat;background-size:440px 260px;animation:slowDrift 30s linear infinite;}
.bg-stars::after{content:'';position:absolute;inset:0;
    background-image:
        radial-gradient(1px 1px at 15px 45px,rgba(255,255,255,.45),transparent),
        radial-gradient(1.5px 1.5px at 80px 25px,rgba(var(--lcr),.35),transparent),
        radial-gradient(1px 1px at 110px 100px,rgba(255,255,255,.32),transparent),
        radial-gradient(1px 1px at 170px 55px,rgba(var(--lcr),.3),transparent),
        radial-gradient(1.5px 1.5px at 200px 140px,rgba(var(--mcr),.35),transparent),
        radial-gradient(1px 1px at 260px 35px,rgba(255,255,255,.32),transparent),
        radial-gradient(1px 1px at 310px 110px,rgba(var(--mcr),.28),transparent),
        radial-gradient(1.5px 1.5px at 360px 75px,rgba(var(--lcr),.25),transparent);
    background-repeat:repeat;background-size:420px 220px;
    animation:starBlink 4s ease-in-out infinite alternate;}
@keyframes slowDrift{0%{transform:translateY(0)}100%{transform:translateY(-20px)}}
@keyframes starBlink{0%{opacity:.4;transform:translateY(0)}100%{opacity:.8;transform:translateY(-8px)}}

/* =================================================================
   第六层：浮动光点粒子
   ================================================================= */
.bg-particles{position:absolute;inset:0}
.bg-particles::before{content:'';position:absolute;inset:0;
    background-image:
        radial-gradient(3px 3px at 55px 85px,rgba(var(--mcr),.75),transparent),
        radial-gradient(2px 2px at 130px 35px,rgba(var(--lcr),.6),transparent),
        radial-gradient(3px 3px at 210px 160px,rgba(var(--lcr),.65),transparent),
        radial-gradient(2px 2px at 295px 65px,rgba(var(--mcr),.55),transparent),
        radial-gradient(3px 3px at 350px 140px,rgba(var(--lcr),.55),transparent),
        radial-gradient(2px 2px at 40px 180px,rgba(var(--mcr),.5),transparent),
        radial-gradient(3px 3px at 160px 220px,rgba(var(--lcr),.5),transparent),
        radial-gradient(2px 2px at 260px 200px,rgba(var(--lcr),.45),transparent),
        radial-gradient(3px 3px at 340px 55px,rgba(var(--mcr),.45),transparent),
        radial-gradient(2px 2px at 390px 170px,rgba(var(--lcr),.4),transparent),
        radial-gradient(2px 2px at 80px 130px,rgba(var(--mcr),.4),transparent),
        radial-gradient(3px 3px at 200px 80px,rgba(var(--lcr),.35),transparent),
        radial-gradient(2px 2px at 110px 260px,rgba(var(--lcr),.35),transparent),
        radial-gradient(3px 3px at 300px 240px,rgba(var(--mcr),.3),transparent);
    background-size:440px 280px;animation:floatUp 20s linear infinite;}
@keyframes floatUp{0%{transform:translateY(140vh) scale(0);opacity:0}6%{opacity:1}88%{opacity:1}100%{transform:translateY(-25vh) scale(1.7);opacity:0}}

/* 中层粒子（慢速） */
.bg-particles::after{content:'';position:absolute;inset:0;
    background-image:
        radial-gradient(2px 2px at 70px 40px,rgba(255,255,255,.7),transparent),
        radial-gradient(2.5px 2.5px at 180px 120px,rgba(var(--mcr),.55),transparent),
        radial-gradient(2px 2px at 280px 70px,rgba(var(--mcr),.5),transparent),
        radial-gradient(2.5px 2.5px at 370px 160px,rgba(var(--lcr),.45),transparent),
        radial-gradient(2px 2px at 120px 200px,rgba(var(--lcr),.45),transparent),
        radial-gradient(2.5px 2.5px at 230px 250px,rgba(var(--lcr),.4),transparent),
        radial-gradient(2px 2px at 340px 200px,rgba(255,255,255,.55),transparent),
        radial-gradient(2.5px 2.5px at 50px 150px,rgba(var(--mcr),.42),transparent),
        radial-gradient(2px 2px at 150px 50px,rgba(var(--lcr),.42),transparent);
    background-size:400px 280px;animation:floatUpSlow 28s linear infinite;}
@keyframes floatUpSlow{0%{transform:translateY(140vh) scale(.5);opacity:0}8%{opacity:1}90%{opacity:1}100%{transform:translateY(-25vh) scale(1.4);opacity:0}}

/* =================================================================
   第七层：流星
   ================================================================= */
.bg-meteor{position:absolute;inset:0}
.bg-meteor i{position:absolute;display:block;width:2px;height:2px;border-radius:50%;
    background:rgba(var(--mcr),.85);box-shadow:0 0 7px 3px rgba(var(--mcr),.45);
    animation:meteor linear infinite}
.bg-meteor i:nth-child(1){top:5%;left:20%;animation-duration:3s;animation-delay:0s}
.bg-meteor i:nth-child(2){top:10%;left:55%;background:rgba(var(--lcr),.8);box-shadow:0 0 6px 2px rgba(var(--lcr),.4);animation-duration:4.2s;animation-delay:1s}
.bg-meteor i:nth-child(3){top:15%;left:72%;background:rgba(var(--mcr),.75);box-shadow:0 0 5px 2px rgba(var(--mcr),.35);animation-duration:3.6s;animation-delay:2.2s}
.bg-meteor i:nth-child(4){top:22%;left:35%;background:rgba(var(--lcr),.7);box-shadow:0 0 5px 2px rgba(var(--lcr),.35);animation-duration:4.8s;animation-delay:.6s}
.bg-meteor i:nth-child(5){top:4%;left:85%;background:rgba(var(--lcr),.75);box-shadow:0 0 6px 2px rgba(var(--lcr),.4);animation-duration:3.8s;animation-delay:2.8s}
.bg-meteor i:nth-child(6){top:18%;left:10%;background:rgba(255,255,255,.7);box-shadow:0 0 5px 2px rgba(255,255,255,.3);animation-duration:5s;animation-delay:1.5s}
.bg-meteor i:nth-child(7){top:8%;left:42%;background:rgba(var(--mcr),.65);box-shadow:0 0 5px 1.5px rgba(var(--mcr),.3);animation-duration:4.5s;animation-delay:3.2s}
@keyframes meteor{0%{transform:translate(0,0) rotate(-35deg);opacity:0}5%{opacity:1}28%{transform:translate(280px,450px) rotate(-35deg);opacity:0}100%{transform:translate(280px,450px) rotate(-35deg);opacity:0}}

/* =================================================================
   第八层：极光飘带
   ================================================================= */
.bg-aurora{position:absolute;inset:0}
.bg-aurora::before{content:'';position:absolute;width:150%;height:55%;top:8%;left:-25%;
    background:
        radial-gradient(ellipse at 30% 35%,rgba(var(--mcr),.08) 0%,transparent 55%),
        radial-gradient(ellipse at 65% 55%,rgba(var(--lcr),.07) 0%,transparent 50%),
        radial-gradient(ellipse at 48% 28%,rgba(var(--mcr),.06) 0%,transparent 50%),
        radial-gradient(ellipse at 55% 50%,rgba(var(--lcr),.04) 0%,transparent 60%);
    filter:blur(50px);animation:aurora1 14s ease-in-out infinite;}
.bg-aurora::after{content:'';position:absolute;width:130%;height:45%;bottom:12%;left:-15%;
    background:
        radial-gradient(ellipse at 22% 45%,rgba(var(--lcr),.06) 0%,transparent 50%),
        radial-gradient(ellipse at 68% 38%,rgba(var(--lcr),.05) 0%,transparent 50%),
        radial-gradient(ellipse at 48% 55%,rgba(var(--lcr),.05) 0%,transparent 50%),
        radial-gradient(ellipse at 60% 48%,rgba(var(--mcr),.04) 0%,transparent 55%);
    filter:blur(45px);animation:aurora2 17s ease-in-out infinite;}
@keyframes aurora1{0%,100%{opacity:.5;transform:translateX(-10%) scaleY(1)}50%{opacity:.9;transform:translateX(8%) scaleY(1.25)}}
@keyframes aurora2{0%,100%{opacity:.4;transform:translateX(6%) scaleY(1.15)}50%{opacity:.8;transform:translateX(-6%) scaleY(.85)}}

/* =================================================================
   第九层：涟漪脉冲环（多层）
   ================================================================= */
.bg-ripple{position:absolute;top:50%;left:50%;pointer-events:none}
.bg-ripple::before,.bg-ripple::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(var(--mcr),.08);animation:rip 8s ease-out infinite}
.bg-ripple::before{width:320px;height:320px;margin-left:-160px;margin-top:-160px}
.bg-ripple::after{width:320px;height:320px;margin-left:-160px;margin-top:-160px;animation-delay:4s;border-color:rgba(var(--lcr),.06)}
@keyframes rip{0%{transform:scale(.3);opacity:.6}100%{transform:scale(3);opacity:0}}

/* 第二组涟漪 */
.bg-ripple2{position:absolute;top:35%;left:60%;pointer-events:none}
.bg-ripple2::before,.bg-ripple2::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(var(--mcr),.06);animation:rip2 10s ease-out infinite}
.bg-ripple2::before{width:200px;height:200px;margin-left:-100px;margin-top:-100px}
.bg-ripple2::after{width:200px;height:200px;margin-left:-100px;margin-top:-100px;animation-delay:5s;border-color:rgba(var(--lcr),.05)}
@keyframes rip2{0%{transform:scale(.2);opacity:.5}100%{transform:scale(3.5);opacity:0}}

/* =================================================================
   第十层：六边形装饰
   ================================================================= */
.bg-hex{position:absolute;inset:0;opacity:.04}
.bg-hex::before{content:'';position:absolute;width:140px;height:160px;top:12%;left:4%;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115'%3E%3Cpolygon points='50,3 97,27 97,84 50,108 3,84 3,27' fill='none' stroke='%2322c55e' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    animation:hexFloat 16s ease-in-out infinite;opacity:.7;}
.bg-hex::after{content:'';position:absolute;width:110px;height:126px;top:58%;right:6%;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115'%3E%3Cpolygon points='50,3 97,27 97,84 50,108 3,84 3,27' fill='none' stroke='%234ade80' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    animation:hexFloat2 20s ease-in-out infinite;opacity:.6;}
@keyframes hexFloat{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(35px,-45px) rotate(18deg)}66%{transform:translate(-18px,28px) rotate(-12deg)}}
@keyframes hexFloat2{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-45px,-35px) rotate(-22deg)}}

/* 第三、四个六边形 */
.bg-hex2{position:absolute;inset:0;opacity:.03}
.bg-hex2::before{content:'';position:absolute;width:90px;height:104px;bottom:18%;left:55%;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115'%3E%3Cpolygon points='50,3 97,27 97,84 50,108 3,84 3,27' fill='none' stroke='%2322c55e' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    animation:hexFloat3 18s ease-in-out infinite;opacity:.55;}
.bg-hex2::after{content:'';position:absolute;width:100px;height:115px;top:30%;right:55%;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115'%3E%3Cpolygon points='50,3 97,27 97,84 50,108 3,84 3,27' fill='none' stroke='%234ade80' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    animation:hexFloat4 22s ease-in-out infinite;opacity:.5;}
@keyframes hexFloat3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(25px,-30px) rotate(25deg)}}
@keyframes hexFloat4{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(-30px,20px) rotate(-15deg)}66%{transform:translate(15px,-15px) rotate(15deg)}}

/* =================================================================
   第十一层：钻石闪光粒子
   ================================================================= */
.bg-diamonds{position:absolute;inset:0;}
.bg-diamonds::before{content:'';position:absolute;inset:0;
    background-image:
        radial-gradient(4px 4px at 15% 25%,rgba(255,255,255,.8),transparent),
        radial-gradient(3px 3px at 45% 15%,rgba(var(--lcr),.7),transparent),
        radial-gradient(4px 4px at 75% 35%,rgba(255,255,255,.65),transparent),
        radial-gradient(3px 3px at 25% 55%,rgba(var(--lcr),.6),transparent),
        radial-gradient(5px 5px at 60% 60%,rgba(var(--lcr),.55),transparent),
        radial-gradient(3px 3px at 85% 55%,rgba(var(--mcr),.6),transparent),
        radial-gradient(4px 4px at 10% 75%,rgba(var(--mcr),.55),transparent),
        radial-gradient(3px 3px at 40% 80%,rgba(255,255,255,.5),transparent),
        radial-gradient(5px 5px at 70% 80%,rgba(var(--lcr),.5),transparent),
        radial-gradient(3px 3px at 55% 42%,rgba(255,255,255,.6),transparent);
    background-size:100% 100%;animation:diamondSpark 3s ease-in-out infinite alternate;}
@keyframes diamondSpark{0%{opacity:.3;filter:blur(0px)}100%{opacity:.9;filter:blur(1.5px)}}

/* =================================================================
   预加载屏
   ================================================================= */
.pre-loader{
    position:fixed;inset:0;z-index:9999;
    background:radial-gradient(ellipse at 50% 50%,#0a1410 0%,#040806 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    transition:opacity .4s ease;}
.pre-loader.hide{opacity:0;pointer-events:none}
.pre-loader .spinner{
    width:44px;height:44px;
    border:3px solid rgba(var(--mcr),.12);
    border-top-color:var(--mc);
    border-right-color:rgba(var(--lcr),.5);
    border-radius:50%;
    animation:spinnerRotate .8s linear infinite;
    box-shadow:0 0 20px rgba(var(--mcr),.15),inset 0 0 10px rgba(var(--mcr),.05);}
@keyframes spinnerRotate{to{transform:rotate(360deg)}}
.pre-loader .text{
    color:rgba(255,255,255,.6);
    font-size:.85rem;margin-top:16px;letter-spacing:.8px;
    animation:loadPulse 1.8s ease-in-out infinite;}
@keyframes loadPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* =================================================================
   主卡片 — 流金玻璃
   ================================================================= */
.install-card{
    background:linear-gradient(160deg,rgba(20,24,48,.58),rgba(12,15,32,.65));
    border-radius:26px;padding:44px 36px 36px;
    text-align:center;max-width:420px;width:100%;
    position:relative;z-index:1;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:
        0 40px 100px rgba(0,0,0,.6),
        0 0 80px rgba(var(--mcr),.05),
        0 0 0 1px rgba(255,255,255,.03);
    transition:box-shadow .5s ease;}

/* 卡片流金边框光 */
.install-card::before{
    content:'';position:absolute;inset:-2px;border-radius:28px;z-index:-1;
    background:linear-gradient(135deg,rgba(var(--mcr),.3),rgba(var(--lcr),.2),rgba(var(--mcr),.25),rgba(var(--lcr),.2),rgba(var(--lcr),.2),rgba(var(--mcr),.3));
    background-size:300% 300%;animation:borderFlow 5s ease infinite;
    filter:blur(10px);opacity:.8;}
.install-card::after{
    content:'';position:absolute;inset:0;border-radius:26px;z-index:-1;
    background:linear-gradient(135deg,rgba(var(--mcr),.08),transparent 40%,rgba(var(--mcr),.06) 70%,transparent);
    pointer-events:none;}
@keyframes borderFlow{0%,100%{background-position:0% 50%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}}

/* 卡片内部光扫 */
.card-shimmer{
    position:absolute;inset:0;border-radius:26px;z-index:0;pointer-events:none;overflow:hidden;}
.card-shimmer::after{
    content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 55%,transparent 60%);
    animation:shimmerSweep 6s ease-in-out infinite;}
@keyframes shimmerSweep{0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}100%{transform:translateX(100%) translateY(100%) rotate(45deg)}}

/* =================================================================
   应用图标 — 多层脉冲光环
   ================================================================= */
.app-icon-wrap{
    position:relative;width:96px;height:96px;
    margin:0 auto 20px;z-index:1;}
.app-icon-large{
    width:100%;height:100%;border-radius:22px;
    background:rgba(255,255,255,.04);
    object-fit:cover;position:relative;z-index:2;
    box-shadow:0 10px 40px rgba(0,0,0,.4);}
.app-icon-glow{
    position:absolute;inset:-14px;border-radius:30px;
    z-index:1;pointer-events:none;
    background:linear-gradient(135deg,rgba(var(--mcr),.25),rgba(var(--lcr),.18),rgba(var(--mcr),.15),rgba(var(--mcr),.1));
    filter:blur(20px);
    animation:iconGlowPulse 3s ease-in-out infinite;}

/* 图标光环环 */
.icon-ring{position:absolute;border-radius:50%;border:1.5px solid;pointer-events:none;}
.icon-ring-1{
    inset:-8px;z-index:1;
    border-color:rgba(var(--mcr),.2);
    animation:ringPulse1 2.5s ease-in-out infinite;}
.icon-ring-2{
    inset:-16px;z-index:0;
    border-color:rgba(var(--mcr),.1);
    animation:ringPulse2 3s ease-in-out infinite;}
.icon-ring-3{
    inset:-24px;z-index:0;
    border-color:rgba(var(--lcr),.06);
    animation:ringPulse3 3.5s ease-in-out infinite;}
@keyframes iconGlowPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes ringPulse1{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}
@keyframes ringPulse2{0%,100%{opacity:.2;transform:scale(.98)}50%{opacity:.6;transform:scale(1.04)}}
@keyframes ringPulse3{0%,100%{opacity:.1;transform:scale(.96)}50%{opacity:.4;transform:scale(1.03)}}

/* 图标钻石闪光 */
.icon-sparkles{position:absolute;inset:-20px;z-index:3;pointer-events:none;}
.icon-sparkles i{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;
    box-shadow:0 0 6px 2px rgba(var(--lcr),.8),0 0 12px 4px rgba(var(--mcr),.4);
    animation:sparkleFloat 2s ease-in-out infinite;}
.icon-sparkles i:nth-child(1){top:5%;left:15%;animation-delay:0s}
.icon-sparkles i:nth-child(2){top:10%;right:10%;animation-delay:.4s}
.icon-sparkles i:nth-child(3){bottom:8%;left:20%;animation-delay:.8s}
.icon-sparkles i:nth-child(4){bottom:15%;right:15%;animation-delay:1.2s}
.icon-sparkles i:nth-child(5){top:40%;left:-5%;animation-delay:1.6s}
.icon-sparkles i:nth-child(6){top:45%;right:-5%;animation-delay:2s}
@keyframes sparkleFloat{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.5)}}

/* =================================================================
   应用名称
   ================================================================= */
.app-name-large{
    font-size:1.5rem;font-weight:700;color:rgba(var(--lcr),.9);
    margin-bottom:4px;letter-spacing:.3px;position:relative;z-index:1;
    text-shadow:0 0 30px rgba(var(--mcr),.15);}
.app-version-tag{
    display:inline-block;padding:4px 16px;
    background:linear-gradient(135deg,rgba(var(--mcr),.12),rgba(var(--lcr),.08));
    color:var(--mc);border-radius:20px;
    font-size:.75rem;font-weight:500;
    margin-bottom:24px;letter-spacing:.5px;position:relative;z-index:1;
    border:1px solid rgba(var(--mcr),.15);
    box-shadow:0 0 15px rgba(var(--mcr),.08);}

/* =================================================================
   信息网格
   ================================================================= */
.app-info-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    margin-bottom:28px;position:relative;z-index:1;}
.info-item{
    display:flex;flex-direction:column;align-items:center;
    padding:14px 8px;
    background:rgba(255,255,255,.02);
    border-radius:14px;
    border:1px solid rgba(255,255,255,.04);
    transition:all .3s ease;
    position:relative;overflow:hidden;}
.info-item::after{
    content:'';position:absolute;inset:0;border-radius:14px;
    background:linear-gradient(135deg,rgba(var(--mcr),.08),transparent 60%);
    opacity:0;transition:opacity .3s ease;}
.info-item:hover{
    background:rgba(var(--mcr),.05);
    border-color:rgba(var(--mcr),.15);
    box-shadow:0 0 20px rgba(var(--mcr),.08);
    transform:translateY(-2px);}
.info-item:hover::after{opacity:1}
.info-label{
    color:rgba(255,255,255,.35);
    font-size:.7rem;margin-bottom:5px;text-transform:uppercase;letter-spacing:.6px;}
.info-value{
    color:rgba(255,255,255,.8);
    font-weight:600;font-size:.88rem;}
.info-value .cost{color:var(--mc);font-weight:700}

/* 平台徽标 */
.badge{padding:4px 12px;border-radius:12px;font-size:0.75rem;font-weight:600;display:inline-block;letter-spacing:.3px}
.badge-ios{background:rgba(236,72,153,.14);color:#f9a8d4;border:1px solid rgba(236,72,153,.22)}
.badge-android{background:rgba(34,197,94,.15);color:#86efac;border:1px solid rgba(34,197,94,.22)}

/* =================================================================
   安装按钮 — 流光溢彩
   ================================================================= */
.install-btn{
    display:block;width:100%;padding:16px;
    background:linear-gradient(135deg,var(--mc) 0%,var(--dc) 50%,var(--ddc) 100%);
    background-size:200% 200%;
    color:#fff;text-decoration:none;border-radius:16px;
    font-size:1.05rem;font-weight:700;
    transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1);
    box-shadow:
        0 6px 30px rgba(var(--mcr),.3),
        0 0 60px rgba(var(--mcr),.1),
        inset 0 1px 0 rgba(255,255,255,.2);
    letter-spacing:.5px;
    border:none;cursor:pointer;
    position:relative;z-index:1;overflow:hidden;
    animation:btnGradient 3s ease infinite;}
@keyframes btnGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* 按钮光扫 */
.install-btn::before{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
    animation:btnShine 2.5s ease-in-out infinite;}
@keyframes btnShine{0%{left:-100%}50%,100%{left:200%}}

/* 按钮光晕脉冲 */
.install-btn::after{
    content:'';position:absolute;inset:-4px;border-radius:20px;z-index:-1;
    background:linear-gradient(135deg,rgba(var(--mcr),.4),rgba(var(--lcr),.25),rgba(var(--lcr),.3));
    filter:blur(12px);opacity:0;transition:opacity .4s ease;}
.install-btn:hover{transform:translateY(-3px);
    box-shadow:0 10px 40px rgba(var(--mcr),.45),0 0 80px rgba(var(--mcr),.15),inset 0 1px 0 rgba(255,255,255,.25);}
.install-btn:hover::after{opacity:1}
.install-btn:active{transform:scale(.97)}
.install-btn.disabled{opacity:.35;pointer-events:none;cursor:not-allowed;transform:none;animation:none;}
.install-btn.disabled::before{display:none}

/* ========== 通用按钮样式（半透明暗色主题） ========== */
.btn{padding:5px 11px;border:1px solid rgba(255,255,255,0.1);border-radius:6px;cursor:pointer;font-size:0.78rem;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.7)}
.btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18)}
.btn-primary{background:rgba(var(--mcr),0.12);color:var(--lc);border-color:rgba(var(--mcr),0.25)}.btn-primary:hover{background:rgba(var(--mcr),0.2)}
.btn-danger{background:rgba(239,68,68,0.08);color:#fca5a5;border-color:rgba(239,68,68,0.18)}.btn-danger:hover{background:rgba(239,68,68,0.16)}
.btn-success{background:rgba(34,197,94,0.08);color:#86efac;border-color:rgba(34,197,94,0.18)}.btn-success:hover{background:rgba(34,197,94,0.16)}
.btn-info{background:rgba(59,130,246,0.08);color:#93c5fd;border-color:rgba(59,130,246,0.18)}.btn-info:hover{background:rgba(59,130,246,0.16)}
.btn-warning{background:rgba(245,158,11,0.08);color:#fcd34d;border-color:rgba(245,158,11,0.18)}.btn-warning:hover{background:rgba(245,158,11,0.16)}
.btn-sm{padding:4px 9px;font-size:0.72rem}
.btn-group{display:flex;gap:5px;flex-wrap:wrap}


/* =================================================================
   提示文字
   ================================================================= */
.install-hint{
    margin-top:20px;color:rgba(255,255,255,.28);
    font-size:.8rem;letter-spacing:.3px;position:relative;z-index:1;}

/* 点数信息 */
.points-info{
    margin-top:18px;padding:13px 18px;
    background:linear-gradient(135deg,rgba(var(--mcr),.06),rgba(var(--lcr),.04));
    border-radius:12px;font-size:.82rem;
    color:rgba(255,255,255,.5);
    border:1px solid rgba(var(--mcr),.1);position:relative;z-index:1;}
.points-info .cost{color:var(--mc);font-weight:700}
.points-warn{
    background:linear-gradient(135deg,rgba(239,68,68,.06),rgba(248,113,113,.04));
    border:1px solid rgba(239,68,68,.15);
    padding:13px 18px;border-radius:12px;
    margin-top:14px;color:#f87171;font-size:.83rem;
    text-align:left;position:relative;z-index:1;}
.points-warn a{color:var(--mc);text-decoration:underline}

/* =================================================================
   二维码区域
   ================================================================= */
.qr-section{
    margin-top:30px;padding-top:24px;
    border-top:1px solid rgba(255,255,255,.04);position:relative;z-index:1;
    text-align:center;}
.qr-section h4{
    color:rgba(255,255,255,.3);margin-bottom:14px;font-size:.83rem;font-weight:400;}
#qrcode{display:inline-block;padding:8px;background:rgba(255,255,255,.04);border-radius:12px;border:1px solid rgba(255,255,255,.05);}
#qrcode img,#qrcode canvas{border-radius:8px;display:block}

/* =================================================================
   进度条
   ================================================================= */
.progress-section{margin-top:22px;display:none;position:relative;z-index:1;}
.progress-section.show{display:block}
.progress-bar-wrap{
    height:8px;background:rgba(255,255,255,.04);
    border-radius:5px;overflow:hidden;margin-bottom:10px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.3);}
.progress-bar-fill{
    height:100%;width:0%;border-radius:5px;
    background:linear-gradient(90deg,var(--mc),var(--lc),var(--dc));
    background-size:200% 100%;
    animation:progressGlow 2s linear infinite;
    transition:width .35s ease;
    box-shadow:0 0 12px rgba(var(--mcr),.4);}
@keyframes progressGlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.progress-stats{
    display:flex;justify-content:space-between;align-items:center;
    font-size:.8rem;color:rgba(255,255,255,.4);margin-bottom:8px;}
.progress-pct{font-weight:700;color:var(--mc);font-size:.92rem;text-shadow:0 0 10px rgba(var(--mcr),.3);}
.progress-status{
    text-align:center;font-size:.84rem;color:rgba(255,255,255,.45);
    margin-top:10px;min-height:1.5em;}
.progress-status.completed{color:var(--lc);font-weight:600;text-shadow:0 0 10px rgba(var(--lcr),.3);}

/* =================================================================
   iOS安装进度环
   ================================================================= */
.icon-progress-wrap{
    position:absolute;top:26px;left:50%;
    transform:translateX(-50%);
    width:124px;height:124px;
    pointer-events:none;display:none;z-index:5;}
.icon-progress-wrap.show{display:block}
.icon-progress-ring{transform:rotate(-90deg)}
.icon-progress-ring .ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:4}
.icon-progress-ring .ring-fill{
    fill:none;stroke:url(#ringGrad);stroke-width:4;
    stroke-linecap:round;transition:stroke-dashoffset .4s ease;
    filter:drop-shadow(0 0 6px rgba(var(--mcr),.4));}
.icon-progress-pct{
    position:absolute;bottom:-6px;left:50%;
    transform:translateX(-50%);font-size:.7rem;
    color:var(--mc);font-weight:700;
    background:rgba(14,18,36,.94);padding:2px 10px;border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 10px rgba(var(--mcr),.1);}

/* =================================================================
   Toast 通知
   ================================================================= */
.toast-container{position:fixed;top:20px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast-item{display:flex;align-items:center;gap:10px;padding:15px 20px;border-radius:14px;background:rgba(18,24,44,.96);box-shadow:0 10px 40px rgba(0,0,0,.4);transform:translateX(130%);opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1);pointer-events:auto;max-width:360px;min-width:250px;border:1px solid rgba(255,255,255,.06);color:#e0e4ea;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.toast-item.show{transform:translateX(0);opacity:1}
.toast-item.hide{transform:translateX(130%);opacity:0}
.toast-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0}
.toast-msg{flex:1;font-size:.88rem;color:#dde1e8;line-height:1.45;overflow-wrap:break-word;word-break:break-all;min-width:0}
.toast-close{background:none;border:none;font-size:1.1rem;color:rgba(255,255,255,.3);cursor:pointer;padding:2px 6px;border-radius:4px}
.toast-close:hover{color:#fff}
.toast-success{border-left:3px solid var(--lc)}.toast-success .toast-icon{background:var(--lc)}
.toast-error{border-left:3px solid #f87171}.toast-error .toast-icon{background:#f87171}
.toast-warning{border-left:3px solid var(--lc)}.toast-warning .toast-icon{background:var(--lc)}
.toast-info{border-left:3px solid var(--mc)}.toast-info .toast-icon{background:var(--mc)}

/* =================================================================
   移动端GPU性能优化
   ================================================================= */
@media (max-width:768px),(hover:none){
    .bg-glow{filter:blur(30px)}
    .glow-a{width:350px;height:350px;box-shadow:0 0 100px 50px rgba(var(--mcr),.1)}
    .glow-b{width:280px;height:280px;box-shadow:0 0 90px 45px rgba(var(--lcr),.08)}
    .glow-c{width:220px;height:220px;box-shadow:0 0 70px 35px rgba(var(--lcr),.06)}
    .glow-d{width:200px;height:200px;box-shadow:0 0 65px 30px rgba(var(--mcr),.06)}
    .glow-e{width:250px;height:250px;box-shadow:0 0 80px 40px rgba(var(--lcr),.05)}
    .glow-f,.glow-g,.glow-h{display:none}
    .bg-aurora::before,.bg-aurora::after{filter:blur(25px)}
    .bg-ripple::before,.bg-ripple::after{width:200px;height:200px;margin-left:-100px;margin-top:-100px}
    .bg-ripple2{display:none}
    .bg-stars::before{background-size:320px 180px}
    .bg-stars::after{background-size:300px 160px}
    .bg-particles::before{background-size:320px 200px}
    .bg-particles::after{display:none}
    .bg-rays{display:none}
    .bg-diamonds::before{background-size:200% 200%}
    .install-card{padding:32px 20px 28px;border-radius:22px}
    .install-card::before{border-radius:24px}
    .card-shimmer{display:none}
    .icon-ring{display:none}
    .icon-sparkles i:nth-child(n+4){display:none}
}

/* 低功耗/减弱动效模式 */
@media (prefers-reduced-motion:reduce){
    .bg-fx::before,.bg-fx::after{animation:none}
    .bg-glow,.bg-stars::after,.bg-aurora::before,.bg-aurora::after,
    .bg-hex::before,.bg-hex::after,.bg-hex2::before,.bg-hex2::after,
    .bg-particles::before,.bg-particles::after,.bg-diamonds::before{animation-duration:9999s!important}
    .bg-meteor i{display:none}
    .bg-ripple::before,.bg-ripple::after,.bg-ripple2::before,.bg-ripple2::after{animation:none;display:none}
    .bg-scan,.bg-rays,.card-shimmer{display:none}
    .install-btn,.install-btn::before{animation:none}
    .progress-bar-fill{animation:none}
}

/* =================================================================
   弹窗样式 — 暗色主题企业级
   ================================================================= */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-box{background:#0f172a;border:1px solid rgba(var(--mcr),0.2);color:#e2e8f0;border-radius:16px;width:90%;max-width:420px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,0.5),0 0 40px rgba(var(--mcr),0.08);transform:scale(0.92) translateY(16px);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.modal-overlay.show .modal-box{transform:scale(1) translateY(0)}
.modal-header{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px}
.modal-header h3{font-size:1.1rem;color:#fff;margin:0;font-weight:600}
.modal-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;flex-shrink:0;line-height:1}
.modal-close:hover{background:rgba(255,255,255,0.25);transform:rotate(90deg)}
/* 透明顶部关闭按钮（全局注入） */
.modal-top-close-btn{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:100;width:28px;height:28px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.15);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;line-height:1;padding:0;outline:none;opacity:0.4}
.modal-top-close-btn:hover{background:rgba(239,68,68,0.25);border-color:rgba(239,68,68,0.45);color:#fca5a5}
.modal-body{padding:24px;overflow-y:auto;flex:1}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.06)}
/* ========== 弹窗电脑端横排布局 ========== */
@media(min-width:769px){
    /* form-row 横排 */
    .modal-box .form-row{display:flex;align-items:center;gap:12px}
    .modal-box .form-row > label{width:120px;flex-shrink:0;margin-bottom:0;text-align:right}
    .modal-box .form-row > input,
    .modal-box .form-row > select,
    .modal-box .form-row > textarea{flex:1}
    .modal-box .form-row > div{flex:1}
    /* 内联样式 div 横排（应用详情编辑区等） */
    .modal-box div[style*="margin-bottom:12px"]{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .modal-box div[style*="margin-bottom:12px"] > label[style*="display:block"]{width:140px;flex-shrink:0;display:flex !important;align-items:center;margin-bottom:0 !important;text-align:right;gap:4px}
    .modal-box div[style*="margin-bottom:12px"] > label[style*="display:block"] + input,
    .modal-box div[style*="margin-bottom:12px"] > label[style*="display:block"] + select{flex:1;margin-top:0}
    .modal-box div[style*="margin-bottom:12px"] > div[style*="font-size:0.75rem"]{flex-basis:100%}
    /* 短链接修改区横排 */
    .modal-box div[style*="display:flex;gap:8px;align-items:flex-end"] > div > label[style*="display:block"]{display:flex !important;align-items:center;margin-bottom:0 !important}
}

/* 弹窗表单增强 */
.modal-box input,.modal-box select,.modal-box textarea{background:#1e293b !important;border:1.5px solid #334155 !important;color:#e2e8f0 !important;border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s}
.modal-box input:focus,.modal-box select:focus,.modal-box textarea:focus{border-color:var(--mc) !important;box-shadow:0 0 0 3px rgba(var(--mcr),0.12) !important}
.modal-box input::placeholder{color:#64748b}
/* 弹窗手机端适配 */
@media (max-width:768px){
    .modal-box{width:92%;max-height:88vh}
    .modal-header{padding:16px 18px}
    .modal-body{padding:18px}
    .modal-actions{flex-direction:column-reverse}
    .modal-actions button{width:100%;min-height:42px}
    .modal-close{width:36px;height:36px;font-size:1.2rem}
}
@keyframes skeletonShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton-cell{height:14px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite}
.skeleton-block{height:44px;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;margin-bottom:8px}

/* =================================================================
   第十三层：华丽泡沫气泡层 (CSS纯动画)
   ================================================================= */
.bg-bubbles{position:absolute;inset:0;pointer-events:none;z-index:3}
.bg-bubbles i{position:absolute;border-radius:50%;display:block;
  background:radial-gradient(circle at 35% 30%,rgba(var(--lcr),.35),rgba(var(--mcr),.06));
  border:1px solid rgba(var(--lcr),.12);
  animation:bubbleRise var(--bd) ease-in-out infinite;
  animation-delay:var(--bdl);
  opacity:0;
}
.bg-bubbles i::after{
  content:'';position:absolute;top:16%;left:20%;
  width:25%;height:16%;background:rgba(255,255,255,.55);
  border-radius:50%;transform:rotate(-30deg);
}
/* 20个泡沫：分散分布，不同大小、速度、起止位置 */
.bg-bubbles i:nth-child(1){left:5%;width:22px;height:22px;--bd:12s;--bdl:0s;bottom:-10%}
.bg-bubbles i:nth-child(2){left:10%;width:34px;height:34px;--bd:14s;--bdl:1.5s;bottom:-10%}
.bg-bubbles i:nth-child(3){left:16%;width:18px;height:18px;--bd:11s;--bdl:3s;bottom:-10%}
.bg-bubbles i:nth-child(4){left:22%;width:42px;height:42px;--bd:16s;--bdl:0.8s;bottom:-10%}
.bg-bubbles i:nth-child(5){left:28%;width:26px;height:26px;--bd:13s;--bdl:4s;bottom:-10%}
.bg-bubbles i:nth-child(6){left:34%;width:48px;height:48px;--bd:18s;--bdl:2s;bottom:-10%}
.bg-bubbles i:nth-child(7){left:40%;width:20px;height:20px;--bd:10s;--bdl:5s;bottom:-10%}
.bg-bubbles i:nth-child(8){left:46%;width:38px;height:38px;--bd:15s;--bdl:3.5s;bottom:-10%}
.bg-bubbles i:nth-child(9){left:52%;width:30px;height:30px;--bd:12s;--bdl:1s;bottom:-10%}
.bg-bubbles i:nth-child(10){left:58%;width:46px;height:46px;--bd:17s;--bdl:6s;bottom:-10%}
.bg-bubbles i:nth-child(11){left:64%;width:24px;height:24px;--bd:11s;--bdl:2.5s;bottom:-10%}
.bg-bubbles i:nth-child(12){left:70%;width:52px;height:52px;--bd:19s;--bdl:4.5s;bottom:-10%}
.bg-bubbles i:nth-child(13){left:76%;width:16px;height:16px;--bd:9s;--bdl:1.2s;bottom:-10%}
.bg-bubbles i:nth-child(14){left:82%;width:36px;height:36px;--bd:14s;--bdl:7s;bottom:-10%}
.bg-bubbles i:nth-child(15){left:88%;width:28px;height:28px;--bd:13s;--bdl:3.2s;bottom:-10%}
.bg-bubbles i:nth-child(16){left:3%;width:44px;height:44px;--bd:20s;--bdl:5.5s;bottom:-10%}
.bg-bubbles i:nth-child(17){left:12%;width:32px;height:32px;--bd:15s;--bdl:8s;bottom:-10%}
.bg-bubbles i:nth-child(18){left:25%;width:50px;height:50px;--bd:21s;--bdl:2.8s;bottom:-10%}
.bg-bubbles i:nth-child(19){left:38%;width:22px;height:22px;--bd:10s;--bdl:6.5s;bottom:-10%}
.bg-bubbles i:nth-child(20){left:50%;width:40px;height:40px;--bd:16s;--bdl:4s;bottom:-10%}
@keyframes bubbleRise{
  0%{transform:translateY(0) translateX(0) scale(.3);opacity:0}
  8%{opacity:.7}
  85%{opacity:.7}
  100%{transform:translateY(-110vh) translateX(var(--bx,40px)) scale(1.2);opacity:0}
}
/* 每个泡沫横向漂移不同 */
.bg-bubbles i:nth-child(odd){--bx:30px}
.bg-bubbles i:nth-child(even){--bx:-35px}
.bg-bubbles i:nth-child(3n){--bx:50px}
.bg-bubbles i:nth-child(5n+1){--bx:-25px}
.bg-bubbles i:nth-child(7n+3){--bx:15px}

/* ========== 风险确认勾选框 ========== */
.disclaimer-row{margin:0;padding:0}
.disclaimer-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:12px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:all .25s ease}
.disclaimer-label:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.05)}
.disclaimer-label input[type="checkbox"]{flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:var(--mc);cursor:pointer}
.disclaimer-label input[type="checkbox"]:checked + span{color:var(--lc)}
.disclaimer-label span{font-size:0.78rem;color:rgba(255,255,255,.55);line-height:1.55;user-select:none;transition:color .2s}

/* 风险确认弹窗 */
.risk-modal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:riskFadeIn .25s ease}
@keyframes riskFadeIn{from{opacity:0}to{opacity:1}}
.risk-modal-box{background:rgba(var(--mcr),.07);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(var(--mcr),.16);border-radius:16px;max-width:400px;width:100%;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);animation:riskScaleIn .3s ease}
@keyframes riskScaleIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.risk-modal-header{padding:20px 24px 12px;text-align:center}
.risk-modal-header .risk-icon{font-size:2.5rem;margin-bottom:8px;filter:drop-shadow(0 2px 8px rgba(var(--mcr),.3))}
.risk-modal-header h3{font-size:1rem;color:#fff;margin:0;font-weight:600}
.risk-modal-body{padding:0 24px 20px}
.risk-modal-body p{font-size:0.85rem;color:rgba(255,255,255,.75);line-height:1.7;text-align:center;margin:0 0 8px}
.risk-modal-body .risk-warn{display:inline-block;font-size:0.92rem;color:#fca5a5;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.22);border-radius:8px;padding:6px 18px;margin-top:6px;font-weight:700;letter-spacing:1px;text-shadow:0 0 14px rgba(239,68,68,.25);animation:riskPulse 2s ease-in-out infinite}
@keyframes riskPulse{0%,100%{box-shadow:0 0 8px rgba(239,68,68,.12)}50%{box-shadow:0 0 22px rgba(239,68,68,.35)}}
.risk-modal-actions{display:flex;gap:10px;padding:0 24px 20px}
.risk-modal-actions button{flex:1;padding:12px;border-radius:10px;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all .2s}
.risk-btn-disagree{background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.08)}
.risk-btn-disagree:hover{background:rgba(var(--mcr),.08);color:rgba(255,255,255,.7);border-color:rgba(var(--mcr),.15)}
.risk-btn-agree{background:rgba(var(--mcr),.14);color:var(--lc);border:1px solid rgba(var(--mcr),.25)}
.risk-btn-agree:hover{background:rgba(var(--mcr),.22);transform:translateY(-1px);box-shadow:0 4px 18px rgba(var(--mcr),.3)}