/* App 下载页 · 电商活力风（与主站同色系） */
:root{--brand1:#FF6B35;--brand2:#FF3D71;--ios1:#7C4DFF;--ios2:#448AFF;--text:#1F2333;--sub:#8A8FA3;--card:#fff;--bg:#F6F7FB;--ok:#16A34A;--radius:20px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:float 14s ease-in-out infinite}
.b1{width:360px;height:360px;left:-120px;top:-120px;background:radial-gradient(circle,#FF8C66,#FF3D71 70%)}
.b2{width:300px;height:300px;right:-110px;top:22%;background:radial-gradient(circle,#B39DFF,#448AFF 70%);animation-delay:-5s}
.b3{width:260px;height:260px;left:30%;bottom:-120px;background:radial-gradient(circle,#FFD28A,#FF6B35 70%);animation-delay:-9s}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(31,35,51,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(31,35,51,.04) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle at 50% 30%,#000 30%,transparent 75%)}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-24px) scale(1.08)}}
.wrap{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom))}
/* hero */
.hero{text-align:center;padding:26px 0 18px;animation:up .6s ease both}
.logo-wrap{position:relative;width:108px;height:108px;margin:0 auto 18px}
.logo-ring{position:absolute;inset:-10px;border-radius:34px;background:conic-gradient(from 0deg,var(--brand1),var(--brand2),var(--ios1),var(--ios2),var(--brand1));filter:blur(14px);opacity:.55;animation:spin 8s linear infinite}
.logo{position:relative;width:108px;height:108px;border-radius:28px;background:linear-gradient(135deg,var(--brand1),var(--brand2));box-shadow:0 18px 40px rgba(255,61,113,.35),inset 0 1px 0 rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:bob 4s ease-in-out infinite}
.logo img{width:100%;height:100%;object-fit:cover}.logo svg{width:52px;height:52px;color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
h1{font-size:26px;font-weight:800;letter-spacing:.5px}
.slogan{color:var(--sub);margin-top:6px;font-size:14px}
.skeleton h1,.skeleton .slogan{background:linear-gradient(90deg,#EEF0F6 25%,#F8F9FC 50%,#EEF0F6 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px;color:transparent;width:60%;margin-left:auto;margin-right:auto}
@keyframes sk{to{background-position:-200% 0}}
/* panel */
.panel{background:var(--card);border-radius:var(--radius);padding:22px 20px;box-shadow:0 10px 40px rgba(31,35,51,.08),0 1px 0 rgba(255,255,255,.8) inset;animation:up .6s .1s ease both}
.plat{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.plat-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 46px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.plat-ic.android{background:linear-gradient(135deg,#34D399,#059669)}.plat-ic.ios{background:linear-gradient(135deg,#1F2333,#4B5563)}
.plat-ic svg{width:26px;height:26px}
.plat b{font-size:17px;display:block}.plat span{color:var(--sub);font-size:12px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{background:#F5F7FB;border-radius:999px;padding:5px 12px;font-size:12px;color:var(--sub)}.chip b{color:var(--text);font-weight:600}
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;border:0;border-radius:16px;color:#fff;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;overflow:hidden;transition:transform .12s ease,box-shadow .2s;isolation:isolate}
.btn.android{background:linear-gradient(135deg,var(--brand1),var(--brand2));box-shadow:0 12px 28px rgba(255,61,113,.35)}
.btn.ios{background:linear-gradient(135deg,var(--ios1),var(--ios2));box-shadow:0 12px 28px rgba(68,138,255,.35)}
.btn:active{transform:scale(.97)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:250% 100%;animation:shine 2.6s linear infinite;z-index:-1}
@keyframes shine{0%{background-position:150% 0}100%{background-position:-150% 0}}
.btn svg{width:22px;height:22px}.btn small{font-weight:500;opacity:.85;font-size:13px}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.note{margin-top:14px;color:var(--sub);font-size:12px;line-height:1.6;white-space:pre-line}
.tip{margin-top:14px;display:flex;gap:8px;align-items:flex-start;background:#FFF7ED;border:1px solid #FFE4CC;color:#9A3412;border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.5}.tip svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px}
/* empty */
.empty{text-align:center;padding:26px 10px 14px}
.empty-art{width:120px;height:120px;margin:0 auto 14px;position:relative}
.empty-art .box{position:absolute;inset:18px;border-radius:24px;background:linear-gradient(135deg,#EEF0F6,#F8F9FC);border:2px dashed #D9DDE8;animation:bob 4s ease-in-out infinite}
.empty-art svg{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);color:#B3B9CC}
.empty b{display:block;font-size:17px;margin-bottom:6px}.empty p{color:var(--sub);font-size:13px}
.btn.disabled{background:linear-gradient(135deg,#D9DDE8,#C7CCD9);box-shadow:none;cursor:not-allowed;margin-top:18px}.btn.disabled::before{display:none}
/* other platform + desktop */
.other{margin-top:14px;animation:up .6s .2s ease both}
.other a{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border-radius:14px;padding:12px 14px;color:var(--text);text-decoration:none;font-size:13px;border:1px solid rgba(255,255,255,.9)}
.other a span{display:flex;align-items:center;gap:8px}.other svg{width:18px;height:18px;color:var(--sub)}
.other .muted{color:var(--sub)}
.desk{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.desk .card{background:var(--card);border-radius:16px;padding:16px;text-align:center;box-shadow:0 8px 24px rgba(31,35,51,.06)}
.desk .card .plat-ic{margin:0 auto 10px}.desk .card b{display:block;margin-bottom:4px}.desk .card .chip{display:inline-block;margin-top:6px}
.desk .card .btn{height:44px;font-size:14px;margin-top:12px;border-radius:12px}
.qr{margin-top:14px;background:var(--card);border-radius:16px;padding:16px;text-align:center;box-shadow:0 8px 24px rgba(31,35,51,.06)}
.qr svg{width:160px;height:160px;border-radius:10px;background:#fff;padding:8px;box-shadow:inset 0 0 0 1px #EEF0F6}.qr p{margin-top:8px;color:var(--sub);font-size:12px}
.notice{margin-top:14px;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border-radius:14px;padding:12px 14px;font-size:12px;color:#4B5563;line-height:1.6;white-space:pre-line;border:1px solid rgba(255,255,255,.9);animation:up .6s .25s ease both}
.foot{text-align:center;color:#B3B9CC;font-size:11px;margin-top:26px}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 微信/QQ 内置浏览器遮罩 */
.wx-mask{position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.72);color:#fff;padding:26px 24px}
.wx-arrow{position:absolute;right:26px;top:14px;width:40px;height:70px;border-right:3px solid #fff;border-top:3px solid #fff;border-radius:0 22px 0 0;transform:skewX(8deg);animation:bob 1.6s ease-in-out infinite}
.wx-tip{margin-top:110px;text-align:center}.wx-tip b{display:block;font-size:20px;margin-bottom:8px}.wx-tip span{opacity:.85}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (min-width:720px){.wrap{max-width:560px;padding-top:56px}h1{font-size:30px}}