/* ============================================================
   ifty 网络加速 · 官网样式表
   设计规范见 WEBSITE-DESIGN.md
   零依赖，纯 CSS
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 主色 */
  --c-primary: #3B82F6;
  --c-primary-dark: #2563EB;
  --c-primary-darker: #1D4ED8;
  --c-accent: #06B6D4;

  /* 状态色（必须与客户端负载颜色一致） */
  --c-success: #22C55E;
  --c-warning: #F59E0B;
  --c-danger: #EF4444;

  /* 文字 */
  --c-text: #1F2937;
  --c-text-2: #6B7280;
  --c-text-3: #9CA3AF;

  /* 背景与边框 */
  --c-bg: #FFFFFF;
  --c-bg-alt: #F9FAFB;
  --c-bg-soft: #F3F4F6;
  --c-border: #E5E7EB;
  --c-border-strong: #D1D5DB;

  /* 间距基数 8px */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;

  /* 圆角 */
  --r-sm: 6px;
  --r-btn: 8px;
  --r-card: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* 阴影（克制） */
  --sh-1: 0 1px 3px rgba(0, 0, 0, .08);
  --sh-2: 0 4px 12px rgba(0, 0, 0, .08);
  --sh-3: 0 8px 24px rgba(0, 0, 0, .10);

  /* 容器 */
  --container: 1200px;

  /* ── 用户中心固定宽度（改这四个值即可整体调整）────────────────
     总宽 1200 − 容器内边距 24×2 = 内容区 1152
     1152 = 左侧菜单 224 + 间距 32 + 右侧内容 896                    */
  --acct-total:   1200px;   /* 总宽（含容器内边距） */
  --acct-nav-w:    224px;   /* 左侧菜单宽 */
  --acct-gap:       32px;   /* 左右间距 */
  --acct-main-w:   896px;   /* 右侧内容宽 */
  --nav-h: 64px;
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---------- 布局工具 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

.section { padding: var(--sp-10) 0; }
.section--alt { background: var(--c-bg-alt); }
.section--tight { padding: var(--sp-8) 0; }

.section-head { max-width: 720px; margin: 0 auto var(--sp-6); text-align: center; }
.section-head h2 { font-size: 32px; margin-bottom: var(--sp-2); }
.section-head p { color: var(--c-text-2); font-size: 16px; }

.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.text-center { text-align: center; }
.muted { color: var(--c-text-2); }
.small { font-size: 14px; }
.tiny { font-size: 12px; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  color: var(--c-text);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.nav__logo:hover { color: var(--c-text); }
.nav__logo svg { display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: var(--sp-2);
  flex: 1;
}
.nav__links a {
  color: var(--c-text-2);
  font-size: 15px;
  padding: 6px 2px;
  transition: color .15s;
}
.nav__links a:hover { color: var(--c-text); }
.nav__links a.is-active { color: var(--c-primary); font-weight: 500; }

.nav__actions { display: flex; align-items: center; gap: var(--sp-2); }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-btn);
  background: #fff;
  align-items: center;
  justify-content: center;
}
.nav__toggle svg { display: block; }

/* 移动端展开菜单 */
.nav__mobile {
  display: none;
  border-top: 1px solid var(--c-border);
  background: #fff;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.nav__mobile.is-open { display: block; }
.nav__mobile a {
  display: block;
  padding: 12px 4px;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.nav__mobile a:last-child { border-bottom: 0; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); color: #fff; }

.btn--ghost { background: #fff; color: var(--c-text); border-color: var(--c-border-strong); }
.btn--ghost:hover { border-color: var(--c-text-3); color: var(--c-text); background: var(--c-bg-alt); }

.btn--lg { height: 52px; padding: 0 30px; font-size: 16px; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-disabled {
  background: var(--c-bg-soft);
  color: var(--c-text-3);
  border-color: var(--c-border);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--sp-10) 0 var(--sp-8);
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(59, 130, 246, .10), transparent 60%),
    radial-gradient(800px 400px at 85% 0%, rgba(6, 182, 212, .10), transparent 60%),
    var(--c-bg);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-8);
  align-items: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-full);
  background: rgba(34, 197, 94, .10);
  color: #15803D;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--sp-3);
}

.hero h1 {
  font-size: 44px;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-3);
}

.hero__sub {
  font-size: 17px;
  color: var(--c-text-2);
  max-width: 560px;
  margin-bottom: var(--sp-4);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.hero__note { font-size: 14px; color: var(--c-text-3); }

/* Hero 右侧：客户端示意图（纯 CSS 绘制，不需要图片素材） */
.mock {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
}
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-border-strong); }
.mock__title { margin-left: 6px; font-size: 13px; color: var(--c-text-2); }

.mock__body { padding: var(--sp-3); }

.mock__status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-card);
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .25);
  margin-bottom: var(--sp-2);
}
.mock__status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-success);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
}
.mock__status strong { font-size: 15px; display: block; }
.mock__status span { font-size: 13px; color: var(--c-text-2); }

.mock__node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  margin-bottom: 10px;
}
.mock__node:last-child { margin-bottom: 0; }
.mock__node-name { font-size: 14px; font-weight: 500; }
.mock__node-meta { font-size: 12px; color: var(--c-text-3); }

/* ---------- 状态条 ---------- */
.statbar {
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-alt);
}
.statbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-3) 0;
}
.statbar__item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-text-2); }
.statbar__item strong { color: var(--c-text); font-weight: 600; }

.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-success);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .16);
}

/* ---------- 卡片 ---------- */
.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-2); }
.card--flat:hover { box-shadow: none; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--c-text-2); font-size: 15px; }

.card__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(59, 130, 246, .10);
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}
.card__icon--green { background: rgba(34, 197, 94, .10); color: #15803D; }
.card__icon--cyan { background: rgba(6, 182, 212, .12); color: #0E7490; }
.card__icon--amber { background: rgba(245, 158, 11, .12); color: #B45309; }

/* ---------- 节点卡片 ---------- */
.node {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-3);
}
.node__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.node__name { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.node__flag {
  width: 28px; height: 20px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  background: var(--c-bg-soft);
}
.node__desc { font-size: 14px; color: var(--c-text-2); margin-bottom: var(--sp-2); }

.node__load-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--c-text-2); margin-bottom: 6px;
}

.bar {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-bg-soft);
  overflow: hidden;
}
.bar__fill { height: 100%; border-radius: var(--r-full); transition: width .4s; }
.bar__fill--smooth { background: var(--c-success); }
.bar__fill--busy { background: var(--c-warning); }
.bar__fill--full { background: var(--c-danger); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 500;
}
.badge--smooth { background: rgba(34, 197, 94, .12); color: #15803D; }
.badge--busy { background: rgba(245, 158, 11, .14); color: #B45309; }
.badge--full { background: rgba(239, 68, 68, .12); color: #B91C1C; }
.badge--gray { background: var(--c-bg-soft); color: var(--c-text-2); }

/* ---------- 步骤条 ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 64px; }
.step__num {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  font-size: 17px;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute; left: 19px; top: 48px; bottom: -4px;
  width: 2px; background: var(--c-border);
}
.step h3 { font-size: 17px; margin-bottom: 6px; padding-top: 6px; }
.step p { color: var(--c-text-2); font-size: 15px; }
.step + .step { margin-top: var(--sp-4); }

/* ---------- 特性列表 ---------- */
.feature-list { display: grid; gap: var(--sp-2); }
.feature-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: var(--c-text-2);
}
.feature-list svg { flex-shrink: 0; margin-top: 5px; color: var(--c-success); }
.feature-list strong { color: var(--c-text); font-weight: 600; }

/* ---------- 提示框 ---------- */
.callout {
  display: flex; gap: 14px;
  padding: var(--sp-3);
  border-radius: var(--r-card);
  border: 1px solid var(--c-border);
  background: var(--c-bg-alt);
}
.callout--warn { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .35); }
.callout--info { background: rgba(59, 130, 246, .07); border-color: rgba(59, 130, 246, .28); }
.callout--success { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .30); }
.callout__icon { flex-shrink: 0; }
.callout h4 { font-size: 16px; margin-bottom: 6px; }
.callout p { font-size: 15px; color: var(--c-text-2); }
.callout p + p { margin-top: 8px; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
.faq__item[open] { border-color: var(--c-border-strong); box-shadow: var(--sh-1); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--sp-3);
  font-size: 16px; font-weight: 500;
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-text-3);
  border-bottom: 2px solid var(--c-text-3);
  transform: rotate(45deg);
  transition: transform .2s;
  margin-top: -4px;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: 4px; }
.faq__a { padding: 0 var(--sp-3) var(--sp-3); color: var(--c-text-2); font-size: 15px; }
.faq__a p + p { margin-top: 10px; }

/* ---------- 底部 CTA ---------- */
.cta {
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary-darker), var(--c-primary), var(--c-accent));
}
.cta h2 { font-size: 30px; margin-bottom: var(--sp-2); }
.cta p { color: rgba(255, 255, 255, .88); margin-bottom: var(--sp-4); }
.cta .btn--ghost { background: #fff; color: var(--c-primary-dark); border-color: transparent; }
.cta .btn--ghost:hover { background: rgba(255, 255, 255, .92); color: var(--c-primary-darker); }

/* ---------- 下载页 ---------- */
.platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }

.platform {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: #fff;
  padding: var(--sp-3);
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.platform:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-2); }
.platform.is-current { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }
.platform.is-disabled { opacity: .62; }
.platform__icon { margin: 0 auto var(--sp-2); color: var(--c-text); display: flex; justify-content: center; }
.platform h3 { font-size: 16px; margin-bottom: 4px; }
.platform p { font-size: 13px; color: var(--c-text-3); margin-bottom: var(--sp-2); }

.dl-box {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: #fff;
  padding: var(--sp-4);
}
.dl-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.dl-meta__item { text-align: center; }
.dl-meta__k { font-size: 13px; color: var(--c-text-3); margin-bottom: 4px; }
.dl-meta__v { font-size: 15px; font-weight: 500; }

/* ---------------------------------------------------------------------------
 *  macOS 的两个芯片架构（Apple 芯片 / Intel）
 *  ---------------------------------------------------------------------------
 *  ★ 为什么必须分开：2020 年之后的 Mac 是 arm64，之前的是 x86_64。
 *    一个包塞给所有人，用户下错版本只会得到"打不开"——而且看不出原因。
 *    JS 会按访问设备的芯片给对应的那张卡打上「推荐」。
 * ------------------------------------------------------------------------ */
