:root {
  color-scheme: light;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: #201f24;
  background: #fff8fb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #fff8fb;
  line-height: 1.7;
}

a { color: #9d3358; }

.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px max(20px, calc((100vw - 1160px) / 2));
  border-bottom: 1px solid #eadde3;
  background: rgba(255, 255, 255, 0.96);
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  color: #17151a;
  line-height: 1.15;
  text-decoration: none;
}

.legal-brand img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
  border-radius: 7px;
}

.legal-brand span {
  margin-left: 10px;
  color: #3b0710;
  font-size: 23px;
  font-weight: 850;
}

.legal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.legal-language-picker select {
  min-height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid #e3d7dd;
  border-radius: 6px;
  background: #fff;
  color: #302a2e;
  font: inherit;
  font-size: 14px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.back-link { font-size: 14px; text-decoration: none; }

[data-i18n] { display: none; }
html[data-language="en"] [data-i18n="en"],
html[data-language="zh-CN"] [data-i18n="zh-CN"],
html[data-language="zh-TW"] [data-i18n="zh-TW"],
html[data-language="ja"] [data-i18n="ja"],
html[data-language="ko"] [data-i18n="ko"] { display: inline; }

.legal-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 780px);
  gap: 42px;
  width: min(1160px, calc(100% - 40px));
  margin: 36px auto 72px;
}

.legal-nav {
  position: sticky;
  top: 92px;
  align-self: start;
  display: grid;
  gap: 6px;
}

.legal-nav a {
  display: block;
  padding: 10px 12px;
  border-left: 3px solid transparent;
  color: #5e555b;
  text-decoration: none;
}

.legal-nav a span { color: inherit; }
.legal-nav a.active { border-color: #e56f8f; color: #201f24; font-weight: 700; }

.legal-document {
  padding: 34px 40px;
  border: 1px solid #eadde3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(83, 39, 58, 0.07);
}

.legal-locale { display: none; }
html[data-language="en"] .legal-locale[data-legal-locale="en"],
html[data-language="zh-CN"] .legal-locale[data-legal-locale="zh-CN"],
html[data-language="zh-TW"] .legal-locale[data-legal-locale="zh-TW"],
html[data-language="ja"] .legal-locale[data-legal-locale="ja"],
html[data-language="ko"] .legal-locale[data-legal-locale="ko"] { display: block; }

.document-head { padding-bottom: 28px; border-bottom: 1px solid #eadde3; }
.eyebrow { margin: 0 0 8px; color: #b04c6d; font-size: 12px; font-weight: 800; }
.document-head h1 { margin: 0; font-size: 38px; line-height: 1.25; }
.document-head > p:not(.eyebrow) { color: #655d62; }

.document-head dl {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(280px, 1.6fr) minmax(140px, 0.8fr);
  gap: 12px;
  margin: 24px 0 0;
}

.document-head dl div { padding: 12px; border: 1px solid #eee2e7; background: #fffafb; }
.document-head dt { color: #766c73; font-size: 12px; }
.document-head dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 700; }
.legal-sections { padding-top: 30px; }
.legal-sections section { margin: 0 0 24px; }
.legal-sections section h2 { margin: 0 0 6px; font-size: 17px; }
.legal-sections section p { margin: 0; color: #4f484d; }
.translation-note { margin: 28px 0 0; padding: 10px 12px; border-left: 3px solid #e4a735; background: #fffaf0; color: #5e555b; font-size: 14px; }
.legal-footer { padding: 20px; border-top: 1px solid #eadde3; color: #766c73; text-align: center; font-size: 13px; }

html[data-theme="dark"] {
  color-scheme: dark;
  color: #f7eef2;
  background: #171319;
}

html[data-theme="dark"] body { background: #171319; }

html[data-theme="dark"] a,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .legal-footer a { color: #ff9ab5; }

html[data-theme="dark"] .legal-topbar {
  border-color: #493944;
  background: rgba(33, 26, 34, 0.96);
}

html[data-theme="dark"] .legal-brand,
html[data-theme="dark"] .legal-brand span { color: #ffd8e0; }

html[data-theme="dark"] .legal-language-picker select,
html[data-theme="dark"] .legal-document {
  border-color: #493944;
  background: #211a22;
  color: #f7eef2;
}

html[data-theme="dark"] .legal-nav a { color: #bcaeb8; }
html[data-theme="dark"] .legal-nav a.active { color: #f7eef2; }

html[data-theme="dark"] .document-head,
html[data-theme="dark"] .legal-footer { border-color: #493944; }

html[data-theme="dark"] .document-head > p:not(.eyebrow),
html[data-theme="dark"] .document-head dt,
html[data-theme="dark"] .legal-sections section p,
html[data-theme="dark"] .legal-footer { color: #bcaeb8; }

html[data-theme="dark"] .document-head dl div {
  border-color: #493944;
  background: #281f27;
}

html[data-theme="dark"] .translation-note {
  background: #332c1c;
  color: #e8d8b2;
}

@media (max-width: 760px) {
  .legal-topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .legal-actions { width: 100%; gap: 8px; }
  .legal-language-picker select { max-width: 126px; }
  .back-link { font-size: 13px; }
  .legal-shell { grid-template-columns: 1fr; gap: 20px; width: min(100% - 24px, 700px); margin-top: 18px; }
  .legal-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-nav a { border-left: 0; border-bottom: 3px solid transparent; padding: 8px; }
  .legal-nav a.active { border-color: #e56f8f; }
  .legal-document { padding: 24px 20px; }
  .document-head h1 { font-size: 30px; }
  .document-head dl { grid-template-columns: 1fr; }
}
