/* ============================================================
   Cucao · 公开页样式表（首页 / 登录页）
   v4.0 · 2026-09-24 · 视觉语言整体重做

   本次做了什么：
     · 深色导航风  →  羊皮纸底 #F5F5F7 + 纯白卡片（"美术馆式克制"）
     · 多点缀色    →  单一蓝 #0066CC，全页只出现在规定的位置
     · 阴影收敛    →  全站唯一一枚阴影，只留给登录卡片
     · 圆角 / 字重 →  收敛为三档（胶囊·18·11 / 400·500·600）
     · 界面语言    →  全中文；英文眉标与品牌副名已从 HTML 移除

   ⚠️ 改动前必读（两条纪律）
   ① 【共享 token 必须两份同名同值】
      :root 里「与 web/assets/app.css 共享」的那一组 token，改值要**两边一起改**。
      tools/_test_public_pages.py 第 ③ 节会逐名比对，只改一处就红。
      2026-09-24 说明：这组值已随控制台浅色化同步更新（原先的深色值作废）。
      是否影响公开页外观？不影响 —— 公开页已 100% 走 --pub-*，
      这一组在本文件规则体里的引用次数为 0（可用 grep 'var(--text)' 之类自行复核）。
   ② 【公开页的新语言一律走 --pub-* 命名空间】
      公开页不再直接引用 --bg / --text / --accent 等共享 token
      （本文件保留它们的定义只为通过比对，页面里已无引用点）。

   CSP：无内联 <script>、无 on* 属性、不外联任何 CDN。
   ============================================================ */

