/* ============ 云分发 - 门户/登录/下载页样式（清新蓝 SaaS 风格） ============ */
:root {
  --primary: #2b6cf5;
  --primary-dark: #1e56d6;
  --primary-light: #4f7cff;
  --purple: #6a5af9;
  --text: #1f2733;
  --text2: #5b6572;
  --muted: #8a93a0;
  --line: #e8ecf2;
  --bg: #f5f8fd;
  --bg-alt: #ffffff;
  --radius: 14px;
  --shadow: 0 10px 34px rgba(31, 55, 105, .08);
  --shadow-sm: 0 4px 16px rgba(31, 55, 105, .06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--text); background: #fff; font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; border: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3, h4 { font-weight: 600; }

/* 按钮 */
.btn {
  display: inline-block; padding: 9px 22px; border-radius: 8px; font-size: 14px;
  border: 1px solid transparent; cursor: pointer; transition: .2s; line-height: 1.5;
  background: #eef1f6; color: var(--text); text-align: center;
}
.btn:hover { opacity: .92; transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; box-shadow: 0 6px 18px rgba(43,108,245,.32); }
.btn-primary:hover { opacity: 1; filter: brightness(1.05); transform: translateY(-1px); }
.btn-outline { border-color: var(--primary); color: var(--primary); background: #fff; }
.btn-outline:hover { background: #f0f5ff; opacity: 1; }
.btn-outline-light { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,.16); opacity: 1; }
.btn-ghost { color: var(--text2); background: transparent; }
.btn-lg { padding: 13px 34px; font-size: 16px; border-radius: 10px; }
.btn-block { display: block; width: 100%; }
.btn-danger { background: #f5493d; color: #fff; }
.btn-success { background: #19b26b; color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 6px; }

/* 表单 */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
.form-group label i { color: #f5493d; font-style: normal; }
.input, .form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; outline: none; transition: .2s; background: #fff; color: var(--text);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus, .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(43,108,245,.12); }
.alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.alert-error { background: #fdecea; color: #d93025; }
.alert-success { background: #e6f7ef; color: #0e9355; }
.alert-info { background: #eef4ff; color: #2b6cf5; }

/* ============ 头部导航 ============ */
.site-header { background: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(31,55,105,.05); }
.header-inner { display: flex; align-items: center; height: 68px; gap: 36px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--text); }
.logo-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); display: flex; align-items: center; justify-content: center; }
.logo-img { height: 40px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.logo.has-img { gap: 0; }
.logo.has-img .logo-text { display: none; }
.nav { display: flex; gap: 28px; flex: 1; }
.nav a { color: var(--text2); font-size: 15px; padding: 6px 0; position: relative; transition: .2s; }
.nav a:hover, .nav a.active { color: var(--primary); font-weight: 500; }
.nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--primary); }

/* ============ 主导航：增值服务下拉菜单 ============ */
.nav-item.has-dropdown { display: flex; align-items: center; position: relative; }
.nav a.nav-parent { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.nav a.nav-parent::after { display: none; }
.nav-caret { transition: transform .22s ease; }
.has-dropdown:hover .nav-caret, .has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px);
  min-width: 236px; padding: 8px; background: #fff; border: 1px solid #edf0f6;
  border-radius: 14px; box-shadow: 0 18px 46px rgba(31,55,105,.16);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .22s ease, visibility .2s;
  z-index: 200;
}
.nav-dropdown::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 13px; height: 13px; background: #fff; border-left: 1px solid #edf0f6; border-top: 1px solid #edf0f6; }
.has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dropdown a.nd-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px;
  color: var(--text2); font-size: 14px; font-weight: 400; line-height: 1.3;
}
.nav-dropdown a.nd-item::after { display: none; }
.nav-dropdown a.nd-item:hover { background: #f5f8ff; color: var(--text); font-weight: 400; }
.nd-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nd-txt b { display: block; font-size: 14px; font-weight: 600; color: #1f2d3d; }
.nd-txt em { display: block; font-style: normal; font-size: 12px; color: #9aa5b5; margin-top: 1px; }
.nav-dropdown a.nd-item:hover .nd-txt b { color: var(--primary); }
.header-user { display: flex; gap: 10px; }

/* ============ Hero（清新蓝渐变 + 装饰光斑） ============ */
.hero { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #1e4fd6 0%, #2b6cf5 45%, #4f7cff 100%);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 320px at 12% 18%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(500px 280px at 88% 22%, rgba(120,170,255,.35), transparent 60%),
    radial-gradient(420px 240px at 70% 88%, rgba(106,90,249,.30), transparent 60%);
}
.hero::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 1080,0 1440,30 L1440,60 L0,60 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center bottom; background-size: 100% 100%; }
.hero-inner { position: relative; text-align: center; padding: 92px 20px 110px; }
.hero h1 { font-size: 42px; letter-spacing: 1px; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.12); }
.hero-sub { margin: 20px 0 32px; font-size: 17px; color: rgba(255,255,255,.88); line-height: 1.9; }
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-btns .btn-primary { background: #fff; color: var(--primary); box-shadow: 0 8px 22px rgba(0,0,0,.15); }
.hero-btns .btn-primary:hover { filter: brightness(1.02); }
.hero-tips { display: flex; gap: 28px; justify-content: center; margin-top: 46px; flex-wrap: wrap; }
.hero-tips span { font-size: 14px; color: rgba(255,255,255,.82); position: relative; padding-left: 18px; }
.hero-tips span::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110,231,168,.25); }

/* ============ 通用小节 ============ */
.sec-title { text-align: center; font-size: 30px; margin-bottom: 10px; color: var(--text); }
.sec-desc { color: var(--text2); text-align: center; margin-bottom: 38px; font-size: 15px; }
.sec-desc.center { text-align: center; }
section { padding: 68px 0; }
section.alt { background: var(--bg); }

/* 四大功能（悬浮卡片） */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: -52px auto 0; position: relative; z-index: 5; }
.feature-card {
  background: #fff; border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow);
  transition: .25s; border: 1px solid transparent;
}
.feature-card:hover { transform: translateY(-6px); border-color: #d8e4ff; box-shadow: 0 16px 38px rgba(43,108,245,.12); }
.fc-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: #fff; }
.c-blue { background: linear-gradient(135deg, #4f8cff, #2b6cf5); }
.c-purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.c-orange { background: linear-gradient(135deg, #fb923c, #f97316); }
.c-green { background: linear-gradient(135deg, #34d399, #10b981); }
.feature-card h3 { font-size: 17px; margin-bottom: 8px; }
.feature-card p { color: var(--text2); font-size: 13.5px; line-height: 1.7; }

/* UDID */
.udid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.udid-card { background: #fff; border-radius: var(--radius); padding: 28px 22px; text-align: center; box-shadow: var(--shadow-sm); transition: .2s; border: 1px solid var(--line); }
.udid-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d8e4ff; }
.udid-card h3 { font-size: 16px; margin-bottom: 10px; }
.udid-card p { color: var(--text2); font-size: 13px; min-height: 62px; margin-bottom: 16px; line-height: 1.7; }

/* 分发服务 */
.dist-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; }
.dist-left h2 { font-size: 30px; margin-bottom: 10px; }
.dist-left .sec-desc { text-align: left; }
.dist-points { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0 32px; }
.dp { display: flex; gap: 12px; align-items: flex-start; }
.dp i { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-light)); margin-top: 8px; flex: none; box-shadow: 0 0 0 3px rgba(43,108,245,.12); }
.dp b { display: block; font-size: 15px; }
.dp span { color: var(--text2); font-size: 13px; }
.phone-mock { width: 250px; margin: 0 auto; background: #1a2540; border-radius: 34px; padding: 12px; box-shadow: 0 28px 56px rgba(26,37,64,.28); }
.phone-notch { width: 90px; height: 20px; background: #1a2540; border-radius: 0 0 14px 14px; margin: -12px auto 8px; position: relative; }
.phone-screen { background: linear-gradient(160deg, #f0f5ff, #e8ecf8); border-radius: 24px; padding: 30px 20px 24px; text-align: center; }
.pm-icon { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(43,108,245,.3); }
.pm-name { font-weight: 600; font-size: 16px; }
.pm-ver { color: var(--muted); font-size: 12px; margin: 4px 0 14px; }
.pm-btn { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; border-radius: 20px; padding: 8px 0; font-size: 14px; }
.pm-qr { width: 84px; height: 84px; background: repeating-conic-gradient(#1f2733 0 25%, #fff 0 50%) 0 0/16px 16px; margin: 16px auto 0; border-radius: 8px; opacity: .85; }

/* 打包封装 / iOS签名 卡片 */
.pack-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 6px; }
.sign-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 6px; }
.pack-card, .sign-card { background: #fff; border-radius: var(--radius); padding: 28px 22px; box-shadow: var(--shadow-sm); transition: .2s; border: 1px solid var(--line); }
.pack-card:hover, .sign-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d8e4ff; }
.pack-card b, .sign-card b { display: block; font-size: 16px; margin-bottom: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack-card span, .sign-card span { color: var(--text2); font-size: 13px; line-height: 1.7; }

/* 统计（蓝色渐变条） */
.stats-band { background: linear-gradient(135deg, #1e4fd6 0%, #2b6cf5 50%, #4f7cff 100%); color: #fff; position: relative; overflow: hidden; }
.stats-band::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(500px 200px at 15% 50%, rgba(255,255,255,.12), transparent 60%),
              radial-gradient(400px 180px at 85% 50%, rgba(106,90,249,.25), transparent 60%); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 36px 20px; position: relative; }
.stat b { font-size: 42px; display: block; font-weight: 800; color: #fff; letter-spacing: 1px; }
.stat span { color: rgba(255,255,255,.78); font-size: 14px; margin-top: 4px; display: block; }

/* 公告 */
.notice-banner { background: #fff7ec; border: 1px solid #ffe3bd; color: #9a6b1f; border-radius: 10px; padding: 12px 18px; font-size: 13.5px; margin-bottom: 34px; }
.notice-list { list-style: none; max-width: 900px; margin: 20px auto 0; }
.notice-list li { padding: 16px 4px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; transition: .2s; }
.notice-list li:hover { background: #fafbfe; }
.notice-list .n-tag { background: #eef4ff; color: var(--primary); font-size: 12px; border-radius: 5px; padding: 2px 10px; flex: none; }
.notice-list a { flex: 1; min-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-list a:hover { color: var(--primary); }
.notice-list time { color: var(--muted); font-size: 13px; }
.n-detail { display: none; width: 100%; color: var(--text2); font-size: 13.5px; padding: 12px 0 4px; line-height: 1.8; }
.notice-list li.open .n-detail { display: block; }
.notice-list .empty { justify-content: center; color: var(--muted); }

/* 页脚（深灰） */
.site-footer { background: #2b2f36; color: rgba(255,255,255,.62); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr 1fr; gap: 30px; padding: 50px 20px 34px; }
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 18px; font-weight: 600; position: relative; padding-bottom: 10px; }
.footer-col h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: rgba(255,255,255,.4); border-radius: 1px; }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,.58); font-size: 13.5px; margin-bottom: 10px; transition: .2s; line-height: 1.7; }
.footer-col a:hover { color: #fff; }
.footer-col.contact-col p { margin-bottom: 8px; }
.qr-col { text-align: center; }
.footer-qr { width: 120px; height: 120px; background: #fff; border-radius: 8px; padding: 8px; margin: 0 auto 10px; }
.footer-qr img { width: 100%; height: 100%; display: block; }
.qr-tip { color: rgba(255,255,255,.5); font-size: 12.5px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; font-size: 13px; text-align: center; color: rgba(255,255,255,.4); }
.footer-badges { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.footer-badges img { height: 32px; width: auto; opacity: .85; }
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 36px 20px 24px; }
  .qr-col { grid-column: 1 / -1; }
  .footer-badges img { height: 26px; }
}

/* ============ 登录/注册 ============ */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 16px;
  background: radial-gradient(700px 380px at 12% 18%, rgba(123,63,242,.5), transparent 60%),
              radial-gradient(700px 400px at 88% 26%, rgba(43,108,245,.5), transparent 60%),
              linear-gradient(135deg, #101a33, #1b1740); }
.auth-box { display: flex; width: 860px; max-width: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.auth-brand { width: 42%; background: linear-gradient(160deg, #223, #2b2d55 60%, #34256b); color: #fff; padding: 46px 36px; }
.auth-brand h2 { font-size: 26px; margin: 34px 0 10px; }
.auth-brand p { color: rgba(255,255,255,.7); font-size: 14px; margin-bottom: 26px; }
.auth-brand ul { list-style: none; }
.auth-brand li { font-size: 14px; color: rgba(255,255,255,.85); margin-bottom: 12px; padding-left: 22px; position: relative; }
.auth-brand li::before { content: "✓"; position: absolute; left: 0; color: #4ade80; font-weight: 700; }
.auth-brand .logo-text { color: #fff; }
.auth-form { width: 58%; background: #fff; padding: 46px 44px; }
.auth-form h3 { font-size: 22px; margin-bottom: 22px; }
.auth-links { display: flex; justify-content: space-between; margin-top: 18px; font-size: 13.5px; }
.auth-links a { color: var(--primary); }

/* ============ 下载页 ============ */
.dl-page { background: linear-gradient(180deg, #16224a 0%, #1b1740 260px, var(--bg) 260px); min-height: 100vh; overflow-x: hidden; }
.dl-header { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 20px; color: #fff; }
.dl-logo { font-weight: 700; font-size: 17px; }
.dl-badge { font-size: 12px; background: rgba(255,255,255,.14); border-radius: 20px; padding: 3px 12px; }
.dl-main { display: flex; justify-content: center; padding: 26px 16px 40px; }
.dl-card { background: #fff; border-radius: 16px; width: 480px; max-width: 100%; padding: 30px 28px; box-shadow: var(--shadow); }
.dl-app { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.dl-icon { width: 76px; height: 76px; border-radius: 18px; overflow: hidden; background: #f0f3f8; flex: none; box-shadow: 0 4px 12px rgba(31,55,105,.12); }
.dl-icon img { width: 100%; height: 100%; object-fit: cover; }
.dl-appinfo h2 { font-size: 19px; margin-bottom: 4px; }
.dl-appinfo p { font-size: 13px; color: var(--text2); }
.muted { color: var(--muted) !important; }
.btn-install {
  display: block; text-align: center; background: linear-gradient(135deg, var(--primary), var(--purple));
  color: #fff; font-size: 17px; font-weight: 600; padding: 13px; border-radius: 12px; box-shadow: 0 8px 20px rgba(43,108,245,.3);
}
.btn-install:hover { filter: brightness(1.05); }
.btn-install.disabled { background: #b9c2cf; box-shadow: none; pointer-events: none; }
.dl-tip { text-align: center; color: var(--muted); font-size: 12.5px; margin: 12px 0 4px; }
.dl-qr { text-align: center; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.dl-qr span { display: block; color: var(--muted); font-size: 13px; margin-top: 8px; }
.dl-qr img, .dl-qr canvas { border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }
.dl-qr #qrcode, .dl-qr #qrcode2 { width: 172px; height: 172px; margin: 0 auto; }
.dl-qr svg { display: block; width: 100%; height: 100%; }
.dl-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; text-align: center; }
.dl-meta span { display: block; font-size: 12px; color: var(--muted); }
.dl-meta b { font-size: 13.5px; font-weight: 600; }
.dl-desc { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.dl-desc h4 { font-size: 15px; margin-bottom: 8px; }
.desc-content { color: var(--text2); font-size: 13.5px; white-space: pre-wrap; }
.dl-pass { display: flex; justify-content: center; padding: 60px 16px; }
.pass-card { text-align: center; width: 360px; max-width: 100%; }
.pass-card .dl-icon { margin: 0 auto 14px; }
.pass-card h2 { margin-bottom: 6px; }
.pass-card .input { margin-bottom: 14px; text-align: center; }
.pc-show { display: none; }
.dl-footer { text-align: center; color: var(--muted); font-size: 12.5px; padding: 10px 0 30px; }

/* ============ 响应式 ============ */
@media (max-width: 1000px) {
  .features { grid-template-columns: repeat(2, 1fr); margin-top: -30px; }
  .udid-grid { grid-template-columns: repeat(2, 1fr); }
  .pack-grid { grid-template-columns: repeat(2, 1fr); }
  .sign-grid { grid-template-columns: repeat(2, 1fr); }
  .dist-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
}
@media (max-width: 620px) {
  .hero h1 { font-size: 28px; }
  .hero-inner { padding: 60px 16px 70px; }
  .features { grid-template-columns: 1fr; }
  .udid-grid, .pack-grid, .sign-grid { grid-template-columns: 1fr; }
  .dist-points { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-grid { grid-template-columns: 1fr; }
  .auth-box { flex-direction: column; }
  .auth-brand, .auth-form { width: 100%; }
  .auth-brand { padding: 30px 28px 24px; }
  .auth-brand h2 { margin-top: 18px; }
  .auth-form { padding: 30px 26px; }
  .sec-title { font-size: 24px; }
  .dl-meta { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pc-show { display: block; }
}

/* 下载页语言切换 */
.dl-lang { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 58%; }
.dl-lang a { color: rgba(255,255,255,.85); font-size: 12px; padding: 3px 10px; border-radius: 20px; text-decoration: none; background: rgba(255,255,255,.08); }
.dl-lang a.on, .dl-lang a:hover { background: #fff; color: #3b6ef6; font-weight: 600; }

/* ============ 登录/注册/找回（仿久分发白色卡片风格） ============ */
.lg-page { min-height: 100vh; background: #f3f5f9; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; box-sizing: border-box; }
.lg-card { width: 1040px; max-width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 12px 44px rgba(31,45,80,.10); display: flex; overflow: hidden; }
.lg-aside { width: 46%; padding: 60px 44px 44px; box-sizing: border-box; }
.lg-aside h1 { font-size: 34px; font-weight: 800; color: #333; letter-spacing: 3px; margin: 0; }
.lg-aside .lg-sub { font-size: 22px; font-weight: 700; color: #555; margin: 20px 0 4px; letter-spacing: 5px; }
.lg-aside img { width: 100%; display: block; margin-top: 10px; }
.lg-main { width: 54%; padding: 46px 58px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.lg-tabs { display: flex; gap: 44px; border-bottom: 1px solid #eef0f4; margin-bottom: 26px; }
.lg-tabs button { background: none; border: 0; padding: 10px 2px; font-size: 18px; color: #9aa3b5; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.lg-tabs button.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
.lg-pane { display: none; }
.lg-pane.active { display: block; }
.lg-field { position: relative; margin-bottom: 18px; }
.lg-field input { width: 100%; height: 50px; box-sizing: border-box; border: 1px solid #e2e6ef; border-radius: 25px; padding: 0 20px 0 50px; font-size: 14px; background: #fff; outline: none; color: #333; font-family: inherit; transition: border-color .15s; }
.lg-field input:focus { border-color: #1677ff; }
.lg-field .lg-ic { position: absolute; left: 19px; top: 16px; width: 18px; height: 18px; color: #9aa3b5; }
.lg-field .lg-eye { position: absolute; right: 18px; top: 16px; width: 18px; height: 18px; color: #9aa3b5; cursor: pointer; border: 0; background: none; padding: 0; }
.lg-code { display: flex; gap: 12px; }
.lg-code .lg-field { flex: 1; margin-bottom: 18px; }
.lg-code-btn { width: 132px; height: 50px; border: 1px solid #1677ff; color: #1677ff; background: #fff; border-radius: 25px; cursor: pointer; font-size: 14px; white-space: nowrap; font-family: inherit; flex-shrink: 0; }
.lg-code-btn:disabled { color: #9aa3b5; border-color: #e2e6ef; cursor: not-allowed; }
.lg-submit { width: 100%; height: 50px; border: 0; border-radius: 25px; background: #1677ff; color: #fff; font-size: 17px; letter-spacing: 8px; cursor: pointer; font-family: inherit; margin-top: 4px; }
.lg-submit:hover { background: #0e6ae8; }
.lg-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 14px; color: #667; }
.lg-row a { color: #1677ff; text-decoration: none; }
.lg-row a:hover { text-decoration: underline; }
.lg-check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #667; }
.lg-check a { color: #1677ff; text-decoration: none; }
.lg-check input { width: 15px; height: 15px; accent-color: #1677ff; }
.lg-alert { padding: 10px 18px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; line-height: 1.6; }
.lg-alert-err { background: #fef0f0; color: #e54545; border: 1px solid #fde2e2; }
.lg-alert-ok { background: #f0f9eb; color: #52a932; border: 1px solid #e1f3d8; }
.lg-foot { margin-top: 30px; text-align: center; color: #aab2c2; font-size: 12.5px; line-height: 1.9; }
.lg-foot a { color: #8a94a6; }
@media (max-width: 900px) {
  .lg-card { flex-direction: column; width: 520px; }
  .lg-aside { width: 100%; padding: 36px 30px 10px; text-align: center; }
  .lg-aside h1 { font-size: 26px; }
  .lg-aside .lg-sub { font-size: 17px; margin: 12px 0 0; }
  .lg-aside img { display: none; }
  .lg-main { width: 100%; padding: 24px 30px 34px; }
}

/* ============ 下载页图形验证码闸门 ============ */
.dl-seccode { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.dl-seccode .input { flex: 1; }
.dl-seccode img { width: 110px; height: 40px; border-radius: 8px; border: 1px solid #e2e6ef; cursor: pointer; background: #f5f7fc; flex: none; }

/* ============ 下载页皮肤 skin2 深邃黑 ============ */
.dl-page.skin2 { background: linear-gradient(180deg, #0b0f1a 0%, #131a2e 260px, #0e1220 260px); }
.dl-page.skin2 .dl-card { background: #1a2236; color: #e8ecf5; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.dl-page.skin2 .dl-appinfo h2 { color: #f2f5fc; }
.dl-page.skin2 .dl-appinfo p, .dl-page.skin2 .muted { color: #9aa6c2; }
.dl-page.skin2 .dl-tip { color: #8b96b3; }
.dl-page.skin2 .dl-qr { border-top-color: rgba(255,255,255,.12); }
.dl-page.skin2 .dl-qr span { color: #9aa6c2; }
.dl-page.skin2 .dl-qr img, .dl-page.skin2 .dl-qr canvas { background: #fff; }
.dl-page.skin2 .dl-meta span { color: #8b96b3; }
.dl-page.skin2 .dl-meta b { color: #e8ecf5; }
.dl-page.skin2 .dl-desc { border-top-color: rgba(255,255,255,.12); }
.dl-page.skin2 .dl-desc h4 { color: #f2f5fc; }
.dl-page.skin2 .desc-content { color: #c3cbde; }
.dl-page.skin2 .btn-install { background: linear-gradient(135deg, #5b8cff, #8a63ff); }
.dl-page.skin2 .input { background: #232c44; border-color: #33405f; color: #e8ecf5; }
.dl-page.skin2 .input::placeholder { color: #7684a5; }
.dl-page.skin2 .dl-footer { color: #7684a5; }
.dl-page.skin2 .dl-seccode img { background: #f5f7fc; }

/* ============ 下载页皮肤 skin3 清新绿 ============ */
.dl-page.skin3 { background: linear-gradient(180deg, #e8f8ef 0%, #dff5ea 260px, var(--bg) 260px); }
.dl-page.skin3 .dl-header { color: #1f7a4d; }
.dl-page.skin3 .dl-badge { background: rgba(31,122,77,.10); color: #1f7a4d; }
.dl-page.skin3 .dl-lang a { color: #1f7a4d; background: rgba(31,122,77,.08); }
.dl-page.skin3 .dl-lang a.on, .dl-page.skin3 .dl-lang a:hover { background: #1f7a4d; color: #fff; }
.dl-page.skin3 .dl-card { border-radius: 22px; border: 1px solid #d7efe2; box-shadow: 0 8px 30px rgba(31,122,77,.08); }
.dl-page.skin3 .dl-icon { border-radius: 22px; box-shadow: 0 4px 14px rgba(31,122,77,.18); }
.dl-page.skin3 .btn-install { background: linear-gradient(135deg, #22b573, #12a05c); border-radius: 26px; }
.dl-page.skin3 .btn-primary { background: #22b573; }

/* ============ 下载页皮肤 skin4 梦幻紫 ============ */
.dl-page.skin4 { background: linear-gradient(180deg, #4b2aa0 0%, #6d28d9 260px, var(--bg) 260px); }
.dl-page.skin4 .dl-badge { background: rgba(255,255,255,.18); }
.dl-page.skin4 .dl-lang a.on, .dl-page.skin4 .dl-lang a:hover { background: #fff; color: #7c3aed; }
.dl-page.skin4 .dl-card { border-radius: 24px; box-shadow: 0 14px 44px rgba(109,40,217,.20); }
.dl-page.skin4 .dl-icon { border-radius: 24px; box-shadow: 0 6px 18px rgba(124,58,237,.25); }
.dl-page.skin4 .btn-install { background: linear-gradient(135deg, #8b5cf6, #d946ef); border-radius: 30px; box-shadow: 0 10px 26px rgba(168,85,247,.38); }
.dl-page.skin4 .btn-primary { background: #7c3aed; }
.dl-page.skin4 .dl-qr img, .dl-page.skin4 .dl-qr canvas { background: #fff; }

/* ============ 下载页皮肤 skin5 活力橙 ============ */
.dl-page.skin5 { background: linear-gradient(180deg, #b4340a 0%, #ea580c 260px, var(--bg) 260px); }
.dl-page.skin5 .dl-badge { background: rgba(255,255,255,.20); }
.dl-page.skin5 .dl-lang a.on, .dl-page.skin5 .dl-lang a:hover { background: #fff; color: #ea580c; }
.dl-page.skin5 .dl-card { border-radius: 18px; box-shadow: 0 12px 38px rgba(234,88,12,.20); }
.dl-page.skin5 .dl-icon { border-radius: 14px; box-shadow: 0 6px 16px rgba(234,88,12,.28); }
.dl-page.skin5 .btn-install { background: linear-gradient(135deg, #fb923c, #f97316); border-radius: 14px; box-shadow: 0 10px 24px rgba(249,115,22,.38); }
.dl-page.skin5 .btn-primary { background: #f97316; }
.dl-page.skin5 .dl-qr img, .dl-page.skin5 .dl-qr canvas { background: #fff; }

/* ============ 下载页皮肤 skin6 极简白 ============ */
.dl-page.skin6 { background: #f3f5f9; }
.dl-page.skin6 .dl-header { color: #1f2d3d; }
.dl-page.skin6 .dl-logo { color: #1f2d3d; }
.dl-page.skin6 .dl-badge { background: #e7ebf2; color: #5a6678; }
.dl-page.skin6 .dl-lang a { color: #5a6678; background: #e7ebf2; }
.dl-page.skin6 .dl-lang a.on, .dl-page.skin6 .dl-lang a:hover { background: #147cf0; color: #fff; }
.dl-page.skin6 .dl-card { border-radius: 20px; border: 1px solid #e9edf4; box-shadow: 0 6px 22px rgba(31,45,80,.07); }
.dl-page.skin6 .dl-icon { border-radius: 20px; }
.dl-page.skin6 .btn-install { background: #147cf0; border-radius: 30px; box-shadow: none; }
.dl-page.skin6 .btn-install:hover { background: #0f6ae0; }
.dl-page.skin6 .btn-primary { background: #147cf0; }
.dl-page.skin6 .dl-footer { color: #a0a8b8; }

.dl-page.skin3 .dl-footer { color: #7a8a80; }

/* ============================================================
   下载页布局模版 tpl1-tpl8（仿久分发平台风格，覆盖基础布局）
   每套模版为不同布局结构，与 skin1-6 配色皮肤正交可叠加
   ============================================================ */

/* ============ tpl1 蓝顶白底（仿九分发 tmp1 · t-bg-1 #157df1 175px 顶部） ============ */
.dl-page.tpl1 {
  min-height: 100vh;
  position: relative;
}
/* 顶部蓝色条 #157df1 高 175px，对应 .t-bg-1 */
.dl-page.tpl1::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 175px;
  background: #157df1;
  z-index: 0;
}
.dl-page.tpl1 .dl-header { color: #fff; position: relative; z-index: 2; }
.dl-page.tpl1 .dl-logo { color: #fff; }
.dl-page.tpl1 .dl-badge { background: rgba(255,255,255,.22); color: #fff; }
.dl-page.tpl1 .dl-lang a { color: rgba(255,255,255,.9); background: rgba(255,255,255,.18); }
.dl-page.tpl1 .dl-lang a.on, .dl-page.tpl1 .dl-lang a:hover { background: #fff; color: #157df1; }
.dl-page.tpl1 .dl-main { position: relative; z-index: 2; }
/* 图标：160px 方角圆角25px白底 + box-shadow 10px，对应 .template-common .t-icon */
.dl-page.tpl1 .dl-card {
  text-align: center;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 16px 44px rgba(31,70,150,.10);
  padding: 0;
}
.dl-page.tpl1 .dl-app { text-align: center; padding-top: 25px; }
.dl-page.tpl1 .dl-icon {
  width: 160px; height: 160px;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.12);
  margin: 0 auto 0;
}
.dl-page.tpl1 .dl-appinfo h2 { color: #333; font-size: 28px; margin: 15px 0 10px; }
.dl-page.tpl1 .dl-appinfo p, .dl-page.tpl1 .muted { color: #666; font-size: 16px; line-height: 24px; }
/* 按钮：主色 #157df1，圆角 6px（不是胶囊形！），高 50px，对应 .template-btn / .ms-btn-primary */
.dl-page.tpl1 .btn-install {
  border-radius: 6px;
  padding: 0 38px;
  height: 50px;
  line-height: 48px;
  background: #157df1;
  color: #fff;
  font-weight: normal;
  font-size: 18px;
  display: inline-block;
  width: auto;
  margin: 35px auto 15px;
}
.dl-page.tpl1 .btn-install:hover { background: #348dee; }
.dl-page.tpl1 .btn-primary { background: #157df1; border-radius: 6px; }
.dl-page.tpl1 .dl-qr { border-top: 0; padding-top: 16px; text-align: center; }
.dl-page.tpl1 .dl-footer { text-align: center; color: #aab2c2; }

/* ============ tpl2 图片顶部（仿九分发 tmp2 · t-bg-2 130px 图片背景） ============ */
.dl-page.tpl2 {
  min-height: 100vh;
  position: relative;
}
/* 顶部 130px 图片背景区，用渐变 + 噪点纹理模拟 */
.dl-page.tpl2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 130px;
  background:
    linear-gradient(180deg, #4facfe 0%, #00f2fe 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='120' height='120' fill='%234facfe'/><circle cx='20' cy='30' r='40' fill='%2300f2fe' opacity='.5'/></svg>") center/cover;
  z-index: 0;
}
.dl-page.tpl2 .dl-header { color: #fff; position: relative; z-index: 2; }
.dl-page.tpl2 .dl-logo { color: #fff; }
.dl-page.tpl2 .dl-badge { background: rgba(255,255,255,.25); color: #fff; }
.dl-page.tpl2 .dl-lang a { color: #fff; background: rgba(255,255,255,.2); }
.dl-page.tpl2 .dl-lang a.on, .dl-page.tpl2 .dl-lang a:hover { background: #fff; color: #157df1; }
.dl-page.tpl2 .dl-card {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 16px 44px rgba(31,70,150,.10);
  text-align: center;
  padding: 25px 28px 28px;
}
.dl-page.tpl2 .dl-app { text-align: center; }
/* 圆形图标（.template-common .t-icon { border-radius: 50% }） */
.dl-page.tpl2 .dl-icon { width: 160px; height: 160px; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.12); margin: 0 auto; background: #fff; }
.dl-page.tpl2 .dl-appinfo h2 { color: #333; font-size: 28px; margin-top: 15px; }
.dl-page.tpl2 .dl-appinfo p, .dl-page.tpl2 .muted { color: #666; font-size: 16px; line-height: 24px; }
/* 按钮统一主色 #157df1 + 圆角 6px */
.dl-page.tpl2 .btn-install {
  background: #157df1;
  border-radius: 6px;
  padding: 0 38px;
  height: 50px;
  line-height: 48px;
  color: #fff;
  font-size: 18px;
  display: inline-block;
  width: auto;
  margin-top: 35px;
}
.dl-page.tpl2 .btn-install:hover { background: #348dee; }
.dl-page.tpl2 .btn-primary { background: #157df1; border-radius: 6px; }
.dl-page.tpl2 .dl-qr { float: none; margin: 18px auto 0; padding-top: 0; border-top: 0; text-align: center; width: auto; clear: both; }
.dl-page.tpl2 .dl-qr span { color: #999; }
.dl-page.tpl2 .dl-tip { text-align: center; color: #aab2c2; }
.dl-page.tpl2 .dl-footer { text-align: center; color: #c0c6d0; font-size: 12px; padding: 12px 0; }

/* ============ tpl3 图片顶部+左手机（仿九分发 tmp3 · t-bg-3 160px） ============ */
.dl-page.tpl3 {
  min-height: 100vh;
  position: relative;
}
/* 顶部 160px 图片背景区 */
.dl-page.tpl3::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  z-index: 0;
}
.dl-page.tpl3 .dl-header { color: #fff; position: relative; z-index: 2; }
.dl-page.tpl3 .dl-logo { color: #fff; }
.dl-page.tpl3 .dl-badge { background: rgba(255,255,255,.25); color: #fff; }
.dl-page.tpl3 .dl-lang a { color: #fff; background: rgba(255,255,255,.2); }
.dl-page.tpl3 .dl-lang a.on, .dl-page.tpl3 .dl-lang a:hover { background: #fff; color: #157df1; }
.dl-page.tpl3 .dl-card {
  text-align: left;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 16px 44px rgba(31,70,150,.10);
  padding: 28px 30px 26px;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
/* 顶部左图标右信息：.dl-app 全局已是 flex，这里只放大间距 */
.dl-page.tpl3 .dl-app { gap: 26px; margin-bottom: 6px; text-align: left; }
.dl-page.tpl3 .dl-icon {
  width: 160px; height: 160px;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.12);
}
.dl-page.tpl3 .dl-appinfo h2 { color: #333; font-size: 28px; margin: 0 0 10px; }
.dl-page.tpl3 .dl-appinfo p, .dl-page.tpl3 .muted { color: #666; font-size: 16px; line-height: 24px; }
/* 按钮统一主色 #157df1 + 圆角 6px */
.dl-page.tpl3 .btn-install {
  background: #157df1;
  border-radius: 6px;
  padding: 0 38px;
  height: 50px;
  line-height: 48px;
  color: #fff;
  font-size: 18px;
  display: inline-block;
  width: auto;
  margin-top: 25px;
}
.dl-page.tpl3 .btn-install:hover { background: #348dee; }
.dl-page.tpl3 .btn-primary { background: #157df1; border-radius: 6px; }
.dl-page.tpl3 .dl-qr { border-top: 0; padding-top: 0; margin-top: 14px; }
.dl-page.tpl3 .dl-qr span { color: #999; }
.dl-page.tpl3 .dl-footer { text-align: center; color: #8a94a8; font-size: 12px; }

/* ============ tpl4 大图顶部（仿九分发 tmp4 · t-bg-4 485px 大图） ============ */
.dl-page.tpl4 {
  min-height: 100vh;
  position: relative;
}
/* 顶部 400px 大图区（不是紫蓝渐变！九分发 tmp4 是大图 hero，meta 区落在图外深色更易读） */
.dl-page.tpl4::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 0;
}
.dl-page.tpl4 .dl-header { color: #fff; position: relative; z-index: 2; }
.dl-page.tpl4 .dl-logo { color: #fff; }
.dl-page.tpl4 .dl-badge { background: rgba(255,255,255,.2); color: #fff; }
.dl-page.tpl4 .dl-lang a { color: rgba(255,255,255,.9); background: rgba(255,255,255,.18); }
.dl-page.tpl4 .dl-lang a.on, .dl-page.tpl4 .dl-lang a:hover { background: #fff; color: #764ba2; }
/* 左文右码：卡片块布局，右侧留白 230px，二维码白卡绝对定位右上（对应 tmp4 hero 左文右 QR） */
.dl-page.tpl4 .dl-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 40px 240px 40px 28px;
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  color: #fff;
}
.dl-page.tpl4 .dl-app { text-align: left; }
.dl-page.tpl4 .dl-icon {
  width: 160px; height: 160px;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.dl-page.tpl4 .dl-appinfo h2 { color: #fff; font-size: 28px; margin: 15px 0 10px; }
.dl-page.tpl4 .dl-appinfo p, .dl-page.tpl4 .muted { color: rgba(255,255,255,.9); font-size: 16px; line-height: 24px; }
/* 按钮：九分发 tmp4 也是 #157df1 主色 + 圆角 6px */
.dl-page.tpl4 .btn-install {
  background: #157df1;
  border-radius: 6px;
  padding: 0 38px;
  height: 50px;
  line-height: 48px;
  color: #fff;
  font-size: 18px;
  display: inline-block;
  width: auto;
  margin-top: 25px;
}
.dl-page.tpl4 .btn-install:hover { background: #348dee; }
.dl-page.tpl4 .btn-primary { background: #157df1; border-radius: 6px; }
/* 二维码白卡：绝对定位卡片右上，避让左侧内容 */
.dl-page.tpl4 .dl-qr {
  position: absolute;
  top: 40px;
  right: 28px;
  width: 188px;
  padding: 12px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  text-align: center;
  box-sizing: border-box;
}
.dl-page.tpl4 .dl-qr span { color: #666; font-size: 12px; }
/* hero 图外区域（meta/介绍/联系）：深色保证可读 */
.dl-page.tpl4 .dl-meta span { color: #7a8699; }
.dl-page.tpl4 .dl-meta b { color: #333; }
.dl-page.tpl4 .dl-desc h4 { color: #333; }
.dl-page.tpl4 .dl-desc { border-top-color: rgba(118,75,162,.18); }
.dl-page.tpl4 .desc-content { color: #4a5670; }
.dl-page.tpl4 .t-contact { color: #5a6678; }
.dl-page.tpl4 .dl-footer { color: #8a94a8; text-align: center; position: relative; z-index: 2; }

/* ============ tpl5 彩虹圆标（仿九分发 tmp5 · left-bg + right-bg + bg-shadow 45度） ============ */
.dl-page.tpl5 {
  min-height: 100vh;
  position: relative;
}
/* 左侧 45 度旋转灰色阴影块：.bg-shadow { background:#eff2f2; transform:rotate(45deg) } */
.dl-page.tpl5::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 180px;
  background-color: rgba(210,222,238,.55);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 0;
  border-radius: 90px;
}
.dl-page.tpl5 .dl-header { color: #1f2d3d; background: transparent; position: relative; z-index: 2; }
.dl-page.tpl5 .dl-logo { color: #1f2d3d; }
.dl-page.tpl5 .dl-badge { background: #f0f2f5; color: #5a6678; }
.dl-page.tpl5 .dl-lang a { color: #5a6678; background: #f0f2f5; }
.dl-page.tpl5 .dl-lang a.on, .dl-page.tpl5 .dl-lang a:hover { background: #157df1; color: #fff; }
.dl-page.tpl5 .dl-card {
  text-align: center;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 16px 44px rgba(31,70,150,.10);
  padding: 40px 28px 24px;
  position: relative;
  z-index: 2;
}
.dl-page.tpl5 .dl-app { text-align: center; }
/* 圆形图标 border-radius: 50%，对应 .template-common .t-icon { border-radius: 50% } */
.dl-page.tpl5 .dl-icon {
  width: 160px; height: 160px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.12);
  margin: 0 auto;
}
.dl-page.tpl5 .dl-appinfo h2 { color: #333; font-size: 28px; margin-top: 10px; }
.dl-page.tpl5 .dl-appinfo p, .dl-page.tpl5 .muted { color: #666; font-size: 16px; line-height: 24px; }
/* 按钮统一主色 #157df1 + 圆角 6px */
.dl-page.tpl5 .btn-install {
  background: #157df1;
  border-radius: 6px;
  padding: 0 38px;
  height: 50px;
  line-height: 48px;
  color: #fff;
  font-size: 18px;
  display: inline-block;
  width: auto;
  margin-top: 35px;
}
.dl-page.tpl5 .btn-install:hover { background: #348dee; }
.dl-page.tpl5 .btn-primary { background: #157df1; border-radius: 6px; }
.dl-page.tpl5 .dl-qr { float: none; margin: 14px auto 0; padding-top: 0; border-top: 0; text-align: center; width: auto; clear: both; }
.dl-page.tpl5 .dl-qr span { color: #999; }
.dl-page.tpl5 .dl-tip { text-align: center; color: #8a94a8; }
.dl-page.tpl5 .dl-footer { text-align: center; color: #8a94a8; font-size: 12px; padding: 12px 0; }

/* ============ tpl6 浅灰顶栏（仿九分发 tmp6 · t-bg-6 #f4f4f4 80px 左右布局） ============ */
.dl-page.tpl6 {
  min-height: 100vh;
  position: relative;
}
/* 顶部 80px 浅灰条 + 左标题右信息 */
.dl-page.tpl6::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background-color: rgba(219,227,238,.95);
  z-index: 0;
}
.dl-page.tpl6 .dl-header { color: #1f2d3d; background: transparent; position: relative; z-index: 2; }
.dl-page.tpl6 .dl-logo { color: #333; }
.dl-page.tpl6 .dl-badge { background: #e5e5e5; color: #666; }
.dl-page.tpl6 .dl-lang a { color: #666; background: #e5e5e5; }
.dl-page.tpl6 .dl-lang a.on, .dl-page.tpl6 .dl-lang a:hover { background: #157df1; color: #fff; }
.dl-page.tpl6 .dl-card {
  text-align: center;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 16px 44px rgba(31,70,150,.10);
  padding: 10px 28px 24px;
  position: relative;
  z-index: 2;
}
.dl-page.tpl6 .dl-app { text-align: center; }
.dl-page.tpl6 .dl-icon {
  width: 160px; height: 160px;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.12);
  margin: 0 auto 10px;
}
.dl-page.tpl6 .dl-appinfo h2 { color: #333; font-size: 28px; margin-top: 25px; margin-bottom: 20px; }
.dl-page.tpl6 .dl-appinfo p, .dl-page.tpl6 .muted { color: #666; font-size: 16px; line-height: 24px; }
/* 按钮统一主色 #157df1 + 圆角 6px */
.dl-page.tpl6 .btn-install {
  background: #157df1;
  border-radius: 6px;
  padding: 0 53px;
  height: 50px;
  line-height: 48px;
  color: #fff;
  font-size: 18px;
  display: inline-block;
  width: auto;
  margin: 45px 0 20px;
}
.dl-page.tpl6 .btn-install:hover { background: #348dee; }
.dl-page.tpl6 .btn-primary { background: #157df1; border-radius: 6px; }
.dl-page.tpl6 .dl-qr {
  float: right;
  width: 160px;
  padding: 10px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  text-align: center;
  margin-top: 0;
}
.dl-page.tpl6 .dl-qr img { width: 140px; }
.dl-page.tpl6 .dl-qr canvas { width: 140px !important; height: 140px !important; }
.dl-page.tpl6 .dl-qr #qrcode, .dl-page.tpl6 .dl-qr #qrcode2 { width: 140px; height: 140px; margin: 0; }
.dl-page.tpl6 .dl-qr span { color: #666; font-size: 12px; }
.dl-page.tpl6 .dl-footer { text-align: center; color: #c0c6d0; font-size: 12px; padding: 12px 0; }

/* ============ tpl7 九分发新模板 pc-platform：浅渐变+彩虹进度条+大QR 260px ============ */
/* 之前误写成深色游戏风格！实际 tmp7 是浅色渐变 + 彩虹进度条 + 居中布局 */
.dl-page.tpl7 {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
/* 彩虹进度条（对应 .progress-bar 6 色渐变） */
.dl-page.tpl7::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  z-index: 0;
}
.dl-page.tpl7 .dl-header { color: #333; background: transparent; padding-top: 15px; position: relative; z-index: 2; }
.dl-page.tpl7 .dl-logo { color: #333; }
.dl-page.tpl7 .dl-badge { background: #fff; color: #157df1; }
.dl-page.tpl7 .dl-lang a { color: #666; background: rgba(255,255,255,.8); }
.dl-page.tpl7 .dl-lang a.on, .dl-page.tpl7 .dl-lang a:hover { background: #157df1; color: #fff; }
/* 居中大 QR 260px + 居中图标 */
.dl-page.tpl7 .dl-card {
  text-align: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 40px 28px 24px;
  max-width: 500px;
  position: relative;
  z-index: 2;
}
.dl-page.tpl7 .dl-app { text-align: center; }
/* 居中 logo 图（border-radius 20px，对应 .pc-platform__logo img） */
.dl-page.tpl7 .dl-icon {
  width: 100px; height: 100px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  margin: 0 auto;
  background: #fff;
}
.dl-page.tpl7 .dl-appinfo h2 { color: #333; font-size: 20px; font-weight: 600; padding-top: 10px; }
.dl-page.tpl7 .dl-appinfo p, .dl-page.tpl7 .muted { color: #666; font-size: 16px; }
/* 按钮统一主色 #157df1 + 圆角 6px */
.dl-page.tpl7 .btn-install {
  background: #157df1;
  border-radius: 6px;
  padding: 0 38px;
  height: 50px;
  line-height: 48px;
  color: #fff;
  font-size: 18px;
  display: inline-block;
  width: auto;
  margin-top: 25px;
}
.dl-page.tpl7 .btn-install:hover { background: #348dee; }
.dl-page.tpl7 .btn-primary { background: #157df1; border-radius: 6px; }
/* QR 260px + 白底 padding 10px + border-radius 20px，对应 .j-qr-code */
.dl-page.tpl7 .dl-qr {
  width: 260px;
  height: 260px;
  margin: 15px auto;
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.dl-page.tpl7 .dl-qr img, .dl-page.tpl7 .dl-qr canvas { width: 220px !important; height: 220px !important; }
.dl-page.tpl7 .dl-qr #qrcode, .dl-page.tpl7 .dl-qr #qrcode2 { margin: 0 auto; }
.dl-page.tpl7 .dl-qr span { color: #666; }
/* tip 提示块：对应 .tip_p12 { background:#eee; padding:20px; width:50% } */
.dl-page.tpl7 .dl-tip {
  border-radius: 10px;
  padding: 20px;
  background-color: #eeeeee;
  width: 50%;
  margin: 20px auto;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
.dl-page.tpl7 .dl-footer { text-align: center; color: #666; font-size: 12px; }

/* ============ tpl8 九分发新模板 pc-platform：深色+金色按钮（仿 bg.gif + btn.png） ============ */
/* 之前误写成浅灰卡片！实际 tmp8 是深色背景图 + 金色文字按钮 */
.dl-page.tpl8 {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.dl-page.tpl8 .dl-header { color: #f5e0a7; background: transparent; padding-top: 15px; position: relative; z-index: 2; }
.dl-page.tpl8 .dl-logo { color: #f5e0a7; }
.dl-page.tpl8 .dl-badge { background: rgba(245,224,167,.2); color: #f5e0a7; }
.dl-page.tpl8 .dl-lang a { color: #f5e0a7; background: rgba(245,224,167,.15); }
.dl-page.tpl8 .dl-lang a.on, .dl-page.tpl8 .dl-lang a:hover { background: #f5e0a7; color: #1a1a2e; }
.dl-page.tpl8 .dl-card {
  text-align: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 40px 28px 24px;
  max-width: 480px;
  position: relative;
  z-index: 2;
}
.dl-page.tpl8 .dl-app { text-align: center; }
/* 居中 logo 图 border-radius 20px */
.dl-page.tpl8 .dl-icon {
  width: 100px; height: 100px;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  margin: 0 auto;
  background: #2a2a4e;
}
.dl-page.tpl8 .dl-appinfo h2 { color: #f5e0a7; font-size: 20px; font-weight: 600; padding-top: 10px; }
.dl-page.tpl8 .dl-appinfo p, .dl-page.tpl8 .muted { color: rgba(255,255,255,.8); font-size: 16px; }
/* 按钮：金色文字 #f5e0a7 + 深背景 + 94px 高，对应 #pc_download */
.dl-page.tpl8 .btn-install {
  background: linear-gradient(135deg, #b8860b 0%, #daa520 50%, #b8860b 100%);
  border-radius: 6px;
  padding: 0 53px;
  height: 60px;
  line-height: 60px;
  color: #1a1a2e;
  font-size: 20px;
  font-weight: 600;
  display: inline-block;
  width: auto;
  margin: 15px auto;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  box-shadow: 0 4px 20px rgba(218,165,32,.4);
}
.dl-page.tpl8 .btn-install:hover { filter: brightness(1.1); }
.dl-page.tpl8 .btn-primary { background: linear-gradient(135deg, #b8860b, #daa520); color: #1a1a2e; border-radius: 6px; }
/* QR 140px 白底（对应 .j-qr-code 在 tmp8 里 width:140px） */
.dl-page.tpl8 .dl-qr {
  width: 140px;
  height: 140px;
  margin: 15px auto;
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  text-align: center;
}
.dl-page.tpl8 .dl-qr img, .dl-page.tpl8 .dl-qr canvas { width: 120px !important; height: 120px !important; }
.dl-page.tpl8 .dl-qr #qrcode, .dl-page.tpl8 .dl-qr #qrcode2 { margin: 0 auto; }
.dl-page.tpl8 .dl-qr span { color: #666; font-size: 12px; }
/* base-info 半透明灰条：对应 .base-info { background:#99999991 } */
.dl-page.tpl8 .dl-desc {
  background: rgba(153,153,153,.57);
  border-radius: 8px;
  padding: 1rem;
  color: #fff;
}
.dl-page.tpl8 .dl-desc h4 { color: #f5e0a7; }
.dl-page.tpl8 .desc-content { color: rgba(255,255,255,.9); }
.dl-page.tpl8 .dl-footer { text-align: center; color: rgba(255,255,255,.6); font-size: 12px; }

/* ==========================================================================
   科技感默认背景（tpl1-tpl8 通用）
   结构：主题底色渐变（--tech-base 垫底层）+ 双层网格（细线42px/大格210px）
        + tpl7/tpl8 三层光斑（--tech-halo1-3）+ body::after 固定漂移光晕
   调色：每套模板用 --tech-line / --tech-glow / --tech-base 变量独立控制
   ========================================================================== */
.dl-page {
  --tech-line: rgba(21,125,241,.075);
  --tech-line2: rgba(21,125,241,.14);
  --tech-glow: rgba(21,125,241,.16);
  --tech-glow2: rgba(56,189,248,.12);
  --tech-base: linear-gradient(180deg, #e8f2fe 0%, #f6fbff 42%, #e9f3ff 100%);
}
.dl-page.tpl2 { --tech-line: rgba(0,150,200,.08); --tech-line2: rgba(0,150,200,.15); --tech-glow: rgba(0,180,230,.17); --tech-glow2: rgba(21,125,241,.11); --tech-base: linear-gradient(180deg, #e6f8ff 0%, #f4fdff 42%, #e7f6ff 100%); }
.dl-page.tpl3 { --tech-line: rgba(233,86,140,.07); --tech-line2: rgba(233,86,140,.13); --tech-glow: rgba(250,112,154,.15); --tech-glow2: rgba(250,190,80,.13); --tech-base: linear-gradient(180deg, #fff0f5 0%, #fffbf0 45%, #fff3f8 100%); }
.dl-page.tpl4 { --tech-line: rgba(118,75,162,.08); --tech-line2: rgba(118,75,162,.15); --tech-glow: rgba(118,75,162,.16); --tech-glow2: rgba(102,126,234,.13); --tech-base: linear-gradient(180deg, #efeafa 0%, #f8f6fd 50%, #f0ecfa 100%); }
.dl-page.tpl5 { --tech-line: rgba(21,125,241,.07); --tech-line2: rgba(21,125,241,.13); --tech-glow: rgba(21,125,241,.13); --tech-glow2: rgba(88,86,214,.10); --tech-base: linear-gradient(180deg, #f2f6fb 0%, #fbfdff 45%, #ecf2f9 100%); }
.dl-page.tpl6 { --tech-line: rgba(70,100,150,.08); --tech-line2: rgba(70,100,150,.14); --tech-glow: rgba(21,125,241,.12); --tech-glow2: rgba(120,140,180,.11); --tech-base: linear-gradient(180deg, #f0f4fa 0%, #fafcfe 45%, #ebf1f8 100%); }
/* tpl7 浅色模板：3 层彩虹光斑 + 浅蓝灰底 */
.dl-page.tpl7 {
  --tech-line: rgba(21,125,241,.10);
  --tech-line2: rgba(21,125,241,.17);
  --tech-glow: rgba(21,125,241,.16);
  --tech-glow2: rgba(168,85,247,.11);
  --tech-halo1: radial-gradient(560px circle at 88% -6%, rgba(255,141,84,.11), transparent 58%);
  --tech-halo2: radial-gradient(640px circle at -8% 20%, rgba(84,160,255,.13), transparent 58%);
  --tech-halo3: radial-gradient(720px circle at 50% 118%, rgba(168,85,247,.10), transparent 60%);
  --tech-base: linear-gradient(150deg, #f2f6fc 0%, #dce5f2 55%, #eef3fa 100%);
}
/* 深色模板：亮蓝网格线 + 蓝/金光晕 + 蓝/紫/青光斑 */
.dl-page.tpl8 {
  --tech-line: rgba(96,165,250,.13);
  --tech-line2: rgba(96,165,250,.24);
  --tech-glow: rgba(59,130,246,.24);
  --tech-glow2: rgba(218,165,32,.12);
  --tech-halo1: radial-gradient(720px circle at 82% -10%, rgba(37,99,235,.24), transparent 55%);
  --tech-halo2: radial-gradient(560px circle at -10% 32%, rgba(124,58,237,.18), transparent 55%);
  --tech-halo3: radial-gradient(680px circle at 55% 118%, rgba(14,116,144,.20), transparent 58%);
  --tech-base: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* 浅色模板（tpl1-tpl6）：4 层科技网格 + 1 层主题底色渐变（网格在上、底色垫底） */
.dl-page.tpl1, .dl-page.tpl2, .dl-page.tpl3, .dl-page.tpl4,
.dl-page.tpl5, .dl-page.tpl6 {
  background-image:
    linear-gradient(var(--tech-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-line) 1px, transparent 1px),
    linear-gradient(var(--tech-line2) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-line2) 1px, transparent 1px),
    var(--tech-base);
  background-size: 42px 42px, 42px 42px, 210px 210px, 210px 210px, auto;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0;
  background-color: #fff;
}
/* tpl7/tpl8：4 层科技网格 + 3 层光斑 + 1 层主题底色 */
.dl-page.tpl7, .dl-page.tpl8 {
  background-image:
    linear-gradient(var(--tech-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-line) 1px, transparent 1px),
    linear-gradient(var(--tech-line2) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-line2) 1px, transparent 1px),
    var(--tech-halo1), var(--tech-halo2), var(--tech-halo3), var(--tech-base);
  background-size: 42px 42px, 42px 42px, 210px 210px, 210px 210px, auto, auto, auto, auto;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0, 0 0, 0 0, 0 0;
  background-color: #16213e;
}
.dl-page.tpl7 { background-color: #f2f6fc; }
/* 光晕装饰层（固定定位，不随滚动移动，科技氛围） */
.dl-page.tpl1::after, .dl-page.tpl2::after, .dl-page.tpl3::after,
.dl-page.tpl4::after, .dl-page.tpl5::after, .dl-page.tpl6::after,
.dl-page.tpl7::after, .dl-page.tpl8::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(620px circle at 12% -8%, var(--tech-glow), transparent 62%),
    radial-gradient(540px circle at 108% 18%, var(--tech-glow2), transparent 58%),
    radial-gradient(700px circle at 50% 118%, var(--tech-glow), transparent 60%);
  animation: dlTechDrift 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes dlTechDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
}
/* 内容层抬到光晕之上 */
.dl-page .dl-main,
.dl-page .dl-pass,
.dl-page .dl-footer { position: relative; z-index: 1; }
/* 用户在后台自定义了 PC 背景图（body inline style）时：让出自定义图，关闭装饰层 */
.dl-page[style*="background"]::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .dl-page[class*="tpl"]::after { animation: none; }
}

/* ============ 高级设置：截屏 / 联系方式 / PC下载 / 备案号（全模版通用） ============ */
.app-screen { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.app-screen img { flex: 0 0 auto; height: 300px; max-height: 56vh; border-radius: 12px; border: 1px solid rgba(120,130,150,.22); box-shadow: 0 6px 18px rgba(20,30,50,.12); background: #f2f4f8; }
@media (max-width: 480px) { .app-screen img { height: 240px; } }
.t-contact { margin: 14px 0 0; font-size: 13px; color: #5a6678; text-align: center; word-break: break-all; }
.dl-beian { color: #a0a8b8; font-size: 12px; }
.btn-install-pc { margin-top: 10px; }
.dl-page.tpl7 .t-contact { color: #9aa6c2; }
.dl-page.tpl7 .dl-beian { color: #7684a5; }
.dl-page.tpl8 .t-contact { color: #4a5670; }
.dl-page.tpl8 .btn-install-pc { background: rgba(255,255,255,.45); color: #147cf0; border: 1px solid rgba(255,255,255,.4); }

/* ============ 安卓/鸿蒙安装指引 · 风险确认勾选 · 免责声明/举报（全模版通用） ============ */
.dl-guide { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 14px; color: #147cf0; font-size: 14px; text-decoration: none; }
.dl-guide:hover { text-decoration: underline; }
.dl-guide-ico { font-size: 15px; }
.dl-agree { display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin: 12px auto 4px; max-width: 430px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dl-agree input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #147cf0; cursor: pointer; }
.dl-agree span { color: #e23a22; font-size: 13px; line-height: 1.65; text-align: left; }
.dl-agree.shake { animation: dlShakeX .5s ease; }
@keyframes dlShakeX { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }
.dl-links { font-size: 12px; color: #7a8699; margin-top: 8px; display: inline-block; }
.dl-links a {
  display: inline-block;
  margin: 0 5px;
  padding: 5px 16px;
  color: #4a5a75;
  background: #fff;
  border: 1px solid #c9d4e4;
  border-radius: 20px;
  font-size: 12.5px;
  text-decoration: none;
  transition: .15s;
}
.dl-links a:hover { color: #157df1; border-color: #157df1; background: #eef5ff; }
.dl-modal { display: none; position: fixed; inset: 0; z-index: 998; background: rgba(13,20,32,.62); align-items: center; justify-content: center; padding: 22px; }
.dl-modal-box { position: relative; width: 100%; max-width: 430px; max-height: 74vh; overflow: auto; background: #fff; border-radius: 14px; padding: 24px 22px 20px; box-shadow: 0 18px 50px rgba(10,18,30,.28); }
.dl-modal-box h4 { margin: 0 0 12px; padding-right: 26px; font-size: 16px; color: #1f2d3d; text-align: center; }
.dl-modal-body { font-size: 13.5px; color: #4a5670; line-height: 1.95; word-break: break-word; }
.dl-modal-close { position: absolute; top: 8px; right: 10px; border: none; background: none; font-size: 24px; line-height: 1; color: #98a2b3; cursor: pointer; padding: 4px; }
.dl-modal-close:hover { color: #4a5670; }
/* 安装指引图文样式（安卓仿 sglft / 苹果仿久分发 tmp2） */
.dl-guide-warn { margin: 0 0 14px; padding: 10px 12px; background: #ffe8dd; border: 1px solid #ffd5be; border-radius: 8px; font-size: 13px; color: #ff671c; line-height: 1.7; }
.dl-guide-h2 { margin: 0 0 4px; font-size: 14px; color: #333; }
.dl-guide-title { display: flex; align-items: flex-start; gap: 7px; padding: 9px 2px; border-bottom: 2px solid #666; font-size: 15px; color: #333; line-height: 1.7; }
.dl-guide-title i { flex: 0 0 auto; display: block; width: 20px; height: 20px; margin-top: 3px; border-radius: 3em; font-size: 13px; font-style: normal; color: #fff; text-align: center; line-height: 20px; background: #ff001c; }
.dl-guide-img { display: block; width: 90%; margin: 14px auto 6px; border-radius: 6px; }
.dl-ios-head { margin: -24px -22px 12px; height: 42px; background: #01b5ff; border-radius: 14px 14px 0 0; }
.dl-ios-close { top: 0; right: 0; width: 46px; height: 42px; color: #fff; font-size: 26px; }
.dl-ios-close:hover { color: rgba(255,255,255,.75); }
.dl-ios-swiper { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 8px; background: #fff; }
.dl-ios-swiper::-webkit-scrollbar { display: none; }
.dl-ios-track { display: flex; }
.dl-ios-slide { flex: 0 0 100%; scroll-snap-align: center; }
.dl-ios-slide img { display: block; width: 100%; border-radius: 8px; }
.dl-ios-dots { display: flex; justify-content: center; gap: 7px; margin: 12px 0 2px; }
.dl-ios-dots i { width: 8px; height: 8px; border-radius: 4px; background: #d3dae5; cursor: pointer; transition: .2s; }
.dl-ios-dots i.on { background: #01b5ff; width: 18px; }
.dl-ios-faq { display: block; text-align: center; padding: 12px 0 2px; font-size: 14px; color: #f00; text-decoration: none; cursor: pointer; }
.dl-ios-faq:hover { text-decoration: underline; }
.dl-faq p { margin: 0 0 8px; }
.dl-faq b { color: #1f2d3d; }
/* tpl8 深色模板：金色胶囊适配 */
.dl-page.tpl8 .dl-links a { background: rgba(255,255,255,.06); border-color: rgba(245,224,167,.38); color: #f5e0a7; }
.dl-page.tpl8 .dl-links a:hover { color: #1a1a2e; background: #f5e0a7; border-color: #f5e0a7; }

/* ============ tpl1-tpl8 统一移动端适配 ============ */

/* 平板 + 大屏手机（≤600px）：图标缩小、按钮全宽、tpl4/tpl3 左右栏改上下列 */
@media (max-width: 600px) {
  /* tpl1 蓝顶白底 */
  .dl-page.tpl1::before { height: 130px; }
  .dl-page.tpl1 .dl-icon { width: 100px; height: 100px; }
  .dl-page.tpl1 .btn-install { width: 100%; text-align: center; padding: 0; }

  /* tpl2 图片顶 */
  .dl-page.tpl2::before { height: 100px; }
  .dl-page.tpl2 .dl-icon { width: 100px; height: 100px; }
  .dl-page.tpl2 .btn-install { width: 100%; text-align: center; padding: 0; }

  /* tpl3 图片顶+左图标右信息 → 上下堆叠 */
  .dl-page.tpl3::before { height: 120px; }
  .dl-page.tpl3 .dl-card { padding: 20px 18px; }
  .dl-page.tpl3 .dl-icon { width: 100px; height: 100px; }
  .dl-page.tpl3 .dl-app { flex-direction: column; gap: 12px; text-align: center; }
  .dl-page.tpl3 .btn-install { width: 100%; text-align: center; padding: 0; }

  /* tpl4 大图缩到 280px，二维码白卡回到底部居中 */
  .dl-page.tpl4::before { height: 280px; }
  .dl-page.tpl4 .dl-card { padding: 25px 18px; color: #333; }
  .dl-page.tpl4 .dl-icon { width: 100px; height: 100px; }
  .dl-page.tpl4 .dl-app { flex-direction: column; gap: 12px; text-align: center; }
  .dl-page.tpl4 .btn-install { width: 100%; text-align: center; padding: 0; }
  .dl-page.tpl4 .dl-qr { position: static; width: 172px; margin: 15px auto; }

  /* tpl5 彩虹圆标 */
  .dl-page.tpl5 .dl-icon { width: 100px; height: 100px; }
  .dl-page.tpl5::before { width: 240px; height: 120px; }
  .dl-page.tpl5 .btn-install { width: 100%; text-align: center; padding: 0; }

  /* tpl6 浅灰顶栏 + QR 从右侧移到底部居中 */
  .dl-page.tpl6 .dl-icon { width: 100px; height: 100px; }
  .dl-page.tpl6 .dl-qr { float: none; width: 140px; margin: 15px auto; }
  .dl-page.tpl6 .dl-qr img { width: 120px; }
  .dl-page.tpl6 .dl-qr canvas { width: 120px !important; height: 120px !important; }
  .dl-page.tpl6 .dl-qr #qrcode, .dl-page.tpl6 .dl-qr #qrcode2 { width: 120px; height: 120px; }
  .dl-page.tpl6 .btn-install { width: 100%; text-align: center; padding: 0; }

  /* tpl7 pc-platform 彩虹进度条 */
  .dl-page.tpl7 .dl-icon { width: 80px; height: 80px; }
  .dl-page.tpl7 .dl-qr { width: 200px; height: 200px; }
  .dl-page.tpl7 .dl-qr img, .dl-page.tpl7 .dl-qr canvas { width: 160px !important; height: 160px !important; }
  .dl-page.tpl7 .dl-tip { width: 80%; }
  .dl-page.tpl7 .btn-install { width: 100%; text-align: center; padding: 0; }

  /* tpl8 pc-platform 深色+金色按钮 */
  .dl-page.tpl8 .dl-icon { width: 80px; height: 80px; }
  .dl-page.tpl8 .btn-install { height: 50px; line-height: 50px; font-size: 16px; }

  /* 通用：缩小 dl-header padding */
  .dl-page .dl-header { padding: 12px 16px; }
}

/* 小屏手机（≤400px）：更紧凑 */
@media (max-width: 400px) {
  .dl-page.tpl1 .dl-card,
  .dl-page.tpl2 .dl-card,
  .dl-page.tpl3 .dl-card,
  .dl-page.tpl4 .dl-card,
  .dl-page.tpl5 .dl-card,
  .dl-page.tpl6 .dl-card,
  .dl-page.tpl7 .dl-card,
  .dl-page.tpl8 .dl-card { padding: 25px 14px 18px; }
  .dl-page.tpl1 .dl-appinfo h2,
  .dl-page.tpl2 .dl-appinfo h2,
  .dl-page.tpl3 .dl-appinfo h2,
  .dl-page.tpl4 .dl-appinfo h2,
  .dl-page.tpl5 .dl-appinfo h2,
  .dl-page.tpl6 .dl-appinfo h2 { font-size: 22px; }
  .dl-page.tpl7 .dl-appinfo h2,
  .dl-page.tpl8 .dl-appinfo h2 { font-size: 18px; }
}
.dl-page.tpl7 .dl-agree span { color: #ff8d7a; }

/* ==========================================================================
   举报应用页（report.php · rp-page）
   布局：顶栏左标签 + 右返回链接；居中卡片；科技网格背景；PC/移动双适配
   ========================================================================== */
.rp-page {
  background-color: #f4f7fd;
  --rp-line: rgba(21,125,241,.07);
  --rp-line2: rgba(21,125,241,.12);
  --rp-glow: rgba(21,125,241,.13);
  --rp-glow2: rgba(118,75,162,.10);
  background-image:
    linear-gradient(var(--rp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rp-line) 1px, transparent 1px),
    linear-gradient(var(--rp-line2) 1px, transparent 1px),
    linear-gradient(90deg, var(--rp-line2) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px, 210px 210px, 210px 210px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.rp-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(620px circle at 10% -10%, var(--rp-glow), transparent 62%),
    radial-gradient(560px circle at 110% 12%, var(--rp-glow2), transparent 58%);
  animation: dlTechDrift 26s ease-in-out infinite;
}
/* 顶栏：标签在左，返回链接在右（覆盖 .dl-header 的右对齐） */
.rp-page .rp-header {
  justify-content: space-between;
  position: relative;
  z-index: 2;
  color: #1f2d3d;
  max-width: 620px;
  margin: 0 auto;
}
.rp-tag {
  font-size: 15px;
  font-weight: 700;
  color: #157df1;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(21,125,241,.25);
  border-radius: 20px;
  padding: 5px 16px;
  box-shadow: 0 2px 10px rgba(21,125,241,.10);
}
.rp-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #157df1;
  text-decoration: none;
  background: rgba(255,255,255,.85);
  border-radius: 20px;
  padding: 5px 13px;
  border: 1px solid rgba(21,125,241,.18);
  transition: background .15s;
}
.rp-back:hover { background: #157df1; color: #fff; }
.rp-back-ico { font-size: 15px; line-height: 1; }
/* 主体卡片 */
.rp-page .rp-main { padding: 26px 16px 48px; position: relative; z-index: 1; }
.rp-card {
  width: 560px;
  max-width: 100%;
  margin: 0 auto;
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(23,60,130,.12);
  border: 1px solid rgba(21,125,241,.08);
  padding: 34px 36px 28px;
}
.rp-card-head h2 { margin: 0 0 8px; font-size: 22px; color: #1f2d3d; }
.rp-sub-title { margin: 0 0 16px; font-size: 13px; color: #7a869c; line-height: 1.8; }
.rp-app-chip {
  display: inline-block;
  font-size: 13px;
  color: #5a6678;
  background: #f0f5ff;
  border: 1px solid #dbe7ff;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 20px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-app-chip b { color: #157df1; font-weight: 600; }
/* 举报原因卡片单选 */
.rp-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-reason {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 14px;
  border: 1.5px solid #e3e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #3c4860;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.rp-reason:hover { border-color: #9cc2f7; }
.rp-reason input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.rp-reason-dot {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border: 2px solid #c3ccda;
  border-radius: 50%;
  position: relative;
  transition: border-color .15s;
}
.rp-reason.checked {
  border-color: #157df1;
  background: #f0f6ff;
  box-shadow: 0 0 0 3px rgba(21,125,241,.10);
}
.rp-reason.checked .rp-reason-dot { border-color: #157df1; }
.rp-reason.checked .rp-reason-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #157df1;
}
.rp-reason.checked .rp-reason-txt { color: #0b5ed7; font-weight: 600; }
.rp-reason-txt { line-height: 1.3; }
/* 表单 */
.rp-card .form-group { margin-bottom: 18px; }
.rp-card .form-group label i { color: #f5493d; font-style: normal; }
.rp-card textarea.input { resize: vertical; min-height: 78px; }
.rp-submit {
  height: 48px;
  line-height: 46px;
  border-radius: 8px;
  background: #157df1;
  border: 1px solid #157df1;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
  text-decoration: none;
}
.rp-submit:hover { background: #348dee; }
.rp-note { margin: 12px 0 0; font-size: 12px; color: #9aa3b8; line-height: 1.7; text-align: center; }
/* 提交成功页 */
.rp-done { text-align: center; padding: 26px 10px 18px; }
.rp-done-ico {
  width: 68px; height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #fff;
  font-size: 34px;
  line-height: 68px;
  box-shadow: 0 10px 26px rgba(16,185,129,.35);
}
.rp-done h2 { margin: 0 0 10px; font-size: 21px; color: #1f2d3d; }
.rp-done p { margin: 0 auto 22px; max-width: 360px; font-size: 14px; line-height: 1.8; }
.rp-done .rp-submit { display: inline-block; padding: 0 42px; }
.rp-footer { position: relative; z-index: 1; color: #9aa3b8; }

/* 移动端（≤600px）：单选改单列、卡片贴边、触控区域加大 */
@media (max-width: 600px) {
  .rp-page .rp-header { padding: 12px 16px; }
  .rp-tag { font-size: 14px; padding: 4px 13px; }
  .rp-back { padding: 4px 11px; font-size: 12px; }
  .rp-page .rp-main { padding: 14px 12px 36px; }
  .rp-card { padding: 24px 18px 20px; border-radius: 14px; }
  .rp-card-head h2 { font-size: 19px; }
  .rp-reasons { grid-template-columns: 1fr; gap: 9px; }
  .rp-reason { padding: 14px 13px; font-size: 14.5px; }
  .rp-app-chip { white-space: normal; }
  .rp-submit { height: 46px; line-height: 44px; font-size: 15.5px; }
}
/* 小屏（≤360px）：返回链接收起文字只留箭头 */
@media (max-width: 360px) {
  .rp-back span:last-child { display: none; }
  .rp-back { padding: 4px 10px; }
}