.dl-archs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.dl-arch {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  background: #fff;
}

/* 推荐的那张：描边变主色 + 淡淡的光圈，不加动画（不吸引注意力到错误的地方） */
.dl-arch[data-recommended="1"] {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.dl-arch__head {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.dl-arch__name { font-size: 16px; font-weight: 600; color: var(--c-text); }
.dl-arch__sub { font-size: 13px; color: var(--c-text-3); }

.dl-arch__rec {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--c-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* 卡片内的元信息用两列，四列会把 320px 的卡挤爆 */
.dl-arch .dl-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--sp-2) 0;
}

.dl-arch .hash { margin-bottom: var(--sp-2); }
/* 按钮永远贴在卡片底部，两张卡高度不一致时也对齐 */
.dl-arch > .btn { margin-top: auto; }

/* 同一架构下的**其它打包格式**（.dmg 主按钮旁边还会挂 .zip 这类）：
   一个版本里同平台同架构允许并存多种格式，两个入口都要给出来。 */
.dl-more {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.dl-more[hidden] { display: none; }
.platpanel > .dl-more { margin-top: var(--sp-2); }

/* ---------- 下载页：一个平台 = 最新版本 + 该平台全部安装包 ---------- */
/* 版本行：最新版本 x.y.z · 发布于 YYYY-MM-DD */
.dl-rel {
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: 13px; color: var(--c-muted, #6E8098);
}
.dl-rel b { color: #12203A; font-weight: 700; margin: 0 2px; }

.dl-files { display: flex; flex-direction: column; gap: var(--sp-2); }

/* 一个安装包一行：左边文件名+元信息，右边操作按钮 */
.dl-file {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11, 18, 32, .04);
}
.dl-file__main { min-width: 0; }
.dl-file__name {
  font-size: 14px; font-weight: 650; color: #12203A;
  letter-spacing: -.01em;
  word-break: break-all;      /* 版本+平台+架构的文件名很长，窄屏要能换行 */
}
.dl-file__meta {
  font-size: 11.5px; color: #8E97A4; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.dl-file__acts { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* 这个平台还没发包时的占位 */
.dl-empty {
  padding: 18px 14px; text-align: center;
  font-size: 13px; color: #8E97A4;
  background: rgba(255, 255, 255, .5);
  border: 1px dashed rgba(11, 18, 32, .16);
  border-radius: 12px;
}

/* ---------- 「其他版本」页：一个通道里按版本分块（最多 3 版）---------- */
.ov-ver + .ov-ver {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(11, 18, 32, .08);
}
.ov-badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px; margin-left: 8px;
  border-radius: 99px;
  font-size: 11px; font-weight: 700;
  color: #0A4FAE; background: rgba(10, 132, 255, .13);
}
.ov-meta--old { opacity: .72; }

/* ---------- 节点状态页：地区分组标题（由 JS 按接口返回的地区生成）---------- */
.node-region {
  font-size: 20px;
  margin-bottom: var(--sp-2);
}

/* 通用版：整行铺开，压在两张芯片卡上面 —— 它是"不确定自己是什么芯片"的默认答案 */
.dl-arch--universal {
  grid-column: 1 / -1;
  background: var(--c-bg-soft);
}
.dl-arch--universal .dl-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------------
 *  「其他版本」页（尝鲜版 / 内测版）
 *  ---------------------------------------------------------------------------
 *  ★ 这一页整体要"看起来就不像正式版"：顶部有醒目的警示色条，
 *    每个包都直接给直链和 sha256 —— 正式版出问题时，运营要能
 *    立刻把链接发给用户，而不是"你去后台自己找"。
 * ------------------------------------------------------------------------ */
.ov-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(245, 158, 11, .45);
  background: rgba(245, 158, 11, .10);
  border-radius: var(--r-card);
  font-size: 14px;
  line-height: 1.7;
  color: #8A5200;
}

.ov-panel + .ov-panel { margin-top: var(--sp-3); }

.ov-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ov-version { font-size: 18px; font-weight: 700; }
.ov-meta { font-size: 13px; color: var(--c-text-3); }

.ov-notes {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--c-text-2);
}

.ov-files { display: grid; gap: 10px; margin-top: var(--sp-3); }

.ov-file {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  background: #fff;
}
.ov-file__main { flex: 1 1 260px; min-width: 0; }
.ov-file__title { font-size: 14.5px; font-weight: 600; }
.ov-file__name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--c-text-2);
  word-break: break-all;
  margin: 2px 0 4px;
}
/* 每个包下面的 sha256 条：跟着包走，不要占满整行视觉重心 */
.ov-files .hash { margin: 0; }

.dl-arch__note {
  font-size: 12.5px;
  color: var(--c-text-3);
  margin-top: 6px;
}

.hash {
  display: flex; align-items: center; gap: 10px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.hash code {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--c-text-2);
  word-break: break-all;
}

/* 安装步骤里的"截图占位" */
.shot {
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  margin: var(--sp-2) 0;
}
.shot__cap {
  padding: 8px 14px;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
  font-size: 12px;
  color: var(--c-text-3);
}
.shot__body { padding: var(--sp-4); background: #F1F5F9; }

/* 模拟 Windows 警告框 */
.win-dialog {
  max-width: 480px; margin: 0 auto;
  background: #fff;
  border: 1px solid #C9CDD4;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  overflow: hidden;
}
.win-dialog__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #202020; color: #fff;
  font-size: 13px;
}
.win-dialog__body { padding: 18px 16px; font-size: 13.5px; color: #333; line-height: 1.7; }
.win-dialog__body strong { display: block; margin-bottom: 6px; font-size: 14px; }
.win-dialog__actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 16px;
  background: #F3F3F3;
  border-top: 1px solid #E5E5E5;
}
.win-btn {
  height: 30px; padding: 0 18px;
  border: 1px solid #ADADAD; border-radius: 4px;
  background: #E1E1E1; color: #000; font-size: 12.5px;
}
.win-btn--primary { background: #0067C0; border-color: #0067C0; color: #fff; }
.win-link { color: #0067C0; text-decoration: underline; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-card); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--c-border); }
th { background: var(--c-bg-alt); font-weight: 600; font-size: 13.5px; color: var(--c-text-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  padding: var(--sp-6) 0 var(--sp-4);
  margin-top: var(--sp-10);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.footer__brand p { font-size: 14px; color: var(--c-text-2); margin-top: 10px; max-width: 320px; }
.footer h4 { font-size: 14px; margin-bottom: var(--sp-2); }
.footer li { margin-bottom: 8px; }
.footer li a { color: var(--c-text-2); font-size: 14px; }
.footer li a:hover { color: var(--c-text); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: space-between; align-items: center;
  padding-top: var(--sp-3);
  font-size: 13px; color: var(--c-text-3);
}
.footer__disclaimer { font-size: 12px; color: var(--c-text-3); margin-top: var(--sp-2); line-height: 1.7; }

/* ---------- 公告条 ---------- */
.announce {
  background: linear-gradient(90deg, var(--c-primary-darker), var(--c-primary));
  color: #fff;
  font-size: 13.5px;
  text-align: center;
  padding: 9px var(--sp-3);
}
.announce a { color: #fff; text-decoration: underline; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero h1 { font-size: 38px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__actions .btn { display: none; }
  .nav__actions .btn--primary { display: inline-flex; height: 38px; padding: 0 14px; font-size: 14px; }
  .grid--3 { grid-template-columns: 1fr; }
  .statbar__inner { gap: var(--sp-3); }
  /* 两个芯片架构在窄屏上竖排：并排会把元信息压成一列，读不了 */
  .dl-archs { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --sp-10: 56px; --sp-12: 64px; --sp-8: 44px; }
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  .hero h1 { font-size: 30px; }
  .hero__sub { font-size: 16px; }
  .section-head h2 { font-size: 24px; }
  .cta h2 { font-size: 24px; }
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr 1fr; }
  .dl-meta { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: var(--sp-3); }
  .step { padding-left: 56px; }
  .hero__cta .btn { width: 100%; }
  .btn--lg { height: 48px; }
}

/* ---------- 品牌：iFTY — 让连接无限 ---------- */
.brandmark { font-weight: 800; letter-spacing: -.02em; color: var(--c-text); }
.brandmark i { font-style: normal; color: var(--c-primary); }

.hero__slogan {
  font-size: 13.5px; font-weight: 700; letter-spacing: .30em;
  color: var(--c-primary); margin-bottom: 14px; text-indent: .30em;
}

.footer__slogan {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  color: var(--c-primary); margin-top: 12px;
}
.footer__slogan::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}

/* ---------- 品牌理念卡 ---------- */
.brandcard {
  display: flex; align-items: center; gap: 28px;
  padding: 30px 34px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(420px 200px at 8% -20%, rgba(10,132,255,.16), transparent 62%),
    radial-gradient(360px 180px at 96% 120%, rgba(6,182,212,.14), transparent 62%),
    #fff;
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-2);
}
.brandcard__left { flex-shrink: 0; text-align: center; }
.brandcard__word {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  margin-top: 10px; color: var(--c-text);
}
.brandcard__word i { font-style: normal; color: var(--c-primary); }
.brandcard__eq {
  font-size: 12.5px; color: var(--c-text-3); margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.brandcard__body { flex: 1; }
.brandcard__body h3 { font-size: 20px; margin-bottom: 10px; }
.brandcard__body p { color: var(--c-text-2); font-size: 15px; line-height: 1.8; }
.brandcard__body p + p { margin-top: 8px; }
.brandcard__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.brandcard__tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--c-bg-soft); border: 1px solid var(--c-border);
  font-size: 12.5px; font-weight: 550; color: #33405A;
}

@media (max-width: 760px) {
  .brandcard { flex-direction: column; gap: 18px; padding: 24px 22px; text-align: center; }
  .brandcard__tags { justify-content: center; }
}


/* ============================================================
   表单（认证页 / 用户中心共用）
   ============================================================ */
.field { margin-bottom: var(--sp-2); }
.field__label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--c-text); margin-bottom: 6px;
}
.field__label .opt { font-weight: 400; color: var(--c-text-3); font-size: 13px; }
.field__hint { font-size: 12.5px; color: var(--c-text-3); margin-top: 6px; line-height: 1.6; }
.field__err  { font-size: 12.5px; color: var(--c-danger);  margin-top: 6px; }