:root {
  /* ========== ① 与 app.css 共享的 token —— 两份必须同名同值 ==========
     2026-09-24：控制台从深色切到浅色（与公开页统一），这一组随之整体改为浅色值。
     公开页正文已全部使用 --pub-*，**没有任何规则引用这一组**，
     所以改值只影响控制台，公开页外观不变（改前已实测：本文件规则体内引用次数均为 0）。
     改这里的任何一个值，必须同步改 web/assets/app.css 的 :root，
     否则 tools/_test_public_pages.py 第 ③ 节会红。 */
  --bg: #f5f5f7;
  --surface-0: #f5f5f7;
  --surface-1: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ebebed;
  --border: rgba(0,0,0,.10);
  --border-strong: rgba(0,0,0,.20);
  --text: #1d1d1f;
  --text-2: #4b4b4f;
  --text-3: #6e6e73;
  --accent: #0066cc;
  /* 2026-09-24（用户拍板 B）：涨跌按国内习惯 = **红涨绿跌**。
     ⚠️ --up/--down 只表示「正/负」这一种语义；「启用/正常/成功」等**状态**色请用
     --ok/--danger（它们永远是绿=好、红=坏，不随涨跌惯例翻转）。 */
  --up: #d1242f;          /* 涨 = 红 */
  --down: #1a7f37;        /* 跌 = 绿 */
  --ok: #1a7f37;          /* 状态：正常/启用/成功（不翻转） */
  --danger: #d1242f;      /* 状态：风险/拒单/错误（不翻转） */
  --warn: #9a6700;
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 16px;
  --shadow-soft: 0 1px 2px rgba(9,9,11,.05), 0 1px 3px rgba(9,9,11,.04);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --font-body: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Roboto Mono", "JetBrains Mono", Consolas, monospace;
  /* 以下三个是 v3 公开页专用的旧 token，保留仅为兼容，
     公开页已改用 --pub-*；如需彻底清理，删掉这三行不会影响工作台。 */
  --space-16: 64px; --space-24: 96px;
  --radius-xs: 4px;
  --accent-hover: #66adff;
  --accent-active: #3d8ae6;
  --accent-tint: rgba(77,159,255,.12);
  --up-tint: rgba(63,185,111,.12);
  --down-tint: rgba(229,83,75,.12);
  --warn-tint: rgba(210,153,34,.12);
  --fill-hover: rgba(255,255,255,.035);
  --ring: 0 0 0 3px rgba(77,159,255,.18);
  --control-h-sm: 32px;
  --control-h: 40px;
  --control-h-lg: 48px;
  --maxw: 1080px;

  /* ========== ② 公开页语言（本文件自己的命名空间）========== */
  /* 颜色 —— 均实测对比度，勿凭感觉调（详见规范 1.1） */
  --pub-bg: #F5F5F7;          /* 页面底 · 羊皮纸 */
  --pub-surface: #FFFFFF;     /* 卡片 / 输入框底 */
  --pub-ink: #1D1D1F;         /* 主文字   16.83:1(白底) */
  --pub-ink-2: #333333;       /* 次要文字 12.63:1(白底) */
  --pub-ink-3: #6E6E73;       /* 三级文字  5.07:1(白底) / 4.66:1(羊皮纸底) */
  --pub-accent: #0066CC;      /* 交互蓝    5.57:1(白底) / 5.11:1(羊皮纸底) */
  --pub-on-accent: #FFFFFF;   /* 蓝底白字  5.57:1 */
  --pub-line: #D2D2D7;        /* 卡片 / 输入框描边 */
  --pub-rule: #E0E0E0;        /* 列表分隔线 */
  --pub-hover: #F5F5F7;       /* 中性 hover 底（同页面底，最轻） */
  --pub-accent-soft: rgba(0,102,204,.06); /* 极淡蓝底，仅用于聚焦底 */
  /* 语义色（错误态）—— 设计稿里这一态是隐藏的，未画过；
     以下三值由我按 WCAG AA 补齐：#B3261E on #FDECEA = 5.72:1（实测）。
     要换色请重新验算，别直接调浅。 */
  --pub-danger: #B3261E;
  --pub-danger-bg: #FDECEA;
  --pub-danger-line: #F2C4BE;
  --pub-success: #1D7A45;     /* 6.0:1 on 羊皮纸底 */
  --pub-warn: #8A5A00;        /* 6.2:1 on 羊皮纸底 */

  /* 阴影 —— 全站唯一一枚，只允许 .auth-card 使用 */
  --pub-shadow: 0 3px 5px rgba(0,0,0,.22), 0 0 30px rgba(0,0,0,.06);

  /* 圆角 —— 只有三档 */
  --pub-r-pill: 999px;        /* 按钮（= 高的一半） */
  --pub-r-card: 18px;         /* 卡片 */
  --pub-r-input: 11px;        /* 输入框 */

  /* 字体 */
  --pub-font: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --pub-font-en: "Inter", "Segoe UI", -apple-system, "Helvetica Neue", sans-serif;

  /* 尺度 */
  --pub-gutter: 48px;         /* 顶栏 / 页脚左右 */
  --pub-gutter-wide: 96px;    /* 内容区左右（桌面） */
}

/* ============ 基础 ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--pub-bg);
  color: var(--pub-ink);
  font-family: var(--pub-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: rgba(0,102,204,.18); }
a { color: var(--pub-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--pub-accent); outline-offset: 2px; }
/* 数字用等宽字形，编号 01–05 与版本号才有"精密感" */
.num, .mono { font-family: var(--pub-font-en); font-variant-numeric: tabular-nums; }
.muted { color: var(--pub-ink-3); }

/* 锚点跳转时给吸顶栏让位，否则标题会被顶栏压住 */
#capabilities, #views, #about { scroll-margin-top: 80px; }

