/* ===== 页面专属作用域：.page-privacy ===== */
.page-privacy {
  --privacy-accent: var(--accent, #FF5722);
  --privacy-gold: var(--secondary, #D4AF37);
  --privacy-bg: var(--background, #0D1B2A);
  --privacy-surface: var(--surface, #1B2838);
  --privacy-text: var(--text, #FFFFFF);
  --privacy-text-secondary: var(--text-secondary, #B0BEC5);
  --privacy-divider: var(--divider, #37474F);
  --privacy-radius: var(--radius, 8px);
  --privacy-gap: var(--gap, 24px);
  --privacy-max-width: var(--content-max-width, 1200px);

  display: block;
  color: var(--privacy-text);
  font-family: var(--font-body, 'Roboto', sans-serif);
  background-color: var(--privacy-bg);
}

/* ===== 首屏 Hero 区域 ===== */
.page-privacy .hero {
  position: relative;
  max-width: var(--privacy-max-width);
  margin: 0 auto;
  padding: 0 var(--privacy-gap);
  height: 360px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--privacy-radius);
  margin-top: var(--privacy-gap);
}

.page-privacy .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-privacy .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-privacy .hero-overlay {
  position: relative;
  z-index: 2;
  padding: var(--privacy-gap);
  background: linear-gradient(90deg, rgba(13,27,42,0.85) 0%, rgba(13,27,42,0.3) 100%);
  width: 100%;
  border-radius: 0 0 var(--privacy-radius) var(--privacy-radius);
}

.page-privacy .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--privacy-text-secondary);
  margin-bottom: 12px;
}

.page-privacy .breadcrumb a {
  color: var(--privacy-gold);
  text-decoration: none;
  transition: color var(--transition, 0.3s ease);
}

.page-privacy .breadcrumb a:hover,
.page-privacy .breadcrumb a:focus-visible {
  color: var(--privacy-accent);
  text-decoration: underline;
}

.page-privacy .breadcrumb .separator {
  color: var(--privacy-divider);
}

.page-privacy .hero-overlay h1 {
  font-family: var(--font-headings, 'Impact', sans-serif);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--privacy-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.page-privacy .hero-sub {
  max-width: 720px;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.6;
  color: var(--privacy-text-secondary);
  margin: 0;
}

/* ===== 页面主体布局：侧边目录 + 内容 ===== */
.page-privacy .privacy-layout {
  display: flex;
  gap: calc(var(--privacy-gap) * 1.5);
  max-width: var(--privacy-max-width);
  margin: calc(var(--privacy-gap) * 2) auto;
  padding: 0 var(--privacy-gap);
}

/* ===== 侧边目录 ===== */
.page-privacy .toc-sidebar {
  flex: 0 0 240px;
  position: sticky;
  top: calc(var(--header-height, 72px) + var(--privacy-gap));
  align-self: flex-start;
  background: var(--privacy-surface);
  border-radius: var(--privacy-radius);
  padding: var(--privacy-gap);
  border: 1px solid var(--privacy-divider);
  max-height: calc(100vh - var(--header-height, 72px) - var(--privacy-gap) * 2);
  overflow-y: auto;
}

.page-privacy .toc-heading {
  font-family: var(--font-headings, 'Impact', sans-serif);
  font-size: 1rem;
  font-weight: 900;
  color: var(--privacy-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--privacy-divider);
}

.page-privacy .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-privacy .toc-link {
  display: block;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--privacy-text-secondary);
  text-decoration: none;
  border-radius: 4px;
  transition: background var(--transition, 0.3s ease), color var(--transition, 0.3s ease);
  border-left: 3px solid transparent;
}

.page-privacy .toc-link:hover,
.page-privacy .toc-link:focus-visible {
  background: rgba(212, 175, 55, 0.1);
  color: var(--privacy-gold);
  border-left-color: var(--privacy-gold);
}

/* ===== 内容区域 ===== */
.page-privacy .privacy-content {
  flex: 1;
  min-width: 0;
}

/* ===== 政策章节（可折叠卡片） ===== */
.page-privacy .policy-section {
  background: var(--privacy-surface);
  border-radius: var(--privacy-radius);
  border: 1px solid var(--privacy-divider);
  margin-bottom: var(--privacy-gap);
  overflow: hidden;
  transition: border-color var(--transition, 0.3s ease);
}

.page-privacy .policy-section:focus-within,
.page-privacy .policy-section:hover {
  border-color: var(--privacy-gold);
}

.page-privacy .section-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px var(--privacy-gap);
  background: transparent;
  border: none;
  color: var(--privacy-text);
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  transition: background var(--transition, 0.3s ease);
  border-radius: var(--privacy-radius) var(--privacy-radius) 0 0;
}

.page-privacy .section-toggle:hover,
.page-privacy .section-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.03);
}

.page-privacy .section-number {
  font-family: var(--font-data, 'Courier New', monospace);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--privacy-accent);
  flex-shrink: 0;
  width: 36px;
}

