/* =========================================================
   导航测速页 - 主样式
   ========================================================= */

/* ---------- 设计变量（Light，默认） ---------- */
:root {
  /* 品牌色 */
  --c1: #5b6cf0;
  --c1-hover: #4f46e5;
  --c2: #818cf8;
  --ok: #10b981;
  --ok-bg: #d1fae5;
  --err: #ef4444;
  --err-bg: #fee2e2;

  /* 次要按钮强调色 */
  --tg: #3b82f6;
  --tg-bg: rgba(59, 130, 246, 0.06);
  --tg-bg-hover: rgba(59, 130, 246, 0.10);
  --tg-text: #1d4ed8;
  --svc: #10b981;
  --svc-bg: rgba(16, 185, 129, 0.06);
  --svc-bg-hover: rgba(16, 185, 129, 0.10);
  --svc-text: #047857;

  /* 背景 / 文字 / 边框 */
  --bg-page: #eef1f8;
  --bg-card: #ffffff;
  --bg-soft: #f7f8fc;
  --bg-hover: #f1f3f8;
  --bg-modal-mask: rgba(15, 17, 23, 0.55);

  --text: #1f2937;
  --text-mute: #6b7280;
  --text-faint: #9ca3af;

  --border: #e7eaf3;
  --border-dashed: #c5cae3;

  --shadow-card: 0 30px 80px -16px rgba(31, 41, 55, 0.10),
                 0 10px 30px -10px rgba(31, 41, 55, 0.06);

  /* 下载页平台图标主题色 */
  --plat-win-bg: #e7f1fd;   --plat-win-fg: #0078d4;   --plat-win-bd: #cfe2f9;
  --plat-mac-bg: #f2f2f4;   --plat-mac-fg: #1d1d1f;   --plat-mac-bd: #e2e2e6;
  --plat-and-bg: #e6f8ee;   --plat-and-fg: #15a04c;   --plat-and-bd: #c9eed8;
  --plat-ios-bg: #eef0f3;   --plat-ios-fg: #0a0a0a;   --plat-ios-bd: #dadde2;
  --plat-lin-bg: #fff5e0;   --plat-lin-fg: #c47a00;   --plat-lin-bd: #fde4b0;
  --plat-har-bg: #fdebed;   --plat-har-fg: #e0202d;   --plat-har-bd: #f8ccd2;

  /* 几何 / 动效 */
  --radius-card: 28px;
  --radius-pill: 999px;
  --radius-btn: 14px;

  --t-fast: 0.18s;
  --t-mid: 0.28s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

/* ---------- Dark 主题（手动指定） ---------- */
[data-theme="dark"] {
  --bg-page: #0d1017;
  --bg-card: #161a24;
  --bg-soft: #1e2230;
  --bg-hover: #262b3b;
  --bg-modal-mask: rgba(0, 0, 0, 0.7);

  --text: #e5e7eb;
  --text-mute: #9ca3af;
  --text-faint: #6b7280;

  --border: #2a2f3f;
  --border-dashed: #3a4159;

  --ok-bg: rgba(16, 185, 129, 0.18);
  --err-bg: rgba(239, 68, 68, 0.18);

  --shadow-card: 0 30px 80px -16px rgba(0, 0, 0, 0.5),
                 0 10px 30px -10px rgba(0, 0, 0, 0.3);

  /* 次要按钮在深色下加深底色饱和度，保证对比度 */
  --tg-bg: rgba(59, 130, 246, 0.12);
  --tg-bg-hover: rgba(59, 130, 246, 0.20);
  --tg-text: #60a5fa;
  --svc-bg: rgba(16, 185, 129, 0.12);
  --svc-bg-hover: rgba(16, 185, 129, 0.20);
  --svc-text: #34d399;

  /* 平台图标深色：用 RGBA 让图标自带颜色透出 */
  --plat-win-bg: rgba(0, 120, 212, 0.15);   --plat-win-fg: #5fb8ff;   --plat-win-bd: rgba(0, 120, 212, 0.3);
  --plat-mac-bg: rgba(255, 255, 255, 0.08); --plat-mac-fg: #e5e7eb;   --plat-mac-bd: rgba(255, 255, 255, 0.15);
  --plat-and-bg: rgba(21, 160, 76, 0.15);   --plat-and-fg: #4ade80;   --plat-and-bd: rgba(21, 160, 76, 0.3);
  --plat-ios-bg: rgba(255, 255, 255, 0.08); --plat-ios-fg: #e5e7eb;   --plat-ios-bd: rgba(255, 255, 255, 0.15);
  --plat-lin-bg: rgba(196, 122, 0, 0.15);   --plat-lin-fg: #fbbf24;   --plat-lin-bd: rgba(196, 122, 0, 0.3);
  --plat-har-bg: rgba(224, 32, 45, 0.15);   --plat-har-fg: #f87171;   --plat-har-bd: rgba(224, 32, 45, 0.3);

  color-scheme: dark;
}

/* ---------- Auto：未手动选择时跟随系统 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #0d1017;
    --bg-card: #161a24;
    --bg-soft: #1e2230;
    --bg-hover: #262b3b;
    --bg-modal-mask: rgba(0, 0, 0, 0.7);

    --text: #e5e7eb;
    --text-mute: #9ca3af;
    --text-faint: #6b7280;

    --border: #2a2f3f;
    --border-dashed: #3a4159;

    --ok-bg: rgba(16, 185, 129, 0.18);
    --err-bg: rgba(239, 68, 68, 0.18);

    --shadow-card: 0 30px 80px -16px rgba(0, 0, 0, 0.5),
                   0 10px 30px -10px rgba(0, 0, 0, 0.3);

    --tg-bg: rgba(59, 130, 246, 0.12);
    --tg-bg-hover: rgba(59, 130, 246, 0.20);
    --tg-text: #60a5fa;
    --svc-bg: rgba(16, 185, 129, 0.12);
    --svc-bg-hover: rgba(16, 185, 129, 0.20);
    --svc-text: #34d399;

    --plat-win-bg: rgba(0, 120, 212, 0.15);   --plat-win-fg: #5fb8ff;   --plat-win-bd: rgba(0, 120, 212, 0.3);
    --plat-mac-bg: rgba(255, 255, 255, 0.08); --plat-mac-fg: #e5e7eb;   --plat-mac-bd: rgba(255, 255, 255, 0.15);
    --plat-and-bg: rgba(21, 160, 76, 0.15);   --plat-and-fg: #4ade80;   --plat-and-bd: rgba(21, 160, 76, 0.3);
    --plat-ios-bg: rgba(255, 255, 255, 0.08); --plat-ios-fg: #e5e7eb;   --plat-ios-bd: rgba(255, 255, 255, 0.15);
    --plat-lin-bg: rgba(196, 122, 0, 0.15);   --plat-lin-fg: #fbbf24;   --plat-lin-bd: rgba(196, 122, 0, 0.3);
    --plat-har-bg: rgba(224, 32, 45, 0.15);   --plat-har-fg: #f87171;   --plat-har-bd: rgba(224, 32, 45, 0.3);

    color-scheme: dark;
  }
}

/* ---------- 无障碍：尊重用户的"减少动画"偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont,
    'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei',
    system-ui, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  line-height: 1.5;
  gap: 22px;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(at 15% 10%, rgba(99, 102, 241, 0.06) 0, transparent 40%),
    radial-gradient(at 85% 90%, rgba(129, 140, 248, 0.05) 0, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- 卡片 ---------- */
.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  animation: cardIn 0.5s var(--ease);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 顶部 ---------- */
.head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 100px 26px 36px;   /* 右边预留给 .nav-controls（主题 + 语言）*/
}
.logo {
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  box-shadow: 0 10px 24px -4px rgba(91, 108, 240, 0.4);
  user-select: none;
}
.logo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.head-text { flex: 1; min-width: 0; }
.head-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--text);
}
.head-title em {
  font-style: normal;
  color: var(--c1);
  margin-left: 6px;
}
.head-sub {
  font-size: 14px;
  color: var(--text-faint);
  margin-top: 6px;
  letter-spacing: 0.2px;
}

