/* ================================================================
   隐私政策 / 法律声明页 - 100% 还原 Figma node 109:51 / 117:290
   布局：顶部菜单 + 渐变 hero 背景 + 左侧导航(返回首页+Tab) + 右侧正文 + footer
   ================================================================ */

.legal-page { background: #FDFDFD; position: relative; }

/* 顶部渐变背景（高 1200，铺在 header + 内容区上方） */
.legal-hero-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 1200px;
  background: linear-gradient(180deg, #D6E8FF 0%, #FCFCFC 100%);
  z-index: 0; pointer-events: none;
}

/* 内容主体（在背景之上） */
.legal-main {
  position: relative; z-index: 1;
  max-width: 1380px; margin: 0 auto; padding: 90px 20px 100px;
  display: flex; gap: 48px; align-items: flex-start;
}

/* 左侧导航栏 */
.legal-side {
  width: 150px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 100px;
}
.legal-back {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 400; line-height: 22px; color: rgba(0,0,0,0.6);
  transition: color .2s;
}
.legal-back:hover { color: var(--blue); }
.legal-back img { width: 16px; height: 16px; }
.legal-tabs { display: flex; flex-direction: column; gap: 4px; }
.legal-tab {
  display: flex; align-items: center; padding: 8px 24px; border-radius: 8px;
  font-size: 14px; font-weight: 400; line-height: 14px; color: rgba(0,0,0,0.6);
  transition: background .2s, color .2s;
}
.legal-tab:hover { background: rgba(28,111,255,0.06); }
.legal-tab.active { color: var(--blue); }

/* 右侧正文 */
.legal-content {
  width: 1173px; max-width: 100%;
  display: flex; flex-direction: column; gap: 16px;
}
.legal-head { display: flex; flex-direction: column; gap: 12px; }
.legal-title { font-size: 32px; font-weight: 600; line-height: 32px; color: #000; }
.legal-date {
  font-size: 14px; font-weight: 400; line-height: 22px; color: rgba(0,0,0,0.3);
  white-space: pre-line;
}
.legal-body {
  font-size: 14px; font-weight: 400; line-height: 22px; color: rgba(0,0,0,0.6);
  white-space: pre-line;
}

/* ========== 响应式 — 统一断点 1024 / 640 ========== */
@media (max-width: 1024px) {
  .legal-main    { flex-direction: column; gap: 32px; padding-top: 100px; }
  .legal-side    { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .legal-content { width: 100%; }
}
@media (max-width: 640px) {
  .legal-main  { padding: 90px 16px 64px; }
  .legal-title { font-size: 26px; line-height: 34px; }
  .legal-hero-bg { height: 600px; }
}

/* ================================================================
   暗色模式覆盖（隐私 / 法律页）
   ================================================================ */
:root[data-theme="dark"] .legal-page { background: #000; }
:root[data-theme="dark"] .legal-hero-bg {
  background: linear-gradient(180deg, #0F0F0F 0%, #000 100%);
}
:root[data-theme="dark"] .legal-back { color: rgba(255,255,255,0.6); }
:root[data-theme="dark"] .legal-back:hover { color: var(--blue); }
:root[data-theme="dark"] .legal-back img { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .legal-tab { color: rgba(255,255,255,0.6); }
:root[data-theme="dark"] .legal-tab:hover { background: rgba(28,111,255,0.12); }
:root[data-theme="dark"] .legal-tab.active { color: var(--blue); }
:root[data-theme="dark"] .legal-title { color: #fff; }
:root[data-theme="dark"] .legal-date { color: rgba(255,255,255,0.3); }
:root[data-theme="dark"] .legal-body { color: rgba(255,255,255,0.6); }