/* ============ 顶栏（高 64 / 左右 48 / 两端对齐）============ */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 32px;
  height: 64px;
  padding: 0 var(--pub-gutter);
  /* "透明透出羊皮纸底"的实用实现：半透明 + 毛玻璃，滚动时文字不会穿透 */
  background: rgba(245,245,247,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.site-header .spacer { flex: 1; }

/* 品牌锁形：标志裸露 24×24 + 单行中文名，无副名、无底框 */
.brand { display: flex; align-items: center; gap: 10px; color: var(--pub-ink); }
.brand:hover { text-decoration: none; }
.brand-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-mark svg { display: block; }
.brand-text { display: flex; align-items: center; }
.brand-name {
  font-family: var(--pub-font-en);
  font-size: 16px; font-weight: 600; letter-spacing: -.2px;
  color: var(--pub-ink);
}
/* 原站英文副名 Workstation —— HTML 已删，此处保留定义仅为兼容旧页 */
.brand-sub {
  font-family: var(--pub-font-en); font-size: 9.5px; color: var(--pub-ink-3);
  letter-spacing: 1.5px; text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 32px; }
.nav a { color: var(--pub-ink-2); font-size: 14px; }
.nav a:hover { color: var(--pub-ink); text-decoration: none; }
.nav a[aria-current="true"], .nav a.is-active { color: var(--pub-accent); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--pub-accent);
}
.back-link:hover { text-decoration: none; opacity: .8; }
.back-link svg { display: block; }

/* ============ 容器与排版层级 ============ */
.container {
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 0 var(--pub-gutter-wide);
}
main { flex: 1; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; color: var(--pub-ink); }

/* 英文眉标已按需求从 HTML 移除；保留类定义仅为兼容旧页，公开页不再使用 */
.section-head .kicker, .kicker {
  font-family: var(--pub-font-en); font-size: 11px; color: var(--pub-ink-3);
  letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 10px;
}

/* 首页眉标：6px 蓝点 + 13px 灰字（中文，全小写无字距） */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .5px; color: var(--pub-ink-3);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pub-accent); flex-shrink: 0; }

.display { font-size: 48px; line-height: 1.29; letter-spacing: -1px; font-weight: 600; }
.lede { color: var(--pub-ink-2); font-size: 18px; line-height: 32px; margin: 0; max-width: 640px; }

/* 区块：不用描边分隔，靠留白建立节奏（刻意去掉原站的 border-top） */
.section { padding: 64px 0; }
.section-head { margin-bottom: 36px; }
.section-head h2 { font-size: 34px; }
.section-head p { color: var(--pub-ink-2); font-size: 17px; line-height: 30px; margin: 0; max-width: 700px; }

/* ============ 按钮（胶囊 / 平面 / 无阴影 / 无描边混排）============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--pub-r-pill); border: 1px solid transparent;
  font-family: var(--pub-font); font-size: 15px; font-weight: 400; line-height: 1;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color .14s ease, color .14s ease, opacity .14s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--pub-accent); color: var(--pub-on-accent); }
.btn-primary:hover { background: #0059B3; color: var(--pub-on-accent); }
/* 按下态：轻微缩放 —— 这套语言的招牌微交互，只此一种 */
.btn-primary:active { transform: scale(.95); }
/* 次按钮是纯文字蓝链接，不加描边（描边会让页面多一层围栏感） */
.btn-ghost { background: transparent; color: var(--pub-accent); border-color: transparent; padding: 0; }
.btn-ghost:hover { background: transparent; color: #0059B3; }
.btn-ghost:active { transform: scale(.97); }
.btn-quiet { background: transparent; color: var(--pub-ink-2); padding: 0 10px; }
.btn-quiet:hover { color: var(--pub-ink); }
.btn-sm { height: 34px; padding: 0 20px; font-size: 13px; }
.btn-lg { height: 52px; padding: 0 30px; font-size: 17px; }
.btn-block { width: 100%; height: 48px; font-size: 17px; }
.btn-icon { width: 44px; padding: 0; }
.btn .spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 26px; }

