*{box-sizing:border-box}html{color-scheme:dark}
/* body 固定高度，flex纵向，footer始终在底部不随内容滚动 */
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;color:#f8fafc;font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;background:#060b18;position:relative;overflow:hidden}
#rain{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:none}
button{-webkit-tap-highlight-color:transparent;outline:none}
*:focus{outline:none}
/* shell 占满剩余空间，内部滚动 */
.shell{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;z-index:1;width:min(100% - 32px,920px);margin:0 auto;padding:24px 0 16px}
/* footer 在 body 底部，不参与 shell 滚动 */
.footer{flex-shrink:0;position:relative;z-index:1;text-align:center;color:#77859d;font-size:13px;line-height:1.7;padding:12px 8px;background:rgba(6,11,24,.85);border-top:1px solid rgba(255,255,255,.04)}
.top{text-align:center;padding:12px 8px 20px}
.logo{display:block;width:70px;height:70px;object-fit:cover;border-radius:20px;margin:0 auto 12px;box-shadow:0 0 28px #60a5fa55}
.fallback-logo{display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#7c3aed);font-size:34px}
.top h1,.hero h1{margin:0 0 7px}
.top h1{font-size:clamp(25px,6vw,36px)}
.top p,.hero p,.card p,.tip{margin:0;color:#aebbd0;line-height:1.55}
.notice{margin:0 0 18px;padding:13px 16px;border:1px solid #60a5fa35;border-radius:15px;background:#101a31bb;color:#dcecff;line-height:1.5}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{position:relative;display:block;padding:22px;border:1px solid color-mix(in srgb,var(--glow,#60a5fa) 30%,transparent);border-right:3px solid color-mix(in srgb,var(--glow,#60a5fa) 70%,transparent);border-radius:20px;background:linear-gradient(145deg,#111a2dde,#0b1020e8);box-shadow:0 12px 36px #0005,inset 0 1px #ffffff0a;overflow:hidden;transition:transform .18s,box-shadow .18s;-webkit-tap-highlight-color:transparent}
.card:after{content:"";position:absolute;right:0;top:0;width:3px;height:100%;background:linear-gradient(180deg,var(--glow,#60a5fa),color-mix(in srgb,var(--glow,#60a5fa) 30%,transparent));border-radius:0 20px 20px 0}
.card:before{content:"";position:absolute;width:160px;height:160px;right:-60px;top:-60px;border-radius:50%;background:var(--glow,#60a5fa);filter:blur(55px);opacity:.25}
.card h2{margin:10px 0 6px;font-size:21px}
.arrow{position:absolute;right:22px;bottom:18px;color:var(--glow);font-size:22px;opacity:.85}
.home-main-buy{margin-top:18px;padding:16px;border:1px solid #fb923c35;border-radius:20px;background:#11182ad9}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:66px;padding:12px 18px;border:1px solid #ffffff26;border-radius:16px;color:#fff!important;-webkit-text-fill-color:#fff;font-size:20px;font-weight:800;letter-spacing:.3px;text-align:center;box-shadow:0 10px 24px #0005,inset 0 1px #ffffff40;transition:transform .18s,filter .18s;-webkit-tap-highlight-color:transparent;outline:none}
.btn:active{transform:scale(.98)}
.btn:hover{filter:brightness(1.08)}
.btn.buy,.btn.main{background:linear-gradient(135deg,#f97316,#ef4444 55%,#db2777)}
.btn.download{background:linear-gradient(135deg,#16a34a,#059669 50%,#0891b2)}
.btn.disabled{pointer-events:none;background:linear-gradient(135deg,#475569,#334155);opacity:.62}
.detail{max-width:700px;padding-top:20px}
.back{display:inline-flex;align-items:center;min-height:40px;padding:8px 13px;margin-bottom:14px;border:1px solid #ffffff1c;border-radius:12px;background:#10182ab8;color:#dbeafe;-webkit-tap-highlight-color:transparent}
.hero{text-align:center;min-height:135px;padding:20px;margin-bottom:16px}
.hero h1{font-size:26px}
.cover{display:block;width:72px;height:72px;object-fit:cover;border-radius:18px;margin:0 auto 9px}
.detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qr-card{padding:18px;margin-bottom:16px}
.qr-card h2{margin:0 0 12px;font-size:20px}
.qr{display:block;width:min(100%,220px);aspect-ratio:1;object-fit:contain;margin:0 auto 10px;padding:8px;border-radius:16px;background:#fff}
.placeholder{display:grid;place-items:center;width:min(100%,220px);aspect-ratio:1;margin:0 auto 10px;border:1px dashed #64748b;border-radius:16px;color:#94a3b8;background:#080d1a}
.tip{font-size:14px}
@media(max-width:600px){
 .shell{width:calc(100% - 32px);padding-top:16px}
 .top{padding-top:6px}
 .grid{grid-template-columns:1fr;gap:14px}
 .card{padding:18px}
 .hero{min-height:130px;padding:17px;margin-bottom:14px}
 .hero h1{font-size:24px}
 .detail-actions{grid-template-columns:1fr;gap:12px}
 .btn{min-height:64px;font-size:19px}
 .home-main-buy{padding:13px;margin-top:14px}
 .qr-card{padding:15px;margin-bottom:14px}
 .qr{width:min(100%,210px)}
}