.input {
  width: 100%; height: 46px; padding: 0 14px;
  font-size: 15px; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-btn);
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.input::placeholder { color: var(--c-text-3); }
.input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.input.is-err { border-color: var(--c-danger); }
.input.is-err:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }

.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; min-width: 0; }
.input-suffix { position: relative; }
.input-suffix .input { padding-right: 44px; }
.input-suffix__btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; color: var(--c-text-3);
  border-radius: var(--r-sm);
}
.input-suffix__btn:hover { color: var(--c-text); background: var(--c-bg-soft); }

/* 输入框里放一个**文字**动作按钮（手机号那栏的「发送验证码 / 58s 后重发」）。
   ★ 不能复用 .input-suffix__btn：那是固定 34×34 的图标位，装不下文字。 */
.input-action { position: relative; }
.input-action .input { padding-right: 118px; }
.input-action__btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--c-primary-dark); white-space: nowrap;
}
.input-action__btn:hover { background: var(--c-bg-soft); }
.input-action__btn:disabled { color: var(--c-text-3); cursor: default; background: transparent; }

/* 验证码 6 格 */
.otp { display: flex; gap: 8px; }
.otp input {
  width: 100%; height: 56px; text-align: center;
  font-size: 24px; font-weight: 700; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-btn); font-family: inherit;
}
.otp input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* 复选框行 */
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--c-text-2); line-height: 1.65; }
.check input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--c-primary); }
.check a { color: var(--c-primary-dark); font-weight: 550; }

/* 行内提示条 */
.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-btn);
  font-size: 14px; line-height: 1.7;
}
.notice--info { background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.25); color: #1E40AF; }
.notice--ok   { background: rgba(34,197,94,.08);  border: 1px solid rgba(34,197,94,.28);  color: #15803D; }
.notice--warn { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.32); color: #92400E; }
.notice--err  { background: rgba(239,68,68,.07);  border: 1px solid rgba(239,68,68,.28);  color: #B91C1C; }

/* ============================================================
   认证页（注册 / 登录 / 验证 / 找回）
   ============================================================ */
.auth { max-width: 460px; margin: 0 auto; padding: var(--sp-6) var(--sp-3) var(--sp-8); }
.auth__brand { text-align: center; margin-bottom: var(--sp-4); }
.auth__brand .brandmark { font-size: 24px; }
.auth__card {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--sh-2);
}
.auth__title { font-size: 23px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.auth__sub { font-size: 14.5px; color: var(--c-text-2); line-height: 1.7; margin-bottom: var(--sp-3); }
.auth__foot { text-align: center; margin-top: var(--sp-3); font-size: 14px; color: var(--c-text-2); }
.auth__foot a { color: var(--c-primary-dark); font-weight: 600; }
.auth__divider { display: flex; align-items: center; gap: 12px; margin: var(--sp-3) 0; color: var(--c-text-3); font-size: 13px; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

/* ============================================================
   用户中心
   ============================================================ */
/* 用户中心容器：桌面端固定为总宽，不再随窗口拉伸 */
.acct-wrap {
  width: var(--acct-total);
  max-width: 100%;
  padding: var(--sp-4) 0 var(--sp-8);
}
/* ★ 用户中心：两列都是【固定宽度】，不用 1fr —— 窗口变化时布局不变形 */
.acct {
  display: grid;
  grid-template-columns: var(--acct-nav-w) var(--acct-main-w);
  gap: var(--acct-gap);
  align-items: start;
}

/* 手机/平板：容器跟视口走，绝不横向溢出 */
@media (max-width: 1247px) {
  .acct-wrap { width: 100%; }
}

/* 窗口不足以放下固定宽度时，右侧自适应（避免横向滚动条） */
@media (max-width: 1247px) {
  .acct { grid-template-columns: var(--acct-nav-w) minmax(0, 1fr); }
}
.acct__nav {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: 8px;
  position: sticky; top: calc(var(--nav-h) + 16px);
}
.acct__nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--c-text-2); font-weight: 500;
}
.acct__nav a:hover { background: var(--c-bg-soft); color: var(--c-text); }
.acct__nav a.is-active { background: rgba(59,130,246,.09); color: var(--c-primary-dark); font-weight: 650; }
.acct__nav .sep { height: 1px; background: var(--c-border); margin: 8px 6px; }

.panel {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.panel:last-child { margin-bottom: 0; }
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: var(--sp-2); flex-wrap: wrap;
}
.panel__title { font-size: 17px; font-weight: 750; }
.panel__desc { font-size: 13.5px; color: var(--c-text-2); line-height: 1.7; margin-bottom: var(--sp-2); }

/* 套餐 / 用量 */
.quota__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.quota__k { font-size: 13.5px; color: var(--c-text-2); }
.quota__big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.quota__big small { font-size: 15px; font-weight: 600; color: var(--c-text-3); }
.quota__meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-text-2); margin-top: 8px; }

/* 凭据行 */
.cred {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: 14px 16px;
  border: 1px solid var(--c-border); border-radius: var(--r-card);
  margin-bottom: 10px; background: var(--c-bg);
}
.cred:last-child { margin-bottom: 0; }
.cred__name { font-size: 15px; font-weight: 650; margin-bottom: 3px; }
.cred__meta { font-size: 12.5px; color: var(--c-text-3); font-family: ui-monospace, Menlo, Consolas, monospace; }
.cred__acts { display: flex; gap: 8px; flex-shrink: 0; }

/* 订阅 / 凭据 复制框 */
.linkbox {
  display: flex; align-items: center; gap: 8px;
  background: var(--c-bg-soft); border: 1px solid var(--c-border);
  border-radius: var(--r-btn); padding: 10px 12px; margin-bottom: 10px;
}
.linkbox code {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--c-text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.linkbox .btn { flex-shrink: 0; }

/* 两步引导 */
.twostep { counter-reset: ts; }
.twostep__item { position: relative; padding-left: 42px; }
.twostep__item + .twostep__item { margin-top: var(--sp-3); }
.twostep__item::before {
  counter-increment: ts; content: counter(ts);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff; font-size: 14px; font-weight: 700;
}
.twostep__item h4 { font-size: 15.5px; margin-bottom: 6px; padding-top: 4px; }

/* 状态横幅 */
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-card); margin-bottom: var(--sp-3);
  font-size: 14px; line-height: 1.7;
}
.banner strong { font-weight: 700; }
.banner--ok   { background: rgba(34,197,94,.08);  border: 1px solid rgba(34,197,94,.28);  color: #15803D; }
.banner--info { background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.25); color: #1E40AF; }
.banner--warn { background: rgba(245,158,11,.09); border: 1px solid rgba(245,158,11,.34); color: #92400E; }
.banner--err  { background: rgba(239,68,68,.07);  border: 1px solid rgba(239,68,68,.30);  color: #B91C1C; }

/* 空状态 */
.empty { text-align: center; padding: var(--sp-5) var(--sp-2); color: var(--c-text-2); }
.empty h4 { font-size: 16px; color: var(--c-text); margin-bottom: 6px; }

/* 步骤图文（iOS 指引） */
.guide { counter-reset: g; max-width: 760px; margin: 0 auto; }
.guide__step {
  position: relative; padding: 0 0 0 56px;
  padding-bottom: var(--sp-4);
}
.guide__step:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 40px; bottom: 6px;
  width: 2px; background: var(--c-border);
}
.guide__num {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff; font-size: 15px; font-weight: 750;
}
.guide__step h3 { font-size: 17px; margin-bottom: 8px; padding-top: 5px; }
.guide__step p { color: var(--c-text-2); font-size: 15px; line-height: 1.8; }
.guide__step p + p { margin-top: 6px; }
.guide__shot {
  margin-top: 12px; padding: 18px; border-radius: var(--r-card);
  border: 1px dashed var(--c-border-strong); background: var(--c-bg-alt);
  font-size: 13px; color: var(--c-text-3); text-align: center;
}

@media (max-width: 900px) {
  .acct { grid-template-columns: 1fr; }
  .acct__nav {
    position: static; display: flex; gap: 6px; overflow-x: auto;
    padding: 6px; scrollbar-width: none;
  }
  .acct__nav::-webkit-scrollbar { display: none; }
  .acct__nav a { white-space: nowrap; padding: 9px 12px; }
  .acct__nav .sep { display: none; }
}
@media (max-width: 560px) {
  .auth { padding: var(--sp-4) var(--sp-2) var(--sp-6); }
  .auth__card { padding: var(--sp-3) var(--sp-2); }
  .cred { flex-direction: column; align-items: stretch; }
  .cred__acts { justify-content: flex-end; }
  .otp { gap: 5px; }
  .otp input { height: 48px; font-size: 20px; }
}

/* ============================================================
   精简版新增组件
   ============================================================ */

/* 三步上手卡片 */
.startcard {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-3);
}
.startcard__head {
  font-size: 17px; font-weight: 750; margin-bottom: var(--sp-2);
  display: flex; align-items: center; gap: 8px;
}
.startlist { counter-reset: st; }
.startlist li {
  position: relative; padding-left: 34px;
  font-size: 15px; line-height: 1.7; color: var(--c-text-2);
}
.startlist li + li { margin-top: 12px; }
.startlist li::before {
  counter-increment: st; content: counter(st);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-soft); border: 1px solid var(--c-border);
  font-size: 12.5px; font-weight: 700; color: var(--c-text-2);
}
.startcard__foot { margin-top: var(--sp-2); font-size: 14px; }
.startcard__foot a { color: var(--c-primary-dark); font-weight: 600; }