/* ---------- 按钮区 ---------- */
.action {
  padding: 6px 36px 36px;
}

/* ---------- 主按钮（4 状态切换） ---------- */
.btn-go {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--c1) 0%, var(--c1-hover) 100%);
  color: white;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 32px -8px rgba(91, 108, 240, 0.55),
              0 4px 10px -2px rgba(91, 108, 240, 0.25);
  transition: all var(--t-mid) var(--ease);
  margin-bottom: 14px;
  min-height: 62px;
}
.btn-go:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -8px rgba(91, 108, 240, 0.65),
              0 6px 14px -2px rgba(91, 108, 240, 0.3);
}
.btn-go:active { transform: translateY(0); }

.btn-go[data-state="probing"],
.btn-go[data-state="success"],
.btn-go[data-state="error"] {
  pointer-events: none;
}
.btn-go[data-state="success"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 14px 32px -8px rgba(16, 185, 129, 0.55);
}
.btn-go[data-state="error"] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 14px 32px -8px rgba(239, 68, 68, 0.5);
}

.bg-state {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-go[data-state="idle"] .state-idle,
.btn-go[data-state="probing"] .state-probing,
.btn-go[data-state="success"] .state-success,
.btn-go[data-state="error"] .state-error {
  display: inline-flex;
}

.state-icon { width: 22px; height: 22px; flex-shrink: 0; }
.state-spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 次要按钮（彩色描边 + 状态点） ---------- */
.action-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
  font-family: inherit;
  position: relative;
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(31, 41, 55, 0.15);
}
.action-btn:active { transform: translateY(0); }

