/* ============================================================
 * 法律文本页（用户协议 / 隐私政策 / 退款规则 / AI 内容说明）
 *
 * 为什么单独一份样式而不复用 app.css：法律页是**未登录可访问**的公开页，
 * 而 app.css 里全是登录后的工作台布局。复用会把整包工作台样式下发给匿名访客。
 *
 * ⚠️ 四条视觉红线（与全站一致）：禁 AI 紫、禁 emoji、禁渐变文字、禁纯黑纯白。
 *    颜色只能来自 tokens.css 的令牌，不写死色值。
 * ============================================================ */

.lg-head {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-8);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.lg-brand {
  font-size: var(--fs-14); font-weight: var(--fw-semibold);
  color: var(--ink); text-decoration: none; letter-spacing: var(--ls-title);
  white-space: nowrap;
}
.lg-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.lg-tabs a {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full);
  font-size: var(--fs-13); color: var(--sub); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-in-out-quint), color var(--dur-fast) var(--ease-in-out-quint);
}
.lg-tabs a:hover { background: var(--surface-hover); color: var(--ink-2); }
.lg-tabs a.on { background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-medium); }

.lg-main {
  max-width: var(--measure); margin: 0 auto;
  padding: var(--sp-12) var(--sp-8) var(--sp-16);
}
.lg-meta {
  font-size: var(--fs-12); color: var(--sub);
  padding-bottom: var(--sp-6); margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line);
}
.lg-meta b { color: var(--ink-2); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

.lg-doc h1 {
  font-size: var(--fs-28); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display); line-height: var(--lh-display);
  color: var(--ink); margin: 0 0 var(--sp-4);
}
.lg-doc h2 {
  font-size: var(--fs-16); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title); line-height: var(--lh-title);
  color: var(--ink); margin: var(--sp-10) 0 var(--sp-3);
}
.lg-doc p, .lg-doc li {
  font-size: var(--fs-14); line-height: var(--lh-body); color: var(--ink-2);
}
.lg-doc p { margin: 0 0 var(--sp-4); }
.lg-doc ul, .lg-doc ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.lg-doc li { margin-bottom: var(--sp-2); }
.lg-doc strong { color: var(--ink); font-weight: var(--fw-semibold); }

.lg-lead {
  font-size: var(--fs-16) !important; color: var(--sub) !important;
  line-height: var(--lh-body); margin-bottom: var(--sp-6) !important;
}

/* 需要特别引起注意的段落：用左侧色条 + 浅底，而不是整段标红。
 * 整段红字在长文档里会让人直接跳过，反而失去提示作用。 */
.lg-warn {
  padding: var(--sp-4) var(--sp-5);
  background: var(--bad-soft);
  border-left: 3px solid var(--bad);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink) !important;
  margin: 0 0 var(--sp-4) !important;
}
.lg-warn strong { color: var(--bad); }

.lg-table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-6);
  font-size: var(--fs-13);
}
.lg-table th, .lg-table td {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.lg-table th {
  font-weight: var(--fw-semibold); color: var(--ink);
  background: var(--surface-2); font-size: var(--fs-12);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.lg-table td { color: var(--ink-2); line-height: var(--lh-tight); }

.lg-back {
  margin-top: var(--sp-12); padding-top: var(--sp-6);
  border-top: 1px solid var(--line); font-size: var(--fs-13);
}
.lg-back a { color: var(--accent); text-decoration: none; }
.lg-back a:hover { text-decoration: underline; }

.lg-foot {
  padding: var(--sp-8); text-align: center;
  border-top: 1px solid var(--line);
}
.lg-foot p { font-size: var(--fs-12); color: var(--sub-2); margin: 0; }

@media (max-width: 720px) {
  .lg-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); }
  .lg-main { padding: var(--sp-8) var(--sp-5) var(--sp-12); }
  .lg-table { font-size: var(--fs-12); }
  .lg-table th, .lg-table td { padding: var(--sp-2) var(--sp-3); }
}