/* ============ 卡片（白底 + 1px 描边，无阴影）============ */
.card {
  background: var(--pub-surface);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r-card);
  padding: 32px;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-head .ico {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--pub-accent);
}
.card-head .ico svg { display: block; }
.card h3 { font-size: 22px; }
.card p { margin: 0; color: var(--pub-ink-2); font-size: 15px; line-height: 26px; }
.card-foot {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--pub-rule);
  color: var(--pub-ink-3); font-size: 13px;
}
a.card:hover { border-color: #B8B8BF; text-decoration: none; }

/* ============ 徽标 / 状态点（兼容保留，公开页当前未使用）============ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: var(--pub-r-pill);
  font-size: 12px; font-weight: 500;
  background: var(--pub-bg); color: var(--pub-ink-2);
  border: 1px solid var(--pub-line);
}
.pill-accent { background: var(--pub-accent-soft); color: var(--pub-accent); border-color: rgba(0,102,204,.3); }
.pill-up { background: rgba(29,122,69,.08); color: var(--pub-success); border-color: rgba(29,122,69,.28); }
.pill-down { background: var(--pub-danger-bg); color: var(--pub-danger); border-color: var(--pub-danger-line); }
.pill-warn { background: rgba(138,90,0,.08); color: var(--pub-warn); border-color: rgba(138,90,0,.26); }
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ============ 首屏（首页）============ */
.hero { padding: 80px 0; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 400px;
  gap: 96px; align-items: center;
}
.hero .display { margin-top: 26px; }
.hero .lede { margin-top: 26px; }

/* 「登录后可见」卡片：与登录页左栏的列表是同一个组件 */
.hero-aside {
  background: var(--pub-surface);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r-card);
  padding: 32px 32px 24px;
}
.hero-aside .aside-title {
  font-size: 13px; font-weight: 500; color: var(--pub-ink-3);
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--pub-rule);
}
.hero-aside ul { list-style: none; margin: 0; padding: 0; }
.hero-aside li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 0;
  font-size: 14px; color: var(--pub-ink-2);
}
.hero-aside li + li { border-top: 1px solid var(--pub-rule); }
.hero-aside li .ico {
  font-family: var(--pub-font-en); font-size: 13px; font-weight: 500; letter-spacing: .5px;
  color: var(--pub-accent); flex-shrink: 0; width: 22px;
}
/* 视图名列固定宽 72px —— 与登录页左栏同一组件，固定列宽才对齐 */
.hero-aside li .point-name {
  flex: 0 0 72px; font-size: 15px; font-weight: 500; color: var(--pub-ink);
}

/* ============ 数据条（兼容保留）============ */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 24px; margin-top: 64px;
  border: 1px solid var(--pub-line); border-radius: var(--pub-r-card);
  background: var(--pub-surface); overflow: hidden;
}
.facts > div { padding: 16px 24px; }
.facts > div + div { border-left: 1px solid var(--pub-rule); }
.fact-k { font-family: var(--pub-font-en); font-size: 10.5px; color: var(--pub-ink-3); letter-spacing: 1.1px; text-transform: uppercase; }
.fact-v { font-size: 14.5px; font-weight: 600; margin-top: 4px; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 16px; }

/* ============ 网格 ============ */
.grid { display: grid; gap: 24px; }
.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)); }

/* ============ 视图面板（左列固定宽 120px 是"整齐"的关键）============ */
.panel {
  background: var(--pub-surface);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r-card);
  padding: 10px 36px;
}
.kv { list-style: none; margin: 0; padding: 0; }
.kv li {
  display: flex; align-items: baseline;
  gap: 48px; padding: 17px 0;
  border-bottom: 1px solid var(--pub-rule);
  font-size: 15px;
}
.kv li:last-child { border-bottom: 0; }
.kv .k { flex: 0 0 120px; font-size: 16px; font-weight: 500; color: var(--pub-ink); }
.kv .v { color: var(--pub-ink-2); }