.action-btn-green {
  border-color: rgba(16, 185, 129, 0.25);
  background: var(--svc-bg);
  color: var(--svc-text);
}
.action-btn-green:hover {
  border-color: var(--svc);
  background: var(--svc-bg-hover);
}
.action-btn-blue {
  border-color: rgba(59, 130, 246, 0.25);
  background: var(--tg-bg);
  color: var(--tg-text);
}
.action-btn-blue:hover {
  border-color: var(--tg);
  background: var(--tg-bg-hover);
}

.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.action-icon svg { width: 19px; height: 19px; }
.action-label { font-weight: 700; }
.action-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 2px;
  flex-shrink: 0;
}
.action-btn-green .action-dot {
  background: var(--svc);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.action-btn-blue .action-dot {
  background: var(--tg);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* ---------- 客户端下载按钮 ---------- */
.btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
  margin-bottom: 18px;
  cursor: pointer;
}
.btn-download:hover {
  background: rgba(91, 108, 240, 0.06);
  border-color: var(--c1);
  color: var(--c1);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(91, 108, 240, 0.3);
}
.btn-download-icon { display: inline-flex; }
.btn-download-icon svg { width: 18px; height: 18px; }

/* ---------- 永久导航（虚线胶囊） ---------- */
.perma-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
  background: var(--bg-soft);
  border: 1.5px dashed var(--border-dashed);
  border-radius: var(--radius-pill);
}
.perma-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-mute);
  font-size: 14px;
  font-weight: 600;
  user-select: none;
}
.perma-label svg {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
}
.perma-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
}
.perma-chip:hover {
  border-color: var(--c1);
  color: var(--c1);
  transform: translateY(-1px);
}
.perma-chip:active { transform: translateY(0); }

