:root {
  --bg: #f5efe2;
  --bg-soft: #ede3cf;
  --card: #fdfaf1;
  --ink: #2b2620;
  --ink-light: #6b6252;
  --muted: #9a8f7a;
  --border: #d9cdb4;
  --accent: #3b5b9b;
  --accent-light: #d9cdb4;
  --accent-soft: rgba(59,91,155, 0.08);
  --primary: #3b5b9b;
  --best: #3b5b9b;
  --best-soft: rgba(59,91,155, 0.08);
  --worst: #8b5a6b;
  --worst-soft: rgba(139, 90, 107, 0.10);
  --success: #5c6b52;
  --danger: #8b5a6b;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 40px rgba(90, 70, 40, 0.08);
  --shadow-sm: 0 4px 14px rgba(90, 70, 40, 0.06);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  padding: 18px 20px 6px;
  text-align: center;
}

.logo {
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--muted);
  font-weight: 400;
}

.container {
  flex: 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px 20px 40px;
}

.page {
  display: none;
  animation: fadeIn 0.35s ease;
}

.page.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 首页 */
.eyebrow {
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.hero-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--primary);
}

.hero-subtitle {
  color: var(--ink-light);
  margin: 0 0 18px;
  font-size: 15px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.tag {
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-light);
  background: rgba(255,255,255,0.5);
}

.preview-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--muted);
}

.preview-label {
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 1px;
}

.preview-count {
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 999px;
}

.preview-figure {
  text-align: center;
  padding: 20px 0;
  border: 1px dashed var(--border);
  border-radius: 14px;
  margin-bottom: 18px;
  background: var(--bg-soft);
}

.preview-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--primary);
}

.preview-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 10px;
}

.preview-tags span {
  display: inline-block;
  padding: 4px 12px;
  margin: 0 4px;
  border-radius: 999px;
  background: var(--card);
  font-size: 12px;
  color: var(--ink-light);
  border: 1px solid var(--border);
}

.preview-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--ink-light);
}

.preview-features li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  color: var(--accent);
}

.buy-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.price-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.price-value {
  font-family: 'Noto Serif SC', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(30, 41, 59, 0.18);
}

.btn-primary:hover {
  box-shadow: 0 6px 18px rgba(30, 41, 59, 0.24);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-light);
  border: 1px solid var(--border);
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.author-line {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}

.link-notes {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px;
}

/* 版权声明 */
.copyright-notice {
  margin-top: 20px;
  padding: 14px 16px 4px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.copyright-notice .copyright-title {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 6px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.copyright-notice .copyright-desc {
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 8px;
}
.copyright-notice .copyright-author {
  font-size: 11px;
  color: var(--ink-light);
  margin: 0;
}
.copyright-notice .wechat-id {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* 密钥页 */
.gate-label {
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--muted);
}

.gate-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 20px;
  margin: 8px 0 18px;
  line-height: 1.35;
  color: var(--primary);
}

.one-time-key {
  display: inline-block;
  float: right;
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-top: -42px;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.key-input {
  width: 100%;
  padding: 16px 18px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  margin: 18px 0 8px;
  outline: none;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 1px;
}

.key-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.key-message {
  min-height: 22px;
  font-size: 13px;
  color: var(--worst);
  margin-bottom: 12px;
}

.key-message.ok {
  color: var(--best);
}

.gate-tips {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tip {
  background: var(--bg);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--ink-light);
  text-align: center;
}

.btn-back {
  display: block;
  margin: 18px auto 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

/* 答题页 */
.quiz-header {
  margin-bottom: 18px;
}

.quiz-count {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.progress {
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 0.3s ease;
}

.question-card {
  margin-bottom: 20px;
  overflow: visible;
}

.question-meta {
  margin-bottom: 10px;
}

.question-text {
  font-family: 'Noto Serif SC', serif;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 22px;
  color: var(--primary);
  font-weight: 500;
}

.primary-dim {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* 横向双选列表 */
.choice-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding: 0 6px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-light);
  font-weight: 500;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-best .legend-dot {
  background: var(--best);
  box-shadow: 0 0 0 4px var(--best-soft);
}

.legend-worst .legend-dot {
  background: var(--worst);
  box-shadow: 0 0 0 4px var(--worst-soft);
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.single-choice {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.single-choice:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.single-choice.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.single-choice-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.choice-row {
  display: flex;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 66px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.choice-row:hover {
  box-shadow: var(--shadow-sm);
}

.choice-side {
  width: 66px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: background 0.2s, color 0.2s;
  writing-mode: horizontal-tb;
}

.choice-side:hover {
  background: var(--bg-soft);
}

.choice-side.best {
  background: var(--best-soft);
  color: var(--best);
}

.choice-side.worst {
  background: var(--worst-soft);
  color: var(--worst);
}

.choice-side.best:hover,
.choice-side.worst:hover {
  opacity: 0.92;
}

.choice-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.choice-row.best-active {
  border-color: var(--best);
  box-shadow: 0 0 0 3px var(--best-soft);
}

.choice-row.worst-active {
  border-color: var(--worst);
  box-shadow: 0 0 0 3px var(--worst-soft);
}

.selection-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
  text-align: center;
  line-height: 1.5;
}

.selection-hint.complete {
  color: var(--best);
}

.quiz-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

/* 加载页 */
#loading-page {
  text-align: center;
  padding-top: 120px;
}

.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  color: var(--muted);
  font-size: 14px;
}

/* 结果页 */
.result-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.result-eyebrow {
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

.result-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 20px;
  margin: 8px 0 18px;
  color: var(--primary);
}

.quality-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

/* 卷宗摘要 */
.section-heading {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--ink-light);
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
}

.case-summary {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 18px;
}

.summary-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-column-gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}

.summary-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.summary-row:first-child {
  padding-top: 0;
}

.summary-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
  padding-top: 2px;
}

.summary-value {
  font-family: 'Noto Serif SC', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.summary-note {
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.65;
}

/* 叙述卡片 */
.narrative-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.narrative-card.warning-card {
  border-color: #c8b8a0;
  background: #faf6f0;
}

.narrative-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.narrative-num {
  font-family: 'Noto Serif SC', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  min-width: 28px;
}

.narrative-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.5px;
}

.narrative-body p {
  font-size: 13px;
  color: var(--ink-light);
  line-height: 1.85;
  margin: 0 0 8px;
}

.narrative-body p:last-child {
  margin-bottom: 0;
}

/* 好评返现专属边框 */
.review-incentive-box {
  margin: 28px 0 8px;
  padding: 20px 24px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  text-align: center;
}

.review-incentive-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.review-incentive-desc {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.6;
}

/* 匹配度进度条 */
.match-bar-wrap {
  margin: 10px 0 6px;
}

.match-bar-label {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 4px;
}

.match-bar-track {
  height: 8px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}

.match-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.6s ease;
}

.quality-tag {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-light);
  border: 1px solid var(--border);
}

.result-archetype {
  text-align: center;
  padding: 22px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
  background: var(--bg-soft);
}

.result-archetype-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 26px;
  font-weight: 700;
}

.result-archetype-motto {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 10px;
  font-style: italic;
}

.result-archetype-desc {
  font-size: 13px;
  color: var(--ink-light);
  padding: 0 14px;
  line-height: 1.75;
}

.personality-portrait {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-bottom: 18px;
}

.personality-portrait h3 {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--primary);
}

.personality-portrait p {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.85;
  margin: 0;
}

.soul-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 18px 20px;
  margin-bottom: 18px;
}

.soul-card h3 {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--primary);
  letter-spacing: .1em;
}

.soul-card p {
  font-size: 14.5px;
  color: var(--ink-light);
  line-height: 2;
  margin: 0;
  text-align: justify;
}

.top-figure {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-bottom: 14px;
}

.top-figure-rank {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.top-figure-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.top-figure-ism {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink-light);
  background: rgba(59,91,155, .06);
  border: 1px solid rgba(59,91,155, .18);
  border-radius: 3px;
  padding: 1px 8px;
  white-space: nowrap;
}

.top-figure-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.top-figure-desc {
  font-size: 13px;
  color: var(--ink-light);
  line-height: 1.7;
}

.top-figure-distance {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
  font-family: 'Noto Sans SC', sans-serif;
}

.figure-detail {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
}

.figure-detail h4 {
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--primary);
  font-weight: 500;
}

.figure-detail p {
  font-size: 13px;
  color: var(--ink-light);
  line-height: 1.7;
  margin: 0;
}

.least-like {
  border-color: var(--worst);
  background: var(--worst-soft);
}

.least-like-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}

