/* =============================================================================
 * public/assets/site.css — 官网共享样式层（无构建，直接 <link> 引用）
 *
 * 背景：过去 index / download / manual 三个客户页各自在自己的 <style> 顶部
 * 重复声明 :root 变量，改一次配色要改三处。这里把配色变量与公共组件
 * （页头 / 页脚 / 按钮 / 卡片 / 栅格 / 徽标 / 导航目录）抽成一份共享样式。
 *
 * 约定：
 *   - 变量名沿用 public/index.html 原有 :root 里的名字，保证视觉与旧版一致
 *     （仅新增 --bad，取自 download.html 原有的危险色，不影响旧页面观感）。
 *   - 本文件必须**自包含**：不依赖任何页面内的局部样式。manual.html 未引用本
 *     文件（由另一位工程师维护，保持原状），因此这里绝不能引用只有 index 有的类。
 *   - 页面专属样式仍留在各页 <style> 里；本文件只放跨页共用的部分。
 * ============================================================================= */

:root {
  --line: #e3e6ee;
  --muted: #6b7280;
  --brand: #2563eb;
  --ok: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
}

* { box-sizing: border-box; }

/* 防横向溢出兜底（100vw 陷阱 / 意外超宽元素） */
html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  font: 15px/1.75 system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #1f2937;
  background: #fff;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }
.muted { color: var(--muted); }

/* ================= 栅格 ================= */
/* 通用自适应栅格：默认 2 列，窄屏自动单列（各页仍可用自己的 .xxx 覆盖列数） */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ================= 页头（品牌 + 导航目录） ================= */
header.top {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px 14px;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 12px 24px; position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex: none;
}
header.top nav,
header.top .links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
header.top nav a,
header.top .links a { margin-left: 12px; color: #374151; padding: 4px 6px; white-space: nowrap; }
header.top nav a:hover,
header.top .links a:hover { color: var(--brand); text-decoration: none; }
header.top nav a.current { color: var(--brand); font-weight: 700; }
header.top nav a.btn-dl {
  background: var(--brand); color: #fff; border-radius: 8px;
  padding: 6px 16px; margin-left: 12px; font-weight: 600;
}
header.top nav a.btn-dl:hover { opacity: .9; color: #fff; }

/* ================= 按钮 ================= */
.btn {
  display: inline-block; border-radius: 8px; padding: 12px 34px;
  font-size: 16px; font-weight: 600; margin: 0 8px; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn.light { background: #fff; color: var(--brand); }
.btn.ghost { border: 1.5px solid rgba(255, 255, 255, .75); color: #fff; }
.btn.plain { background: var(--brand); color: #fff; }

.dl-btn { display: inline-block; background: var(--brand); color: #fff; border-radius: 6px; padding: 8px 22px; text-decoration: none; }
.dl-btn:hover { opacity: .92; text-decoration: none; color: #fff; }

.wx-btn { display: inline-block; background: #16a34a; color: #fff; border-radius: 6px; padding: 8px 22px; text-decoration: none; margin-left: 10px; }
.wx-btn:hover { opacity: .92; text-decoration: none; color: #fff; }

.manual-btn { display: inline-block; background: var(--brand); color: #fff; border-radius: 8px; padding: 10px 30px; text-decoration: none; font-size: 15px; font-weight: 600; }
.manual-btn:hover { opacity: .92; text-decoration: none; color: #fff; }

.upd-btn { display: inline-block; background: #d97706; color: #fff; border-radius: 6px; padding: 6px 16px; text-decoration: none; font-size: 12.5px; font-weight: 600; margin: 4px 0; }
.upd-btn:hover { opacity: .92; text-decoration: none; color: #fff; }

/* ================= 卡片 ================= */
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.card h3 { margin: 0 0 12px; font-size: 15px; }

/* ================= 徽标 ================= */
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; }

/* ================= 行内布局 ================= */
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }

/* ================= 页脚 ================= */
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 34px 20px 40px; }
footer .muted { font-size: 12px; margin-top: 4px; }

/* ================= 响应式（≤640px 手机） ================= */
@media (max-width: 640px) {
  header.top { justify-content: center; text-align: center; padding: 10px 12px; }
  header.top nav,
  header.top .links { justify-content: center; }
  header.top nav a,
  header.top .links a { margin-left: 4px; font-size: 13.5px; padding: 4px 4px; }
  header.top nav a.btn-dl { margin-left: 8px; }
  .grid { grid-template-columns: 1fr; }
  /* CTA 按钮纵向堆叠 + 全宽，触达面积更大 */
  .btn { display: block; width: 100%; max-width: 320px; margin: 10px auto; padding: 12px 16px; }
  .manual-btn, .dl-btn, .wx-btn { display: block; width: 100%; max-width: 320px; margin: 0 auto 10px; text-align: center; }
  .row { flex-direction: column; align-items: stretch; }
  .row input { min-width: 0; width: 100%; }
  .row button { width: 100%; }
}