.page-privacy .section-toggle h2 {
  font-family: var(--font-headings, 'Impact', sans-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 900;
  margin: 0;
  flex: 1;
  letter-spacing: 0.01em;
}

.page-privacy .toggle-icon {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--privacy-gold);
  font-weight: bold;
  transition: transform var(--transition, 0.3s ease);
  flex-shrink: 0;
}

.page-privacy .section-toggle[aria-expanded="false"] .toggle-icon {
  transform: rotate(90deg);
}

.page-privacy .section-body {
  padding: 0 var(--privacy-gap) var(--privacy-gap);
  animation: privacyFadeIn 0.3s ease-out;
}

.page-privacy .section-body[hidden] {
  display: none;
}

@keyframes privacyFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 列表与文本 ===== */
.page-privacy .policy-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-privacy .policy-list li {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border-left: 3px solid var(--privacy-divider);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--privacy-text-secondary);
}

.page-privacy .policy-list li strong {
  color: var(--privacy-gold);
  font-weight: 700;
}

.page-privacy .policy-list li a {
  color: var(--privacy-gold);
  text-decoration: underline;
  transition: color var(--transition, 0.3s ease);
}

.page-privacy .policy-list li a:hover,
.page-privacy .policy-list li a:focus-visible {
  color: var(--privacy-accent);
}

.page-privacy .policy-note {
  font-size: 0.9rem;
  color: var(--privacy-text-muted, #78909C);
  font-style: italic;
  margin-top: 8px;
}

/* ===== 使用目的网格 ===== */
.page-privacy .usage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--privacy-gap);
  margin-bottom: 16px;
}

.page-privacy .usage-item {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--privacy-radius);
  padding: var(--privacy-gap);
  border: 1px solid var(--privacy-divider);
  transition: border-color var(--transition, 0.3s ease), transform var(--transition, 0.3s ease);
}

.page-privacy .usage-item:hover {
  border-color: var(--privacy-gold);
  transform: translateY(-2px);
}

.page-privacy .usage-icon {
  margin-bottom: 12px;
}

.page-privacy .usage-item h3 {
  font-family: var(--font-headings, 'Impact', sans-serif);
  font-size: 1rem;
  font-weight: 900;
  color: var(--privacy-text);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.page-privacy .usage-item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--privacy-text-secondary);
  margin: 0;
}

/* ===== 用户权利网格 ===== */
.page-privacy .rights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--privacy-gap);
  margin-bottom: 16px;
}

.page-privacy .rights-card {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--privacy-radius);
  padding: var(--privacy-gap);
  border: 1px solid var(--privacy-divider);
  transition: border-color var(--transition, 0.3s ease), transform var(--transition, 0.3s ease);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page-privacy .rights-card:hover {
  border-color: var(--privacy-accent);
  transform: translateY(-2px);
}

.page-privacy .rights-icon {
  margin-bottom: 12px;
}

.page-privacy .rights-card h3 {
  font-family: var(--font-headings, 'Impact', sans-serif);
  font-size: 1rem;
  font-weight: 900;
  color: var(--privacy-accent);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.page-privacy .rights-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--privacy-text-secondary);
  margin: 0;
}

/* ===== 联系信息块 ===== */
.page-privacy .contact-block li {
  border-left-color: var(--privacy-gold);
}

.page-privacy .contact-block a {
  color: var(--privacy-gold);
  text-decoration: underline;
}

/* ===== 响应式设计：移动端优先 ===== */

/* 默认（移动端）：单列布局，侧边目录变为展开式 */
.page-privacy .privacy-layout {
  flex-direction: column;
}

.page-privacy .toc-sidebar {
  flex: none;
  width: 100%;
  position: static;
  max-height: none;
  order: -1;
}

.page-privacy .usage-grid,
.page-privacy .rights-grid {
  grid-template-columns: 1fr;
}

.page-privacy .hero {
  height: 280px;
}

/* 平板及以上：恢复双列布局 */
@media (min-width: 768px) {
  .page-privacy .privacy-layout {
    flex-direction: row;
  }

  .page-privacy .toc-sidebar {
    flex: 0 0 220px;
    position: sticky;
    top: calc(var(--header-height, 72px) + var(--privacy-gap));
    max-height: calc(100vh - var(--header-height, 72px) - var(--privacy-gap) * 2);
  }

  .page-privacy .usage-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-privacy .hero {
    height: 360px;
  }
}

/* 桌面端：加宽侧边栏 */
@media (min-width: 1024px) {
  .page-privacy .toc-sidebar {
    flex: 0 0 240px;
  }

  .page-privacy .rights-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-privacy .hero h1 {
    font-size: 3.2rem;
  }
}

/* 安全边界：防止横屏溢出 */
.page-privacy img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 打印样式：收起可折叠区域全部展开 */
@media print {
  .page-privacy .section-body[hidden] {
    display: block !important;
  }

  .page-privacy .toc-sidebar {
    display: none;
  }

  .page-privacy .policy-section {
    break-inside: avoid;
  }
}

.page-privacy {
  --privacy-text-muted: currentColor;
}