:root{
--bg:#eef2f9;--bg2:#e4ebf5;--card:#fff;
--primary:#2b6cff;--primary-d:#1a4ed8;--cyan:#00b8d9;--purple:#7c3aed;
--green:#10b981;--orange:#f59e0b;--red:#ef4444;--gold:#d4a017;
--text:#1a2332;--text2:#5a6a85;--text3:#94a3b8;
--border:rgba(43,108,255,0.08);--border2:rgba(0,0,0,0.06);
--shadow:0 2px 8px rgba(43,108,255,0.06);--shadow-h:0 8px 24px rgba(43,108,255,0.12);
--radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);font-size:14px}
a{text-decoration:none;color:inherit}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at 15% -5%,rgba(43,108,255,0.06),transparent 45%),radial-gradient(ellipse at 85% 5%,rgba(0,184,217,0.05),transparent 40%),linear-gradient(180deg,var(--bg),var(--bg2))}
body::after{content:"";position:fixed;inset:0;z-index:-1;background-image:linear-gradient(rgba(43,108,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(43,108,255,0.025) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.dl-mobile-header{display:none}
.dl-hero{position:relative;padding:56px 0 48px;overflow:hidden}
.dl-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.dl-hero-bg .orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.4}
.dl-hero-bg .o1{width:500px;height:500px;background:rgba(43,108,255,0.15);top:-150px;left:10%}
.dl-hero-bg .o2{width:400px;height:400px;background:rgba(0,184,217,0.1);bottom:-100px;right:5%}
.dl-hero-inner{display:flex;align-items:center;gap:48px;justify-content:center}
.dl-hero-text{flex:1;max-width:500px}
.dl-hero-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:20px;background:rgba(43,108,255,0.06);border:1px solid var(--border);font-size:13px;color:var(--primary);margin-bottom:20px}
.dl-hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
.dl-hero-title{font-size:38px;font-weight:800;line-height:1.2;margin-bottom:16px}
.dl-hero-title .grad{background:linear-gradient(135deg,var(--primary),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dl-hero-desc{font-size:16px;color:var(--text2);line-height:1.7;margin-bottom:24px}
.dl-platforms{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dl-platforms .p{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;background:rgba(43,108,255,0.03);border:1px solid var(--border);font-size:13px;color:var(--text2)}
.dl-platforms .p .pd{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dl-platforms .p.done .pd{background:var(--green)}
.dl-platforms .p.todo .pd{background:var(--text3)}
.dl-platforms .p.todo{color:var(--text3)}
/* ===== 手机展示 ===== */
.dl-phone-showcase{flex-shrink:0;position:relative}
.dl-phone-group{display:flex;gap:16px;align-items:center}
.dl-phone{width:180px;height:340px;border-radius:26px;background:linear-gradient(145deg,#1e293b,#334155);padding:7px;box-shadow:0 16px 48px rgba(30,41,59,0.3),inset 0 2px 0 rgba(255,255,255,0.08);position:relative}
.dl-phone::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:54px;height:5px;background:#1e293b;border-radius:0 0 5px 5px;z-index:3}
.dl-phone-screen{width:100%;height:100%;border-radius:20px;background:#f0f4ff;overflow:hidden;display:flex;flex-direction:column}
.dl-phone:nth-child(1){transform:perspective(800px) rotateY(12deg) translateY(-12px)}
.dl-phone:nth-child(3){transform:perspective(800px) rotateY(-12deg) translateY(12px)}
.dl-ps-status{height:22px;background:linear-gradient(135deg,var(--primary),var(--cyan));display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#fff;font-size:7px;font-weight:600;flex-shrink:0}
.dl-ps-nav{height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--border);font-size:8px;font-weight:700;color:var(--text);flex-shrink:0}
.dl-ps-search{margin:6px;height:14px;background:rgba(43,108,255,0.04);border:1px solid var(--border);border-radius:7px;display:flex;align-items:center;padding:0 5px;flex-shrink:0}
.dl-ps-search .s-ph{font-size:6px;color:var(--text3)}
.dl-ps-content{padding:0 6px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.dl-ps-cat{display:flex;gap:3px;flex-shrink:0}
.dl-ps-cat span{padding:2px 6px;border-radius:8px;background:rgba(43,108,255,0.06);font-size:6px;color:var(--text2)}
.dl-ps-cat span.active{background:var(--primary);color:#fff}
.dl-ps-card-row{display:flex;gap:3px}
.dl-ps-mcard{flex:1;aspect-ratio:16/9;border-radius:5px;background:linear-gradient(135deg,rgba(43,108,255,0.08),rgba(0,184,217,0.04));border:1px solid var(--border)}
.dl-ps-lcard{display:flex;align-items:center;gap:4px;padding:4px;border-radius:6px;background:rgba(43,108,255,0.03)}
.dl-ps-lcard .lc-cover{width:28px;height:20px;border-radius:3px;background:linear-gradient(135deg,rgba(43,108,255,0.08),rgba(0,184,217,0.04));border:1px solid var(--border);flex-shrink:0}
.dl-ps-lcard .lc-info{flex:1}
.dl-ps-lcard .lc-title{height:4px;background:rgba(0,0,0,0.08);border-radius:2px;margin-bottom:2px;width:80%}
.dl-ps-lcard .lc-meta{height:3px;background:rgba(0,0,0,0.04);border-radius:2px;width:50%}
/* ===== 核心功能 ===== */
.dl-section{padding:48px 0}
.dl-section-head{text-align:center;margin-bottom:36px}
.dl-section-head h2{font-size:28px;font-weight:800;margin-bottom:8px}
.dl-section-head h2 .grad{background:linear-gradient(135deg,var(--primary),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dl-section-head p{font-size:15px;color:var(--text2)}
.dl-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dl-feature{background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:28px;transition:all .3s;cursor:pointer;box-shadow:var(--shadow)}
.dl-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:rgba(43,108,255,0.15)}
.dl-feature .df-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:22px;font-weight:700;color:#fff}
.dl-feature:nth-child(1) .df-icon{background:linear-gradient(135deg,var(--primary),var(--primary-d))}
.dl-feature:nth-child(2) .df-icon{background:linear-gradient(135deg,var(--cyan),#0891b2)}
.dl-feature:nth-child(3) .df-icon{background:linear-gradient(135deg,var(--purple),#6d28d9)}
.dl-feature:nth-child(4) .df-icon{background:linear-gradient(135deg,var(--green),#059669)}
.dl-feature:nth-child(5) .df-icon{background:linear-gradient(135deg,var(--orange),#d97706)}
.dl-feature:nth-child(6) .df-icon{background:linear-gradient(135deg,var(--gold),#b8860b)}
.dl-feature .df-title{font-size:16px;font-weight:700;margin-bottom:8px}
.dl-feature .df-desc{font-size:13px;color:var(--text2);line-height:1.6}
/* ===== 版本选择下载区 ===== */
.dl-version-grid{display:flex;justify-content:center;gap:28px;max-width:960px;margin:0 auto}
.dl-version-card{background:var(--card);border:2px solid var(--border2);border-radius:20px;width:290px;box-shadow:var(--shadow);transition:all .3s;position:relative;overflow:hidden}
.dl-version-card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px)}
.dl-version-card.active{border-color:var(--primary);box-shadow:0 8px 32px rgba(43,108,255,0.15)}
.dl-version-card.active::before{content:'推荐';position:absolute;top:16px;right:-34px;width:100px;text-align:center;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;font-size:11px;font-weight:700;padding:3px 0;transform:rotate(45deg);z-index:2}
.dl-vc-header{padding:24px 24px 16px;text-align:center}
.dl-vc-header .vc-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:13px;font-weight:700;color:#fff;letter-spacing:.5px}
.dl-version-card.android .vc-icon{background:linear-gradient(135deg,#10b981,#059669)}
.dl-version-card.harmony .vc-icon{background:linear-gradient(135deg,#00b8d9,#0891b2)}
.dl-version-card.ios .vc-icon{background:linear-gradient(135deg,#94a3b8,#64748b)}
.dl-vc-header .vc-name{font-size:18px;font-weight:700;margin-bottom:4px}
.dl-vc-header .vc-ver{font-size:12px;color:var(--text3)}
.dl-vc-body{padding:0 24px 16px}
.dl-vc-info{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--border2);font-size:13px}
.dl-vc-info:first-of-type{border-top:none}
.dl-vc-info .vi-label{color:var(--text3)}
.dl-vc-info .vi-value{color:var(--text2);font-weight:600}
.dl-vc-qr{padding:16px 24px 20px;text-align:center;background:rgba(43,108,255,0.02);border-top:1px solid var(--border2)}
.dl-vc-qr .qr-img{width:130px;height:130px;margin:0 auto 10px;border-radius:10px;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .25s;overflow:hidden}
.dl-version-card:hover .qr-img{border-color:var(--primary);box-shadow:0 4px 16px rgba(43,108,255,0.1)}
.dl-vc-qr .qr-img img{width:100%;height:100%;object-fit:cover}
.dl-vc-qr .qr-img .qr-ph{width:88px;height:88px;border-radius:18px;background:linear-gradient(145deg,#f2f6ff,#e8efff);border:1px dashed rgba(43,108,255,.28);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;font-weight:700;letter-spacing:1px}
.dl-vc-qr .qr-img .qr-ph::before{content:"待发布"}
.dl-vc-qr .qr-img .qr-canvas{width:126px;height:126px;display:flex;align-items:center;justify-content:center}
.dl-vc-qr .qr-img .qr-canvas canvas{border-radius:6px}
.dl-vc-qr .qr-tip{font-size:11px;color:var(--text3)}
.dl-vc-btn-area{padding:0 24px 24px}
.dl-vc-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:all .25s;border:none;text-decoration:none}
.dl-version-card.android .dl-vc-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff}
.dl-version-card.android .dl-vc-btn:hover{box-shadow:0 8px 24px rgba(16,185,129,0.35);transform:translateY(-2px)}
.dl-version-card.harmony .dl-vc-btn{background:linear-gradient(135deg,#00b8d9,#0891b2);color:#fff}
.dl-version-card.harmony .dl-vc-btn:hover{box-shadow:0 8px 24px rgba(0,184,217,0.35);transform:translateY(-2px)}
.dl-version-card.ios .dl-vc-btn{background:linear-gradient(135deg,#475569,#1e293b);color:#fff;border:1px solid var(--border2)}
.dl-version-card.ios .dl-vc-btn:hover{box-shadow:0 8px 24px rgba(30,41,59,.28);transform:translateY(-2px)}
.dl-version-card .dl-vc-btn:disabled,.dl-version-card .dl-vc-btn:disabled:hover{background:rgba(0,0,0,.04);color:var(--text3);cursor:not-allowed;border:1px solid var(--border2);box-shadow:none;transform:none}
.dl-vc-disabled{font-size:12px;color:var(--text3);text-align:center;padding:0 24px 20px}
.dl-vc-disabled strong{color:var(--purple)}
/* ===== 使用场景 ===== */
.dl-scenes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dl-scene{background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:24px;transition:all .3s;cursor:pointer;text-align:center;box-shadow:var(--shadow)}
.dl-scene:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.dl-scene .ds-icon{width:48px;height:48px;border-radius:50%;background:rgba(43,108,255,0.06);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;font-weight:700;color:var(--primary)}
.dl-scene .ds-title{font-size:14px;font-weight:600;margin-bottom:4px}
.dl-scene .ds-desc{font-size:12px;color:var(--text3)}
/* ===== FAQ ===== */
.dl-faq-list{max-width:800px;margin:0 auto}
.dl-faq-item{background:var(--card);border:1px solid var(--border2);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:all .25s}
.dl-faq-item:hover{border-color:var(--border)}
.dl-faq-q{padding:18px 24px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.dl-faq-q .faq-icon{font-size:20px;color:var(--text3);transition:transform .25s}
.dl-faq-item.open .faq-icon{transform:rotate(45deg)}
.dl-faq-a{padding:0 24px;font-size:13px;color:var(--text2);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s}
.dl-faq-item.open .dl-faq-a{padding:0 24px 18px;max-height:200px}
/* ===== 响应式 ===== */
@media(max-width:1320px){body.app-download-page{overflow-x:hidden}.app-download-page .common-header{display:none}.dl-mobile-header{display:flex;height:56px;align-items:center;gap:18px;padding:0 16px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.dl-mobile-header .brand{font-size:18px;font-weight:800;color:var(--primary);margin-right:auto}.dl-mobile-header a:not(.brand){font-size:13px;color:var(--text2)}.app-download-page .fixed-right-btns,.app-download-page .footer .links,.app-download-page .footer .fast-links,.app-download-page .footer .qr-section{display:none}.app-download-page .footer .explain,.app-download-page .footer .copyright{width:100%;max-width:100%;padding:16px;font-size:12px;line-height:1.6}}
@media(max-width:900px){.wrap{padding:0 16px}.dl-hero{padding-top:32px}.dl-hero-inner{flex-direction:column}.dl-phone-group{display:none}.dl-features-grid{grid-template-columns:1fr}.dl-version-grid{flex-direction:column;align-items:center}.dl-scenes-grid{grid-template-columns:repeat(2,1fr)}.dl-version-card{width:min(290px,100%)}}
@media(max-width:420px){.dl-hero-title{font-size:30px}.dl-section{padding:36px 0}.dl-scenes-grid{grid-template-columns:1fr}.dl-faq-q{padding:16px}.dl-faq-a{padding-left:16px;padding-right:16px}}