/* ============================================================
   内容区 / 合规页样式
   使用范围：
   1. index.html 播放器下方的正文与常见问题区块（#content-zone）
   2. about.html / privacy.html / terms.html 三个合规页

   设计说明：
   - 沿用播放器页的墨色 + 鎏金主题，但全部挂在 .content-page 作用域下，
     不修改播放器内部任何选择器，避免影响 #app 的弹性布局
   - 本文件不依赖外部字体，字体名称仅作回退声明
   ============================================================ */

.content-page {
  --content-ink: #14100c;
  --content-ink-2: #1b1510;
  --content-panel: #201912;
  --content-line: #3a2f1f;
  --content-gold: #d4a24e;
  --content-gold-bright: #e8c36a;
  --content-gold-dim: #8a6d3b;
  --content-text: #e8e0d0;
  --content-text-dim: #a89a80;
  --content-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --content-sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;

  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 44px 24px 72px;
  color: var(--content-text);
  font-family: var(--content-sans);
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.2px;
  box-sizing: border-box;
}

.content-page * {
  box-sizing: border-box;
}

/* ============ 标题层级 ============ */
.content-page h1 {
  font-family: var(--content-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 1.5px;
  color: var(--content-text);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--content-line);
}

.content-page h2 {
  font-family: var(--content-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--content-gold-bright);
  margin: 38px 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--content-gold-dim);
}

.content-page h3 {
  font-family: var(--content-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--content-text);
  margin: 26px 0 8px;
}

.content-page p {
  margin: 0 0 14px;
  color: var(--content-text);
}

.content-page strong {
  color: var(--content-gold-bright);
  font-weight: 600;
}

/* 合规页的"最后更新"日期行 */
.content-page .updated {
  margin: -6px 0 22px;
  font-size: 13px;
  color: var(--content-text-dim);
  letter-spacing: 0.5px;
}

/* 合规页中英双区块：中文区块用 h1 承担页面主标题，
   英文区块用一个视觉与 h1 相同、但语义为 h2 的标题，
   这样整页始终只有一个 h1，同时两种语言看起来一致 */
.content-page .page-title {
  font-family: var(--content-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 1.5px;
  color: var(--content-text);
  margin: 0 0 18px;
  padding: 0 0 14px;
  border: none;
  border-bottom: 1px solid var(--content-line);
  border-left: none;
}

/* ============ 列表 ============ */
.content-page ul,
.content-page ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.content-page li {
  margin: 0 0 8px;
  list-style: none;
  position: relative;
  padding-left: 16px;
}

.content-page ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--content-gold-dim);
}

.content-page ol {
  padding-left: 24px;
  counter-reset: content-counter;
}

.content-page ol > li {
  counter-increment: content-counter;
  padding-left: 22px;
}

.content-page ol > li::before {
  content: counter(content-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--content-gold-dim);
  font-size: 13px;
}

/* ============ 常见问题 ============ */
.content-page .faq-item {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: rgba(32, 25, 18, 0.55);
  border: 1px solid var(--content-line);
  border-radius: 6px;
}

.content-page .faq-item h3 {
  margin: 0 0 8px;
  color: var(--content-gold-bright);
  font-size: 15px;
}

.content-page .faq-item p {
  margin: 0;
  color: var(--content-text-dim);
  font-size: 14px;
  line-height: 1.85;
}

/* ============ 说明卡片 ============ */
.content-page .notice-card {
  margin: 20px 0;
  padding: 16px 18px;
  background: rgba(32, 25, 18, 0.55);
  border: 1px solid var(--content-line);
  border-left: 3px solid var(--content-gold-dim);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--content-text-dim);
}

/* ============ 表格（合规页偶尔用到） ============ */
.content-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14px;
}

.content-page th,
.content-page td {
  padding: 9px 12px;
  text-align: left;
  border: 1px solid var(--content-line);
  vertical-align: top;
  /* 窄屏下允许长词组自动折行，避免表格把页面撑出横向滚动条 */
  overflow-wrap: anywhere;
}

.content-page th {
  color: var(--content-gold-bright);
  background: rgba(32, 25, 18, 0.7);
  font-weight: 600;
}

/* ============ 链接 ============ */
.content-page a {
  color: var(--content-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 162, 78, 0.35);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.content-page a:hover {
  color: var(--content-gold-bright);
  border-bottom-color: var(--content-gold-bright);
}

/* ============ 站内页脚 ============ */
.content-page .site-footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--content-line);
  font-size: 13px;
  color: var(--content-text-dim);
  text-align: center;
  line-height: 2.1;
}

.content-page .site-footer nav {
  margin-bottom: 8px;
}

.content-page .site-footer nav a {
  margin: 0 10px;
  border-bottom: none;
}

.content-page .site-footer .footer-copy {
  color: var(--content-text-dim);
  font-size: 12px;
  opacity: 0.85;
}

/* ============ 合规页专用：返回播放器 ============ */
.content-page .back-to-player {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 13px;
  letter-spacing: 1px;
  border-bottom: none;
}

.content-page .back-to-player::before {
  content: "← ";
}

/* ============ 合规页专用：顶部工具条 ============ */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 24px 0;
  font-family: var(--content-sans, "Noto Sans SC", "Microsoft YaHei", sans-serif);
  font-size: 13px;
}

.page-toolbar .toolbar-brand {
  font-family: var(--content-serif, "Noto Serif SC", "Songti SC", serif);
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--content-gold-bright, #e8c36a);
  text-decoration: none;
}

.page-toolbar .language-switch {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--content-gold, #d4a24e);
  background: rgba(32, 25, 18, 0.8);
  border: 1px solid var(--content-line, #3a2f1f);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.page-toolbar .language-switch:hover {
  color: var(--content-gold-bright, #e8c36a);
  border-color: var(--content-gold-dim, #8a6d3b);
}

/* ============ 移动端 ============ */
@media (max-width: 720px) {
  .content-page {
    padding: 30px 16px 56px;
    font-size: 14.5px;
    line-height: 1.9;
  }

  .content-page h1 {
    font-size: 21px;
    letter-spacing: 1px;
  }

  .content-page .page-title {
    font-size: 21px;
    letter-spacing: 1px;
  }

  .content-page h2 {
    font-size: 17px;
    margin-top: 32px;
  }

  .content-page .faq-item {
    padding: 13px 14px;
  }

  .page-toolbar {
    padding: 14px 16px 0;
  }
}