/* CTA 按钮行 */
.cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* 精简页脚 */
.footer__mini {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; padding-bottom: var(--sp-2);
}
.footer__minilinks { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__minilinks a { font-size: 14px; color: var(--c-text-2); }
.footer__minilinks a:hover { color: var(--c-primary-dark); }

/* ============================================================
   套餐选择（用户中心）
   ============================================================ */
.planpick { display: grid; gap: 10px; }
.planopt {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--c-border);
  border-radius: var(--r-card); cursor: pointer; background: var(--c-bg);
  transition: border-color .15s, background .15s;
}
.planopt:hover { border-color: var(--c-border-strong); background: var(--c-bg-alt); }
.planopt input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--c-primary); }
.planopt__body { flex: 1; min-width: 0; }
.planopt__name { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.planopt__meta { font-size: 13px; color: var(--c-text-2); margin-top: 4px; }
.planopt__price { text-align: right; flex-shrink: 0; }
.planopt__num { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.planopt__num small { font-size: 13px; font-weight: 600; }
.planopt__tag { font-size: 12px; color: var(--c-text-3); margin-top: 3px; }

.planopt.is-on {
  border-color: var(--c-primary);
  background: rgba(59,130,246,.05);
  box-shadow: 0 0 0 1px var(--c-primary) inset;
}
.planopt--best { border-color: rgba(59,130,246,.45); }
.planopt--best .planopt__name::after {
  content: "最划算"; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--c-primary);
  padding: 2px 7px; border-radius: var(--r-full);
}


/* ============================================================
   ★ 移动端强化（大多数用户用手机打开）



/* ============================================================
   ★ 移动端全局加固
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }



/* 卡片网格在窄屏一律单列（二次保险，覆盖内联样式） */


/* ============================================================
   ★ 官网移动端适配 —— 仅为【新组件】补充
   ------------------------------------------------------------
   原有页面（首页 / 下载 / FAQ / 节点 / 协议）的响应式规则
   已存在于上方 @media 1100 / 860 / 640 / 760，
   此处【不重复、不覆盖】，只补新组件在窄屏的表现。
   ============================================================ */

@media (max-width: 640px) {

  /* 首屏插图：限制宽度，避免在窄屏铺满显笨重 */
  .mock { max-width: 340px; margin: 0 auto; }

  /* 三步上手卡：收紧内边距 */
  .startcard { padding: var(--sp-2) var(--sp-2) var(--sp-3); }
  .startlist li { font-size: 14.5px; }

  /* ★ 套餐单选卡：价格换到第二行，避免按钮与价格互相挤压 */
  .planopt { padding: 13px 14px; gap: 10px; flex-wrap: wrap; }
  .planopt__price {
    width: 100%; text-align: left;
    padding-left: 32px;              /* 与单选框对齐 */
    display: flex; align-items: baseline; gap: 8px;
  }
  .planopt__tag { margin-top: 0; }

  /* 两步引导：缩进收紧 */
  .twostep__item { padding-left: 36px; }
  .twostep__item::before { width: 24px; height: 24px; font-size: 13px; }

  /* 订阅 / 凭据复制框：按钮不挤压、可换行 */
  .linkbox { flex-wrap: wrap; }
  .linkbox code { flex: 1 1 100%; }      /* 链接独占一行，按钮在下一行 */
  .linkbox .btn { flex: 1 1 auto; }

  /* 状态横幅 */
  .banner { padding: 13px 14px; font-size: 13.5px; }

  /* 节点卡网格（新首页用 .grid--2，原有 640 规则已处理；此处只收紧间距） */
  .node { padding: var(--sp-2); }

  /* 指标卡（用户中心当前套餐） */
  .quota__top { gap: 8px; }
  .quota__big { font-size: 24px; }

  /* 认证页：输入框与按钮更好点 */
  .auth__title { font-size: 21px; }
  .input, .btn--lg { min-height: 48px; }

  /* 精简页脚：纵向排列 */
  .footer__mini { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .footer__minilinks { gap: 14px; row-gap: 10px; }

  /* 表格：横向可滚（协议/隐私页） */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* 快速开始：平台卡内的接入方式说明 */
.platcard__way {
  font-size: 13px; color: var(--c-text-2); line-height: 1.6;
  margin-bottom: var(--sp-2); min-height: 42px;
}

/* ============================================================
   Hero 客户端界面：嵌入设计稿真实界面（393×852，等比缩放）
   ============================================================ */
.appshot {
  position: relative;
  width: 295px;
  height: 430px;                    /* ★ 只展示上部，降低首屏高度 */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 35px 35px 0 0;     /* 只保留上方圆角 */
}
/* 底部渐隐：暗示界面还有更多，同时把裁切边藏起来 */
.appshot::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 120px; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.85) 55%,
    var(--c-bg) 100%);
}
.appshot iframe {
  position: absolute; top: 0; left: 0;
  width: 393px; height: 852px;
  border: 0;
  transform: scale(0.75);
  transform-origin: top left;
  border-radius: 35px;             /* 46px × 0.75 */
  box-shadow: var(--sh-3);
  background: transparent;
  pointer-events: none;            /* 纯展示，不抢交互 */
}

@media (max-width: 1100px) {
  /* 首屏变单列后，界面居中并略缩小 */
  .appshot { width: 256px; height: 370px; }
  .appshot iframe { transform: scale(0.65); border-radius: 30px; }
  .appshot::after { height: 100px; }
}
@media (max-width: 640px) {
  .appshot { width: 236px; height: 330px; }
  .appshot iframe { transform: scale(0.60); border-radius: 28px; }
  .appshot::after { height: 90px; }
}

/* ============================================================
   下载页：平台选项卡
   ============================================================ */
.plattabs {
  display: inline-flex; gap: 6px; flex-wrap: wrap;
  padding: 6px; margin-bottom: var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-bg-soft); border: 1px solid var(--c-border);
}
.plattabs button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border: 0; cursor: pointer;
  border-radius: var(--r-full);
  background: transparent; color: var(--c-text-2);
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  transition: background .15s, color .15s;
}
.plattabs button:hover { color: var(--c-text); }
.plattabs button.is-active {
  background: var(--c-bg); color: var(--c-primary-dark);
  box-shadow: var(--sh-1);
}
.platpanel[hidden] { display: none; }

@media (max-width: 640px) {
  .plattabs {
    display: flex; width: 100%;
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .plattabs::-webkit-scrollbar { display: none; }
  .plattabs button { white-space: nowrap; padding: 9px 15px; font-size: 14px; }
}

/* ============================================================
   「我的」信息页
   ============================================================ */
.profile {
  display: flex; align-items: center; gap: 16px;
  padding: 18px;
  border-radius: var(--r-card);
  background:
    radial-gradient(320px 160px at 0% 0%, rgba(10,132,255,.14), transparent 65%),
    radial-gradient(280px 150px at 100% 100%, rgba(6,182,212,.12), transparent 65%),
    var(--c-bg-alt);
  border: 1px solid rgba(59,130,246,.22);
}
.profile__avatar {
  width: 60px; height: 60px; border-radius: var(--r-full);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff; font-size: 25px; font-weight: 800;
  letter-spacing: -.02em;
}
.profile__name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.profile__meta { font-size: 13.5px; color: var(--c-text-2); margin-top: 4px; }

/* 资产三栏 */
.assets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.asset {
  padding: 14px;
  border-radius: var(--r-card);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
}
.asset__k { font-size: 12.5px; color: var(--c-text-2); }
.asset__v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.asset__v small { font-size: 13px; font-weight: 600; color: var(--c-text-3); }
.asset__n { font-size: 12px; color: var(--c-text-3); margin-top: 4px; }

/* 信息行 */
.infolist { margin-top: 4px; }
.inforow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 14.5px;
}
.inforow:last-child { border-bottom: 0; padding-bottom: 0; }
.inforow__k { color: var(--c-text-2); flex-shrink: 0; }
.inforow__v { font-weight: 600; text-align: right; word-break: break-all; }

@media (max-width: 640px) {
  .assets { grid-template-columns: 1fr; }
  .profile { padding: 15px; gap: 13px; }
  .profile__avatar { width: 52px; height: 52px; font-size: 22px; }
  .profile__name { font-size: 17px; }
  .inforow { flex-direction: column; align-items: flex-start; gap: 4px; }
  .inforow__v { text-align: left; }
}

/* ============================================================
   滚动通知条（banner 下方 · 宽度与 banner 一致）
   ============================================================ */
/* ★ 悬浮在导航下方：不占布局空间，浮在 hero 之上 */
.ticker-wrap {
  position: fixed;
  top: var(--nav-h);          /* 64px —— 紧贴导航下沿 */
  left: 0; right: 0;
  z-index: 90;                /* 低于导航的 100，移动端菜单可盖住它 */
  padding: var(--sp-2) 0;
  pointer-events: none;       /* 容器不挡下方点击 */
}
.ticker-wrap .container { pointer-events: auto; }   /* 只让公告条本身可交互 */
/* hero 顶部留白要让开悬浮条（导航 64 + 公告区约 78） */
.ticker-wrap + .hero { padding-top: var(--sp-12); }   /* 96px，让开悬浮条 */
.ticker {
  display: flex; align-items: center;
  height: 46px; overflow: hidden;
  border-radius: var(--r-card);
  background:
    linear-gradient(90deg, rgba(10,132,255,.07), rgba(6,182,212,.07)),
    rgba(255, 255, 255, .94);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 16px rgba(11, 18, 32, .08);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.ticker__label {
  flex-shrink: 0; height: 100%;
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px; margin-right: 16px;
  font-size: 12.5px; font-weight: 700;
  color: var(--c-primary-dark);
  letter-spacing: .04em;
  border-right: 1px solid var(--c-border);
  background: rgba(255, 255, 255, .78);
}
.ticker__viewport { flex: 1; overflow: hidden; }
.ticker__track {
  display: inline-flex; align-items: center; gap: 56px;
  white-space: nowrap; width: max-content;
  animation: ticker-scroll 44s linear infinite;
  will-change: transform;
}
.ticker__track span {
  font-size: 13.5px; color: var(--c-text-2);
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker:hover .ticker__track { animation-play-state: paused; }

/* 无障碍：尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__viewport { overflow-x: auto; }
}
@media (max-width: 640px) {
  .ticker { height: 38px; }
  .ticker__label { padding: 0 10px; margin-right: 10px; font-size: 12px; }
  .ticker__track { gap: 40px; animation-duration: 32s; }
  .ticker__track span { font-size: 13px; }
}

/* ============================================================
   活动卡
   ============================================================ */
.actcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-1);
  transition: box-shadow .18s, transform .18s;
}
.actcard:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.actcard__tag {
  position: absolute; top: 16px; right: 16px;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-full);
  background: rgba(10,132,255,.10); color: var(--c-primary-dark);
}
.actcard__icon {
  font-size: 30px; line-height: 1; margin-bottom: 12px;
}
.actcard h3 { font-size: 17px; margin-bottom: 8px; }
.actcard p {
  font-size: 14.5px; color: var(--c-text-2); line-height: 1.7;
  flex: 1; margin-bottom: var(--sp-2);
}

@media (max-width: 640px) {
  .actcard { padding: var(--sp-2); }
  .actcard__icon { font-size: 26px; margin-bottom: 10px; }
}