/* 最不认同独立卡片（红色系：徽章 + 引用块 + 说明区） */
.least-like-card {
  border: 1.5px solid var(--worst);
  border-radius: 14px;
  background: var(--worst-soft);
  padding: 20px 22px 18px;
  position: relative;
  overflow: hidden;
}
.least-like-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--worst);
}
.least-like-card-head { margin-bottom: 12px; }
.least-like-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2px;
  color: #fff;
  background: var(--worst);
  border-radius: 4px;
  padding: 3px 9px;
  margin-bottom: 10px;
}
.least-like-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--worst);
  line-height: 1.3;
}
.least-like-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.least-like-line {
  font-family: 'Noto Serif SC', serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--primary);
  border-left: 3px solid var(--worst);
  background: rgba(255,255,255,.5);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
}
.least-like-line-src {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 5px;
}
.least-like-desc {
  font-size: 13px;
  color: var(--ink-light);
  line-height: 1.8;
}

.radar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.radar-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.dimension-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.dim-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.dim-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.dim-name {
  font-size: 13px;
  font-weight: 500;
}

.dim-value {
  font-family: 'Noto Serif SC', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
}

.dim-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.dim-interpretation {
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.6;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.weakest {
  border-color: var(--worst);
  background: var(--worst-soft);
}

.advice-box {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

.advice-box strong {
  color: var(--primary);
  font-weight: 500;
}

.advice-box p {
  margin: 6px 0 0;
  color: var(--ink-light);
  line-height: 1.7;
}

.result-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.result-actions .btn {
  flex: 1;
}

/* 弹窗 */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(27, 36, 48, 0.45);
  z-index: 100;
  align-items: flex-end;
  justify-content: center;
}

.modal.open {
  display: flex;
}

.modal-content {
  background: var(--card);
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding: 20px 24px 30px;
  animation: slideUp 0.25s ease;
  border: 1px solid var(--border);
  border-bottom: none;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.modal-header h2 {
  font-family: 'Noto Serif SC', serif;
  font-size: 20px;
  margin: 0;
  color: var(--primary);
}

.modal-close {
  background: var(--bg);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--ink-light);
  cursor: pointer;
}

.note-item {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}

.note-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.note-item h3 {
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--primary);
}

.note-item p {
  font-size: 13px;
  color: var(--ink-light);
  margin: 0;
  line-height: 1.6;
}