/* ---------- 页脚（卡片外） ---------- */
.page-foot {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  text-align: center;
  line-height: 1.8;
}
.legal-links {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.legal-links a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.legal-links a:hover { color: var(--c1); }
.legal-links .en {
  font-weight: 400;
  color: var(--text-faint);
  font-size: 13px;
  margin-left: 2px;
}
.legal-links .sp {
  margin: 0 12px;
  color: var(--text-faint);
  font-weight: 400;
}
.page-foot .copy {
  font-size: 13px;
  color: var(--text-faint);
  letter-spacing: 0.3px;
}

/* ---------- 法律页样式（pages/） ---------- */
.legal {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 40px auto;
  background: var(--bg-card);
  padding: 48px 56px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  line-height: 1.8;
  color: var(--text);
}
.legal h1 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 8px;
}
.legal .meta {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.legal h2 {
  font-size: 17px;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 8px;
}
.legal p { color: var(--text-mute); margin-bottom: 12px; }
.legal ul { margin: 8px 0 12px 24px; color: var(--text-mute); }
.legal a { color: var(--c1); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal .back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 24px;
  color: var(--text-faint);
}
.legal .back:hover { color: var(--c1); text-decoration: none; }

/* ---------- 404 ---------- */
.err-page {
  text-align: center;
  padding: 60px 32px;
}
.err-page .code {
  font-size: 96px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -3px;
}
.err-page .msg { color: var(--text-mute); font-size: 14px; margin-bottom: 24px; }
.err-page .back-home {
  display: inline-block;
  padding: 10px 22px;
  background: var(--c1);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 600;
  transition: all var(--t-fast) var(--ease);
}
.err-page .back-home:hover {
  background: var(--c1-hover);
  transform: translateY(-1px);
}

/* ---------- 测速页（speedtest.html）状态区 ---------- */
.stage {
  padding: 50px 32px 56px;
  text-align: center;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stage > * { display: none; }

.stage-icon {
  width: 90px; height: 90px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.stage-icon.spinner {
  border: 6px solid var(--bg-hover);
  border-top-color: var(--c1);
  animation: spin 0.9s linear infinite;
}
.stage-icon.icon-ok {
  background: var(--ok-bg);
  animation: pop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stage-icon.icon-err {
  background: var(--err-bg);
  animation: pop .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stage-icon svg { width: 42px; height: 42px; }
@keyframes pop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.stage-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.stage-title.success { color: var(--ok); }
.stage-title.error { color: var(--err); }
.stage-sub {
  font-size: 14px;
  color: var(--text-faint);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  margin: 18px 0 14px;
  font-size: 15px;
  animation: pillIn 0.3s var(--ease) 0.15s both;
}
@keyframes pillIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.pill-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
  flex-shrink: 0;
}
.pill-name { color: var(--c1); font-weight: 700; }
.pill-ms { color: var(--text-faint); font-size: 13px; }

/* 失败状态的操作按钮 */
.stage-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.stage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  border: 1.5px solid transparent;
  transition: all var(--t-fast) var(--ease);
}
.stage-btn-primary {
  background: var(--c1);
  color: white;
  box-shadow: 0 6px 16px -4px rgba(91, 108, 240, 0.45);
}
.stage-btn-primary:hover {
  background: var(--c1-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px rgba(91, 108, 240, 0.55);
}
.stage-btn-primary:active { transform: translateY(0); }
.stage-btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
.stage-btn-secondary:hover {
  border-color: var(--c1);
  color: var(--c1);
  background: rgba(91, 108, 240, 0.04);
}

/* 测速页顶部返回链接 */
.stage-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-faint);
  text-decoration: none;
  padding: 14px 22px 0;
  transition: color var(--t-fast) var(--ease);
}
.stage-back-link:hover { color: var(--c1); }
.stage-back-link svg { width: 16px; height: 16px; }

/* 状态切换 */
.stage[data-state="probing"] .stage-icon.spinner { display: flex; }
.stage[data-state="probing"] .show-probing { display: block; }
.stage[data-state="success"] .stage-icon.icon-ok { display: flex; }
.stage[data-state="success"] .show-success { display: block; }
.stage[data-state="error"] .stage-icon.icon-err { display: flex; }
.stage[data-state="error"] .show-error { display: block; }

/* ---------- Crisp 客服按钮位置调整 ---------- */
.crisp-client .cc-1brb6, .crisp-client .cc-kxkl {
  z-index: 100 !important;
}

/* ---------- 微信/QQ 引导蒙层 ---------- */
.ebo-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 23, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  padding: 24px;
  color: white;
  font-family: inherit;
  animation: ebo-in .25s var(--ease);
}
@keyframes ebo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ebo-arrow {
  position: absolute;
  top: 10px;
  right: 22px;
  width: 96px;
  height: 110px;
  pointer-events: none;
  animation: ebo-arrow-bob 1.6s ease-in-out infinite;
}
@keyframes ebo-arrow-bob {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4px, -4px); }
}
.ebo-arrow svg { width: 100%; height: 100%; }
.ebo-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.ebo-icon {
  width: 84px; height: 84px;
  background: rgba(91, 108, 240, 0.18);
  border: 1.5px solid rgba(91, 108, 240, 0.4);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.ebo-icon svg { width: 40px; height: 40px; color: #a5b4fc; }
.ebo-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.ebo-hint {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 32px;
  line-height: 1.8;
}
.ebo-hint strong {
  color: #a5b4fc;
  font-weight: 700;
}
.ebo-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #5b6cf0, #4f46e5);
  border: none;
  color: white;
  padding: 14px 34px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 18px;
  box-shadow: 0 10px 28px -6px rgba(91, 108, 240, 0.6);
  transition: all .2s ease;
}
.ebo-copy:active {
  transform: scale(0.97);
}
.ebo-copy svg { width: 16px; height: 16px; }
.ebo-url {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  word-break: break-all;
  max-width: 280px;
  margin: 0 auto;
  font-family: ui-monospace, 'SF Mono', Monaco, Consolas, monospace;
}

/* =========================================================
   客户端下载页（pages/download.html）
   ========================================================= */

.card-download-page {
  max-width: 640px;
}

/* 返回首页链接 */
.dl-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-faint);
  text-decoration: none;
  padding: 20px 32px 0;
  transition: color var(--t-fast) var(--ease);
}
.dl-back:hover { color: var(--c1); }
.dl-back svg { width: 16px; height: 16px; }