/* 身份卡里的 UID */
.profile__uid {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 9px; padding: 3px 4px 3px 10px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--c-border);
  font-size: 12.5px; color: var(--c-text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.profile__copy {
  border: 0; cursor: pointer; font-family: inherit;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--c-bg-soft); color: var(--c-text-2);
  font-size: 12px; font-weight: 600;
  transition: background .15s, color .15s;
}
.profile__copy:hover { background: rgba(59,130,246,.12); color: var(--c-primary-dark); }

/* 折叠的账户信息 */
.moreinfo {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 0 var(--sp-3);
}
.moreinfo > summary {
  cursor: pointer; list-style: none;
  padding: 14px 0;
  font-size: 14.5px; font-weight: 600; color: var(--c-text-2);
  display: flex; align-items: center; justify-content: space-between;
}
.moreinfo > summary::-webkit-details-marker { display: none; }
.moreinfo > summary::after {
  content: "▾"; font-size: 13px; color: var(--c-text-3);
  transition: transform .18s;
}
.moreinfo[open] > summary::after { transform: rotate(180deg); }
.moreinfo[open] > summary { border-bottom: 1px solid var(--c-border); }
.moreinfo .infolist { padding-bottom: 12px; }

@media (max-width: 640px) {
  .moreinfo { padding: 0 var(--sp-2); }
}

/* ============================================================
   邀请好友页
   ============================================================ */
.invite-hero {
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-card);
  background:
    radial-gradient(420px 200px at 50% -30%, rgba(10,132,255,.16), transparent 65%),
    radial-gradient(360px 180px at 50% 130%, rgba(6,182,212,.13), transparent 65%),
    var(--c-bg-alt);
  border: 1px solid rgba(59,130,246,.22);
}
.invite-hero__label {
  font-size: 13px; color: var(--c-text-2); letter-spacing: .08em;
}
.invite-hero__code {
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 800; letter-spacing: .06em;
  margin: 10px 0 var(--sp-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 奖励占位 */
.reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.reward-ph {
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-card);
  border: 1px dashed var(--c-border-strong);
  background: var(--c-bg-alt);
}
.reward-ph__icon { font-size: 26px; opacity: .45; margin-bottom: 8px; }
.reward-ph__title { font-size: 14.5px; font-weight: 650; color: var(--c-text-2); }
.reward-ph__desc { font-size: 12.5px; color: var(--c-text-3); margin-top: 4px; }

@media (max-width: 640px) {
  .invite-hero { padding: var(--sp-3) var(--sp-2); }
  .reward-grid { grid-template-columns: 1fr; }
}

/* 平台标准图标（替代 emoji） */
.plat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-text-2);
  flex-shrink: 0;
}
.startcard__head .plat-icon { color: var(--c-primary-dark); }
.plat-icon--sm { color: currentColor; }
.plattabs button .plat-icon { opacity: .8; }
.plattabs button.is-active .plat-icon { opacity: 1; }

/* 滚动通知：用圆点替代 emoji 作为视觉锚点 */
.ticker__track span { display: inline-flex; align-items: center; gap: 9px; }
.ticker__track span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-accent); flex-shrink: 0; opacity: .75;
}

/* ============================================================
   活动入口（banner 下方两条）
   ============================================================ */
.promo-wrap { padding: var(--sp-2) 0 var(--sp-4); }
.promo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.promo {
  display: flex; align-items: center; gap: 16px;
  padding: 17px 20px;
  border-radius: var(--r-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-1);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.promo:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
}
.promo__icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-card);
}
.promo--gift .promo__icon {
  background: linear-gradient(135deg, rgba(10,132,255,.16), rgba(90,166,255,.10));
  color: #0A6BD6;
}
.promo--invite .promo__icon {
  background: linear-gradient(135deg, rgba(6,182,212,.18), rgba(56,208,220,.10));
  color: #0891A8;
}
.promo__body { flex: 1; min-width: 0; }
.promo__title {
  display: block; font-size: 16px; font-weight: 750;
  letter-spacing: -.01em; color: var(--c-text);
}
.promo__desc {
  display: block; font-size: 13.5px; color: var(--c-text-2);
  margin-top: 3px;
}
.promo__cta {
  flex-shrink: 0; white-space: nowrap;
  font-size: 13.5px; font-weight: 700;
  color: var(--c-primary-dark);
}
.promo__cta::after { content: " →"; }

@media (max-width: 860px) {
  .promo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .promo { padding: 14px 16px; gap: 13px; }
  .promo__icon { width: 40px; height: 40px; border-radius: 10px; }
  .promo__icon svg { width: 21px; height: 21px; }
  .promo__title { font-size: 15px; }
  .promo__desc { font-size: 13px; }
  .promo__cta { font-size: 13px; }
}

/* ============================================================
   「我的」身份卡 · UID（纯文字 + 复制图标）
   ============================================================ */
.profile__main { flex: 1; min-width: 0; }