/* 桌面端适配 */
@media (min-width: 600px) {
  .container {
    padding-top: 30px;
  }

  .modal {
    align-items: center;
  }

  .modal-content {
    border-radius: 22px;
    animation: fadeIn 0.25s ease;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 360px) {
  .dial-option {
    width: 64px;
    height: 64px;
    margin-left: -32px;
    margin-top: -32px;
    font-size: 11px;
  }

  .dial-center {
    width: 52px;
    height: 52px;
    margin-left: -26px;
    margin-top: -26px;
  }

  .question-text {
    font-size: 15px;
  }
}

/* ===== 分享落地页 /r/:shareId ===== */
.share-card {
  background: var(--card, #fff);
  border-radius: 18px;
  padding: 32px 24px 28px;
  box-shadow: 0 12px 40px rgba(29, 41, 57, 0.14);
  text-align: center;
  max-width: 420px;
  margin: 24px auto;
}
.share-eyebrow {
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--muted, #9a8f7a);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.share-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 44px;
  font-weight: 700;
  color: var(--ink, #2b2620);
  line-height: 1.25;
}
.share-subtitle {
  font-size: 14px;
  color: var(--muted, #9a8f7a);
  margin: 6px 0 14px;
}
.share-quote {
  font-family: 'Noto Serif SC', serif;
  font-size: 15px;
  color: var(--accent, #3b5b9b);
  font-style: italic;
  margin: 0 auto 16px;
  max-width: 340px;
  line-height: 1.7;
}
.share-match {
  font-family: 'Noto Serif SC', serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--accent, #3b5b9b);
  margin-bottom: 4px;
}
.share-arch {
  font-size: 13px;
  color: var(--muted, #9a8f7a);
  margin-bottom: 12px;
}
.share-radar-wrap {
  margin: 8px auto 18px;
  max-width: 320px;
}
.share-radar-wrap .radar-svg { width: 100%; height: auto; }

/* ===== 通用 ===== */
.hidden { display: none !important; }

/* ===== 免费试测解锁 / 好友对比 ===== */
.gate-divider { text-align:center; font-size:12px; color:var(--muted,#9a8f7a); margin:14px 0 10px; }
.compare-section { margin-top:16px; }
.compare-box { background:linear-gradient(135deg,#f3ecdd,#f2ecdf); border:1px solid var(--accent-light,#d4c6a8); border-radius:var(--radius); padding:18px; text-align:center; }
.compare-title { font-family:'Noto Serif SC',serif; font-size:15px; font-weight:600; margin-bottom:14px; }
.compare-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.compare-side { flex:1; }
.compare-side-name { font-family:'Noto Serif SC',serif; font-size:20px; font-weight:700; }
.compare-side-sub { font-size:12px; color:var(--muted,#9a8f7a); margin-top:4px; }
.compare-mid { flex:0 0 auto; padding:0 10px; }
.compare-score { font-family:'Noto Serif SC',serif; font-size:26px; font-weight:700; color:var(--accent,#3b5b9b); }
.compare-score-label { font-size:11px; color:var(--muted,#9a8f7a); }
.compare-note { font-size:13px; color:var(--ink,#2b2620); line-height:1.7; margin:12px 0 12px; text-align:left; }
.compare-copy { font-size:13px; }

/* ===== 社会证明 / 行为回显 / 结尾寄语 / 揭晓动画 ===== */
.social-proof { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--muted,#9a8f7a); margin:14px 0 4px; }
.social-proof b { color:var(--accent,#3b5b9b); font-size:15px; }
.evidence-card { background:var(--bg,#f3ecdd); border:1px solid var(--accent-light,#d4c6a8); border-radius:var(--radius); padding:16px 18px; margin-top:16px; }
.evidence-card .section-heading { margin-top:0; font-size:15px; }
.evidence-item { margin-bottom:12px; }
.evidence-item:last-child { margin-bottom:4px; }
.evidence-quote { font-size:13px; color:var(--accent,#3b5b9b); font-family:'Noto Serif SC',serif; margin-bottom:4px; }
.evidence-item p { font-size:13px; line-height:1.7; margin:0; color:var(--ink,#2b2620); }
.evidence-foot { font-size:12px; color:var(--muted,#9a8f7a); margin:10px 0 0; }
.ending-note { text-align:center; font-family:'Noto Serif SC',serif; font-size:16px; line-height:2; color:var(--ink,#2b2620); padding:22px 10px 4px; }
.ending-sub { font-size:13px; color:var(--muted,#9a8f7a); font-family:'Noto Sans SC',sans-serif; }
@keyframes revealPop { 0% { opacity:0; transform:scale(.7); } 60% { opacity:1; transform:scale(1.08); } 100% { opacity:1; transform:scale(1); } }
.reveal-anim { animation: revealPop .7s ease-out both; display:inline-block; }

/* ===== 人物之语（figure-line）===== */
.figure-line { font-family:'Noto Serif SC',serif; font-size:14px; line-height:1.9; color:var(--ink,#2b2620); background:var(--bg,#f3ecdd); border-left:3px solid var(--accent,#3b5b9b); border-radius:0 10px 10px 0; padding:10px 14px; margin:10px 0 4px; }
.figure-line-src { display:block; font-size:12px; color:var(--muted,#9a8f7a); margin-top:4px; font-family:'Noto Sans SC',sans-serif; }
.ending-name { font-size:13px; letter-spacing:.2em; color:var(--accent,#3b5b9b); }

/* ===== 晒图抽奖转盘 ===== */
.lottery-tip { font-size:13px; color:var(--muted,#9a8f7a); margin:0 0 14px; }
.past-life-entry { margin-top:16px; padding:16px 14px; border-radius:12px; border:1px solid #dde3ea; background:linear-gradient(135deg,#faf5ea,#f2ecdf); text-align:center; }
.past-life-entry-badge { font-size:12px; color:#9a8f7a; letter-spacing:.08em; }
.past-life-entry-title { font-size:17px; font-weight:700; color:#2b2620; font-family:'Noto Serif SC','Songti SC',serif; margin:6px 0; }
.past-life-entry-desc { font-size:13px; color:#5f6b7a; line-height:1.8; margin:0; }
.past-life-entry-desc b { color:#3b5b9b; }
.past-life-card { margin-top:12px; padding:14px; border-radius:12px; background:linear-gradient(135deg, rgba(227,179,74,.14), rgba(192,57,43,.08)); border:1px dashed rgba(227,179,74,.55); text-align:center; }
.past-life-badge { font-size:12px; color:#b8860b; letter-spacing:.05em; }
.past-life-title { font-size:18px; font-weight:700; color:#5a3d00; font-family:'Noto Serif SC','Songti SC',serif; margin:6px 0; }
.past-life-story { font-size:13px; color:#5a5a5a; line-height:1.8; margin:0; }
.share-challenge-banner { background:linear-gradient(135deg, rgba(227,179,74,.16), rgba(192,57,43,.10)); border:1px solid rgba(227,179,74,.5); color:#5a3d00; border-radius:12px; padding:10px 14px; font-size:14px; margin-bottom:14px; text-align:center; line-height:1.7; }
.share-challenge-banner strong { color:#b8860b; }
.archive-item { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border:1px solid #e2e7ee; border-radius:12px; margin-bottom:8px; cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.archive-item:hover { border-color:#3b5b9b; box-shadow:0 2px 10px rgba(61,90,128,.1); }
.archive-main { display:flex; align-items:center; gap:8px; min-width:0; }
.archive-name { font-weight:700; font-size:15px; color:var(--ink,#2b2620); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.archive-arch { font-size:12px; color:var(--muted,#9a8f7a); background:#f3ecdd; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.archive-side { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto; }
.archive-pct { font-weight:700; color:#b8860b; font-size:14px; }
.archive-date { font-size:11px; color:var(--muted,#9a8f7a); }
.unlock-preview-card { margin:0 0 14px; padding:12px 14px; border-radius:12px; background:linear-gradient(135deg, rgba(61,90,128,.10), rgba(227,179,74,.14)); border:1px solid rgba(61,90,128,.25); text-align:center; }
.unlock-preview-hint { font-size:12px; color:var(--muted,#9a8f7a); margin-bottom:8px; letter-spacing:.03em; }
.unlock-preview-row { font-size:15px; line-height:1.9; color:var(--ink,#2b2620); }
.unlock-preview-row b { color:var(--accent,#3b5b9b); font-size:17px; }
.unlock-preview-pct { font-size:13px; color:#b8860b; font-weight:700; }
.unlock-preview-cta { margin-top:8px; font-size:13px; color:var(--muted,#9a8f7a); line-height:1.6; }
.unlock-preview-cta b { color:var(--accent,#3b5b9b); }
.wheel-wrap { position:relative; width:266px; height:266px; margin:0 auto 16px; }
.wheel { position:absolute; top:8px; left:8px; width:250px; height:250px; border-radius:50%; border:6px solid #2b3a55; transition: transform 4.2s cubic-bezier(.15,.75,.25,1); box-shadow:0 10px 30px rgba(0,0,0,.25), 0 0 0 2px rgba(227,179,74,.9), 0 0 18px rgba(227,179,74,.28); }
.wheel::after { content:''; position:absolute; inset:16%; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, #f3ead2); box-shadow:inset 0 0 0 2px #d4c6a8, inset 0 2px 8px rgba(0,0,0,.08); }
.wheel-center-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:76px; height:76px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f9ecc2, #e3b34a 58%, #b8860b); color:#5a3d00; font-family:'Noto Sans SC',sans-serif; font-size:13px; font-weight:700; text-align:center; line-height:1.45; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.65), inset 0 -3px 6px rgba(0,0,0,.16); pointer-events:none; }
.wheel-pointer { position:absolute; top:-7px; left:50%; transform:translateX(-50%); z-index:4; width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent; border-bottom:24px solid #c0392b; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.wheel-pointer::after { content:''; position:absolute; top:-26px; left:-6px; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f9ecc2, #d9a441); border:2px solid #fff; box-shadow:0 2px 4px rgba(0,0,0,.3); }
.wheel-seg-label { position:absolute; z-index:2; font-family:'Noto Serif SC','Songti SC',serif; font-size:18px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.4); pointer-events:none; letter-spacing:.02em; white-space:nowrap; }
.wheel-seg-label.jackpot { font-size:21px; color:#ffe9a8; text-shadow:0 1px 3px rgba(0,0,0,.75), 0 0 8px rgba(255,215,130,.6); }
.wheel-deco-dot { position:absolute; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f9ecc2, #d9a441); box-shadow:0 0 6px rgba(227,179,74,.85); z-index:3; pointer-events:none; }
.lottery-result { font-family:'Noto Serif SC',serif; font-size:18px; color:var(--ink,#2b2620); min-height:28px; margin:6px 0 4px; }
.lottery-result.big { color:#e0705a; font-size:22px; }
.lottery-redeem { background:var(--bg,#f3ecdd); border:1px dashed var(--accent-light,#d4c6a8); border-radius:12px; padding:12px; margin-top:10px; font-size:13px; line-height:1.9; color:var(--ink,#2b2620); }
.lottery-entry { background:linear-gradient(135deg,#fdf6ec,#fbeede); border:1px solid #f0c04a; }

/* ===== 水墨中国风（参考小红书国风宣传图模板） ===== */
body {
  background: linear-gradient(180deg, #f2ecdf, #efe8d8);
}
#landing-page {
  position: relative;
  background: linear-gradient(180deg, rgba(242,236,223,0.12) 0%, rgba(242,236,223,0.42) 34%, #f2ecdf 74%),
    url('/philosophy/img/bg-mountains.jpg') center top / cover no-repeat;
}
.hero-title {
  font-family: 'Noto Serif SC', 'KaiTi', 'STKaiti', 'SimSun', serif;
  letter-spacing: .08em;
}
.hero-title::before {
  content: '测';
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c25b48, #9c3a2c 70%, #7c2a1e);
  color: #ffe9d6;
  font-family: 'KaiTi', 'STKaiti', serif;
  font-size: 19px;
  line-height: 38px;
  text-align: center;
  transform: rotate(-8deg);
  box-shadow: 0 4px 12px rgba(120, 60, 40, .3), inset 0 2px 3px rgba(255,255,255,.25);
}
.tag {
  background: rgba(47, 93, 74, 0.08);
  border-color: rgba(47, 93, 74, 0.25);
  color: #3b5b9b;
}
.app-header {
  border-bottom: 1px solid rgba(184, 134, 11, 0.35);
}
/* 金色细线装饰（水墨画轴感） */
.page::before {
  content: '';
  display: block;
  width: 120px;
  height: 2px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, rgba(184,134,11,.6), transparent);
}

/* ===== 意识流诗意深化（极细宋体 / 错位穿插 / 花体曲线 / 右下主题字） ===== */
#landing-page {
  background: linear-gradient(180deg, rgba(242,236,223,0.28) 0%, rgba(242,236,223,0.60) 42%, #f2ecdf 82%),
    url('/philosophy/img/bg-mountains.jpg') center top / cover no-repeat;
}
.hero-title {
  font-family: 'Noto Serif SC', 'STZhongsong', 'SimSun', serif;
  font-weight: 200;
  letter-spacing: .14em;
  line-height: 1.55;
}
.hero-title .t1 {
  display: inline-block;
  margin-right: .9em;
}
.hero-title .t2 {
  display: inline-block;
  margin-left: 1.6em;
}
/* 花体曲线：标题下方如墨线游丝 */
.hero-title::after {
  content: '❦';
  display: block;
  font-size: 15px;
  color: rgba(184, 134, 11, .55);
  margin-top: 12px;
  transform: rotate(-15deg) scaleX(1.4);
  letter-spacing: 0;
}
/* 印章微调：更贴合细宋排版 */
.hero-title::before {
  box-shadow: 0 4px 12px rgba(120, 60, 40, .25), inset 0 2px 3px rgba(255,255,255,.22), 0 0 0 3px rgba(255,255,255,.5);
}

/* ===== 首页按钮区重排（主次分明 + 呼吸感） ===== */
#landing-page .btn {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#btn-start.btn {
  width: 78%;
  padding: 16px 20px;
  font-size: 17px;
  letter-spacing: .16em;
  border-radius: 999px;
  margin-top: 30px;
  box-shadow: 0 8px 22px rgba(61, 122, 92, .25);
}
#landing-page .btn-ghost.btn-block {
  width: 78%;
  margin-top: 13px;
  padding: 11px 16px;
  font-size: 13.5px;
  border-radius: 999px;
  background: rgba(255, 253, 246, .75);
  border: 1px solid rgba(61, 122, 92, .3);
  color: #3b5b9b;
  letter-spacing: .06em;
}
#landing-page .btn-ghost.btn-block:hover {
  background: rgba(61, 122, 92, .08);
  border-color: rgba(61, 122, 92, .55);
}
/* 主按钮与其他区块的间隔 */
#landing-page .price-line + .btn,
#landing-page .preview-card + .btn {
  margin-top: 24px;
}

/* ===== 设计评审 V2（glm-4.6v 评审 + 极细宋体美学取舍） ===== */
/* 标签区呼吸感 */
#landing-page .tags { gap: 12px; }
#landing-page .tag {
  font-size: 13px;
  padding: 7px 14px;
  letter-spacing: .05em;
}
/* 副标题行高与分层间距 */
#landing-page .hero-subtitle {
  line-height: 1.6;
  margin-bottom: 20px;
}
/* 示例报告卡：暖金描边 + 纸感阴影 */
.preview-card {
  border: 1px solid rgba(184, 134, 11, .22);
  box-shadow: 0 8px 20px rgba(120, 90, 40, .10);
}
.preview-figure {
  border: 1px dashed rgba(184, 134, 11, .38);
  background: rgba(247, 242, 232, .6);
}
.preview-count {
  background: rgba(247, 242, 232, .8);
  color: #7a6a45;
}
/* 主 CTA 再强化 */
#btn-start.btn {
  font-size: 18px;
  box-shadow: 0 10px 26px rgba(61, 122, 92, .30);
}

/* ===== 设计评审 V3：buy-bar 改纵向转化块 + 层级聚焦 ===== */
/* 价格与按钮：纵向堆叠，价格→按钮垂直转化动线（修复并排拥挤） */
.buy-bar {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(184, 134, 11, .22);
  box-shadow: 0 8px 20px rgba(120, 90, 40, .08);
}
.buy-bar .price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.buy-bar .price-label {
  font-size: 12px;
  letter-spacing: .2em;
  color: #7a6a45;
}
.buy-bar .price-value {
  font-size: 28px;
}
#landing-page .buy-bar #btn-start {
  width: 100%;
  margin-top: 0;
}
/* 人物图鉴弱化：窄胶囊、更淡，与主 CTA 拉开层级 */
#landing-page #btn-figures.btn {
  width: 56%;
  margin-top: 4px;
  font-size: 12.5px;
  padding: 9px 14px;
  background: rgba(255, 253, 246, .5);
}
/* 示例报告标题层级：加粗 + 金线装饰 */
#landing-page .preview-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#landing-page .preview-label::after {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 134, 11, .7), transparent);
}
#landing-page .preview-count {
  font-size: 11px;
  color: #a0936f;
}

/* ===== 设计评审 V4：最后一轮细节 ===== */
/* 示例报告标题退后（浅灰 + 金线保留），让达·芬奇更突出 */
#landing-page .preview-label {
  font-weight: 500;
  color: #a0936f;
}
/* 价格强化：32px 金棕，转化吸睛 */
.buy-bar .price-value {
  font-size: 32px;
  color: #b8860b;
}

/* ===== 人物生平入口（站内百科） ===== */
.figure-bio-link {
  display: inline-block;
  margin: 10px 0 2px;
  padding: 7px 16px;
  border: 1px solid rgba(184, 134, 11, .4);
  border-radius: 999px;
  color: #b8860b;
  font-size: 13px;
  text-decoration: none;
  background: rgba(184, 134, 11, .06);
  transition: all .2s;
}
.figure-bio-link:hover {
  background: rgba(184, 134, 11, .12);
  border-color: #b8860b;
}

/* ===== 哲学学院风（羊皮纸书卷感，覆盖水墨风） ===== */
body {
  background: #f5efe2;
}
/* 首页：去掉山景图，改羊皮纸 + 细点纸纹 */
#landing-page {
  background:
    radial-gradient(rgba(59,91,155, 0.03) 1px, transparent 1.5px),
    radial-gradient(rgba(43, 38, 32, 0.025) 1px, transparent 1.5px),
    linear-gradient(180deg, #f7f1e4 0%, #f5efe2 60%, #f2ead9 100%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
/* 书卷双线框装饰 */
#landing-page .hero-title {
  position: relative;
  padding: 14px 26px 10px;
}
#landing-page .hero-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 210px;
  height: 14px;
  border: 1px solid rgba(59,91,155, 0.35);
  border-top: none;
  border-radius: 0 0 8px 8px;
  opacity: .8;
}
/* 印章：哲（钴蓝印章） */
.hero-title::before {
  background: radial-gradient(circle at 35% 30%, #a5433c, #7a241f 70%, #5e1a16);
  content: '哲';
}
/* 主按钮：钴蓝书封感 */
#btn-start.btn {
  background: linear-gradient(180deg, #9c3a33, #7a241f);
  box-shadow: 0 8px 22px rgba(59,91,155, .28);
}
#landing-page .btn-ghost.btn-block {
  border-color: rgba(59,91,155, .3);
  color: #3b5b9b;
  background: rgba(253, 250, 241, .8);
}
/* 金线装饰保持（书页金线） */
.page::before {
  background: linear-gradient(90deg, transparent, rgba(178, 132, 36, .55), transparent);
}
/* 标签：钴蓝描边 */
#landing-page .tag {
  border-color: rgba(59,91,155, .28);
  color: #3b5b9b;
  background: rgba(59,91,155, .05);
}

/* ===== 设计微调（视觉评审 V1） ===== */
/* 示例报告：副标题与标签间距 */
#landing-page .preview-subtitle {
  margin: 8px 0 14px;
  letter-spacing: .04em;
}
/* 价格强化层级（钴蓝大字） */
.buy-bar .price-value {
  font-size: 34px;
  color: #3b5b9b;
  font-weight: 700;
}
/* 底部版权呼吸感 */
.copyright-notice {
  padding: 22px 18px 26px;
  line-height: 1.9;
}

/* ===== 哲学感动画包 ===== */
/* 印章盖印：结果页时代名（从大缩小 + 微转落定，像盖章） */
@keyframes sealStamp {
  0% { opacity: 0; transform: scale(2.6) rotate(-14deg); }
  55% { opacity: 1; transform: scale(0.92) rotate(-4deg); }
  75% { transform: scale(1.08) rotate(-7deg); }
  100% { opacity: 1; transform: scale(1) rotate(-5deg); }
}
.seal-stamp {
  animation: sealStamp .85s cubic-bezier(.2, .9, .3, 1.2) both;
  display: inline-block;
  transform-origin: center;
}
/* 落定金尘（印章落定瞬间的光圈扩散） */
@keyframes sealGlow {
  0% { box-shadow: 0 0 0 0 rgba(59,91,155, .4); }
  100% { box-shadow: 0 0 0 16px rgba(59,91,155, 0); }
}
.seal-glow { animation: sealGlow .9s ease-out .45s both; border-radius: 8px; }
/* 金线展开（结果页顶部装饰线） */
@keyframes goldLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#result-page::before { animation: goldLine 1.1s cubic-bezier(.4, 0, .2, 1) .25s both; }
/* 渐显上浮 */
@keyframes fadeRise { from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.fade-rise { animation: fadeRise .7s ease-out both; }
/* 判词与建议区延迟入场 */
#result-page .result-archetype-motto { animation: fadeRise .7s ease-out .55s both; }
#result-page #advice-section { animation: fadeRise .7s ease-out .75s both; }
/* 题目切换：整卡右滑入场（题目/选项随卡一体移动） */
@keyframes quizIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.question-card.quiz-anim { animation: quizIn .34s ease-out both; }
/* 选项入场：保持静止（动画逻辑已反转：选中即触发，未选项不动） */
/* 选中轻弹：仅被点击的选项执行（keyframes optPop 见下） */
.options-list .likert-choice.selected,
.options-list .single-choice.selected,
.options-list .agree-choice.selected,
.options-list .choice-row.best-active,
.options-list .choice-row.worst-active { animation: optPop .3s ease-out; }
/* 选项落定：轻弹 */
@keyframes optPop { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
.choice-best.selected, .choice-worst.selected { animation: optPop .28s ease-out; }
/* 加载页：印章旋转 */
@keyframes sealSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.loading-seal {
  width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 9px;
  background: radial-gradient(circle at 35% 30%, #a5433c, #7a241f 70%, #5e1a16);
  color: #f5efe2; font-family: 'KaiTi', 'STKaiti', serif; font-size: 27px;
  display: flex; align-items: center; justify-content: center;
  animation: sealSpin 2.8s ease-in-out infinite;
  box-shadow: 0 6px 18px rgba(59,91,155, .3);
}
/* 解锁墙弹窗：金线框描边入场 */
@keyframes modalFrame { from { box-shadow: inset 0 0 0 0 rgba(178, 132, 36, 0); } to { box-shadow: inset 0 0 0 2px rgba(178, 132, 36, .5); } }
.modal.show .modal-content { animation: fadeRise .45s ease-out both, modalFrame .8s ease-out .2s both; }

/* ================================================================
   zine 文艺海报风覆盖层（2026-08-09 · qwen-image 生图素材 + 覆盖层）
   设计语言：大留白(70-90%) / 旧纸扫描纹理 / 细体宋体实验排版 /
             单一钴蓝锚点 #3b5b9b / 印章与微印刷细节
   ================================================================ */
:root {
  --bg: #f3ecdd;               /* 旧纸米 */
  --bg-soft: #ece2cd;
  --card: #fbf6ea;
  --ink: #2b2620;
  --ink-light: #6b6252;
  --muted: #9a8f7a;
  --border: #d4c6a8;
  --accent: #3b5b9b;           /* 单一钴蓝锚点 */
  --accent-light: #d9cdb4;
  --accent-soft: rgba(59,91,155, 0.08);
  --primary: #3b5b9b;
  --best: #3b5b9b;
  --best-soft: rgba(59,91,155, 0.08);
  --worst: #8b5a6b;
  --worst-soft: rgba(139, 90, 107, 0.10);
  --success: #5c6b52;
  --danger: #8b5a6b;
  --radius: 10px;              /* 圆角收敛（zine 少圆角） */
  --radius-sm: 6px;
  --shadow: 0 6px 24px rgba(90, 70, 40, 0.06);
  --shadow-sm: 0 2px 10px rgba(90, 70, 40, 0.05);

  /* 间距令牌（2026-08-10 统一） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* 十维颜色令牌（旧印刷色系，与钴蓝锚点协调；JS 侧 DIM_COLORS 必须与此一致） */
  --dim-0: #3f5d8f;  --dim-0-soft: rgba(63, 93, 143, .12);   /* 群青 */
  --dim-1: #b04a3c;  --dim-1-soft: rgba(176, 74, 60, .12);   /* 朱砂 */
  --dim-2: #b08a3e;  --dim-2-soft: rgba(176, 138, 62, .12);  /* 赭黄 */
  --dim-3: #5f7a4a;  --dim-3-soft: rgba(95, 122, 74, .12);   /* 苔绿 */
  --dim-4: #7a5c8f;  --dim-4-soft: rgba(122, 92, 143, .12);  /* 藤紫 */
  --dim-5: #3f7d7a;  --dim-5-soft: rgba(63, 125, 122, .12);  /* 青碧 */
  --dim-6: #c07a3c;  --dim-6-soft: rgba(192, 122, 60, .12);  /* 橘橙 */
  --dim-7: #a84a62;  --dim-7-soft: rgba(168, 74, 98, .12);   /* 玫红 */
  --dim-8: #4a6b7a;  --dim-8-soft: rgba(74, 107, 122, .12);  /* 黛蓝 */
  --dim-9: #7a7a4a;  --dim-9-soft: rgba(122, 122, 74, .12);  /* 橄榄 */
}

html, body {
  background: var(--bg);
}

/* 全站旧纸扫描纹理：细点纸纹（米底上极淡红点） */
body {
  background:
    radial-gradient(rgba(59,91,155, 0.028) 1px, transparent 1.3px),
    var(--bg);
  background-size: 24px 24px;
}

/* ============ 首页 hero：蓝色档案系背景（代码实现，见文末覆盖） ============ */
#landing-page {
  background:
    linear-gradient(180deg, rgba(243, 236, 221, 0.06) 0%, rgba(243, 236, 221, 0.30) 34%, #f3ecdd 72%);
}

/* hero 标题：细体、宽字距、大留白（去圆印章，改方形竖排小印） */
#landing-page .hero-title {
  font-family: 'Noto Serif SC', 'STZhongsong', 'SimSun', serif;
  font-weight: 200;
  letter-spacing: .24em;
  line-height: 1.7;
  padding: 0;
  margin: 26px 0 10px;
}
#landing-page .hero-title::before {
  content: '哲';
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  border-radius: 4px;           /* 方形印章（zine 感） */
  background: var(--primary);
  color: #f3ecdd;
  font-size: 17px;
  line-height: 34px;
  transform: rotate(-6deg);
  box-shadow: 0 3px 10px rgba(59,91,155, .3);
}
#landing-page .hero-title::after {
  content: '';
  width: 46px;
  height: 1px;
  margin: 18px auto 0;
  background: rgba(59,91,155, .45);
  transform: none;
  border: none;
  border-radius: 0;
}
#landing-page .hero-title .t1 { margin-right: .55em; }
#landing-page .hero-title .t2 { margin-left: 1.1em; color: var(--primary); font-weight: 400; }

/* ============ 首页：加载即播递进入场（统一序列，避免与滚动 reveal 混用） ============ */
/* 淡入上浮（首页通用入场；结果页 fadeRise 已另定义，勿混） */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 标题双行错位浮现 */
@keyframes charIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
#landing-page .hero-title { animation: fadeUp .7s cubic-bezier(.22, .9, .32, 1) .22s both; }
#landing-page .hero-title .t1 { animation: charIn .7s cubic-bezier(.22, .9, .32, 1) .3s both; }
#landing-page .hero-title .t2 { animation: charIn .7s cubic-bezier(.22, .9, .32, 1) .42s both; }
#landing-page .hero-subtitle { animation: fadeUp .6s cubic-bezier(.22, .9, .32, 1) .5s both; }
#landing-page .tags { animation: fadeUp .7s cubic-bezier(.22, .9, .32, 1) .6s both; }
#landing-page .tag { animation: fadeUp .5s cubic-bezier(.22, .9, .32, 1) both; }
#landing-page .tag:nth-child(1) { animation-delay: .64s; }
#landing-page .tag:nth-child(2) { animation-delay: .72s; }
#landing-page .tag:nth-child(3) { animation-delay: .8s; }
#landing-page .tag:nth-child(4) { animation-delay: .88s; }
#landing-page .social-proof { animation: fadeUp .6s cubic-bezier(.22, .9, .32, 1) .98s both; }
#landing-page .preview-card { animation: fadeUp .6s cubic-bezier(.22, .9, .32, 1) 1.12s both; }
#landing-page .buy-bar { animation: fadeUp .6s cubic-bezier(.22, .9, .32, 1) 1.28s both; }
#landing-page .link-notes { animation: fadeIn .7s ease 1.44s both; }
#landing-page .copyright-notice { animation: fadeUp .6s cubic-bezier(.22, .9, .32, 1) 1.6s both; }
/* 有存档时显示的入口按钮：复用主 CTA 节奏，不占（display:none 时的）delay 槽位 */
#landing-page #btn-my-result,
#landing-page #btn-archive,
#landing-page #btn-resume { animation: fadeUp .5s cubic-bezier(.22, .9, .32, 1) both; }
#landing-page #btn-my-result { animation-delay: 1.36s; }
#landing-page #btn-archive { animation-delay: 1.42s; }
#landing-page #btn-resume { animation-delay: 1.48s; }

/* 副标题：更细更淡，像海报脚注 */
#landing-page .hero-subtitle {
  font-weight: 300;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink-light);
  max-width: 86%;
  margin-left: auto;
  margin-right: auto;
}

/* 标签：细线描边胶囊（去绿去金） */
#landing-page .tag {
  border-color: rgba(59,91,155, .25);
  color: var(--ink-light);
  background: rgba(250, 246, 236, .6);
  border-radius: 2px;           /* 方角胶囊 → zine 直角标签 */
  font-size: 12px;
  letter-spacing: .08em;
}

/* 页顶金线 → 钴蓝细线 */
.page::before {
  background: linear-gradient(90deg, transparent, rgba(59,91,155, .4), transparent);
}

/* ============ 卡片：纸感细边，弱阴影 ============ */
.card, .preview-card, .buy-bar, .result-card, .share-card {
  background: rgba(251, 246, 234, .88);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.preview-card { border-color: rgba(59,91,155, .18); }
.preview-figure { border-style: solid; border-color: rgba(59,91,155, .2); background: rgba(250, 246, 236, .5); }
.preview-label { color: var(--ink-light); }
.preview-label::after { background: linear-gradient(90deg, rgba(59,91,155, .5), transparent); }
.preview-count { background: rgba(250, 246, 236, .8); color: var(--muted); }

/* ============ 按钮：zine 直角细边 ============ */
.btn { border-radius: 4px; letter-spacing: .12em; }
.btn-primary {
  background: var(--primary);
  box-shadow: 0 4px 14px rgba(59,91,155, .22);
  border-radius: 4px;
}
.btn-ghost {
  border: 1px solid var(--border);
  color: var(--ink-light);
  border-radius: 4px;
  background: transparent;
}

/* 首页主 CTA 与次级按钮统一 zine 形制 */
#landing-page .btn { width: 78%; margin-left: auto; margin-right: auto; border-radius: 4px; }
#btn-start.btn {
  width: 78%;
  padding: 15px 20px;
  font-size: 16px;
  letter-spacing: .3em;
  border-radius: 4px;
  background: var(--primary);
  box-shadow: 0 8px 20px rgba(59,91,155, .26);
}
#landing-page .btn-ghost.btn-block {
  width: 78%;
  border-radius: 4px;
  border-color: rgba(59,91,155, .3);
  color: var(--ink-light);
  background: rgba(251, 246, 234, .7);
}
#landing-page .buy-bar #btn-start { width: 100%; }

/* 价格：钴蓝细字（去金） */
.buy-bar { border-color: rgba(59,91,155, .18); }
.buy-bar .price-label { color: var(--muted); }
.buy-bar .price-value { color: var(--primary); }

/* ============ 结果页：zine 收尾装饰 + 钴蓝线 ============ */
#result-page::before {
  background: linear-gradient(90deg, transparent, rgba(59,91,155, .4), transparent);
}
/* 装饰图（书与阶梯）：结果页顶部小图，低对比融入纸面 */
#result-page .result-eyebrow {
  font-family: 'Noto Serif SC', serif;
  letter-spacing: .28em;
  color: var(--muted);
}

/* 结果标题 */
#result-page .result-title {
  font-family: 'Noto Serif SC', 'STZhongsong', serif;
  font-weight: 300;
  letter-spacing: .2em;
}

/* 结果页 zine 装饰图：顶部小图，低对比融入纸面 */
.zine-deco {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 6px;
  border-radius: 6px;
  opacity: .85;
  mix-blend-mode: multiply;
  filter: saturate(.9) contrast(.95);
}

/* 哲学宣言：一句话身份宣言（zine 脚注感，钴蓝小字） */
.manifesto {
  font-family: 'Noto Serif SC', 'STZhongsong', serif;
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--primary);
  margin: 10px auto 4px;
  max-width: 88%;
  line-height: 1.8;
}
.manifesto::before, .manifesto::after {
  content: '—';
  color: rgba(59,91,155, .4);
  margin: 0 8px;
}

/* ============ 弹窗：去金线框，改钴蓝细线 ============ */
.modal.show .modal-content {
  animation: fadeRise .45s ease-out both, modalFrameZine .8s ease-out .2s both;
  border-radius: 8px;
}
@keyframes modalFrameZine { from { box-shadow: inset 0 0 0 0 rgba(59,91,155, 0); } to { box-shadow: inset 0 0 0 1.5px rgba(59,91,155, .45); } }
.modal-content { border-radius: 8px; }

/* 解锁预告/价格文字：金 → 钴蓝 */
.unlock-preview-pct { color: var(--primary); }
.lottery-entry { border-color: rgba(59,91,155, .3); background: rgba(251, 246, 234, .7); }
.lottery-redeem { border-color: rgba(59,91,155, .25); background: rgba(250, 246, 236, .6); }

/* 分享卡/格言相关按钮 */
.figure-bio-link {
  border-color: rgba(59,91,155, .35);
  color: var(--primary);
  background: rgba(59,91,155, .05);
  border-radius: 4px;
}
.figure-bio-link:hover { background: rgba(59,91,155, .1); }

/* ============ 答题交互 v2（2026-08-11） ============ */
/* 结果页：思想时代小标签（具体哲学家才是主角） */
.result-era {
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--muted);
  margin-bottom: 6px;
}
/* ============ 结果页板块卡片化（2026-08-11） ============ */
@media (max-width: 600px) {
  #landing-page {
    background:
      radial-gradient(ellipse 130% 55% at 50% -5%, rgba(59,91,155,.08), transparent 60%),
      linear-gradient(180deg, rgba(243,236,221,.35) 0%, #f3ecdd 70%);
    animation: none;
  }
  #landing-page .hero-title { letter-spacing: .18em; }
}
.block-card {
  background: rgba(251, 246, 234, .88);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-sm);
}
.result-archetype {
  background: rgba(251, 246, 234, .88);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  margin: var(--space-4) 0 var(--space-3);
  box-shadow: var(--shadow-sm);
  position: relative;
}
/* 雷达大板块：标题 + 雷达图 + 维度解读一体 */
.radar-block { padding-bottom: var(--space-5); }
.radar-block .radar-head { margin-top: 0; }
.radar-block .section-title { margin-top: var(--space-2); }
.radar-block .dimension-list {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
}
.radar-block .dim-item { background: linear-gradient(150deg, rgba(251, 246, 234, .6) 0%, rgba(251, 246, 234, .25) 100%); }
/* 各板块统一标题节奏与卡片内边距 */
.personality-portrait { text-align: center; }
#top-figures .top-figure-rank { margin-top: 0; }
.lineage-section, #advice-section, .least-like-section, .compare-section, .past-life-entry { overflow: hidden; }
@media (max-width: 480px) {
  .block-card, .result-archetype { padding: 14px 12px; }
}
/* 程度题（likert）：五级圆圈量表 */
.likert-list { display: flex; justify-content: space-between; gap: 6px; margin: var(--space-3) 0; }
.likert-choice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: transform .15s ease;
}
.likert-choice .likert-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong, #d4c6a8);
  background: var(--card);
  transition: all .2s ease;
}
.likert-choice .likert-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.4;
}
.likert-choice:hover .likert-dot { border-color: var(--accent); transform: scale(1.12); }
.likert-choice.selected .likert-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(59,91,155, .18), 0 0 12px rgba(59,91,155, .35);
  animation: likertPick .35s cubic-bezier(.34, 1.56, .64, 1);
}
.likert-choice.selected .likert-label { color: var(--accent); font-weight: 600; }
@keyframes likertPick { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* 二元判断题（agree）：同意 / 不认同 大按钮 */
.agree-choice {
  width: 100%;
  padding: 16px;
  margin-bottom: var(--space-3);
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .18s ease;
}
.agree-choice:hover { border-color: var(--accent); transform: translateY(-1px); }
.agree-choice.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fbf6ea;
  box-shadow: 0 4px 14px rgba(59,91,155, .3);
  animation: agreePick .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes agreePick { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* 迫选题选中反馈（点选项后选项动、题目不动） */
.choice-row.best-active .choice-best,
.choice-row.worst-active .choice-worst { animation: sidePick .3s ease; }
@keyframes sidePick { 0% { transform: scale(.92); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.choice-row.best-active { animation: rowGlow .35s ease; }
@keyframes rowGlow { 0% { box-shadow: 0 0 0 0 rgba(59,91,155, .25); } 100% { box-shadow: 0 0 0 3px rgba(59,91,155, .12); } }

/* 单选（四选一）选中反馈 */
.single-choice.selected { animation: singlePick .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes singlePick { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* 呼吸动画（主 CTA 呼吸光晕，呼应历史站 V5） */
#landing-page .btn-start, #landing-page .btn-primary, .btn-cta {
  animation: ctaPulse 2.6s ease-in-out 1.2s infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,91,155, .28); }
  50% { box-shadow: 0 0 0 9px rgba(59,91,155, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .likert-choice.selected .likert-dot, .agree-choice.selected, .choice-row.best-active .choice-best,
  .choice-row.worst-active .choice-worst, .single-choice.selected { animation: none !important; }
  #landing-page .btn-start, #landing-page .btn-primary, .btn-cta { animation: none !important; }
}

/* ============ 通用工具类与弹窗细节（2026-08-10 清理 inline 硬编码样式） ============ */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.w-full { width: 100%; box-sizing: border-box; }
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.text-ink { color: var(--ink); }
.hint-text { font-size: 12px; color: var(--muted); line-height: 1.6; }
.modal-foot { margin-top: var(--space-4); font-size: 13px; color: var(--muted); line-height: 1.7; }
.modal-tip { font-size: 14px; margin: 0 0 var(--space-3); }
#share-card-status { color: var(--muted); font-size: 13px; margin-bottom: var(--space-3); }
#share-card-img { display: none; width: 100%; max-width: 340px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
#challenge-text {
  width: 100%;
  height: 84px;
  box-sizing: border-box;
  font-size: 13px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  resize: none;
  background: var(--card);
  color: var(--ink);
}

/* ============ 层级与遮挡修复（2026-08-10） ============ */
/* 弹窗提升到最高层，避免与任何内容层冲突 */
.modal { z-index: 1000; }
/* 结果卡内容层锚定：正文在装饰图之上，装饰图不拦截点击 */
.result-card { position: relative; }
.result-card > * { position: relative; z-index: 1; }
.zine-deco { pointer-events: none; z-index: 0; }
/* 雷达图容器独立层，SVG 标签/动画不溢出干扰下方卡片 */
.radar-wrap, .share-radar-wrap { position: relative; z-index: 0; overflow: visible; }

/* ============ 雷达图 v2 动画（2026-08-10） ============ */
.radar-svg { display: block; margin: 0 auto; max-width: 340px; }
.radar-bg { opacity: 0; animation: radarFade .6s ease .15s forwards; }
.radar-glow { opacity: 0; animation: radarGlow 2.4s ease-in-out 1.2s infinite alternate; }
.radar-grid, .radar-axis { opacity: 0; animation: radarFade .5s ease forwards; }
.radar-axis { animation-delay: .25s; }
.radar-value {
  opacity: 0;
  stroke-dasharray: var(--dash, 1200);
  stroke-dashoffset: var(--dash, 1200);
  animation: radarDraw 1.3s cubic-bezier(.4, 0, .2, 1) .35s forwards, radarFill .9s ease .95s forwards;
}
.radar-vertex {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: radarVertex .5s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms) forwards;
}
.radar-label { opacity: 0; animation: radarFade .5s ease 1.15s forwards; }
@keyframes radarFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes radarDraw { from { stroke-dashoffset: var(--dash, 1200); } to { stroke-dashoffset: 0; } }
@keyframes radarFill { from { opacity: 0; } to { opacity: 1; } }
@keyframes radarVertex { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes radarGlow { from { opacity: 0; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .radar-value, .radar-vertex, .radar-label, .radar-bg, .radar-grid, .radar-axis, .radar-glow {
    opacity: 1 !important;
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ============ 维度解读卡片 v2（2026-08-10，颜色与雷达图顶点关联） ============ */
.dimension-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-5);
}
.dim-item {
  background: linear-gradient(150deg, var(--card) 0%, rgba(251, 246, 234, 0.55) 100%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--dim-color, var(--accent));
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  animation: dimRise .5s ease forwards;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@keyframes dimRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dim-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow), 0 0 0 1px var(--dim-color, var(--accent));
  border-color: var(--dim-color, var(--accent));
}
.dim-item.weakest {
  background: linear-gradient(150deg, var(--card) 0%, rgba(139, 90, 107, 0.08) 100%);
  border-color: var(--dim-color, var(--worst));
}
.dim-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  gap: var(--space-2);
}
.dim-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  min-width: 0;
}
.dim-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(251, 246, 234, .8);
}
.dim-value {
  font-family: 'Noto Serif SC', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--dim-color, var(--accent));
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.dim-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.dim-weak-tag { color: var(--dim-color, var(--worst)); font-weight: 600; }
.dim-interpretation {
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.6;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
}
@media (max-width: 480px) {
  .dimension-list { grid-template-columns: 1fr; }
  .dim-value { font-size: 18px; }
}

/* ============ 结果页仪式感（2026-08-10） ============ */
/* 大标题揭晓：缩放 + 渐入 + 字距展开（zine 印章感） */
#result-page .result-title {
  animation: titleReveal 1s cubic-bezier(.22, 1, .36, 1) .1s both;
}
@keyframes titleReveal {
  from { opacity: 0; transform: scale(.9) translateY(10px); letter-spacing: .52em; filter: blur(3px); }
  to { opacity: 1; transform: scale(1) translateY(0); letter-spacing: .2em; filter: blur(0); }
}
#result-page .result-eyebrow { animation: eyebrowIn .6s ease .5s both; }
@keyframes eyebrowIn { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .28em; } }

/* 思想共鸣度大数字 */
.match-banner {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: var(--space-4) 0 var(--space-2);
  font-family: 'Noto Serif SC', serif;
  opacity: 0;
  animation: radarFade .6s ease .55s forwards;
}
.match-banner-label { font-size: 13px; color: var(--ink-light); letter-spacing: .12em; }
.match-banner-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
@media (max-width: 480px) {
  .match-banner { flex-direction: column; align-items: center; gap: 2px; }
  .match-banner-num { font-size: 32px; }
}

/* ============ 结果页信息分层（2026-08-10） ============ */
.section-title {
  font-family: 'Noto Serif SC', 'STZhongsong', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  color: var(--ink);
  text-align: center;
  margin: var(--space-6) 0 var(--space-2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.section-title::before,
.section-title::after {
  content: '';
  flex: 1;
  max-width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,91,155, .4));
}
.section-title::after { background: linear-gradient(90deg, rgba(59,91,155, .4), transparent); }
.section-sub {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  letter-spacing: .06em;
  margin: 0 0 var(--space-3);
}
/* 结果页首个分区标题（十维坐标）与上方内容拉开节奏 */
.radar-head { margin-top: var(--space-4); }
.radar-head .section-title { margin-top: 0; }
.advice-head .section-title { margin-top: var(--space-5); }
/* 移动端结果页节奏微调 */
@media (max-width: 480px) {
  .result-card { padding: 18px 14px; }
  .result-title { font-size: 18px; }
  .section-title { font-size: 14px; letter-spacing: .24em; }
}

/* ============ 蓝色档案系（2026-08-10，参考用户 4 张概念图代码重做） ============ */
/* 全站米纸 + 细蓝网格纹理（档案纸质感） */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(59,91,155,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,91,155,.045) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* 首页 hero：纯代码背景（米纸渐变 + 网格 + 大留白），替换 zine 深红大图 */
#landing-page {
  background:
    radial-gradient(ellipse 120% 55% at 50% -5%, rgba(59,91,155,.08), transparent 60%),
    linear-gradient(180deg, rgba(243,236,221,.35) 0%, #f3ecdd 70%);
}

/* hero 剪影组：四个抽象头像（实心灰 / 点状 / 浅灰 / 蓝虚线？）+ fig 标注 + 日期 */
.hero-figures {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  margin: 30px auto 6px;
  max-width: 420px;
  position: relative;
}
.hero-figures .fig {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-figures .fig i {
  font-style: normal;
  position: absolute;
  bottom: -20px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}
.hero-figures .fig-i { background: #b9b3a6; }
.hero-figures .fig-ii {
  background-image: radial-gradient(#a49d8e 1.4px, transparent 1.6px);
  background-size: 7px 7px;
}
.hero-figures .fig-iii { background: #e2ddcf; }
.hero-figures .fig-q {
  border: 1.5px dashed var(--primary);
  background: transparent;
  box-sizing: border-box;
}
.hero-figures .fig-q::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--primary);
  position: absolute;
  right: 4px;
  top: 4px;
}
.hero-figures .fig-q i { color: var(--primary); font-weight: 600; }
.hero-figures .fig-note {
  position: absolute;
  left: -8px;
  top: -18px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .08em;
}
.hero-figures .fig-date {
  position: absolute;
  right: -10px;
  top: -18px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .08em;
}

/* hero 印章：「哲」→「思」 */
#landing-page .hero-title::before { content: '思'; }

/* 结果页档案印章（替代 zine-deco 图） */
.result-seal {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 4px;
  background: var(--primary);
  color: #f3ecdd;
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  letter-spacing: .18em;
  line-height: 52px;
  text-align: center;
  transform: rotate(-6deg);
  box-shadow: 0 4px 14px rgba(59,91,155,.3);
  position: relative;
}
.result-seal::after {
  content: '存档';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--muted);
  transform: none;
  text-align: center;
}

/* 谱系河流（「83 种主义，一条河」） */
.lineage-river {
  width: 100%;
  height: auto;
  display: block;
  margin: 4px 0 2px;
}
.lineage-river .river-main {
  stroke: rgba(59,91,155,.55);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.lineage-river .river-shade {
  stroke: rgba(59,91,155,.14);
  stroke-width: 7;
  stroke-linecap: round;
}
.lineage-river .river-node circle {
  fill: var(--bg);
  stroke: var(--primary);
  stroke-width: 1.6;
}
.lineage-river .river-node text {
  font-size: 12px;
  fill: var(--ink-light);
  text-anchor: middle;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: .05em;
}
.lineage-river .river-node-last circle {
  fill: var(--primary);
  stroke: none;
}
.lineage-river .river-node-last text { fill: var(--primary); font-weight: 600; }
.lineage-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--ink);
  text-align: center;
  margin: 12px 0 2px;
}
.lineage-foot {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: .12em;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .hero-figures { gap: 12px; margin-top: 20px; }
  .hero-figures .fig { width: 38px; height: 38px; }
  .hero-figures .fig-note { left: 2px; }
  .hero-figures .fig-date { right: 2px; }
}

/* ---------- 设计升级 V6 · 交互动效（借鉴 f.990r.com：hover 放大 3-5%、tap 缩小 3-5%，快进慢出有按压力度感） ---------- */
.btn:hover { transform: scale(1.04); }
.btn:active { transform: scale(0.95); }
.btn:disabled:hover { transform: none; }

.single-choice { transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s var(--ease-out, cubic-bezier(.22, .9, .32, 1)); }
.single-choice:hover { transform: scale(1.02); }
.single-choice:active { transform: scale(0.97); }

.choice-row { transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s var(--ease-out, cubic-bezier(.22, .9, .32, 1)); }
.choice-row:hover { transform: scale(1.02); }
.choice-row:active { transform: scale(0.97); }

.choice-side { transition: background 0.2s, color 0.2s, transform 0.15s var(--ease-out, cubic-bezier(.22, .9, .32, 1)); }
.choice-side:active { transform: scale(0.93); }

/* ---------- 设计升级 V6 · 滚动入场（借鉴 f.990r.com whileInView+once:true：元素进入视口才播放、只播一次） ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px) scale(.96);
  filter: blur(8px);
  transition: opacity .6s var(--ease-spring, cubic-bezier(.34, 1.4, .5, 1)), transform .6s var(--ease-spring, cubic-bezier(.34, 1.4, .5, 1)), filter .6s var(--ease-spring, cubic-bezier(.34, 1.4, .5, 1));
}
.js .reveal.in-view { opacity: 1; transform: none; filter: blur(0); }
.js .reveal[data-delay="1"].in-view { transition-delay: .12s; }
.js .reveal[data-delay="2"].in-view { transition-delay: .24s; }
/* 滚动区块内子元素动画门控：容器未入视口时子元素动画不播放（滚动到时与容器一起慢慢浮现、跳上来） */
.js .reveal:not(.in-view), .js .reveal:not(.in-view) * { animation: none !important; }
/* 容器自身 rise-anim 忽略递增 delay（滚动到时立即浮现，子元素错峰保留） */
.js .reveal.rise-anim { animation-delay: 0ms !important; }

/* ---------- 设计升级 V6.2 · 结果页子卡片逐个上浮（借鉴 f.990r.com 结果卡 stagger：滚动到区块时逐张跳上来） ---------- */
.js .reveal .top-figure,
.js .reveal .advice-box,
.js .reveal .least-like-card,
.js .reveal .compare-box,
.js .reveal .summary-row,
.js .reveal .evidence-item,
.js .reveal .lineage-box,
.js .reveal .narrative-body { opacity: 0; }
.js .reveal.in-view .top-figure,
.js .reveal.in-view .advice-box,
.js .reveal.in-view .least-like-card,
.js .reveal.in-view .compare-box,
.js .reveal.in-view .summary-row,
.js .reveal.in-view .evidence-item,
.js .reveal.in-view .lineage-box,
.js .reveal.in-view .narrative-body { animation: fadeRise .5s var(--ease-out, cubic-bezier(.22, .9, .32, 1)) both; }

/* 建议卡（最多 6 张） */
.js .reveal.in-view .advice-box:nth-child(1) { animation-delay: 50ms; }
.js .reveal.in-view .advice-box:nth-child(2) { animation-delay: 120ms; }
.js .reveal.in-view .advice-box:nth-child(3) { animation-delay: 190ms; }
.js .reveal.in-view .advice-box:nth-child(4) { animation-delay: 260ms; }
.js .reveal.in-view .advice-box:nth-child(5) { animation-delay: 330ms; }
.js .reveal.in-view .advice-box:nth-child(6) { animation-delay: 400ms; }

/* 认领凭证行 */
.js .reveal.in-view .summary-row:nth-of-type(1) { animation-delay: 40ms; }
.js .reveal.in-view .summary-row:nth-of-type(2) { animation-delay: 100ms; }
.js .reveal.in-view .summary-row:nth-of-type(3) { animation-delay: 160ms; }

/* 证据条目（最多 6 条） */
.js .reveal.in-view .evidence-item:nth-of-type(1) { animation-delay: 50ms; }
.js .reveal.in-view .evidence-item:nth-of-type(2) { animation-delay: 120ms; }
.js .reveal.in-view .evidence-item:nth-of-type(3) { animation-delay: 190ms; }
.js .reveal.in-view .evidence-item:nth-of-type(4) { animation-delay: 260ms; }
.js .reveal.in-view .evidence-item:nth-of-type(5) { animation-delay: 330ms; }
.js .reveal.in-view .evidence-item:nth-of-type(6) { animation-delay: 400ms; }

/* TOP 卡 3 张 */
.js .reveal.in-view .top-figure:nth-child(1) { animation-delay: 60ms; }
.js .reveal.in-view .top-figure:nth-child(2) { animation-delay: 150ms; }
.js .reveal.in-view .top-figure:nth-child(3) { animation-delay: 240ms; }

/* 单张卡片 */
.js .reveal.in-view .least-like-card { animation-delay: 60ms; }
.js .reveal.in-view .compare-box { animation-delay: 60ms; }
.js .reveal.in-view .lineage-box { animation-delay: 60ms; }
.js .reveal.in-view .narrative-body { animation-delay: 60ms; }

/* ---------- 设计升级 V6 · 切题退场（借鉴 f.990r.com AnimatePresence exit {opacity:0,y:-20}：旧卡上滑淡出后新卡入场） ---------- */
.quiz-exit { animation: quizExit .18s var(--ease-out, cubic-bezier(.22, .9, .32, 1)) both; }
@keyframes quizExit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-20px); }
}

/* ---------- 设计升级 V6 · 弹窗退场（借鉴 f.990r.com AnimatePresence exit {opacity:0,scale:.92,y:20}：缩小下坠淡出） ---------- */
.modal.closing { transition: opacity .2s ease; opacity: 0; }
.modal.closing .modal-content { animation: modalExit .2s var(--ease-out, cubic-bezier(.22, .9, .32, 1)) both; }
@keyframes modalExit {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(.96) translateY(30px); }
}

/* ---------- 设计升级 V6 · 加载转场（借鉴 f.990r.com LoadingTransition：印章双环 + 文案逐条上浮 + 模拟进度条） ---------- */
.loading-seal { position: relative; }
.loading-seal::after {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: 13px;
  border: 2px solid rgba(140, 47, 42, .18);
  border-top-color: rgba(140, 47, 42, .65);
  animation: sealRingSpin 2.4s linear infinite;
}
@keyframes sealRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loading-progress {
  width: 210px;
  margin: 16px auto 0;
  height: 3px;
  border-radius: 2px;
  background: rgba(140, 47, 42, .12);
  overflow: hidden;
}
.loading-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #a5433c, #c4703a);
  transition: width .18s ease;
}
.loading-text-in { animation: loadingTextIn .35s ease-out both; }
@keyframes loadingTextIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}


/* ── 编制与适用说明（tech-note） ── */
.tech-note {
  margin: 22px 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 253, 246, 0.62);
  text-align: left;
}
.tech-title {
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.tech-en {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--accent);
  opacity: .85;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 600;
}
.tech-clauses b em { font-style: normal; font-size: 9px; letter-spacing: 1.5px; color: var(--muted); font-weight: 600; }
.tech-preamble {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.75;
  margin: 6px 0 10px;
}
.tech-clauses { list-style: none; margin: 0; padding: 0; }
.tech-clauses li {
  font-size: 10.5px;
  color: var(--ink-light);
  line-height: 1.8;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.tech-clauses li:last-child { border-bottom: none; }
.tech-clauses b { color: var(--accent); font-weight: 700; }
.tech-signed { font-size: 11px; color: var(--ink-light); text-align: right; margin-top: 8px; }

/* ── 维度双端刻度条（明确偏向） ── */
.dim-track { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; }
.dim-pole { font-size: 10.5px; color: var(--muted); white-space: nowrap; font-weight: 600; }
.dim-bar {
  position: relative; flex: 1; height: 8px;
  background: #e7dfcd; border-radius: 999px;
}
.dim-marker {
  position: absolute; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--dim-color, var(--accent));
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.dim-lean { font-size: 12.5px; color: var(--ink-light); line-height: 1.65; }

/* ── 维度百分位（方案②常模参考） ── */
.dim-pct { font-size: 11px; color: var(--accent); margin-top: 4px; font-weight: 600; }

/* ── 行动建议 · 三件小事 ── */
.action-card { margin-top: 18px; padding: 0 2px; }
.action-lead { font-size: 13px; color: var(--muted, #9a8f7a); line-height: 1.7; margin: 6px 0 12px; }
.act-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--border, #d9cdb4); }
.act-item:last-child { border-bottom: none; }
.act-no { font-family: 'Noto Serif SC', serif; color: var(--accent, #8c2f2a); font-size: 13px; flex-shrink: 0; padding-top: 2px; }
.act-t { flex: 1; font-size: 14px; color: var(--ink, #2b2620); line-height: 1.7; }
.act-who { font-size: 11px; color: var(--muted, #9a8f7a); white-space: nowrap; padding-top: 4px; }

/* ── 音效开关（uisfx zen 包，右上角音符按钮，持久化静音） ── */
.sound-toggle {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 500; /* 低于 modal(1000)，不挡弹窗；高于普通内容 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(59, 91, 155, 0.28);
  background: rgba(253, 250, 241, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(43, 38, 32, 0.12);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.sound-toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(43, 38, 32, 0.18); }
.sound-toggle:active { transform: scale(.94); }
.sound-toggle.off { opacity: .55; filter: grayscale(.6); }