/* ==========================================================================
 * legal.css — 条款 / 隐私政策页样式
 * --------------------------------------------------------------------------
 * 这两页是**纯内容页**，不接 store、不读后台：法务文本必须能随代码一起版本化，
 * 一旦上线就不能靠某个人的浏览器缓存来决定访客看到哪一版条款。
 * 结构与可访问性上做了三件事：
 *   1. 目录（TOC）可跳转，长文档也能定位；
 *   2. 每个 h2 有 id，锚点链接与外部分享都能定位到具体章节；
 *   3. 正文行宽限制在 72ch 以内，行高放宽 —— 法务文本密度高，太挤没法读。
 * ========================================================================== */

.lg {
  min-height: 100vh; min-height: 100dvh;
  background: #0B0B0D; color: #E8E9EE;
  padding-bottom: 72px;
}

/* ---------- 顶栏 ---------- */
.lg__top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px;
  background: rgba(11, 12, 16, .86);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.lg__back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: #E8E9EE;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .15s ease;
}
.lg__back:hover { background: rgba(255, 255, 255, .13); }
.lg__back:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lg__topTitle { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }

/* ---------- 版心 ---------- */
.lg__wrap { max-width: 860px; margin: 0 auto; padding: 40px 22px 0; }

.lg__h1 {
  font-size: clamp(28px, 4.4vw, 40px); line-height: 1.18;
  letter-spacing: -.032em; font-weight: 900;
}
.lg__meta {
  margin-top: 12px; font-size: 13.5px; color: rgba(255, 255, 255, .56);
}
.lg__intro {
  margin-top: 22px; padding: 16px 18px;
  border-radius: 14px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .78);
}

/* ---------- 目录 ---------- */
.lg__toc {
  margin-top: 30px; padding: 18px 20px;
  border-radius: 14px; background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
}
.lg__tocH {
  font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .46);
  margin-bottom: 12px;
}
.lg__toc ol {
  list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: 32px;
}
.lg__toc li { break-inside: avoid; margin-bottom: 7px; }
.lg__toc a {
  color: rgba(255, 255, 255, .74); text-decoration: none;
  font-size: 14px; line-height: 1.5;
  display: inline-flex; gap: 8px;
  transition: color .14s ease;
}
.lg__toc a:hover { color: var(--primary, #12B5CB); }
.lg__toc a:focus-visible { outline: 2px solid var(--primary, #12B5CB); outline-offset: 2px; border-radius: 4px; }
.lg__toc i {
  flex: none; font-style: normal; font-weight: 800;
  color: rgba(255, 255, 255, .34); font-variant-numeric: tabular-nums;
  min-width: 22px;
}

/* ---------- 正文 ---------- */
.lg__body { margin-top: 40px; }
.lg__body h2 {
  margin: 44px 0 14px; padding-top: 8px;
  font-size: clamp(19px, 2.4vw, 23px); line-height: 1.35;
  letter-spacing: -.018em; font-weight: 800;
  scroll-margin-top: 78px;              /* 顶栏是 sticky，不留这个锚点会被遮住 */
}
.lg__body h2:first-child { margin-top: 0; }
.lg__body h3 {
  margin: 26px 0 10px; font-size: 16px; font-weight: 800;
  color: rgba(255, 255, 255, .94);
}
.lg__body p {
  margin: 0 0 15px; max-width: 72ch;
  font-size: 15.5px; line-height: 1.78; color: rgba(255, 255, 255, .78);
}
.lg__body ul, .lg__body ol {
  margin: 0 0 16px; padding-left: 22px;
  max-width: 72ch;
  font-size: 15.5px; line-height: 1.78; color: rgba(255, 255, 255, .78);
}
.lg__body li { margin-bottom: 8px; }
.lg__body li::marker { color: rgba(255, 255, 255, .42); }
.lg__body strong { color: #fff; font-weight: 800; }
.lg__body a { color: var(--primary, #12B5CB); text-decoration: underline; text-underline-offset: 3px; }
.lg__body a:hover { opacity: .84; }
.lg__body a:focus-visible { outline: 2px solid var(--primary, #12B5CB); outline-offset: 2px; }

/* 强调框：用于「18+」「重要提示」这类必须一眼看到的内容 */
.lg__callout {
  margin: 22px 0; padding: 16px 18px; max-width: 72ch;
  border-radius: 13px; font-size: 15px; line-height: 1.7;
  background: rgba(255, 199, 44, .08);
  border: 1px solid rgba(255, 199, 44, .3);
  color: rgba(255, 255, 255, .88);
}
.lg__callout b { color: #FFC72C; }

/* 表格（GDPR 权利一览这类结构化信息） */
.lg__tableWrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.lg__table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.lg__table th, .lg__table td {
  padding: 11px 13px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8); line-height: 1.6;
}
.lg__table th { color: #fff; font-weight: 800; background: rgba(255, 255, 255, .045); white-space: nowrap; }
.lg__table tr:last-child td { border-bottom: 0; }

/* ---------- 页脚 ---------- */
.lg__foot {
  max-width: 860px; margin: 56px auto 0; padding: 24px 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 13.5px; line-height: 1.9; color: rgba(255, 255, 255, .5);
}
.lg__foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.lg__foot a { color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 700; }
.lg__foot a:hover { color: var(--primary, #12B5CB); }
.lg__foot a:focus-visible { outline: 2px solid var(--primary, #12B5CB); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 620px) {
  .lg__toc ol { columns: 1; }
  .lg__wrap { padding: 30px 18px 0; }
  .lg__body p, .lg__body ul, .lg__body ol, .lg__callout { font-size: 15px; }
}