.uid {
  flex-shrink: 0; align-self: center;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: transparent;
  cursor: pointer; font-family: inherit;
  color: var(--c-text-3);
  transition: color .15s;
}
.uid__k {
  font-size: 12px; font-weight: 600;
  color: var(--c-text-3); letter-spacing: .03em;
}
.uid__v {
  font-size: 12.5px; font-weight: 650; color: var(--c-text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.uid__i { display: inline-flex; color: var(--c-text-3); transition: color .15s; }
.uid__done { display: none; color: #15803D; }

.uid:hover .uid__v { color: var(--c-text); }
.uid:hover .uid__i { color: var(--c-primary); }

/* 复制成功：图标变对勾 */
.uid.is-copied .uid__v { color: #15803D; }
.uid.is-copied .uid__i { color: #15803D; }
.uid.is-copied .uid__copy { display: none; }
.uid.is-copied .uid__done { display: block; }

@media (max-width: 640px) {
  .profile { flex-wrap: wrap; }
  .profile__main { flex: 1 1 auto; }
  .uid { width: 100%; justify-content: center; margin-top: 4px; }
}

/* 资产卡：纵向排列 + 底部操作按钮 */
.asset { display: flex; flex-direction: column; }
.asset__btn {
  margin-top: var(--sp-2);
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: rgba(59,130,246,.10);
  color: var(--c-primary-dark);
  font-size: 13px; font-weight: 650;
  transition: background .15s, color .15s;
}
.asset__btn:hover { background: rgba(59,130,246,.18); }
.asset__btn::after { content: "→"; font-size: 12px; }

/* ============================================================
   套餐卡 / 节点行 —— 参照客户端设计稿（planv2 / lv / seg / frow）
   ============================================================ */

/* 分段控件 */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: 11px; background: rgba(11, 18, 32, .08);
}
.seg button {
  padding: 7px 15px; border: 0; border-radius: 9px;
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--c-text-2);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.seg button.is-on {
  background: #fff; color: var(--c-text);
  box-shadow: 0 1px 3px rgba(11, 18, 32, .14);
}

/* 等级徽章 */
.lv {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 8px; margin-right: 8px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid transparent;
}
.lv--1 { background: rgba(11,18,32,.07);  color: #5A6472; border-color: rgba(11,18,32,.08); }
.lv--2 { background: rgba(10,132,255,.14); color: #0653B0; border-color: rgba(10,132,255,.26); }
.lv--3 { background: rgba(88,86,214,.16); color: #3B39A8; border-color: rgba(88,86,214,.28); }
.lv--4 { background: rgba(255,159,10,.18); color: #8A5200; border-color: rgba(255,159,10,.32); }
.lv--year { background: linear-gradient(135deg,#F6D77A,#E0A020); color: #5A3B00; border-color: rgba(224,160,32,.5); }
.lv--inf  { background: linear-gradient(135deg,#C9A6FF,#7C5CFF 55%,#3B39A8); color: #fff; border-color: rgba(124,92,255,.5); }

/* 套餐卡 */
.planv2 {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-1);
  transition: box-shadow .18s, transform .18s;
}
.planv2 + .planv2 { margin-top: 12px; }
.planv2:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.planv2__main { flex: 1; min-width: 0; }
.planv2__name {
  font-size: 16.5px; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center;
}
.planv2__quota { font-size: 13px; font-weight: 600; color: #33405A; margin-top: 6px; }
.planv2__meta  { font-size: 11.5px; color: var(--c-text-3); margin-top: 3px; line-height: 1.5; }

/* ★ 限速小标签：与「额度」同一行（挑套餐比的是流量 / 限速 / 价格） */
.planv2__limit {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: var(--r-full, 999px);
  font-size: 11px; font-weight: 650; letter-spacing: 0;
  background: rgba(11,18,32,.06); color: #33405A;
  vertical-align: 1px;
}
.planv2__limit--none { background: rgba(48,209,88,.16); color: #14713A; }
/* 年卡是彩色底：换成半透明白（与 .planv2--yearX .planv2__quota 同一套规则） */
.planv2--year3 .planv2__limit { background: rgba(255,255,255,.55); color: #1B3A66; }
.planv2--year4 .planv2__limit { background: rgba(255,255,255,.55); color: #5A3D00; }
.planv2--inf   .planv2__limit { background: rgba(255,255,255,.55); color: #3E2A6E; }
.planv2__right { text-align: right; flex-shrink: 0; }
.planv2__price {
  font-size: 20px; font-weight: 750; letter-spacing: -.02em;
  color: var(--c-primary-dark);
  font-variant-numeric: tabular-nums;
}
.planv2__price small { font-size: 12px; font-weight: 650; }
.planv2__tag { font-size: 11px; font-weight: 650; margin-top: 5px; color: #5A6472; }
.planv2__tag--save { color: #14713A; }

/* 当前套餐高亮 —— ★ 只在【月卡】改背景；
   年卡 / 无限卡只改边框与阴影，否则会把各自的渐变刷掉（客户端同此处理） */
.planv2.is-current { border-color: rgba(10,132,255,.36); }
.planv2--month.is-current {
  background: linear-gradient(180deg, rgba(10,132,255,.18), rgba(10,132,255,.08));
  border-color: rgba(10,132,255,.36);
}
.planv2--year.is-current {
  border-color: rgba(224,150,10,.75);
  box-shadow: 0 10px 28px rgba(224,150,10,.22), var(--sh-1);
}
.planv2--inf.is-current { box-shadow: 0 10px 28px rgba(124,92,255,.22), var(--sh-1); }

/* 年卡打底（客户端 .planv2--year）—— year3 / year4 在其之上覆盖 */
.planv2--year {
  background: linear-gradient(150deg, rgba(246,215,122,.30), rgba(224,160,32,.14) 60%, rgba(255,255,255,.62));
  border-color: rgba(224,160,32,.42);
}
.planv2--year .planv2__price { color: #8A5200; }

/* ★ 畅享年卡（蓝）—— 取自客户端 .planv2--year3 原值 */
.planv2--year3,
.panel--plan-year3 {
  background:
    radial-gradient(240px 110px at 6% -14%, rgba(70,158,255,.62), transparent 62%),
    radial-gradient(210px 105px at 98% 116%, rgba(255,255,255,.78), transparent 62%),
    linear-gradient(135deg, #DCEBFF 0%, #A9CEFF 40%, #6FA8F0 74%, #3D7BD4 100%);
  border-color: rgba(61,123,212,.52);
}
.planv2--year3 .planv2__price    { color: #0A3D7A; }
.planv2--year3 .planv2__tag--save{ color: #0A3D7A; }
.planv2--year3 .planv2__meta     { color: #1B3A66; }
.planv2--year3 .planv2__quota    { color: #123A6E; }

/* ★ 尊享年卡（金）—— 取自客户端 .planv2--year4 原值 */
.planv2--year4,
.panel--plan-year4 {
  background:
    radial-gradient(240px 110px at 8% -14%, rgba(255,238,140,.88), transparent 60%),
    radial-gradient(210px 105px at 98% 116%, rgba(255,255,255,.62), transparent 62%),
    linear-gradient(135deg, #FFF6D6 0%, #FFDC7A 36%, #F7B833 70%, #E8940F 100%);
  border-color: rgba(224,150,10,.60);
}
.planv2--year4 .planv2__price    { color: #6B4700; }
.planv2--year4 .planv2__tag--save{ color: #6B4700; }
.planv2--year4 .planv2__meta     { color: #5A3D00; }
.planv2--year4 .planv2__quota    { color: #6B4700; }

/* 无限年卡（紫）—— 取自客户端 .planv2--inf 原值 */
.planv2--inf,
.panel--plan-inf {
  background:
    radial-gradient(230px 120px at 12% -16%, rgba(224,196,255,.82), transparent 60%),
    radial-gradient(210px 110px at 96% 118%, rgba(255,214,110,.62), transparent 60%),
    linear-gradient(135deg, rgba(228,214,255,.94) 0%, rgba(183,156,255,.82) 40%, rgba(138,107,240,.66) 72%, rgba(108,75,216,.56) 100%);
  border-color: rgba(124,92,255,.45);
}
.planv2--inf .planv2__price { color: #4A2A9E; }
.planv2--inf .planv2__tag--save { color: #4A2A9E; }
.planv2--inf .planv2__meta { color: #3E2A6E; }
.planv2--inf .planv2__quota { color: #3B2A6E; }

/* 「最多人选择」角标 */
.ribbon {
  position: absolute; top: -9px; left: 16px;
  height: 20px; padding: 0 10px; border-radius: var(--r-full);
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--c-primary), #5AA6FF);
  box-shadow: 0 2px 8px rgba(10,132,255,.32);
}

/* 档位说明 */
.tier-note { font-size: 12px; color: var(--c-text-3); margin: 2px 2px 12px; }

/* 节点筛选胶囊 */
.nfilters { display: flex; gap: 8px; flex-wrap: wrap; margin: var(--sp-2) 0; }
.nfilter {
  padding: 7px 14px; border-radius: var(--r-full);
  background: var(--c-bg-soft); border: 1px solid var(--c-border);
  font-size: 13px; font-weight: 600; color: var(--c-text-2);
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.nfilter b { font-weight: 700; opacity: .6; margin-left: 2px; }
.nfilter:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.nfilter.is-on {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.nfilter.is-on b { opacity: .8; }

/* 节点行 */
.nrow {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 17px;
  border-radius: var(--r-card);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
}
.nrow + .nrow { margin-top: 8px; }
.nrow:hover { border-color: var(--c-border-strong); }
.nrow__flag {
  width: 30px; height: 21px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1;
}
.nrow__main { flex: 1; min-width: 0; }
.nrow__name {
  font-size: 15.5px; font-weight: 650;
  display: flex; align-items: center; gap: 8px;
}
.nrow__meta { font-size: 12.5px; color: var(--c-text-3); margin-top: 3px; }
.nrow__right { text-align: right; flex-shrink: 0; }
.nrow__lat {
  font-size: 17px; font-weight: 750; color: var(--c-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.nrow__lat small { font-size: 11.5px; font-weight: 600; color: var(--c-text-3); }
.nrow__load { font-size: 11.5px; color: var(--c-text-3); margin-top: 3px; }

@media (max-width: 640px) {
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1; padding: 8px 10px; font-size: 12.5px; }
  .planv2 { padding: 14px; gap: 10px; flex-wrap: wrap; }
  .planv2__right { width: 100%; text-align: left; padding-left: 0; display: flex; align-items: baseline; gap: 10px; }
  .planv2__price { font-size: 18px; }
  .planv2__tag { margin-top: 0; }
  .nfilter { padding: 6px 12px; font-size: 12.5px; }
  .nfilters { gap: 6px; }
  .nrow { padding: 13px; gap: 11px; }
  .nrow__flag { width: 26px; font-size: 19px; }
  .nrow__lat { font-size: 15px; }
}

/* ============================================================
   「我的」· 当前订阅套餐卡
   ============================================================ */
.subcard {
  padding: 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(320px 150px at 0% -20%, rgba(10,132,255,.13), transparent 65%),
    radial-gradient(280px 140px at 100% 120%, rgba(6,182,212,.11), transparent 65%),
    var(--c-bg-alt);
  border: 1px solid rgba(59,130,246,.22);
}
.subcard__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.subcard__name {
  font-size: 17.5px; font-weight: 750; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px;
}
.subcard__meta { font-size: 13px; color: var(--c-text-2); margin-top: 6px; }
.subcard__price {
  font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  color: var(--c-primary-dark); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.subcard__price small { font-size: 14px; font-weight: 700; }

.subcard__quota { margin-top: var(--sp-3); }
.subcard__qrow {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--c-text-2); margin-bottom: 8px;
}
.subcard__qrow b { font-size: 16px; font-weight: 750; color: var(--c-text); }

.subcard__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: var(--sp-3) 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
}
.subcard__k { font-size: 12px; color: var(--c-text-3); }
.subcard__v {
  font-size: 14px; font-weight: 650; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .subcard { padding: 15px; }
  .subcard__name { font-size: 16px; }
  .subcard__price { font-size: 21px; }
  .subcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   「我的」· 资产条（紧凑：主余额 + 三格统计）
   ============================================================ */
.assetbar {
  border-radius: var(--r-card);
  border: 1px solid rgba(59, 130, 246, .20);
  background: linear-gradient(135deg, rgba(10,132,255,.09), rgba(6,182,212,.07));
  overflow: hidden;
}
.assetbar__main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 15px 16px 7px;
}
.assetbar__left { min-width: 0; }
.assetbar__k { font-size: 12.5px; color: var(--c-text-2); }
.assetbar__note {
  font-size: 11px; color: var(--c-text-3);
  margin-left: 6px; padding: 1px 7px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.7);
}
.assetbar__v {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  margin-top: 3px; font-variant-numeric: tabular-nums;
}

/* 累计数据：与余额同处一张卡片，不用线条分隔 */
.assetline {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 20px;
  padding: 0 16px 15px;
  font-size: 12.5px;
}
.assetline__item {
  display: inline-flex; align-items: baseline; gap: 7px;
  white-space: nowrap;
}
.assetline__k { color: var(--c-text-3); }
.assetline__v {
  font-weight: 700; color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

@media (max-width: 640px) {
  .assetbar__main { padding: 14px 14px 6px; }
  .assetbar__v { font-size: 23px; }
  .assetline { padding: 0 14px 13px; gap: 4px 14px; font-size: 12px; }
}

/* ============================================================
   套餐卡：可选中 + 立即购买
   ============================================================ */
.planv2 { cursor: pointer; }

/* 选中态：蓝色描边（不覆盖各自的渐变背景） */
.planv2.is-selected {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .45), var(--sh-2) !important;
}
.planv2:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}



/* 底部「已选套餐」摘要 */
.buysummary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: var(--sp-3); padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
}
.buysummary__k { font-size: 12px; color: var(--c-text-3); }
.buysummary__v {
  font-size: 15px; font-weight: 700; margin-top: 3px;
  letter-spacing: -.01em;
}
.buysummary__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.buysummary__bal {
  font-size: 12.5px; color: var(--c-text-2);
  text-decoration: none;
}
.buysummary__bal.is-short { color: #B45309; font-weight: 650; }
.buysummary__bal.is-short:hover { text-decoration: underline; }
#buyNow:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
  .buysummary { padding: 13px 14px; }
  .buysummary__v { font-size: 14px; }
  .buysummary__right { width: 100%; justify-content: space-between; }
}

/* ============================================================
   接入指引 · 路径选择卡 + 部分标题
   ============================================================ */
.pickgrid { display: grid; gap: var(--sp-2); }

.pickcard {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-2);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.pickcard:hover {
  box-shadow: var(--sh-3);
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
}
.pickcard__icons {
  display: flex; gap: 8px; align-items: center;
  color: var(--c-primary-dark);
  margin-bottom: 3px;
}
.pickcard__name { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.pickcard__meta { font-size: 13px; color: var(--c-text-2); }
.pickcard__flow { font-size: 12.5px; color: var(--c-text-3); }
.pickcard__go {
  font-size: 13px; font-weight: 700; color: var(--c-primary-dark);
  margin-top: 9px;
}

/* 部分标题（一 / 二） */
.parthead {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.parthead__no {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff; font-size: 17px; font-weight: 800;
}
.parthead h2 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.01em; }
.parthead p { font-size: 14px; color: var(--c-text-2); margin: 0; }

/* 让两个部分锚点跳转时不被吸顶导航挡住 */
#native, #ios { scroll-margin-top: calc(var(--nav-h) + 16px); }

@media (max-width: 640px) {
  .pickcard { padding: 15px 16px; }
  .pickcard__name { font-size: 16px; }
  .parthead { gap: 12px; padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); }
  .parthead__no { width: 34px; height: 34px; font-size: 15px; }
  .parthead h2 { font-size: 20px; }
  .parthead p { font-size: 13px; }
}

/* 页脚平台清单 */
.footer__plat {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--c-text-3);
  line-height: 1.6;
}

/* ============================================================
   法律文本页（用户协议 / 隐私政策）
   ============================================================ */
.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--sp-6) 0 var(--sp-8);
}
.legal h1 {
  font-size: clamp(26px, 4.5vw, 34px);
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-2);
}
.legal__meta {
  font-size: 13px;
  color: var(--c-text-3);
  line-height: 1.85;
  padding-bottom: var(--sp-3);
  margin: 0 0 var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.legal h2 {
  font-size: 19px;
  letter-spacing: -.01em;
  margin: var(--sp-5) 0 var(--sp-2);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p {
  font-size: 14.5px;
  color: var(--c-text-2);
  line-height: 1.9;
  margin: 0 0 12px;
}
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 22px; }
.legal li {
  font-size: 14.5px;
  color: var(--c-text-2);
  line-height: 1.9;
  margin-bottom: 7px;
}
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal strong { color: var(--c-text); font-weight: 650; }
.legal a { color: var(--c-primary-dark); font-weight: 550; }
.legal__foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
}
.legal__foot p { font-size: 14px; margin: 0; }

/* 表格 */
.legal .table-wrap { margin: 0 0 var(--sp-3); }
.legal table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.legal th, .legal td {
  text-align: left; padding: 11px 13px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top; line-height: 1.7;
}
.legal th {
  background: var(--c-bg-alt);
  font-weight: 650; color: var(--c-text);
  white-space: nowrap;
}
.legal td { color: var(--c-text-2); }
.legal tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 640px) {
  .legal { padding: var(--sp-4) 0 var(--sp-6); }
  .legal h2 { font-size: 17px; margin-top: var(--sp-4); }
  .legal p, .legal li { font-size: 14px; }
  .legal th, .legal td { padding: 9px 10px; font-size: 13px; }
  .legal th { white-space: normal; }
}

/* 品牌英文词（用在「iFinity 让连接无限」里） */
.brand-en {
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  margin-right: 3px;
}
.hero__slogan .brand-en { color: var(--c-text); }

/* ==========================================================================
 *  site.js 渲染的组件样式
 *  --------------------------------------------------------------------------
 *  这些组件由数据库内容驱动。样式必须覆盖「内容为空」与「内容很长」两种极端：
 *  运营填一句话和填 200 字，页面都不能错位。
 * ========================================================================== */

/* ---- 公告条 ---- */
.ann-bar { position: relative; z-index: 60; }
.ann {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 14px; line-height: 1.5;
  border-bottom: 1px solid transparent;
}
.ann__icon { flex: 0 0 auto; font-size: 15px; line-height: 1; }
/* 长内容允许换行，不被截断 */
.ann__text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.ann__close {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 4px; opacity: .55;
  color: inherit; border-radius: 6px;
}
.ann__close:hover { opacity: 1; }

.ann--info        { background: #EFF6FF; color: #1E40AF; border-bottom-color: #BFDBFE; }
.ann--success     { background: #ECFDF5; color: #065F46; border-bottom-color: #A7F3D0; }
.ann--warning     { background: #FFFBEB; color: #92400E; border-bottom-color: #FDE68A; }
.ann--danger      { background: #FEF2F2; color: #991B1B; border-bottom-color: #FECACA; }
.ann--maintenance { background: #F5F3FF; color: #5B21B6; border-bottom-color: #DDD6FE; }

/* ---- 节点列表 ---- */
.node-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--line, #E5E9F0);
  font-size: 14px;
}
.node-row:last-child { border-bottom: 0; }
.node-row__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #9CA3AF; }
.node-row__dot.is-up   { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.node-row__dot.is-down { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.node-row__name   { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1F2937; }
.node-row__region { flex: 0 0 auto; color: #6B7280; font-size: 13px; }
.node-row__state  { flex: 0 0 auto; color: #6B7280; font-size: 13px; min-width: 52px; text-align: right; }

/* ---- 套餐卡片 ---- */
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px; border: 1px solid var(--line, #E5E9F0);
  border-radius: 16px; background: #fff;
  /* ★ 等高：内容多少不一（卖点 3 条 vs 5 条）也要底部对齐 */
  height: 100%;
}
.plan--featured { border-color: #0A84FF; box-shadow: 0 8px 30px rgba(10,132,255,.12); }
.plan__badge {
  position: absolute; top: -11px; left: 24px;
  padding: 3px 10px; border-radius: 999px;
  background: #0A84FF; color: #fff; font-size: 12px; font-weight: 600;
}
.plan__name { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #1F2937; }
.plan__price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 6px; }
.plan__cur { font-size: 15px; font-weight: 600; color: #0A84FF; }
.plan__num { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: #1F2937; line-height: 1; }
.plan__per { font-size: 13px; color: #6B7280; margin-left: 2px; }
.plan__tagline { margin: 0 0 14px; font-size: 13px; color: #6B7280; }
.plan__features { list-style: none; margin: 0 0 16px; padding: 0; }
.plan__features li {
  position: relative; padding: 4px 0 4px 20px;
  font-size: 14px; color: #374151; line-height: 1.5;
}
.plan__features li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 5px; height: 9px; border-right: 2px solid #10B981; border-bottom: 2px solid #10B981;
  transform: rotate(45deg);
}
.plan__quota {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line, #E5E9F0);
  display: flex; justify-content: space-between; align-items: baseline; font-size: 14px;
}
.plan__quota-label { color: #6B7280; }
.plan__quota-value { font-weight: 700; color: #1F2937; }

/* ---- 按钮置灰（下载地址未配置）---- */
.is-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }

/* ---- 减少动效偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  .ann, .plan, .node-row { transition: none !important; }
}


/* ==========================================================================
 *  ★★ hidden 属性必须真的隐藏
 *  --------------------------------------------------------------------------
 *  hidden 靠浏览器默认样式表里的 [hidden] { display: none } 生效，
 *  而它的优先级**低于任何作者样式**。所以只要有一条 `.notice { display: flex }`，
 *  `<div class="notice notice--err" hidden>` 就会照样显示出来 ——
 *  注册页和登录页的"一进页面就有错误提示"就是这么来的。
 *
 *  用 !important 是有意的：这里要压过所有写了 display 的组件样式，
 *  否则每加一个带 display 的组件，就要记得给它补一条 [xxx][hidden] 规则，
 *  漏一个就是一个"隐藏元素乱入"的 bug。
 * ========================================================================== */
[hidden] { display: none !important; }


/* ==========================================================================
 *  ★★ 个人中心的"骨架门"：登录态确认之前不显示正文
 *  --------------------------------------------------------------------------
 *  account*.html / invite.html 的静态 HTML 里有占位数据（"— — · 剩 — 天"）。
 *  会话失效时若先把这半张页面画出来、再跳登录页，用户看到的是
 *  "页面坏了"（一闪而过的破页面），而不是"请重新登录"。
 *
 *  ★ 为什么写在 CSS 里而不是 JS 里：
 *    CSS 会**阻塞渲染**（浏览器拿到样式表之前不画第一帧），所以从
 *    第一次绘制起正文就是隐藏的 —— 不存在"先闪一下"的时间窗口。
 *    靠 JS 在 defer 脚本里加类的话，慢设备上会先画一帧再藏。
 *
 *  ★ 由谁放行（三种情况之一，见 site.js 的 guard/settleGate）：
 *      · 拿到第一个**需要登录**的接口结果（公开接口 /site/config 不算）
 *      · 2 秒内这一页压根没发需要登录的请求（说明它不靠 /me 渲染）
 *      · 10 秒绝对兜底
 *    宁可让用户看到一页不完整的内容，也不要一页空白且没有任何解释。
 *
 *  ★ 只影响带 data-require-login 的页面（个人中心），
 *    公开页面（首页/FAQ/登录页）完全不受影响。
 * ========================================================================== */
html[data-require-login]:not([data-me-ready]) main { visibility: hidden; }


/* 输入框校验失败时的样子（认证页面用） */
.input--err {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}


/* ==========================================================================
 *  表单字段的实时校验提示
 *  --------------------------------------------------------------------------
 *  ok 状态刻意不显示文字（打勾即可）—— 满屏绿色提示会让人以为到处都错了。
 * ========================================================================== */
.field-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.field-hint--err { color: #B91C1C; }
.field-hint--ok  { color: #15803D; }


/* ==========================================================================
 *  空状态（个人中心"还没有订阅"这类）
 *  --------------------------------------------------------------------------
 *  空状态不是"什么都没有"，而是"这里本该有东西，现在还没有 + 下一步做什么"。
 *  所以它必须有：一句说明 + 一个动作按钮。只留空白会让人以为页面坏了。
 * ========================================================================== */
.empty {
  text-align: center;
  padding: 34px 20px;
  border: 1px dashed var(--c-line, #E3E8F0);
  border-radius: 14px;
  background: #FAFBFD;
}
.empty__icon { color: #9AA8BD; margin-bottom: 12px; }
.empty__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.empty__desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-muted, #5A6B85);
  margin: 0 0 18px;
}


/* ==========================================================================
 *  资料编辑（account-profile.html）
 * ========================================================================== */
.profedit {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.profedit__col { min-width: 180px; }

/* 头像上传：整块可点，hover/focus 时露出"更换头像" */
.avatarup {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: #EEF2F8;
  border: 2px solid #E3E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatarup:focus-visible { outline: 3px solid rgba(10,132,255,.35); outline-offset: 2px; }
.avatarup img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatarup__ph { font-size: 34px; font-weight: 800; color: #9AA8BD; }
.avatarup__mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 24, 40, .55);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .18s ease;
}
.avatarup:hover .avatarup__mask,
.avatarup:focus-visible .avatarup__mask { opacity: 1; }

/* 头像可点进资料页时的手感 */
.profile__avatar--link { text-decoration: none; color: inherit; }
.profile__avatar--link:hover { border-color: var(--c-primary, #0A84FF); }
.profile__name[href] { text-decoration: none; color: inherit; }
.profile__name[href]:hover { color: var(--c-primary, #0A84FF); text-decoration: underline; }


/* 资料卡上的头像图（没有头像时退回首字母） */
.profile__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}


/* ==========================================================================
 *  套餐卡片
 *  --------------------------------------------------------------------------
 *  ★ 这里**不定义任何配色**。月卡/年卡/无限卡的底色、边框、价格颜色
 *    全部由上面原有的 .planv2--month / --year / --year3 / --year4 / --inf
 *    以及 .planv2.is-selected / .is-current 决定（它们标注着"取自客户端原值"）。
 *
 *    我先前在这里补过 .planv2.is-on / .is-current 的描边规则 ——
 *    结果把年卡的金色边框和 is-current 的分档样式覆盖掉了。
 *    接口驱动只负责**生成同样的类名**，不负责改样式。
 * ========================================================================== */


/* ==========================================================================
 *  提示行里的链接
 *  --------------------------------------------------------------------------
 *  套餐页余额不足时会提示"去兑换码页充值" —— 那句话必须**能点**，
 *  否则用户还得自己去菜单里找。
 *
 *  ★ 只加下划线与加粗，**颜色用 inherit**：
 *    提示行本身有红/绿两态（.field-hint--err / --ok），
 *    写死颜色会让链接和它所在的提示不一致。
 *  ★ 作用域限定在 .field-hint 之内，不影响站点其它链接。
 * ========================================================================== */
.field-hint a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}


/* ==========================================================================
 *  确认弹层（购买/续费二次确认）
 *  --------------------------------------------------------------------------
 *  ★ 这是**新增组件**，不是覆盖已有样式 —— 样式表里原本没有任何 modal 类。
 *    购买会直接扣余额且没有退款流程，误触一次就是真金白银，
 *    所以卡片整块可点的情况下必须再确认一次。
 * ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal__mask { position: absolute; inset: 0; background: rgba(11, 18, 32, .46); }
.modal__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 24px 64px rgba(11, 18, 32, .26);
  padding: 22px 22px 18px;
}
.modal__title { font-size: 17px; font-weight: 750; margin-bottom: 6px; letter-spacing: -.01em; }
.modal__rows { margin-top: 8px; }
.modal__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #EEF2F8;
  font-size: 14px;
}
.modal__row:last-child { border-bottom: 0; }
.modal__k { color: var(--c-muted, #5A6B85); flex-shrink: 0; }
.modal__v { font-weight: 650; text-align: right; }
.modal__v--hl { color: var(--c-primary-dark, #0653B0); font-variant-numeric: tabular-nums; }
.modal__foot { display: flex; gap: 10px; margin-top: 18px; }
.modal__foot .btn { flex: 1; }


/* 成功提示弹层的标题（购买/续费成功后显示） */
.modal__title--ok { display: flex; align-items: center; gap: 8px; }
.modal__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #14713A; color: #fff;
  font-size: 13px; font-weight: 700;
}


/* ==========================================================================
 *  顶部「当前套餐」卡片的配色
 *  --------------------------------------------------------------------------
 *  ★ 做法是**把 .panel--plan-* 加进上面 .planv2--year3/--year4/--inf 的
 *    选择器**，而不是在这里再写一遍渐变。
 *
 *    原因：这两处的背景必须**完全一致**。抄一份过来，将来改了一处忘了另一处，
 *    上面和下面的卡片就会慢慢不一样 —— 而这种不一致没人会主动发现。
 *    共用同一条声明，构造上就不可能漂移。
 *
 *  ★ 声明本身一个字都没动，所以套餐卡片的外观没有任何变化。
 *
 *  月卡不加类：月卡卡片本来就没有底色，顶部卡片保持默认即可。
 *
 *  ★ 彩色底上的文字沿用各自 .planv2--* 里为 meta/quota 指定的深色，
 *    否则默认的灰色在金色/蓝色底上对比度不够。
 * ========================================================================== */
.panel--plan-year3 .quota__k,
.panel--plan-year3 .quota__meta,
.panel--plan-year3 .quota__big small { color: #1B3A66; }
.panel--plan-year3 .quota__big { color: #123A6E; }

.panel--plan-year4 .quota__k,
.panel--plan-year4 .quota__meta,
.panel--plan-year4 .quota__big small { color: #5A3D00; }
.panel--plan-year4 .quota__big { color: #6B4700; }

.panel--plan-inf .quota__k,
.panel--plan-inf .quota__meta,
.panel--plan-inf .quota__big small { color: #3E2A6E; }
.panel--plan-inf .quota__big { color: #3B2A6E; }


/* 节点行的国旗图片
   --------------------------------------------------------------------------
   ★ 原来用的是国旗 emoji，但 Windows 系统字体不渲染"区域指示符"，
     在 Windows 上会显示成字母 HK/US。所以改用图片。 */
.nrow__flag img {
  display: block;
  width: 24px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(11, 18, 32, .08);
}
.nrow__flag--text {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-text-3);
}

/* ============================================================
   账单流水（用户中心）—— 与客户端设计稿同一套版式
   ============================================================ */
.ledger {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(11, 18, 32, .055);
}
.ledger:last-child { border-bottom: 0; padding-bottom: 2px; }
.ledger__main { flex: 1; min-width: 0; }
/* ★★ 左右两列的**行高必须一样**，否则字号不同、默认行高不同，
   两边的文字看起来是错位的（左边 13.5/11、右边 15/10.5）。
   这里统一成：第一行 20px、第二行 16px，行间距都用 3px。 */
.ledger__title { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--c-text); }
.ledger__meta { font-size: 11px; line-height: 16px; color: #8E97A4; margin-top: 3px; }
.ledger__right { text-align: right; flex-shrink: 0; }
.ledger__amt {
  font-size: 15px; line-height: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ledger__amt--in { color: #14713A; }
.ledger__amt--out { color: #9A2620; }
.ledger__bal {
  font-size: 10.5px; line-height: 16px; color: #8E97A4; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   手机号注册的三步进度点（与客户端设计稿同款）
   ============================================================ */
.psteps {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin: 2px 0 var(--sp-2);
}
.psteps i {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(11, 18, 32, .16);
  transition: background .15s;
}
.psteps i.is-on { background: var(--c-primary); }

/* ============================================================
   登录 / 注册卡片里的公共件（版式对齐客户端）
   ============================================================ */

/* 分段控件占满一行、两等分：登录页的「邮箱登录 / 手机号登录」、
   注册页的「邮箱 / 手机号」都用它。 */
.seg--block {
  display: flex; width: 100%;
  margin-bottom: var(--sp-3);
}
.seg--block button { flex: 1; text-align: center; }

/* 「记住我 + 忘记密码？」同一行两端对齐 */
.auth__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: var(--sp-2);
}

/* 卡片里的小字说明（记住我两档的区别、验证码发给了谁…） */
.auth__hint {
  font-size: 12.5px; color: var(--c-text-3); line-height: 1.6;
  margin-top: 10px;
}

/* 卡片里的正文链接（忘记密码 / 去登录 / 切换登录方式…） */
.ilink {
  color: var(--c-primary-dark); font-weight: 600;
  font-size: 13.5px;
}
.ilink:hover { text-decoration: underline; }


/* ==========================================================================
 *  在线充值（account-recharge.html）
 *  --------------------------------------------------------------------------
 *  ★ 为什么单独一组前缀（rc-）而不是复用别的类：
 *    这一页有"选金额 / 选支付方式 / 收银台 / 到账"四种状态，
 *    和站内其它页面没有共用的组件 —— 硬套 .planv2 / .card 那套
 *    只会在改套餐样式时把充值页一起改花。
 *
 *  ★ 立减那一行用绿色（--rc-cut），与"钱变少了"的语义一致；
 *    金额一律 tabular-nums，避免数字跳动时整行抖。
 * ========================================================================== */
.rc-block { margin-bottom: var(--sp-3); }
.rc-block__label {
  font-size: 13px; font-weight: 650; color: var(--c-text);
  margin-bottom: 10px;
}

/* 金额档位 */
.rc-amounts { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-amount {
  flex: 0 0 auto; min-width: 92px;
  padding: 12px 18px;
  border: 1.5px solid var(--c-border, #E3E8F0);
  border-radius: var(--r-card);
  background: #fff;
  font-size: 17px; font-weight: 700; color: var(--c-text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.rc-amount:hover { border-color: rgba(59,130,246,.45); }
.rc-amount__cur { font-size: 12.5px; font-weight: 600; margin-right: 2px; color: var(--c-text-2); }
.rc-amount.is-on {
  border-color: var(--c-primary);
  background: rgba(59,130,246,.06);
  box-shadow: 0 0 0 3px rgba(59,130,246,.13);
}
.rc-amount.is-on .rc-amount__cur { color: var(--c-primary-dark); }

/* 支付方式 */
.rc-chans { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-chan {
  flex: 1 1 150px;
  padding: 13px 18px;
  border: 1.5px solid var(--c-border, #E3E8F0);
  border-radius: var(--r-card);
  background: #fff;
  font-size: 14.5px; font-weight: 650; color: var(--c-text);
  cursor: pointer;
}
.rc-chan:hover { border-color: rgba(59,130,246,.45); }
.rc-chan.is-on {
  border-color: var(--c-primary);
  background: rgba(59,130,246,.06);
  color: var(--c-primary-dark);
}

.rc-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: var(--sp-3);
}

/* 收银台：本单金额 */
.rc-pay {
  padding: 18px 0 6px;
  text-align: center;
}
.rc-pay__v {
  font-size: 38px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rc-pay__v::first-letter { font-size: 22px; }
.rc-pay__sub {
  margin-top: 6px; font-size: 13px; color: var(--c-text-2);
}
.rc-pay__sub s { color: var(--c-text-3); }
.rc-pay__sub span { color: #14713A; font-weight: 650; }

/* 充值成功 */
.rc-ok { text-align: center; padding: 8px 0 18px; }
.rc-ok__icon {
  width: 54px; height: 54px; margin: 0 auto 12px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.30);
  color: #16A34A;
}
.rc-ok__title { font-size: 18px; font-weight: 750; }
.rc-ok__desc { font-size: 13px; color: var(--c-text-2); margin-top: 5px; }

/* 明细行（复用站内的 .inforow，只补两种字重） */
.rc-rows { margin-top: var(--sp-2); }
.rc-rows .inforow:last-child { border-bottom: 0; }
.rc-strong { font-weight: 700; }
.rc-cut { color: #14713A; font-weight: 650; }
.rc-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

@media (max-width: 640px) {
  .rc-amount { flex: 1 1 0; min-width: 0; padding: 12px 8px; }
  .rc-pay__v { font-size: 32px; }
}