/* ============================================================
   HCS · Apple 产品页风 · 设计令牌
   HCS "Apple Product Page" Design Tokens  —  v3.0
   ------------------------------------------------------------
   单一来源 Single source of truth：所有界面共享本文件。
   2026-09-02 覆盖 2026-09-01「极简东方认证美学」：
   旧规范禁止阴影 / 渐变 / 圆角，并把最大字号压到 34px，实测
   导致视觉手段归零（0 阴影 / 0 渐变 / 2 圆角），成品平淡。
   本版恢复层次、焦点与节奏；朱红仍为唯一强调色。
   ============================================================ */

:root {
  /* ---- 色彩 Color：黑白灰三层 + 唯一强调色朱红 ---- */
  --ink-900: #1D1D1F;   /* 主文字 Primary text（近黑） */
  --ink-700: #424245;   /* 次级标题 Sub-heading */
  --ink-500: #6E6E73;   /* 正文/次要 Body & secondary */
  --ink-300: #86868B;   /* 辅助/标签 Assistive & label */
  --ink-200: #A1A1A6;   /* 更浅辅助 Lighter assistive */
  --paper:   #FFFFFF;   /* 背景纯白 Background */
  --paper-warm: #F5F5F7; /* 浅灰背景区块 Apple gray section */
  --dark:    #000000;   /* 深色大区块 Dark block */
  --dark-2:  #0B0B0D;   /* 深色区块次层 Dark block alt */

  --seal:    #B23A2E;   /* 唯一强调色·朱红（印泥色） */
  --seal-hi: #C44435;   /* 朱红悬停态 Hover */
  --seal-lo: #8E2E24;   /* 朱红按下态 Pressed */
  --seal-on-dark: #D9574A; /* 深色底上的朱红（同色相提亮，保证对比度） */

  /* 朱红降透明变体：分隔线 / 淡标记 */
  --seal-line: rgba(178, 58, 46, 0.28);
  --seal-wash: rgba(178, 58, 46, 0.08);
  --seal-wash-2: rgba(178, 58, 46, 0.14);

  /* ---- 字体 Typeface：Apple 系统字体栈 ---- */
  --f-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", sans-serif;
  --f-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- 字阶 Type scale：强对比（Apple 核心） ---- */
  --t-hero:  80px;   /* Hero 主标题 */
  --t-h1:    56px;   /* 页面主标题 / 大区块 */
  --t-h2:    40px;   /* 区块标题 Section */
  --t-h3:    28px;   /* 次级标题 Sub-section */
  --t-body:  17px;   /* 正文 Body */
  --t-small: 14px;   /* 次要正文 Secondary */
  --t-label-l: 12px; /* 标签（大）Label large */
  --t-label:  12px;  /* 标签 Label */

  /* ---- 行高 / 字距 ---- */
  --lh-title: 1.07;  /* 大标题行高（紧） */
  --lh-h2:    1.12;
  --lh-body:  1.6;   /* 正文行高 */
  --ls-tight: -0.022em; /* 大标题负字距 */
  --ls-label: 0.12em;   /* 标签正字距 */

  /* ---- 圆角 Radius ---- */
  --r-card: 20px;    /* 卡片 */
  --r-pill: 980px;   /* 按钮 pill */
  --r-sm:   12px;    /* 小控件 */
  --r-xs:   8px;     /* 极小控件 */

  /* ---- 阴影 Shadow：柔和多层 ---- */
  --sh-card:  0 4px 24px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --sh-hover: 0 12px 48px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --sh-nav:   0 1px 0 rgba(0,0,0,.05);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.06);

  /* ---- 动效 Motion ---- */
  --ease: cubic-bezier(.25, .1, .25, 1);
  --dur:  .45s;
  --dur-s: .25s;

  /* ---- 间距 Spacing ---- */
  --s-block:   140px;  /* 大区块间距 Large block */
  --s-block-s: 100px;  /* 小区块间距 Small block */
  --s-item:    32px;   /* 条目间距 Item */
  --s-line:    16px;   /* 行内/细部 Inline */
  --s-tight:   8px;    /* 紧凑 */

  /* ---- 容器 Container ---- */
  --wrap: 1180px;
  --wrap-narrow: 820px;
  --nav-h: 52px;

  /* ---- 分隔线 Rules ---- */
  --line:      rgba(0, 0, 0, 0.10);
  --line-soft: rgba(0, 0, 0, 0.06);
}

/* ============================================================
   基础重置 Base
   ============================================================ */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.008em;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-sans);
  color: var(--ink-900);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--t-h1); line-height: var(--lh-title); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.014em; }
h4 { font-size: var(--t-body); line-height: 1.4; font-weight: 600; }
p  { margin: 0; color: var(--ink-500); }

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

/* 选中态：朱红淡底（全站唯一选中视觉） */
::selection { background: var(--seal-wash-2); color: var(--ink-900); }

/* 键盘可达性 */
:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ============================================================
   印章 Seal：唯一保留的中国文化符号
   用于关键确认场景；深色底上自动提亮
   ============================================================ */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--f-serif);
  color: var(--seal);
  border: 2px solid var(--seal);
  border-radius: var(--r-sm);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 2px;
  padding: 14px 12px;
  transform: rotate(-6deg);
  user-select: none;
}
.seal--lg  { width: 132px; height: 132px; font-size: 18px; }
.seal--md  { width: 104px; height: 104px; font-size: 15px; }
.seal--sm  { width: 78px;  height: 78px;  font-size: 12px; letter-spacing: 1.5px; }

.on-dark .seal,
.hero .seal,
.cta-band .seal {
  color: var(--seal-on-dark);
  border-color: var(--seal-on-dark);
}

/* ============================================================
   HCS 通用组件（答题 / 成绩 / 证书），与本站并存共用
   ============================================================ */
.q__stem { font-size: 21px; line-height: 1.55; color: var(--ink-900); margin: 0; font-weight: 600; }
.q__options { margin-top: var(--s-item); border-top: 1px solid var(--line); }
.q__option {
  display: flex; gap: 16px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; color: var(--ink-500); font-size: var(--t-body);
  transition: color var(--dur-s) var(--ease);
}
.q__option:hover { color: var(--ink-900); }
.q__mark { font-size: var(--t-small); color: var(--ink-300); flex: 0 0 22px; }
.q__option--on { color: var(--ink-900); }
.q__option--on .q__mark { color: var(--seal); }

.score { font-size: 72px; line-height: 1.05; font-weight: 600; letter-spacing: var(--ls-tight); color: var(--ink-900); }
.verdict { font-size: var(--t-h3); color: var(--seal); font-weight: 600; letter-spacing: 0.18em; }

.cert {
  width: 210mm; min-height: 297mm; margin: 0 auto;
  padding: 30mm 26mm; background: var(--paper); position: relative;
}
.cert__title {
  font-size: var(--t-h1); letter-spacing: 0.18em; text-align: center; font-weight: 600;
}