/* ============ 提示条 ============ */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--pub-r-input);
  font-size: 13px; line-height: 1.6;
  border: 1px solid var(--pub-line); background: var(--pub-bg); color: var(--pub-ink-2);
}
.alert .ico { flex-shrink: 0; color: var(--pub-ink-3); }
.alert-down { background: var(--pub-danger-bg); border-color: var(--pub-danger-line); color: var(--pub-danger); }
.alert-accent { background: var(--pub-accent-soft); border-color: rgba(0,102,204,.28); color: var(--pub-accent); }

/* 登录页错误条：默认隐藏，由 login.js 加 .show 展开（JS 契约不变：#err + .show） */
.err { display: none; margin-bottom: 20px; }
.err.show { display: flex; }
.err::before { content: "!"; flex-shrink: 0; font-weight: 600; }

/* ============ 空状态 ============ */
.empty { text-align: center; padding: 48px 24px; color: var(--pub-ink-3); }
.empty .mark {
  width: 40px; height: 40px; margin: 0 auto 16px;
  border-radius: var(--pub-r-input); border: 1px dashed var(--pub-line);
  display: flex; align-items: center; justify-content: center; color: var(--pub-ink-3);
}
.empty p { margin: 0; font-size: 13.5px; }

/* ============ 登录页：主区（桌面双栏 · 左固定 460 / 右固定 400）============ */
.auth {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 96px;
  width: 100%; padding: 48px var(--pub-gutter);
}
.auth-aside { width: 460px; flex-shrink: 0; }
.auth-aside h2 { font-size: 34px; line-height: 44px; letter-spacing: -.5px; }
.auth-aside > p {
  color: var(--pub-ink-2); font-size: 17px; line-height: 28px;
  margin: 32px 0 0;
}
.auth-points { list-style: none; margin: 32px 0 0; padding: 0; }
.auth-points li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--pub-rule);
  color: var(--pub-ink-2); font-size: 14px;
}
.auth-points li:last-child { border-bottom: 1px solid var(--pub-rule); }
.auth-points .tick {
  font-family: var(--pub-font-en); font-size: 13px; font-weight: 500; letter-spacing: .5px;
  color: var(--pub-accent); flex-shrink: 0; width: 22px;
}
.auth-points .point-name { flex: 0 0 72px; font-size: 15px; font-weight: 500; color: var(--pub-ink); }

.auth-main { width: 400px; flex-shrink: 0; }

/* 登录卡片 —— 页面的唯一焦点，也是全站唯一一枚阴影 */
.auth-card {
  background: var(--pub-surface);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-r-card);
  padding: 40px;
  box-shadow: var(--pub-shadow);
}
.auth-card h1 { font-size: 30px; letter-spacing: -.4px; }
.auth-card .sub { color: var(--pub-ink-2); font-size: 14px; margin: 6px 0 24px; }

