/* ============================================================
   协议页样式（2026-10-13 P0）
   —— 用户服务协议 / 隐私政策

   ★ 一份样式同时服务**两个入口**，这是刻意的：
     ① SPA 里的 #/privacy、#/terms（点链接进去的）
     ② 独立页 /privacy、/terms（**不带 hash 直接打开的那个 URL**）
        —— App Store 提交时填的就是它，审核方式是「打开 URL 看内容」。
        独立页刻意**不加载 app.css**（那个文件假定自己运行在 App 外壳里），
        所以这里自带一套最小设计令牌。
   ★ 令牌一律 `--lg-` 前缀：SPA 里 app.css 的 :root 同时在，前缀避免互相覆盖。
     取值与 app.css :root 对齐（同一套配色，不另起炉灶）。
   ============================================================ */

:root {
  --lg-bg: #f5f6fa;
  --lg-surface: #ffffff;
  --lg-surface-2: #fafbfd;
  --lg-ink: #171a24;
  --lg-ink-2: #3d4354;
  /* ⚠️ 这两档的值**必须**与 app.css 的 --muted / --faint 一致（2026-10-17
     第三轮同步过）：协议页不加载 app.css，但它是同一套纸、同一套字，
     两边差一档就会读成「协议页比 App 旧」。——lg-warn 同理，取淡底上的文字档。 */
  --lg-muted: #666d7c;
  --lg-faint: #7e8698;
  --lg-line: #e7e9f0;
  --lg-brand: #4f46e5;
  --lg-info: #2f7fd4;
  --lg-info-soft: #eaf3fd;
  --lg-warn: #9a5a10;
  --lg-warn-soft: #fdf3e3;
  --lg-radius: 12px;
  --lg-font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 独立页外壳（SPA 里用不到，因为有自己的容器） ---------- */
.legal-page {
  margin: 0;
  background: var(--lg-bg);
  color: var(--lg-ink);
  font-family: var(--lg-font);
  font-size: 14.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
.legal-wrap { max-width: 860px; margin: 0 auto; padding: 28px 18px 64px; }
.legal-card {
  background: var(--lg-surface);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  padding: 26px 28px;
}
.legal-head { margin-bottom: 18px; }
.legal-title { margin: 0; font-size: 25px; font-weight: 750; letter-spacing: -0.01em; }
.legal-meta { margin-top: 7px; font-size: 12.5px; color: var(--lg-faint); }
.legal-foot {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--lg-line);
  font-size: 12.5px; color: var(--lg-faint);
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
}
.legal-foot a { color: var(--lg-brand); text-decoration: none; }
.legal-foot a:hover { text-decoration: underline; }
.legal-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--lg-ink); text-decoration: none;
}
.legal-brand .now { color: var(--lg-warn); }

/* ---------- 正文排版 ---------- */
.legal-body { color: var(--lg-ink-2); }
.legal-body > :first-child { margin-top: 0; }
.legal-body > :last-child { margin-bottom: 0; }
.legal-body h2 {
  margin: 30px 0 10px;
  font-size: 17px; font-weight: 700; color: var(--lg-ink);
  padding-bottom: 7px; border-bottom: 1px solid var(--lg-line);
}
.legal-body h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 650; color: var(--lg-ink); }
.legal-body p { margin: 0 0 11px; }
.legal-body ul, .legal-body ol { margin: 0 0 12px; padding-left: 22px; }
.legal-body li { margin: 0 0 5px; }
.legal-body li > ul, .legal-body li > ol { margin-top: 5px; }
.legal-body strong, .legal-body b { color: var(--lg-ink); font-weight: 650; }
.legal-body code {
  background: var(--lg-surface-2);
  border: 1px solid var(--lg-line);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.legal-body a { color: var(--lg-brand); }

/* 草案横幅：正文里那段 .legal-note —— 让人一眼看出「这是草案、还没定稿」 */
.legal-body .legal-note {
  margin: 0 0 22px;
  padding: 12px 15px;
  background: var(--lg-warn-soft);
  border: 1px solid #f0dcb8;
  border-left: 3px solid var(--lg-warn);
  border-radius: 8px;
  color: #6d4a12;
  font-size: 13px;
  line-height: 1.65;
}
.legal-body .legal-note strong { color: #5a3c0b; }
.legal-body .legal-note code { background: rgba(255, 255, 255, 0.65); border-color: #ecd9b4; color: #6d4a12; }

/* 个人信息收集清单 / 第三方共享清单 用的表 */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 16px;
  font-size: 13px;
  table-layout: fixed;
}
.legal-table th, .legal-table td {
  border: 1px solid var(--lg-line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}
.legal-table th { background: var(--lg-surface-2); color: var(--lg-ink); font-weight: 650; }
.legal-table td { color: var(--lg-ink-2); }

/* 窄屏：表格改为「自身横向滚动」。
   ★ 为什么不做「拆成卡片、每格标上列名」那种更漂亮的堆叠：那需要给每个 <td>
     加 data-th 属性，而正文是**服务端留档的静态片段**，加属性意味着正文一变
     sha256 就变、版本号就得跟着跳 —— 为一个纯样式问题去动合规留档，不划算。
   ★ `display:block` + `overflow-x:auto` 是让 <table> 自己成为滚动容器的标准做法：
     表格内部的 table-row / table-cell 显示类型不受影响，布局照旧。 */
@media (max-width: 620px) {
  .legal-wrap { padding: 18px 14px 48px; }
  .legal-card { padding: 18px 16px; }
  .legal-title { font-size: 21px; }
  .legal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legal-table th, .legal-table td { min-width: 92px; }
}