.dl-head {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* 平台卡片列表 */
.dl-list {
  padding: 0 32px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dl-card {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 18px 18px 16px;
  transition: all var(--t-fast) var(--ease);
}
.dl-card:hover {
  border-color: var(--c1);
  box-shadow: 0 12px 28px -10px rgba(91, 108, 240, 0.18);
  transform: translateY(-1px);
}

.dl-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.dl-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}
.dl-card-icon svg { width: 26px; height: 26px; }

/* 各平台主题色（变量在 :root 与 [data-theme="dark"] 中分别定义）*/
.dl-card-windows .dl-card-icon { background: var(--plat-win-bg); color: var(--plat-win-fg); border-color: var(--plat-win-bd); }
.dl-card-macos   .dl-card-icon { background: var(--plat-mac-bg); color: var(--plat-mac-fg); border-color: var(--plat-mac-bd); }
.dl-card-android .dl-card-icon { background: var(--plat-and-bg); color: var(--plat-and-fg); border-color: var(--plat-and-bd); }
.dl-card-ios     .dl-card-icon { background: var(--plat-ios-bg); color: var(--plat-ios-fg); border-color: var(--plat-ios-bd); }
.dl-card-linux   .dl-card-icon { background: var(--plat-lin-bg); color: var(--plat-lin-fg); border-color: var(--plat-lin-bd); }
.dl-card-harmony .dl-card-icon { background: var(--plat-har-bg); color: var(--plat-har-fg); border-color: var(--plat-har-bd); }

.dl-card-text {
  flex: 1;
  min-width: 0;
}
.dl-card-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.dl-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-faint);
}
.dl-card-client {
  color: var(--c1);
  font-weight: 700;
}
.dl-card-dot {
  color: var(--text-faint);
  opacity: 0.6;
}