/* ============ 表单 ============ */
.field { margin-bottom: 20px; }
.field:last-of-type { margin-bottom: 0; }
.label {
  display: block; font-size: 13px; font-weight: 500; color: var(--pub-ink);
  margin-bottom: 8px;
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input {
  width: 100%; height: 48px; padding: 0 16px;
  background: var(--pub-surface); color: var(--pub-ink);
  border: 1px solid var(--pub-line); border-radius: var(--pub-r-input);
  font-family: var(--pub-font); font-size: 15px; outline: none;
  transition: border-color .14s ease;
  box-shadow: none;
}
.input::placeholder { color: var(--pub-ink-3); }
/* 聚焦态只换描边色，不加光晕（加了立刻变回新手感） */
.input:hover { border-color: #B8B8BF; }
.input:focus { border-color: var(--pub-accent); box-shadow: none; }
.input-wrap.has-suffix .input { padding-right: 68px; }
.input-suffix {
  position: absolute; right: 6px;
  height: 36px; padding: 0 12px;
  background: transparent; color: var(--pub-accent);
  border: 0; border-radius: var(--pub-r-pill);
  font-family: var(--pub-font); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: color .14s ease;
}
.input-suffix:hover { color: #0059B3; }

/* 表单区与帮助文字之间的节奏 */
#loginForm .btn-block { margin-top: 24px; }
.help { color: var(--pub-ink-3); font-size: 12px; margin: 24px 0 0; }

/* ============ 页脚（高 44 / 左右 48 / 两端对齐）============ */
.site-footer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px var(--pub-gutter);
  border-top: 1px solid var(--pub-rule);
  font-size: 12px; color: var(--pub-ink-3);
}
.site-footer .spacer { flex: 1; }
.site-footer > span:first-child { font-family: var(--pub-font-en); font-weight: 500; color: var(--pub-ink-2); }
.site-footer a { color: var(--pub-accent); }
.site-footer a:hover { text-decoration: none; opacity: .8; }
.site-footer .mono { color: var(--pub-ink-3); }

/* ============ 响应式 ============
   断点 1080px —— 比规范写的 980 上移了 100px，这是实测结果：
   双栏硬需求 = 左 460 + 间距 96 + 右 400 + 左右留白 96 = 1052px，
   首页首屏 = 留白 192 + 左栏最小 390 + 间距 96 + 右卡 400 = 1078px。
   在 980–1080 之间双栏会被挤到变形（首页左栏只剩 312px，主标题折行 3 行），
   所以这一段直接走单列。 */
@media (max-width: 1080px) {
  :root { --pub-gutter: 24px; --pub-gutter-wide: 24px; }

  .nav { display: none; }                    /* 手机上不堆链接：只留品牌 + 主按钮 */
  .site-header { gap: 16px; height: 56px; }
  .brand-name { font-size: 15px; }

  .hero { padding: 32px 0 44px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .display { font-size: 32px; line-height: 44px; letter-spacing: -.8px; }
  .hero .display, .hero .lede { margin-top: 20px; }
  .lede { font-size: 15px; line-height: 26px; }

  /* 「登录后可见」卡片移到按钮下方（grid 单列时自然顺序即 文字 → 卡片） */
  .hero-aside { padding: 24px; }
  .hero-aside li { padding: 11px; gap: 12px; font-size: 13px; }
  .hero-aside li .ico { width: 20px; font-size: 12px; }
  .hero-aside li .point-name { flex-basis: 66px; font-size: 14px; }

  .btn-row { gap: 14px; }
  .btn-row .btn-lg { width: 100%; }
  .btn-row .btn-ghost { margin-top: 14px; width: 100%; }

  .section { padding: 44px 0; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: 26px; }
  .section-head p { font-size: 15px; line-height: 26px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 24px; }
  .card-head { gap: 12px; margin-bottom: 12px; }
  .card-head .ico { width: 24px; height: 24px; }
  .card h3 { font-size: 19px; }
  .card p { font-size: 14px; line-height: 24px; }

  .panel { padding: 0 20px; }
  .kv li { padding: 15px 0; gap: 20px; font-size: 14px; }
  .kv .k { flex-basis: 76px; font-size: 15px; }

  .facts { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .facts > div { border-left: 0 !important; }
  .facts > div + div { border-top: 1px solid var(--pub-rule); }

  /* 移动端：卡片在前、引导在后 —— 用户必须先看到表单和登录按钮 */
  .auth {
    flex-direction: column; align-items: stretch;
    gap: 36px; padding: 24px var(--pub-gutter) 40px;
  }
  .auth-main { order: -1; width: 100%; }
  .auth-aside { width: 100%; }
  .auth-aside h2 { font-size: 24px; line-height: 34px; }
  .auth-aside > p { font-size: 15px; line-height: 26px; margin-top: 20px; }
  .auth-points { margin-top: 24px; }
  .auth-points .point-name { flex-basis: 66px; font-size: 14px; }
  .auth-card { padding: 28px; }

  /* 触控目标 ≥ 44px */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .input { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}