:root {
  --primary: #335aff;
  --primary-dark: #173575;
  --ink: #172033;
  --muted: #69758a;
  --line: #e4e9f2;
  --canvas: #f3f7fd;
  --surface: #fff;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: PingFangSC, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; line-height: 1.8; }
a { color: var(--primary); }
.legal-header { position: sticky; top: 0; z-index: 10; height: 68px; padding: 0 clamp(18px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(222,230,243,.92); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.legal-brand { display: inline-flex; flex-direction: column; color: var(--primary-dark); line-height: 1; text-decoration: none; }
.legal-brand strong { font-size: 20px; letter-spacing: .05em; }
.legal-brand strong span { color: var(--primary); }
.legal-brand small { margin-top: 6px; color: #8b96a9; font-size: 8px; letter-spacing: .35em; }
.legal-header nav { display: flex; align-items: center; gap: 18px; }
.legal-header nav a { color: var(--muted); font-size: 13px; text-decoration: none; }
.legal-header nav a.active, .legal-header nav a:hover { color: var(--primary); }
.legal-shell { width: min(1040px, calc(100% - 28px)); margin: 34px auto 70px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.legal-aside, .legal-document { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 15px 42px rgba(46,73,119,.06); }
.legal-aside { position: sticky; top: 92px; padding: 18px; }
.legal-aside strong { display: block; margin-bottom: 12px; color: var(--primary-dark); }
.legal-aside a { display: block; padding: 7px 8px; color: var(--muted); border-radius: 5px; font-size: 12px; text-decoration: none; }
.legal-aside a:hover { color: var(--primary); background: #f2f5ff; }
.legal-document { padding: clamp(24px, 5vw, 58px); }
.legal-title { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.legal-title span { color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.legal-title h1 { margin: 9px 0 7px; color: var(--primary-dark); font-size: clamp(30px, 5vw, 44px); line-height: 1.2; }
.legal-title p { margin: 0; color: var(--muted); font-size: 13px; }
.legal-notice { margin: 25px 0; padding: 17px 19px; color: #405276; border: 1px solid #d7e1ff; border-radius: 8px; background: #f4f7ff; font-size: 13px; }
.legal-document section { padding-top: 20px; scroll-margin-top: 88px; }
.legal-document h2 { margin: 18px 0 8px; color: var(--primary-dark); font-size: 21px; }
.legal-document h3 { margin: 16px 0 5px; font-size: 16px; }
.legal-document p, .legal-document li { color: #4f5c70; font-size: 14px; }
.legal-document ul, .legal-document ol { padding-left: 22px; }
.legal-document li + li { margin-top: 5px; }
.legal-document table { width: 100%; margin: 15px 0; border-collapse: collapse; font-size: 13px; }
.legal-document th, .legal-document td { padding: 11px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-document th { color: var(--primary-dark); background: #f7f9fc; }
.legal-footer { padding: 24px; color: #8b95a6; text-align: center; font-size: 12px; }

@media (max-width: 760px) {
  .legal-header { height: auto; min-height: 62px; padding-block: 10px; }
  .legal-header nav { gap: 10px; }
  .legal-shell { margin-top: 18px; grid-template-columns: 1fr; }
  .legal-aside { display: none; }
  .legal-document { padding: 24px 18px; }
  .legal-document table { display: block; overflow-x: auto; }
}