/* 下载源列表 */
.dl-mirrors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dl-mirror {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-mirror-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
  min-width: 0;
}
.dl-mirror-btn:hover {
  border-color: var(--c1);
  color: var(--c1);
  background: rgba(91, 108, 240, 0.04);
  transform: translateY(-1px);
}
.dl-mirror-btn:active { transform: translateY(0); }
.dl-mirror-icon { width: 16px; height: 16px; flex-shrink: 0; }
.dl-mirror-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 主下载按钮（每个平台第一项）：高亮 */
.dl-mirror-primary .dl-mirror-btn {
  background: linear-gradient(135deg, var(--c1), var(--c1-hover));
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 18px -6px rgba(91, 108, 240, 0.5);
}
.dl-mirror-primary .dl-mirror-btn:hover {
  color: white;
  box-shadow: 0 12px 24px -6px rgba(91, 108, 240, 0.6);
}

/* 提取密码按钮 */
.dl-mirror-pwd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: rgba(91, 108, 240, 0.08);
  border: 1.5px dashed rgba(91, 108, 240, 0.35);
  border-radius: var(--radius-pill);
  color: var(--c1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.dl-mirror-pwd:hover {
  background: rgba(91, 108, 240, 0.14);
  border-color: var(--c1);
  border-style: solid;
}
.dl-mirror-pwd:active { transform: scale(0.96); }
.dl-mirror-pwd-label {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 600;
}
.dl-mirror-pwd-val {
  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
  letter-spacing: 1.5px;
}
.dl-mirror-pwd svg { width: 13px; height: 13px; opacity: 0.7; }

/* 教程链接 */
.dl-card-tutorial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-faint);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.dl-card-tutorial:hover { color: var(--c1); }
.dl-card-tutorial svg { width: 14px; height: 14px; }

/* 底部提示 */
.dl-foot-note {
  padding: 4px 32px 28px;
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.6;
}
.dl-foot-note:empty { display: none; }

.dl-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

/* 复制成功 toast */
.dl-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  background: rgba(15, 17, 23, 0.92);
  color: white;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: all var(--t-mid) var(--ease);
}
.dl-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   卡片顶部右侧控件组（主题切换 + 语言切换）
   ========================================================= */
.nav-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
}
.legal .nav-controls {
  top: 18px;
  right: 22px;
}

.lang-switch,
.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text-mute);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.lang-switch:hover,
.theme-switch:hover {
  border-color: var(--c1);
  color: var(--c1);
  background: var(--bg-card);
}
.lang-switch:active,
.theme-switch:active { transform: scale(0.96); }

.theme-switch { padding: 0; width: 32px; }
.theme-switch svg { width: 15px; height: 15px; }

/* =========================================================
   收藏永久地址按钮（首页 .perma-box 内的特殊 chip）
   ========================================================= */
.perma-chip-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--c1), var(--c1-hover));
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  box-shadow: 0 6px 14px -4px rgba(91, 108, 240, 0.5);
}
.perma-chip-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px rgba(91, 108, 240, 0.6);
}
.perma-chip-save:active { transform: translateY(0); }
.perma-chip-save svg { width: 13px; height: 13px; }

/* =========================================================
   收藏 Modal（bm-*）
   ========================================================= */
.bm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bm-modal.show { display: flex; }

.bm-mask {
  position: absolute;
  inset: 0;
  background: var(--bg-modal-mask);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: ebo-in .25s var(--ease);
}

.bm-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border-radius: 24px;
  padding: 36px 28px 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  animation: bm-pop .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bm-pop {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.bm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: var(--bg-soft);
  border: none;
  border-radius: 50%;
  color: var(--text-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast) var(--ease);
}
.bm-close:hover {
  background: var(--bg-hover);
  color: var(--text);
  transform: rotate(90deg);
}
.bm-close svg { width: 16px; height: 16px; }

.bm-header {
  text-align: center;
  margin-bottom: 22px;
}
.bm-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--c1), var(--c1-hover));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 24px -6px rgba(91, 108, 240, 0.5);
}
.bm-icon svg { width: 28px; height: 28px; }
.bm-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}
.bm-sub {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-faint);
}

.bm-url-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}
.bm-url {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
  display: flex;
  align-items: center;
}
.bm-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--c1), var(--c1-hover));
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast) var(--ease);
  box-shadow: 0 8px 18px -6px rgba(91, 108, 240, 0.5);
}
.bm-copy:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -6px rgba(91, 108, 240, 0.6);
}
.bm-copy:active { transform: translateY(0); }
.bm-copy svg { width: 14px; height: 14px; }

.bm-shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(91, 108, 240, 0.06);
  border: 1px dashed rgba(91, 108, 240, 0.3);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}
.bm-shortcut svg {
  width: 18px;
  height: 18px;
  color: var(--c1);
  flex-shrink: 0;
}

/* =========================================================
   全局 Toast（兜底，由 common.showToast 创建）
   ========================================================= */
.global-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  background: rgba(15, 17, 23, 0.92);
  color: white;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: all var(--t-mid) var(--ease);
}
.global-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 响应式 ---------- */
@media (max-width: 480px) {
  body { padding: 16px; gap: 16px; }
  .head { padding: 24px 76px 20px 22px; gap: 14px; }   /* 右内边距预留给 .nav-controls */
  .logo { width: 64px; height: 64px; font-size: 22px; border-radius: 16px; }
  .head-title { font-size: 22px; }
  .head-sub { font-size: 13px; }
  .action { padding: 4px 22px 26px; }
  .btn-go { padding: 17px 18px; font-size: 17px; min-height: 56px; }
  .action-btn { padding: 13px 14px; font-size: 14px; }
  .perma-box { padding: 10px 14px; gap: 8px; }
  .perma-label, .perma-chip { font-size: 13px; }
  .perma-label-text { display: none; }       /* 小屏只保留链接图标，避免换行 */
  .perma-chip { padding: 6px 14px; }
  .legal-links { font-size: 13px; }
  .legal-links .en { font-size: 12px; }
  .legal { padding: 32px 24px; margin: 16px; border-radius: 18px; }
  .stage { padding: 40px 24px 46px; min-height: 260px; }
  .stage-icon { width: 78px; height: 78px; }
  .stage-icon svg { width: 36px; height: 36px; }
  .ebo-title { font-size: 20px; }
  .ebo-hint { font-size: 14px; }

  /* 下载页移动端 */
  .dl-back { padding: 16px 22px 0; }
  .dl-head { padding: 14px 22px 16px; }
  .dl-list { padding: 0 22px 4px; gap: 12px; }
  .dl-card { padding: 16px 14px 14px; border-radius: 16px; }
  .dl-card-icon { width: 42px; height: 42px; border-radius: 11px; }
  .dl-card-icon svg { width: 22px; height: 22px; }
  .dl-card-name { font-size: 16px; }
  .dl-card-meta { font-size: 12px; }
  .dl-mirror { flex-wrap: wrap; gap: 6px; }            /* 窄屏允许换行 */
  .dl-mirror-btn { padding: 10px 14px; font-size: 13.5px; }
  .dl-mirror-pwd {
    flex: 1 1 100%;                                    /* 密码胶囊独占下一行 */
    padding: 9px 14px;
    font-size: 12px;
    justify-content: center;
  }
  .dl-foot-note { padding: 4px 22px 22px; font-size: 12px; }

  /* 收藏 modal 移动端 */
  .bm-box { padding: 28px 22px 22px; border-radius: 20px; }
  .bm-icon { width: 52px; height: 52px; border-radius: 14px; }
  .bm-icon svg { width: 24px; height: 24px; }
  .bm-title { font-size: 18px; }
  .bm-sub { font-size: 13px; }
  .bm-url { font-size: 12px; padding: 10px 12px; }
  .bm-copy { font-size: 13px; padding: 0 14px; }
  .bm-shortcut { font-size: 13px; padding: 12px 14px; }
  .nav-controls { top: 12px; right: 12px; gap: 4px; }
  .lang-switch, .theme-switch { min-width: 28px; height: 26px; font-size: 11px; }
  .theme-switch { width: 28px; }
  .theme-switch svg { width: 14px; height: 14px; }
}